body{
    font-family:  "Work Sans", sans-serif;
    margin: 0;
    line-height: 1.4;
    font-size: 16px;
    color: black;
    font-size: 18px;
    line-height: 140%;
    width: 100%;
    overflow-x: hidden;    
}


.body--punk{
    background-color: black;

   background-clip: border-box;
   background-size: contain;
      background-image: url(img/bruit__fond.png);
}

/* nav -----------------------------------------------*/
nav{


    padding: 20px 0;
}

.nav{
    width: 100%;
}

.nav--punk{
    background-color: #FF61F4;
}
.nav__container{
    display: flex;
    flex-direction: row;
    margin: 0px 60px;

    justify-content: space-between;
    padding: 10px 10px;
    
}

.nav__links{
    display: flex;
    list-style: none;
    gap: 100px;
    padding: 0;
    margin:0;


    & a{
        color: black;
        text-decoration: none;
        transition: color 0.3s; 
    }
}
 .nav__link:hover{
        color: rgb(0, 0, 0);
        transition: color 0.5s;
    }


.nav__link--punk{
    background-color: white;
    padding: 0 5px;
    font-family: "Cutive Mono", monospace;
    font-weight: 700;
    transition: all .3s;
    transform: rotate(0deg);
}


.nav__link--punk:hover{
    transform: rotate(45deg);
    color:#FBFF00;
    background-color: black;
    transition: all .3ss;

}

.burgermenu{

    & svg{
        display: none;

    }

}

.nav--open{




    & .nav__container{
        height: 100%;

        width: 100%;

        gap: 0;


        & .nav__links{
            transform: translateX(0%);
            transition: all .5s;
        }
    }

    & .burgermenu{
        transform: rotate(90deg);
        transition: all .3s;
    }




    & .nav__link{

        font-size: 35px;
        font-weight: 500;

        

    }



}


.burgermenu{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    padding: 0;
    background: none;
    border: none;
    top: 30px;
    right: 30px;
    width: 25px;
    height: 25px;

    & svg{

        height: 25px;
        width: 25px;
    }
}

.logo{
    font-size: 28px;
    font-weight: 500;
}


.logo--punk{
    font-family: "Barriecito", system-ui;
}


/* body -----------------------------------------------*/
section{
    padding: 50px 0;
    margin: 50px auto 50px auto;

    width: 1000px;
    gap: 5%;
}


.header{
    display: flex;
    justify-content: space-between;

}

.header--pg2{
    width: 84%;
}






/*punkpage- ----------------------------------------------------*/



.subtitle__punk{
    height: 50px;
    position: absolute;
    background-color:#FBFF00 ;
    padding: 5px 15px; 
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%) rotate(-8deg);
    font-family: "Special Elite", system-ui;
    font-weight: 200;

}

.title__punk{
    margin: 10vh 0;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(6,175px);
    grid-template-rows: repeat(3,fit-content);
    gap: 10px;
    justify-content: center;    
}



.title__punk__element{
    font-weight: 400;
    box-sizing: border-box;
    height:170px ;
    display: flex;
    font-size: 200px;
    background-image: url(img/paper-texture.jpg);
    background-size: cover;
    justify-content: center;
    align-items: center;
    padding-bottom: 15%;

    
}

.title__punk__element--1{
    font-family: "Croissant One", serif;
    grid-column: 2;
    grid-row: 1;
    transform: rotate(10deg);

    filter: sepia(20%);
}

.title__punk__element--2{
    font-family: "Stint Ultra Expanded", serif; 
    grid-column: 3;
    grid-row: 1;
    transform: rotate(-5deg);
    filter: invert(100%);
}

.title__punk__element--3{
    font-family: "Cutive Mono", monospace;  
    grid-column: 4;
    grid-row: 1;
    transform: rotate(3deg);


}

.title__punk__element--4{
    font-family: "Roboto", sans-serif;    
    grid-column: 5;
    grid-row: 1;
    transform: rotate(25deg);

    filter: invert(90%);

}



