/* créer un autre fichier pour le "reset" et utiliser le @import */
/* le @import à utiliser uneiquement pour les fichier css qui à moins de 50 lignes */
*{
    margin:0;
    padding:0;

    box-sizing: border-box;
    /* la taille de l'élément reste la même, peu importe la taille du padding ou de la bordure. */

    scroll-behavior: smooth;
    /* le défilement sur la page sera animé de manière lisse. */
    /* overflow-y: hidden; */

}

#logo{
    width:200px;
    display:block;
}


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

/* début de la nav */
li>a, .btn{
    color:white;
    font-size:20px;
    font-family: var(--h);
    font-weight: 200;
    transition:color 0.3s ease-in-out;
    line-height: 60px;
}


li:last-child>a , .btn{
    display:block;
    height:60px;
    border:1px solid var(--v);
    border-radius: 30px;
    width:270px;
    text-align: center;
    
}

ul{
    display:flex;
    align-items: center;
    list-style: none;
    gap:50px;
}

li{
    display:block;
    text-align: center;
    padding:10px
}
li>a:hover{
    color:var(--v);
}

li:last-child > a:hover,.btn:hover {
    color: white;
    background: rgb(39, 1, 213);
    background: linear-gradient(
      160deg,
      rgba(39, 1, 213, 1) 0%,
      rgba(197, 2, 255, 1) 100%
    );
  }

.btn{
    text-align: center;
    text-transform: uppercase;
    font-size: 2vw;
    width: 38%;
  }


.fleche{
    border:solid white ;
    border-width:0px 2px 2px 0px;
    display:inline-block;
    padding:4px;
    transform: rotate(-45deg);
    position:relative;
    top:-0.5vh;
    left:2%;
    transition: .5s linear;
}



a[href="#desc"]{
    width: 45%;

}





.btn:hover>.fleche{
        transform: rotate(45deg);
    }



.acces_img{
  height: 6vh;
  position: fixed;
  bottom: 0;
  right: 0;
  color: white;
  cursor: pointer;
}



.acces_affichage{
  display: none;
  height:25vh;
  width:25vh;
  background-color: red;
  position: fixed;
  right:0;
  bottom:10px;
  padding:15px;
  /* flex:1   */
  border-radius: 20px;
}

/* ------------------ fin nav ------------------ */



.ligne{
    stroke-dasharray: 1000;
    /* stroke == contours / en gros c'est les pointillets (+lenombre est grand + les pointillets sont petits) 1000 est la valeur maximum */
    stroke-dashoffset: 1000;
     /*permet de dire le point de depart si c'est 1000 ca fera du debut à la fin mais si c'ets 500 c'est que la moitier*/
    animation: pirate 2s alternate-reverse ease-in-out infinite;
    }

@keyframes pirate{
        to {stroke-dashoffset: 0;}
        }

:root{
    --v: rgb(170,8,234);
    --h:"archivo black", sans-serif;
}

::selection{background-color: var(--v);
    color:white;
}

body{
    background-color:black;
}

a{
    text-decoration:none;
}

#bgvid{
    width:100%;
    position: fixed;
    z-index: -1;
    top:0;
    left:0;
}

.text-cote{
    transform: rotate(-90deg);
    position:fixed;
    left:0;
    top:60vh;
    color:white;
    font-size: 12px;
    font-weight: 100;
}

h1{font-family: var(--h);
font-weight: 200;
color:white;}

sup{-webkit-text-stroke: 1px var(--v);
-webkit-text-fill-color: transparent;
}
#burger{
    display:none;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:24px;
    background:rgba(128,128,128,.3);
    backdrop-filter: blur(10px);
    position:fixed;
    width:100%;
    z-index: 3;
    top:0;
    transition:background .3s ease;
    height: 100px;

}

header:hover{
    background-color: rgba(238, 130, 238, 0.493);
}

/* fin header */

.hero{ 
    color:white;
    padding-top:108px;
    display: flex;
    overflow: hidden;
    position:relative;
}

.hero-content{
    position:relative;
    width:100%;
    max-width: 1440px;
    margin:0 auto;
    z-index:1;
    padding:10vh 5%;
    border-left:2px dashed var(--v);
    border-bottom:2px dashed var(--v);
    border-radius: 25px;
}

.hero-title h3{
    font-family: var(--h) ;
    margin:0 ;
    font-size: 8vw;
    /* font-size: toujours vw */
    font-weight: 800;
    font-style: normal;
    letter-spacing: normal;
    color: var(--v);
    text-transform: uppercase;

}

.titre-contour{
    -webkit-text-stroke: 1px gainsboro;
    -webkit-text-fill-color: transparent;
    display: block;


    font-family: var(--h);
    font-size: 8vw;
    font-weight: 800;
    font-style: normal;
    letter-spacing: normal;
    color: transparent;
    
    
    text-transform: uppercase;
}


