@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto+Serif:wght@300&family=Roboto:wght@300&display=swap');

*{
    padding:0 ;
    margin:0 ;
    list-style:none ;
    text-decoration:none ;
    box-sizing:border-box ;
    font-family:'Roboto' ;
    color:#1a0524 ;
}
html{
    scroll-behavior:smooth ;
}
body{
    overflow-x:hidden ;
}
header{
    position:absolute ;
    width:100vw ;
    display:flex ;
    align-items:center ;
    justify-content:space-between ;
    padding:10px 5vw ;
}
header img{
    width:75px ;
    transition:.5s
}
header img:hover{
    transform:rotate(360deg) ;
}
header nav a{
    padding:8px 20px ;
    margin:0 10px ;
    color:#64148c ;
    cursor:pointer ;
    position:relative ;
}
.underline::after{
    content:"" ;
    position:absolute ;
    bottom:-2px ;
    right:10% ;
    height:2px ;
    background-color:#64148c ;
    width:0 ;
    transition:.3s ;
}
.underline:hover::after{
    left:10% ;
    right:auto ;
    width:80% ;
}
#in{
    border:solid 2px #64148c ;
    border-radius:8px ;
    color:#fff ;
    background-color:#64148c ;
    transition:.3s ;
}
#in:hover{
    background-color:transparent ;
    color:#64148c ;
}
#contact{
    color:#64148c ;
    border:solid 2px #64148c ;
    background-color:transparent ;
    border-radius:8px ;
    transition:.3s ;
}
#contact:hover{
    background-color:#64148c ;
    color:#fff ;
}
section{
    width:100vw ;
    height:100vh ;
}
.container-flex-align{
    display:flex ;
    align-items:center
}
#sec1 .container{
    padding:5vw ;
}
h1{
    font-family:'Roboto Serif' ;
    color:#1a0524 ;
    font-size:4vw ;
}
#sec1 p{
    color:#1a0524 ;
    font-size:2vw ;
}
#sec1 p span{
    position:relative ;
}
#sec1 p span span{
    position:absolute ;
    content:"" ;
    height:2px ;
    background-color:#64148c ;
    left:0 ;
    bottom:-2% ;
    z-index:-1 ;
}
#sec1 button{
    font-family:'Roboto Serif' ;
    padding:15px 30px 13px;
    font-size:25px ;
    color:#fff ;
    background-color:#64148c ;
    border:none ;
    cursor:pointer ;
}
.relative{
    position:relative ;
}
#sec1 .relative{
    width:186px ;
    margin-top:50px ;
}
#sec1 .relative i{
    position:absolute ;
    top:50% ;
    transform:translateY(-50%) ;
    opacity:0 ;
    color:#fff ;
}
.h2-same{
    font-family:'Roboto Serif' ;
    text-align:center ;
    font-size:3vw ;
    position:relative ;
}
#sec2 h2 span{
    position:absolute ;
    top:55% ;
    opacity:.6 ;
    right:35vw ;
    height:30% ;
    background-color:#64148c ;
    z-index:-1 ;
}
.container-flex-row{
    display:flex ;
    width:100% ;
    justify-content:center ;
    align-items:center ;
}
#sec2 .container-flex-row{
    
    position:relative ;
    margin-top:50px ;
}
#sec2 .container-flex-row p{
    text-align:center ;
    width:30vw ;
    font-size:1.5vw ;
    display:flex ;
    flex-direction:column ;
}
.line{
    position:absolute ;
    width:1px ;
    bottom:0 ;
    top:0 ;
    background-color:#1a0524 ;
}
#un{
    left:35vw ;
}
#deux{
    right:35vw ;
}
.bold{
    font-family:'Roboto Serif' ;
    font-weight:bold ;
    font-size:3.5vw ;
}
#about{
    width:85vw ;
    padding-left:10vw ;
    margin-top:100px ;
    line-height:35px ;
    font-size:20px ;
}
#sec2 .relative{
    width:380px ;
    margin:40px 0 0 15vw ;
}
#sec2 button{
    font-family:'Roboto Serif' ;
    padding:15px 30px 13px;
    font-size:25px ;
    color:#fff ;
    background-color:#64148c ;
    border:none ;
    cursor:pointer ;
}
#sec2 .relative i{
    position:absolute ;
    top:50% ;
    transform:translateY(-50%) ;
    color:#fff ;
}
#about span{
    position:relative ;
}
#about .important{
    position:absolute ;
    height:5px ;
    opacity:.6 ;
    left:0 ;
    right:0 ;
    bottom:2px ;
    background-color:#64148c ;
}
#sec3 .h2-same{
    position:relative ;
}
#sec3 .h2-same span{
    position:absolute ;
    top:55% ;
    opacity:.6 ;
    right:40vw ;
    height:30% ;
    background-color:#64148c ;
    z-index:-1 ;
    width:20vw ;
}
#sec3 .select{
    margin:25px 35px ;
}
#sec3 .select h2{
    cursor:pointer ;
    position:relative ;
}
#sec3 .select h2::after{
    content:"" ;
    position:absolute ;
    bottom:-2px ;
    right:-5% ;
    height:2px ;
    background-color:#000 ;
    width:0 ;
    transition:.3s ;
    z-index:-2 ;
}
#sec3 .select h2:hover::after{
    left:-5% ;
    right:auto ;
    width:110% ;
}
#sec3 .select h2 span{
    z-index:-1 ;
    position:absolute ;
    bottom:-2px ;
    right:-5% ;
    background-color:#000 ;
    left:-5% ;
    width:110% ;
}
.container-flex-col{
    display:flex ;
    flex-direction:column ;
}
#translate{
    position:relative ;
    left:-100% ;
    padding-top:70px ;
    width:100% ;
    display:flex ;
    flex-direction:column ;
    align-items:center ;
}
#sec3 #form .container-flex-row{
    justify-content:unset ;
    margin:25px 0 ;
}
#sec3 #form .container-flex-row div{
    display:flex ;
    flex-direction:column ;
}
#sec3 #form #form1{
    justify-content:unset ;
}
label{
    font-family:'Roboto Serif' ;
    font-size:12px ;
    color:#64148c ;
    margin-right:5px ;
    cursor:pointer ;
}
#form input{
    height:30px ;
    border:none ;
    border-bottom:solid 1px ;
    border-color: #64148c;
    color:#64148c ;
}
#form input:focus{
    outline:none ;
    background-color:rgba(200 , 200 , 200 , .25) ;
}
#adresse{
    width:40vw ;
}
#mail{
    width:40vw ;
    margin-bottom:25px ;
}
#nom,#date,#gsm{
    margin-right:4vw ;
}
.dessus{
    display:flex ;
    flex-direction:column ;
    margin-bottom:25px ;
}
#sec3 #submit{
    font-family:'Roboto Serif' ;
    padding:15px 30px 13px;
    font-size:25px ;
    color:#fff ;
    background-color:#64148c ;
    border:none ;
    cursor:pointer ;
    transition:.3s ;
}
#sec3 #submit:hover{
    background-color:rgba(100, 20, 140, .7) ;
}
#sec3 .relative{
    width:192px ;
    left:-10vw ;
    overflow-y:hidden ;
}
#sec3 i{
    position:absolute ;
    left:50% ;
    top:150% ;
    transform:translate(-50%,-50%) ;
    color:#fff ;
}
#sec3 #absolute{
    position:absolute ;
    top:50% ;
    left:50% ;
    transform:translate(-50%,-50%) ;
}
#sec3 #absolute .strong{
    font-family:'Roboto Serif' ;
    font-size:1.5em ;
    font-weight:bold ;
    text-align:center ;
}
.italic{
    font-style:italic ;
}
#sec3 #absolute h2{
    padding:0 0 30px 20px ;
    position:relative ;
}
#sec3 #absolute h2::after{
    position:absolute ;
    content:"" ;
    height:1px ;
    background-color:#64148c ;
    width:20% ;
    left:-40px ;
    bottom:15px ;
}
#sec3 #absolute p{
    font-size:1.2em ;
}
#cot{
    margin:25px 0 ;
}
#sec3 #absolute ul{
    display:flex ;
    justify-content:space-around ;
    align-items:center ;
    text-align:center ;
}
#sec3 #absolute ul p{
    margin:10px 0 ;
}