.title__punk__element--5{
    font-family: "Crimson Text", serif;
    grid-column: 6;
    grid-row: 1;
    transform: rotate(-15deg);
}












.title__punk__element--6{
    font-family: "Cutive Mono", monospace;  
    grid-column: 2;
    grid-row: 2;
    transform: rotate(-15deg);

    filter: invert(100%);
}

.title__punk__element--7{
    font-family: "Roboto", sans-serif;
    grid-column: 3;
    grid-row: 2;
    transform: rotate(-5deg);
    filter: sepia(10%);
    
}

.title__punk__element--8{
    font-family: "Crimson Text", serif;
    grid-column: 4;
    grid-row: 2;
    transform: rotate(10deg);
    filter: invert(10%);
}

.title__punk__element--9{
    font-family: "Stint Ultra Expanded", serif; 
    grid-column:5;
    grid-row: 2;
    transform: rotate(-5deg);
}


.title__punk__element--10{
    font-family: "Cutive Mono", monospace; 
    grid-column: 1;
    grid-row: 3;
    transform: rotate(-10deg);
}

.title__punk__element--11{
    font-family: "Stint Ultra Expanded", serif;
    grid-column: 2;
    grid-row: 3;
    transform: rotate(20deg);
    filter: sepia(70%);
}
.title__punk__element--12{
    
    font-family: "Cutive Mono", monospace;
    grid-column: 3;
    grid-row: 3;
    transform: rotate(5deg);
}
.title__punk__element--13{
    font-family: "Roboto", sans-serif;
    grid-column: 4;
    grid-row: 3;
    transform: rotate(-20deg);
    filter: invert(100%);

}
.title__punk__element--14{
    font-family: "Croissant One", serif;
    grid-column: 5;
    grid-row: 3;

}
.title__punk__element--15{
    font-family: "Stint Ultra Expanded", serif;
    grid-column: 6;
    grid-row: 3;
    transform: rotate(5deg);
    filter: invert(90%);
}


.medicament{
    position: absolute;
    right: 50px;
    height: 400px;
    top: 70vh;
}




.punksection1{

    margin: 0;
    box-sizing: border-box;
    padding: 150px 150px;
    gap: 50px;
    display: grid;
    grid-template-rows: 300px 100px 300px 300px;
    grid-template-columns: 2fr 1fr 2fr;
    background-image: url(img/bruit__section1.png);
    background-size: cover;
    width: 100%;

}

.section1title{

    grid-column: 1 / 3;

    & .section1title__element{
        margin: 25px 10px;
        display: block;
        color: white;
    }

    & .section1title__element--1{

        transform: rotate(0deg);
    }
    & .section1title__element--2{

        transform: rotate(-2deg);
    }
    & .section1title__element--bg{
        background-color:#FF61F4 ;
        padding: 5px 10px;
        transform: rotate(2deg);
    }
}


.section1bloctxt{
    grid-column: 3;
    grid-row: 2 / 4;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;


}

.punksection1__img1{
    position: relative;
    grid-column: 1;
    grid-row: 3/5;

    & img{
        width: 100%;
        height:auto;
        z-index: 1;
    }

}

.punksection1__img1:before{
    content: 'aa';
    position: absolute;
    background: url(img/pince.webp);
    height: 100%;
    width: 100%;
    transform: scale(45%);
    top: -50%;
    right: -45%;
    z-index: 3;
}


.punksection1__img2{
    height: auto;
    width: 100%;
    grid-column: 2;
    grid-row: 2/5;
    transform: rotate(-5deg);

}

.punksection1__img3{
    padding: 0 20% ;
 
    height: 100%;
    width: auto;
    grid-column: 2/ -1;
    grid-row: 4;

}


.text__bg{
    background-color: #FBFF00;
    color: black;
    padding: 0 10px;
    text-decoration: none;
    font-weight: 600;
}

