@import url('https://fonts.googleapis.com/css2?family=Aclonica&family=Modern+Antiqua&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap');


p{
    overflow-wrap: break-word;
}
/*body::-webkit-scrollbar{
    display: none;
}
html {
    scrollbar-width: none;
}*/

html{
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body{
    width: 100%;
    height: 100%;
    background-color: #FFF7ED;
    margin: 0;
    overflow-x: hidden;

}
main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#mainPage{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#txtMain{
    position: relative;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 0;
}

img, svg{
    user-select: none;
}


h1,h2, #txtMain>p {
    font-family: 'Aclonica', cursive;
    width: fit-content;
    word-break: break-word;
}

#\#linkSR{
    display: inline-block;
    cursor:pointer;
}

.nom {
    font-size: 100px;
    text-align: center;
    margin: auto auto 25px auto;
}

a, p>a{ text-decoration: none;
    color: #D75A47;
    font-weight: bolder}

h1,h2{
    color: #61236C;
    position: relative;
    margin-left: 3.5%;
    z-index: 0;
}

h1, #\#prtfTxt{
    font-size: 60px;

}
#\#prtfTxt{
    text-align: center;
}

h2{
    font-size: 40px;
    position: relative;
    margin-left: 7%;
    z-index: 0;
}

.titreVague{
    margin-bottom: 80px;
}

#rest p,ul {
    margin: auto;
    font-family: 'Montserrat Alternates', sans-serif;

}

#Apropos p{
    width: 90%;
    position: relative;

}

#Apropos p, #contacts p{
    font-size: 22px;
    margin-bottom: 15px;
}

ul{ font-size: 22px;}


#mainPage{
    height: 100vh;
}

#list{
    position: relative;
    margin-left: 5%;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: fit-content;
    z-index: 0;
}
#list ul:first-child{
    width: fit-content;
    margin-right:  10%;
}



#contacts{

    width: 100%;
}

#infosContact{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: fit-content;
    position: relative;
    margin-left: 38%;
    z-index: 0;
}


#infosContact > div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: fit-content;

}


#infosContact div > div{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
}

#infosContact div img{
    margin-right: 35px;
}

#infosContact p > a{
    text-decoration: none;
}

#projets > .titreVague{
    margin-top: 300px ;
}

#mainPage svg{
    height: 115vh;
}

.vectors{
    position: absolute;
}
#vector1{
    top: 0;
    left: -1px;
}

#vector2{
    top:15vh;
    width: 100%;
}

#vector3{
    bottom: -220px;
    right: 0;
}

svg{
    z-index: -1;
}

.vectors{
    z-index: -2;
}


#\#ligneBas{
    position: absolute;
    bottom: 0;
    right: 0;
}
#mainPage #\#ligneBas svg{
    position: absolute;
    right:0;
    bottom: -30px;

    height: 225px;

}
#\#ligneBas svg:first-child{
    display: block;
    width: 1050px;
}

#\#ligneBas svg:nth-child(2){display: none;
    width: 400px;}

@media(max-width: 440px){
    #\#ligneBas svg:first-child{
        display: none!important;
    }
    #\#ligneBas svg:nth-child(2){
        display: block!important;
    }

    #crlResp{display: block!important;}
}

#\#ligneHaut{
    width: 100%;
    position: absolute;
    top:0;
    left:0;
}

#\#ligneHaut svg{
    position: relative;
    left:0;
    top:0;
}


#\#ligneMilieu{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
}


#\#ligneMilieu svg{
    position: relative;
    left:0;
    top:9vh;
    width: 100%;
}

#txtMain svg{
    width:1010px;
    position: absolute;
    top:-50px;
    left:0;
}

#crlResp{display: none}


.titreVague{
    position: relative;
}

#projets .titreVague img{
    position: absolute;
    top: -170px;
    left: -60px;
}

#projets .titreVague svg{
    position: absolute;
    top:-15px;
    left: 50px;
    width: 500px;
    height: 80px;
}

#contacts > .titreVague{margin-top: 100px;}
#contacts .titreVague img{
    position: absolute;
    top: -95px;
    left:-15px;
}

#contacts .titreVague svg{
    position: absolute;
    top:0;
    left: 70px;
    width: 500px;
    height: 80px;
}


#Apropos .titreVague svg{
    position: absolute;
    top:0;
    left: 70px;
    height: 100px;

}

#Apropos img{
    position: absolute;


}
#Apropos .cv{
    position: absolute;
    right:7%;
    margin-top: 20px;
}

