@font-face{
    font-family: 'Montserrat';
    src: url("Fonts/Montserrat/Montserrat-VariableFont_wght.ttf");
}

@font-face{
    font-family: 'Ephesis';
    src: url('Fonts/Ephesis/Ephesis-Regular.ttf');
}

@font-face{
    font-family: "Akira";
    src: url('Fonts/Akira/Akira\ Expanded\ Demo.otf');
}

@font-face{
    font-family: "Aileron";
    src: url('Fonts/ailerons/Ailerons-Typeface.otf')
}

@media screen and (max-width: 1280px) {
    .slider{
        width: 95%;
        overflow: hidden;
        
        display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
    }
}

html{
    background-color: rgb(15,15,15);
}

a{
    text-decoration: none;
    color: white;
}

    .section {
        scroll-snap-align: start;
    }

@keyframes fadeHTML{
    from{
        opacity: 0;
    }
    20%{
        opacity: 0;
    }

    to{
        opacity: 1;
    }
}

body{
    width: 100vw; margin: 0;
    display: flex;
        flex-direction: column;
        align-items: center;
    background-color: rgb(15,15,15);

    overflow-x: hidden; overflow-y: scroll;
    
    font-family: 'Montserrat'; font-weight: 800;

    animation: 5s forwards fadeHTML;
}

    body::-webkit-scrollbar{
        position: fixed; margin-right: 10px; width: 5px;
        z-index: 15; background: none;
    }
    body::-webkit-scrollbar-thumb{
        border-radius: 10px; width: 3px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #eeeeee;
    }

.nav{
    width: 100vw; height: 100px; 
    display:flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    
    font-size: 15px; font-weight: 300;
    font-family: 'Montserrat';

    position: fixed; z-index: 10; padding: 15px 0 0 100px;
}

    .nav_child{
        width: 40%; height: 100px;
        display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center; 

        margin-right: 100px;
    }

    .nav a{
        text-decoration: none; color: white;
        filter: drop-shadow(0 0 4px black);

        transition: 0.4s font-weight;
        mix-blend-mode: difference;
    }

    .nav a:hover{font-weight:700;}
    .aquiProd img{width: auto; height: 100px; margin-top: 20px;}

.introOne{
    width: 100vw; height: 100vh;
    display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    margin: 0;
}

    #introOne, .SloganOne{
        animation: exitView forwards;
        animation-timeline: scroll();
        animation-range: exit -120vh;
    }

@keyframes exitView {
    25%{
        font-size: 5vh; font-weight: 300;
        opacity: 1;
    }
    65% {
        font-size: 8vh; font-weight: 900;
        opacity: 0;
    }
}

    .SloganOne{
        width: 90vw;
        font-size: 5vh; font-family: 'Montserrat'; font-weight: 300;
        color: rgb(255, 255, 255); text-align: center; letter-spacing: -2px;

        position: fixed; z-index: 1;
        filter: drop-shadow(0 0 5px black);
    }

    .introOneVid{
        position: fixed; z-index: 1;
    }

.fadePNG{
    width: 100vw; height: 100vh;
    position: relative; z-index:2;
    background-image: url("Img/Background/Back_Fade.png");
    background-size: 100% 100%;
}

.filmOne{
    width: 100%; height: 100vh;
    
    display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        background-color: rgb(15, 15, 15);

    position: relative; z-index: 4;
}

    .slider {
        width: 90%;
        overflow: hidden;
        
        display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;

    }   
    
    .slide {
        display: none;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;

        width: 100%;
    }
    
        .slide iframe {
            width: 90%; height: 72vh;/* Ajustez la hauteur en fonction de vos besoins */
        
            border-radius: 15px;
        }

        .slider button{
            width: 200px; height: 200px;
            background-color: transparent;
            font-family: 'Montserrat'; font-weight: 900;
            color: white; border: none;

            transition: all 0.4s;
        }

            .slider button:hover{
                width: 200px;
                font-size: 18px;
            }