.punksection2{
    z-index: 0;
    margin: 0;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    padding: 100px 10px;
    background-image: url(img/bruit__section2.png);

    & p {
        max-width: 50%;
        background-image: url(img/paper-texture.jpg);
        padding: 50px 100px;
    }
}


h1{
    font-size: 48px;
    font-weight: 700;
    line-height: 100%;
}

h2{
    margin-bottom: 20px;
    margin-top: 50px;
    font-size: 40px;
    font-weight: 700;
    line-height: 110%
}


.h2__punk{
    font-family: "Special Elite", system-ui;
    font-weight: 200;
}
.bigtext{
    font-size: 24px;
    font-weight: 300;

}

p{
    max-width: 100%;
}





.text__column{

    width: 45%;
    height: fit-content;
    display: flex;
    flex-direction: column;
}




.header__illu{
    display: flex;
    flex-direction: column;
    width: auto;
    height: 100%;

}

.section__logos{
    display: flex;
    justify-content: space-between;
    


}


.evenment__text{
    margin: 10vh 0;
}


.CC-commons-by{
    display: flex;
    align-items: center;
    font-size: 14px;
    
    & img{
        height: 20px;
    }
}


.linkpg2{
    gap: 13px;
    & img{
        height: 20px;
    }
}

.link{
    display: flex;
    align-items: center;
    gap: 13px;
    height: 20px;
    font-size: 16px;
    color: black;
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: solid 1px black;
    width: fit-content;

    & p{
        margin: 0;

    }
}

.company__logo {
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(3,fit-content);
    grid-template-rows: repeat(3,fit-content);
    gap: auto;
    justify-content: space-between;
    box-sizing: border-box;
    border: 3px black solid;
    border-radius: 15px;
    padding: 20px;
    width: 45%;
    gap: 30px;
    & img{

        height: 35px;
        width: 100%;
    }

}


.logo__netflix{
    grid-row: 1;
    grid-column: 1;
}




.logo__ams{
    grid-row: 1;
    grid-column: 2;
}


.logo__bosch{
    grid-row: 1;
    grid-column: 3;
}



.logo__codrop{
    height: auto;
    width: 100%;
    grid-row: 2;
    grid-column: 1 / span 3  ;
}
.logo__compass{
    grid-row: 3;
    grid-column: 1 ;
}

.logo__herman{
    grid-row: 3;
    grid-column:  2;
}

.logo__superfriendly{
    grid-row: 3;
    grid-column: 3;
}

.bloc__text{
    justify-content: space-between;
    display: flex;


    
}







.callnextpage__container{
    justify-self: center;
    padding: 30px 50px;
    border: 3px black solid;
    box-shadow: -8px 6px #8B6AF0;
    width: 60%;
    height: 100%;


        & p{
            justify-self: center;
        }

        & a{
        color: black;
        font-weight: 800;

 
    }
}
.callnextpage__container--punk{
    background-color:#FBFF00;
    color:black;
    box-shadow: none;
    border: none;
    

}

.callnextpage--pg2{
    width: 60%
}

.callnextpage__container--pg2{
    box-sizing: border-box;

    width: 100%;

}

.callnextpage--punk{
    margin: 0;
    width: 100%;
    padding: 200px 0;
    background-image: url(img/image__section3.png);
}



.evenment{
    position: relative;
}
.timeline{
    width: 200px;
    height: 60vh;
    gap: 60px;
    align-items: center;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction:column;
    position: absolute;
    right: 10px;
    top: 300px;
}

.timeline:before{
    content: '';
    left: 49%;
    position: absolute;
    height: 100%;
    width: 3px;
    background-color: #8B6AF0;
}


.timeline__link{
    z-index: 2;
    text-decoration: none;
    color: black;
    background-color: white;
    height: auto;
    width: 150px;
    border-radius: 50px;
    transition: all 0.3s;
    font-weight: 400;
}