#Apropos #vector6{
    right:0;
    margin-top: -180px;
}


.articles article{
    border-radius:100% ;
    width:340px;
    height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
    padding: 5px;
    z-index:-2;
    position: relative;
}



.articles article svg > text{
    font-size: 25px;
    text-align: center;
    font-family: 'Montserrat Alternates', sans-serif;
    color: #FFF7ED;

}

.articles article svg{
    position: absolute;
    top:0;
    left:0;
    z-index: -1;

}


.articles article p:first-child{
    margin-bottom: -15px;
}

@media (max-width: 375px){
    #infosContact div > div:first-child p{
        width:90%;

    }

}

@media(max-width: 520px){
    #infosContact{
        margin-left: 25%;
    }
}

@media(max-width: 328px){
    .articles,#infosContact {
        margin-left: 15%!important;
    }
}

@media (max-width:268px) {
    #vector1{
        display: none;
    }
}

@media (max-width:268px) {
    #vector1{
        display: none;
    }
}
#projets .articles{
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin-left: 20%;
}

#projets .articles > div {
    display: flex;
    flex-direction: row;
    margin: 2px auto;
}

#projets .articles > div:nth-child(even){
    margin-left: 15%;
}


.artJaune{
    background-color: #F8B85D;
}
.artRouge{
    background-color: #D75A47;
}
.artRose{
    background-color: #F3AAA5;
}

.cv{
    border-radius: 100%;
    background-color: #D75A47;
    width: 127px;
    height: 127px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cv p{
    text-align: center;
    margin: 0!important;
    color: #FFF7ED;
    font-size: 18px!important;
}

.cvlien{
    text-decoration: none;
}

@media (max-width:1600px) {
    #vector2{
        display: none;
    }

    #\#ligneMilieu svg{display: none}

    #projets .articles {
        margin-left: 0;
    }

}

@media (max-width:1345px) {
    #vector6{
        display: none;
    }

    #projets .articles{
        flex-direction: row;
        margin-left: 10%;
    }

    #projets .articles > div{
        flex-direction: column;
        margin-right: 3%;
    }

    #projets .articles > div:nth-child(even){
        margin-left: 0;
    }

    #projets .articles > div article{
        margin: 3% 3%;
    }

}


@media (max-width:844px) and (min-width:740px) {
    #projets .articles{
        margin-left: 0;
    }
}

@media (max-width:740px){
    .nom{
        font-size: 70px;
    }

    #\#prtfTxt{
        font-size: 50px;
    }

    #\#ligneHaut svg{
        top:-100px;
    }
    #contacts div div p{
        font-size: 22px!important;
        word-break: break-word;
        text-align: center;
    }
    .articles {
        flex-direction: column !important;
    }
}

@media(max-width: 740px) and (min-width: 375px){
    .articles{

        margin-left: 15%!important;
    }
}

@media (max-width: 628px){
    #infosContact {
        flex-direction: column;
    }

    #infosContact div div{
        flex-direction: column;
        align-items: center;
    }
    #infosContact div div img{
        width: 50px;
        height: 50px;
        margin-right: 0;
    }


    #infosContact div > div:first-child p{
        width:200px;

    }
}


@media (max-width: 515px){
    .nom{
        font-size: 60px;
    }

    #\#prtfTxt{
        font-size: 40px;
    }

    h1,h2,#Apropos p{
        margin-left: 5%!important;

    }

    h1{
        font-size: 50px;
    }
    h2{
        font-size: 30px;
    }
}

@media(max-width: 520px){
    h1, h2, #Apropos p{
        width: 90%!important;

    }

    h1,h2, #Apropos p, ul{

        margin-left: 2%!important;
    }
    #list {
        margin-left: 0!important;
    }
    #rest p, ul{
        font-size: 18px;
    }

    #mainPage{
        justify-content: flex-start;
    }



    .block{
        display: none!important;
    }
    .blockPlusPetit{
        display: block!important;
    }

}

@media (max-width: 440px){
    .nom{
        font-size: 45px;
    }

    #\#prtfTxt{
        font-size: 35px;
    }
}
@media (max-width: 330px){
    .nom{
        font-size: 35px;
    }

    #\#prtfTxt{
        font-size: 25px;
    }
}