.st0{fill:none;stroke:#8f2a9d;stroke-width:2;stroke-miterlimit:10;}
.st1{fill: transparent;}
.ligne{stroke-dasharray: 100;
animation: dessin 5s infinite linear;}

@keyframes dessin{
    to{stroke-dashoffset: 1000;}
}
.ligne{stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: pirate 2s alternate-reverse ease-in-out infinite;
}

@keyframes pirate{
    to{stroke-dashoffset: 0;}
}

svg{
    position: absolute;
    top: 20vh;
    left: 0;
    z-index: -1;
}

.cote, .normal{
    display:flex;
    /* v : la ligne de flautaison */
    min-height:100vh; 
    /* v: horizontal */
    justify-content: center;
    flex-direction: column;
    font-family: var(--h);
    padding:5vh 5vw;
    /* v: pour du responsive mettre des contrainte de largeur */
    min-width: 320px;
    width:47%
}

.cote{
    width:55%;
    color:white;
}

section :is(p,h2,h3){
    margin-bottom:5vh;
    color:white
}

.normal{
    width:100vw;
    background-color: white;
    flex-direction:row;
    align-items: center;
    flex-wrap:wrap;
    padding:10vw;
    gap:5vw;
    position:relative;
}

.btn[href="#form"]{
    width:90%

}

h2{
    font-size:30px;
    color:rgb(255, 255, 255);
}

.normal :is(p,h3,a,h2,q){
    color:rgb(1, 1, 1);
    top: 9vh;
}

.normal :is(article, figure){
    /* que chaqu'un prennent la meme largeur */
    flex:1;
    min-width:280px;
    
}

.aull, #logo>img{
    max-width:100%;
    min-width:100%;
}

.noir{
    position:absolute;
}

/* zone chiffres */
#chiffre{
    display:flex;
    gap:1vw;
    flex-wrap:wrap;
    justify-content: center;
    color:white;
}

.nombre>p{
    font-size: 60px;
    flex:1;
    text-align: center;
    min-width: 200px;
}

.nombre>p+p{font-size:20px;}

.nombre:first-child>p>span::before{
    content: "0";
    animation:chrono 1.5s linear 1 forwards;
   
    /* forward c'est qu'il s'arrète à la fin*/
}
.nombre:nth-child(2)>p>span::before{
    content: "0%";
    animation:chrono1 1.5s linear 1 forwards;
    
    /* forward c'est qu'il s'arrète à la fin*/
}
.nombre:last-child>p>span::before{
    content: "0%";
    animation:chrono2 1.5s linear 1 forwards;
    /* forward c'est qu'il s'arrète à la fin*/
}
    
@keyframes chrono{
    0%{content:"15"}
    20%{content:"26"}
    40%{content:"32"}
    60%{content:"53"}
    80%{content:"64"}
    100%{content:"95"}
}

@keyframes chrono1{
    0%{content:"15%"}
    20%{content:"26%"}
    40%{content:"32%"}
    60%{content:"53%"}
    80%{content:"64%"}
    100%{content:"82%"}
}

@keyframes chrono2{
    0%{content:"15%"}
    20%{content:"26%"}
    40%{content:"32%"}
    60%{content:"53%"}
    80%{content:"64%"}
    100%{content:"75%"}
}

a[href="#mobile"]{
    display:none;
}





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

    .fleche{
        display:none;
    }

    .noir{
        position:relative;

    }
    .normal :is(article, figure){
        margin-top:30px;
    }

    header:hover{
        background:rgba(128,128,128,.3);

    }

    li:last-child>a{
        width:100%;
        height:100%;
        padding: 10px;
    }
    
    .active{
        right:0;
    }

    #burger{
        display:block;
        font-size: 45px;
        color:var(--v);
    }

    nav{
        position:absolute;
        right:-100%;
        top: 100%;
        right: -100%;
        width: 50%;
        height: 90vh;
        background-color: rgba(128,128,128,.3);
        transition: 0.5s;

    }
    ul{
        display:flex;
        flex-direction: column;
        gap:3px;
        height:100%;
        padding-bottom: 50px;
        justify-content: space-around


    }

    a[href="#mobile"]{
        display:block;
        font-size: 81px;
    }

    h2.text-cote{
        display: none;
    }



    header{
        display:flex;
        /* justify-content: space-between; */
        justify-content: flex-end



    }
    #logo{
        position:absolute;
        left:20px;

    }

    #bgvid {
        display: none;
    }
    .hero-title h3{
        font-size: 11vw;
    }



    .cote{
        width:100%;
        min-height: 65vh;
    }



}

/* @media screen and (max-width: 768px) { 
    body {
        background-color: red;
    }

}

@media screen and (max-width: 480px) { 
    body {
        background-color: blue;
    }

} */