.photoOne{
    width: 100vw; height: 100vh;
    display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    background-color:rgb(15, 15, 15); padding-top: 7vh;

    position: relative; z-index:2;
}

    .shopCollabo{
        width: 100vw; height: 15vh;
        display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
    }

    .testalacon{
        width: 30vw;
        display: flex;
        flex-wrap: nowrap;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
    }

        h3{
            width: 100%;
            color: white; text-align: center;
            font-weight: 400;
        }

        .idiotduvillage{
            width: 100%;
            display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
        }

        .LogoPartenaire{
            max-width: 150px; max-height: 75px;
            transition: filter 0.33s;
        }

            .LogoPartenaire:hover{
                filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.308));
            }

    .photoOne_diapo{
        width: 100%; height: 60%;
        display: flex;
            flex-direction: row; flex-wrap: wrap;
            justify-content: space-evenly;
            align-items: center;

        overflow-x: visible;
        }

    .imgOne{
        width: 24.89%; height: 50%;

        background-size: 105% auto; background-position: center;
        transition: 0.5s background-size; margin: 0 0 2px 0;

        opacity: 0; border-radius: 5px;
        
    }

        .imgOne:hover{
            background-size: 110% auto;
        }

        .a3:hover{
            background-size: auto 110%;
        }

    .a1{background-image: url('Img/SITE_INTERNET/V3/_MG_5368 copie2.png');}
    .a2{background-image: url('Img/SITE_INTERNET/V2/_17A7243.png');}
    .a3{background-image: url('Img/SITE_INTERNET/V3/IMG_5366-Enhanced-NR-3.png'); transition: 0.5s background-size; background-size: auto 101%;}
    .a4{background-image: url('Img/SITE_INTERNET/V2/_71A6521\ copie.png');}
    .a5{background-image: url('Img/SITE_INTERNET/V2/_71A7100\ copie.png');}
    .a6{background-image: url('Img/SITE_INTERNET/V2/_71A7818\ copie.png');}
    .a7{background-image: url('Img/SITE_INTERNET/V2/_71A7938\ copie.png');}
    .a8{background-image: url('Img/SITE_INTERNET/V3/_MG_5423\ copie2.png');}
    .a9{background-image: url('Img/SITE_INTERNET/V2/IMG_5343.png');}
    .a10{background-image: url('Img/SITE_INTERNET/V3/_MG_5423 copie.jpg');}


    .shopOne{
        width: 75px; height: 75px;
        display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;

        background-color: rgb(15, 15, 15);

        border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 12px;
        text-decoration: none; z-index: 3;
        
        transition: filter 0.5s;
    }

        .shopOne:hover{
            filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.205));
        }

        .shopOne img{
            filter: invert(100%); margin-top: 7px;
        }

        .shop{
            font-size: 10px; color: white; font-weight: 200;
        }

.bioOne, .contactOne{
    width: 100vw; height: 100vh;
    display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        
    color: white; background-color: rgb(15, 15, 15);

    position: relative; z-index:2; text-decoration: none;
}

    .biography{
        width: 20vw; height: 65vh;
        max-width: 20vw;
        
        background-color: rgba(0, 0, 0, 0.15); color: white;
        margin-left: -25vw;

        opacity:0; position: relative; z-index: 2;

        border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.1);

        display: flex;
            flex-direction: row;
            align-items: center;
    }

        .biotxt{
            height: 95%;
            overflow-y: scroll;
            margin: 35px 15px;
            font-family: 'Montserrat'; font-weight: 400;
        }

    .transform{transition: all 1s ease;}

        .transBio{
            opacity: 1;
            margin-left: 0;
        }

.contactOne{border-bottom: none;}

.bioOne_Cap{
    width: 95vw; height: 80vh;
    display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;

    /*border: 1px solid rgba(255, 255, 255, 0.1); background-color: rgb(12, 12, 12);
    border-radius: 20px; overflow: hidden; margin-top: 50px;*/
}

    .bioPortrait_m, .bioPortrait_g, .bioPortrait_t{
        width: 20vw; min-width: 20vw; height: 65vh;
        max-width: 20vw; max-height: 65vh;
        display: flex;
            flex-direction:column;
            justify-content: flex-end;
            align-items: end;
        border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.1);

        opacity: 0; position: relative; z-index: 4;
    }

    .fadeSlideL{
        animation: entryPortrait .75s forwards;
        animation-timeline: view();
        animation-range: entry exit 97vh;
    }

    .fadeFadeIn{
        animation: entryPhoto .75s both;
        animation-timeline: view();
        animation-range: entry exit calc(97vh + var(--i));
    }

@keyframes entryPhoto{
    5%{opacity: 0;}
    30%{opacity: 1;}
}