.timeline__link:hover{
    font-weight: 600;
    font-size: 20px;

}


.evenment__text{
    max-width: 50%;
}


.avis__bloctext{
    max-width: 70vw;
    height: fit-content;
    width: fit-content;

    h2{
        display: flex;
        gap: 10px;
    }

    & svg{
        width: 30px;
    }
}


.bold{
    font-weight: 700px;
}

.avis__personnel{
    gap: 40px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 30px repeat(3,fit-content);
}



.avis__bloctext--1{
    grid-row: 2;
    grid-column: 1 / 3;
}

.avis__bloctext--2{
    grid-row: 3;
    grid-column: 1;
}

.avis__bloctext--3{
    grid-row: 3;
    grid-column: 2;
}

.avis__bloctext--4{
    grid-row: 4;
    grid-column: 1 / 3;
}



.text__link{

    color: white;
    background-color: #8B6AF0;
    text-decoration: none;
    font-size: inherit;
    font-weight: 600;
    padding: 0 5px;
}


/* footer----------------------------------------------- */


footer{
    background-color: white;
    overflow: hidden;
    box-sizing: border-box;
    padding: 50px 8%;
    width: 100vw;
}


.footer__container{
    display: flex;

    flex-direction: row;
    height: 40vh;
    gap: 20%;

}

h3{
    font-family: "Open sans", sans-serif;
    font-weight: 700;

    font-size: 24;
}

.newletter{
    width: 50%;
}

form{
    display:flex ;
    justify-content: space-between;
    width: 100%;
    font-family:  "Work Sans", sans-serif;   
    gap: 20px;

    & input{
        font-family:  "Work Sans", sans-serif;   
        font-weight: 600;
        padding:12px 20px ;
        border: 3px black solid;
        align-self: center;
        color: black;
        text-decoration: none;
        height: 100%;
        font-size: 14px;
        border-radius: 6px;
    }

    & label{
        display: none;
    }
}

.newsletter__email{
    width: 100%;
}

.submit{
    width: auto;
    background-color: black;
    color: white;
}


.footer__links{
    display: flex;
    gap: 100px;
}

.footer_pages{
   list-style: none;
   width: fit-content;

    height: fit-content;
    padding: 0;
}

.footer_reseaux{
   list-style: none;
    width: fit-content;

    height: fit-content;
    padding: 0;
}

.footer_page a{
    color: black;
    font-weight: 500;
    font-size: 16px;
}

.footer_reseau a{
    color: black;
    font-weight: 500;
    font-size: 16px;

}

.footer__credits{
    & p {
        margin: 10px;
    }
}

.bold{
    font-weight: 700;
}