@media(max-width:1084px){

    .titreVague svg{
        display: none;
    }

    #txtMain p{
        margin:0;
        width: 75%;
    }

    h1,h2, #Apropos p{
        margin-left: 10%;
    }

    #Apropos p, #list{
        width: 80%;

    }
    #list{
        flex-direction: column;
        margin-left: 5%;
    }
    #list > ul{ margin-left: 5%}
    #list ul:nth-child(even){margin-left: 5%}

    #list ul:first-child{margin-right:25%}

    p{
        text-align: justify;
    }
}


@media(max-width: 875px){
    #vector1{
        left :-310px
    }
}


@media(max-width: 580px){
    #vector1{
        left :-450px
    }
}
@media(max-width: 428px){
    #vector1{
        left :-550px
    }
}
@media(max-width: 342px){
    #vector1{
        left :-610px
    }
}
/*@media(max-width:415px) {
     h1{
         width: 500px
     }
}*/




@media (max-height:650px) {

    .nom{
        margin: auto;
    }

}

@media (max-height:580px) {

    #txtMain img{
        display: none;
    }

}


@media (max-height:480px) {

    #txtMain svg{
        display: none;
    }
    #txtMain {
        margin-top: 15%;
    }

    .nom{
        font-size: 50px;
    }

    #\#prtfTxt{
        font-size: 40px;
    }
}

@keyframes spin {
    to {
        rotate: -360deg;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .articles article svg {
        animation: spin 20s infinite linear;
    }

    .articles a:hover svg{
        animation-play-state: paused;
    }
}

.block{
    display: block;
}

.blockPlusPetit{
    display: none;
}

.blockPlusPetit article{
    width: 250px;
    height: 250px;
}

.blockPlusPetit article img{
    width: 140px;
    height: 140px;
}

.blockPlusPetit  .text2{
    font-size: 20px;
}


.blockPlusPetit svg{
    top:6px!important;
    left:5px!important;
}
/*Burger menu*/
nav{
    position: fixed;
    top :10px;
    right:10px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index:2000;
}

#burgerMenu {
    position: fixed;
    top:10px;
    right: 10px;
    /*display: flex;
    flex-direction: column;*/
}


#\#cross{
    display: block;
    width: 50px;
    height: auto;

}

#menu {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    transition: all 0.3s ease-in-out;
    background-color: #D75A47;
    padding: 15px;
    position: fixed;
    top: 10px;
    right: 10px;
    border-radius: 10px;
    z-index: 2!important;

}

@keyframes my_animation {
    0%{
        display: none;
        opacity: 0;}

    100%{
        display: flex;
        opacity: 1;}
}


@keyframes my_animation2 {
    0%{display: flex;
        opacity: 1}

    100%{display: none!important;
        opacity: 0}
}


#menu div{
    display: flex;
    flex-direction: column;
    margin-top: 15px;

}

#menu a{
    color: white;
    font-size: 25px;
    font-family: 'Montserrat Alternates', sans-serif;
    margin: 5px auto;
    z-index:4000;
}


footer {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #61236C;
    height: fit-content;
    width: 100%;
    padding:5px;
}
footer p{
    font-family: 'Aclonica', cursive;
    text-decoration: none;
    color: #FFF7ED;
    font-weight: bolder;
    margin-left: 2px;
    margin-right: 2px;
}

footer > div{
    display: flex;
}

@media (max-width: 800px) {
    footer  {
        flex-direction: column;
    }
    footer > p{
        margin: 0.5px;
    }
    #copyright{
        margin-right: 2px ;
    }

}
#copyright{
    font-family: Arial, serif;
}

.articles a:hover img{
    transition: transform .5s ease-in-out;
    transform: scale(1.15);
}

.articles a:not(:hover) img{
    transition: transform .5s ease-in-out;
    transform: scale(1);
}

#ensavoirplus article, .portApprenti article {
    background-color: #61236C;
    border-radius: 15px;
    width: fit-content;
    min-width: 200px;
    padding: 2%;
}

.portApprenti article{
    width: max-content;
    padding: 3%;
    margin-left: 15%!important;
}

#ensavoirplus article p, .portApprenti article p{
    margin-bottom: 0;
    color: #FFF7ED;
}
#ensavoirplus , .portApprenti{

    display: block;
    margin-left: 5%;
    width: fit-content;
}
#ensavoirplus:hover, .portApprenti:hover , p>a:hover, h4>a:hover{
    filter: brightness(120%);
}

@media (max-width: 800px) {
    .portApprenti article{
        margin-left: 0% !important;
        width: 50%;
    }
}