@keyframes entryPortrait{
    from{
        margin-left: 150px;
        opacity: 0;
    }
    40%{
        opacity: 1;
    }
    60%{
        margin-left: 0;
    }
}

        .bioName{
            width: 75%;
            top: 100%; margin-right: 20px; font-size: 14px; font-weight: 400; text-align: right;

            filter: drop-shadow(0 0 7px black); color:rgb(255, 255, 255);
        }

        .bioPortrait_m{
            background-image: url("Img/Portraits/Martin.png");
            background-position: center; background-size: auto 101%;

            transition: 0.5s all;
            filter: grayscale(100%) drop-shadow(0 0 25px rgba(255,255,255,0));
        }

        .bioPortrait_g{
            background-image: url("Img/Portraits/Gwenn.png");
            background-position: center; background-size: auto 101%;

            transition: 0.5s all;
            filter: grayscale(100%) drop-shadow(0 0 25px rgba(255,255,255,0));
        }
        .bioPortrait_t{
            background-image: url("Img/Portraits/Thomas.png");
            background-position: center; background-size: auto 101%;

            transition: 0.5s all;
            filter: grayscale(100%) drop-shadow(0 0 25px rgba(255,255,255,0));
        }

        .bioPortrait_m:hover, .bioPortrait_g:hover, .bioPortrait_t:hover{
                background-size: auto 110%;
                filter: grayscale(100%) drop-shadow(0 0 20px rgba(255,255,255,0.3));
            }
    .goudet_portrait{
        width: 35%; height: 100%;
        display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

        border-radius: 20px; overflow-x: hidden;
    }

        .goudet_portrait img{
            width: auto; height: 100%;
            border-radius: 12px;
        }

        .martino{
            font-size: 14px; font-weight: 300;
            margin-top: -32px;
        }

    .bioOne_GOUDAX{
        width: 60%; height: 90%;
        display: flex;
            align-items: center;

        background-color: rgba(255, 255, 255, 0.02); border-radius: 15px; padding: 0 25px 0 25px;
        margin: 0 35px 0 35px;
    }

        .bioOne_GOUDAX p{
            font-size: 16px; font-weight: 300; font-style: italic;
        }

    .collab{
        width: 70%; height: 45vh;
        display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items:center;

        position: relative; z-index: 5; padding: 45px;
    }

        .collabPortrait, .collabAssoc{
            width: 100%; 
            display: flex;
                flex-direction: row;
                justify-content: space-evenly;
                align-items: center;

            opacity: 0;
        }

        .portrait{
            width: 150px; height: auto;
            border-radius: 100%;
            filter: grayscale(100%) contrast(1.25);

            transition: 0.65s filter;
        }

            .portrait:hover{filter: grayscale(0%) contrast(1);}

            .portraitBio{
                display: flex;
                    flex-direction: column;
                    align-items: center;

                text-align: center;
            }

                .portraitBio h2{
                    font-size: 21px; font-family:"Montserrat"; font-weight: 900;
                    
                }

                .portraitBio h4{
                    font-size: 12px; font-family:"Montserrat"; font-weight: 200;
                    margin-top: -15px;
                }

            .alterduo{
                font-family: 'Aileron';
                font-size: 25px; text-align: center;
            }

.mailTo{text-decoration: none; color: white;}
        .collabAssoc img{width: auto; height: 110px;}

        
.fadeWPNG{
    width: 100vw;
    display: flex;
        flex-direction: column;
        align-items: center;

    position: relative; z-index:2;
    background-image: url("Img/Background/Black2_Fade.png");
    background-size: 100% 100%; background-color:rgb(15, 15, 15); 

    margin-top: -20vh;
}

        .contactMail{
            width: 100vw; height: 120px;
            display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            position: relative; bottom:0; z-index: 2;

            background-color: rgb(37, 37, 37);
        }

            .fadeWPNG > h1{
                height: 25%; margin-top: 380px; position: relative; z-index: 3;
                font-family: "Montserrat"; font-weight: 800; font-size: 25px; color: white;
            }

            .contactMail > a{
                height: 35%;
                color: white; font-size: 18px; font-weight: 500;
            }
    
    .footer{
        width: 100%; height: 15vh;
        display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

        position: relative; bottom: 0;
        background-color: rgb(37, 37, 37);
    }

        .footer_content{
            width: 70%;
            display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;

            color: white; font-size: 15px;
            text-align: center;
        }

            .footer_content a{
                width: 20%;
            }

        .reseaux{
            width: 15%; height: 25px;
            display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
        }

            .reseaux a{
                width: auto; height: 100%;
            }

                .reseaux img{
                    height: 100%;
                }


    .termcondition{
        width: 75%;

        color: white; font-weight: 300;
        margin-top: 12vh;
    }

        .termcondition b{
            font-weight: 800;
        }