@media (min-width:1500px){


    section{
        width: 1400px;
    }








}



 @media (max-width : 1200px) {
    

.subtitle__punk{
    top: 50vh;
}

.h2__punk{
    font-size: 30px;
}
.punksection1{

    margin: 0;
    box-sizing: border-box;
    padding: 150px 50px;
    gap: 50px;
    grid-template-rows: 400px 100px 300px 100px;
    grid-template-columns: 2fr 1fr 2fr;

}
    .punksection1__img2{
        grid-column: 3;
        grid-row: 1;
        height: 100%;
        width: auto;
    }


    .punksection1__img3{
        grid-column: 2;

    }
    
    .punksection1__img1:before{

        transform: scale(30%);
        left: 80px;
    }


    .medicament{
        height: 200px;
    }

.section1bloctxt{

    grid-column: 2/4;
}
    
    .title__punk{

        width: fit-content;
        height: fit-content;
        grid-template-columns: repeat(6,100px);
        grid-template-rows: repeat(3,fit-content);
                margin-bottom: 0;


}

    .title__punk__element{
        font-size: 100px;
        height: 100px;
        width: 100px;
    }

    .burgermenu{
        z-index: 20;
        transition: all .3s;
        transform: rotate(0);
        & svg{
            display: flex;


        }

}





 .nav__links{  
    background-color: white;
    z-index: 3;
    padding-top: 100px;    
    padding-left: 50px;
    top: 0px; 
    left: 0px;   
    height: 100%;  
    width: 100%;
    transform: translatex(-200%);
    transition: all 0.5s;
    box-sizing: border-box;
    position: absolute;
    display: flex;
    flex-direction: column; 
    }

    section{
        margin: 10px 0;
        box-sizing: border-box;
        width: 100%;
        padding-left: 100px;
        padding-right: 100px;
    }



    .header{
        flex-direction: column;
        gap: 20px;
        & .header__illu{

            & .header__photo{
            width: 75%;}

        }
    }


    .text__column{
        width: 70%;
    }

.section__logos{
    flex-direction: column;
    gap: 20px;
}

.company__logo{
    width: 70%;
}


.bloc__text{
    flex-direction: column;
    gap: 20px;
}


.callnextpage{
    padding: 50px 10px;
}

.callnextpage__container{
    width: 70%;
}


 }


 @media (max-width:840px){







    .punksection2{
        z-index: 0;
        margin: 0;
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        padding: 100px 10px;
        background-image: url(img/bruit__section2.png);

        & p { 
            display: block;
            padding: 10px 20px;
            text-align: center;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            max-width: 90%;
            background-image: url(img/paper-texture.jpg);
        }
    }





    .medicament{
        top: 43%;
        height: 150px;
    }


    .punksection1{

        margin: 0;
        box-sizing: border-box;
        padding: 150px 50px;
        gap: 50px;
        grid-template-rows: 300px 200px 600px 100px;
        grid-template-columns: 1fr 1fr;

    }


    .section1title{
        grid-column: 1 / 3;
        grid-row: 1;
    }


    .punksection1__img1{
        grid-column: 1 ;
        grid-row: 2;
        height: 100%;
        width: auto;
    }


    .punksection1__img2{
        grid-column: 2;
        grid-row: 2;
        height: 100%;
        width: auto;
    }

    .section1bloctxt{

        grid-column: 1 / 3;
        grid-row: 3 ;
    }


    .subtitle__punk{
        top: 35vh;
        height: 20px;
        font-size: 16px;
    }

        .h2__punk{
            font-size: 25px;
        }

        .title__punk{

        width: fit-content;
        height: fit-content;
        grid-template-columns: repeat(6,40px);
        grid-template-rows: repeat(3,fit-content);
        margin-bottom: 0;

        }

        .title__punk__element{
            font-size: 54px;
            height: 50px;
            width: 50px;
        }


    .header{
        flex-direction: column;
        gap: 20px;
        & .header__illu{

            & .header__photo{
            width: 100%;}

        }
    }


    section{
        padding-left: 50px;
        padding-right: 50px;
    }


    .text__column{
        width: 100%;
    }



    .evenment__text{
    max-width: 70%;
    }

    .callnextpage{

        padding: 0 50px;
        box-sizing: border-box;
    }

    .callnextpage__container{
        padding: 15px 30px;
    }

    .timeline{
        top:350px;
        width: 75px;
        right: 50px;
        & .timeline__link{
            width: 50px;
            font-size: 14px;
        }
    }








.avis__personnel{
    height: fit-content;
    grid-template-columns: 100% ;
    grid-template-rows: 30px repeat(4, fit-content);
}

.avis__bloctext--1{
    grid-row: 2;

}

.avis__bloctext--2{
    grid-row: 3;

}

.avis__bloctext--3{
    grid-row: 4;
    grid-column: 1;
}

.avis__bloctext--4{
    grid-row: 5;

}










    .footer__container{
        height: 60vh;
        gap: 0;
        display: flex;
        flex-direction: column;
    }


    .footer_pages{
        width: 10%;
    }

    .newletter{
        width: 100%;
    }
}