/* variable du site */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Genos:wght@700&family=Teko:wght@300;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@1&family=Teko:wght@300;400;500;600;700&display=swap');
:root{
    --main-noir : rgb(22,22,22);
    --main-purple :#9b5a06;
    /*--main-purple : #D33FCD;*/
    --main-brown: #9b5a06;
    --transition-general : 1s;
}

/* variable du site */

body{
    overflow-x: hidden;
    margin: 0%;
}

*{
  font-family: 'Roboto', sans-serif;
  /*perspective: 400px;
  transform-style: preserve-3d;*/
}


h1, h2, h3, h4{
    font-family: 'Teko', sans-serif; letter-spacing: 3px;
}

.titrePage{
    font-family: 'Teko', sans-serif; letter-spacing: 3px;
}


header{
    z-index: 98;
    position: sticky;
    top: 0px;
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
     background-color: var(--main-noir);
    box-shadow: 0px 5px 10px var(--main-purple);
}

.menuSmallOpen{
    margin-left: auto;
}

/*Menu Small */

.menuSmall{
    z-index: 99;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: var(--main-noir);
    transition-duration: var(--transition-general);
    transform: translateX(100%);
}

.ouvrirMenuMobile{
    transform: translateX(0%);
}

.menuSmall h2{
    text-align: center;
    font-size: 10vw;
    margin: 0;
    padding: 30px;
    transition-duration: var(--transition-general);
    
}



.menuSmall a{
    text-decoration: none;
    font-family: 'Teko', sans-serif;
    color: var(--main-purple);
    transition-duration: var(--transition-general);
}

/* en cas de survol */

.menuSmall h2:hover{
    background-color: var(--main-purple);
}
.menuSmall h2:hover>a{
    color: var(--main-noir);
}


/* !Menu Small */


/*Couverture */

.couverture{
    background: url("../images/sergey-zolkin-_UeY8aTI6d0-unsplash.jpg");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    padding: 10px;
    padding-top: 30px;
    padding-bottom: 30px;
    box-shadow: 0px 5px 5px rgba(22, 22, 22, 0.5);
}

.couverturePropos{
    background: url("../images/masaaki-komori-0lsgn38SMQY-unsplash.jpg"), rgb(77, 77, 77);
    background-position: center,center;
    background-size: cover,cover;
    background-attachment: fixed,fixed;
    background-blend-mode: darken;
}

.couvertureRealisation{
    background: url("../images/couverture_Realisation.jpg"), rgb(77, 77, 77);
    background-position: center,center;
    background-size: cover,cover;
    background-attachment: fixed,fixed;
    background-blend-mode: darken;
    
}

.couverture h1{
    text-align: center;
    color: var(--main-brown);
    padding: 5px;
    font-size: 60px;
    border: 2px solid var(--main-brown);
    border-radius: 10px;
}

.couverture h2{
    text-align: center;
    color: var(--main-brown);
    padding: 5px;
    text-overflow: hidden;
    
}

.couverture h1.titrePage{
    border: none;
    color: var(--main-purple);
}

/* ! Couverture */

main{
    background:#222222;
}

.partie_Photos{
    background-color: radial-gradient;
}

/* texte */

main>section{
    
    max-width: 1200px;
    padding-left: 10px;
    padding-right: 10px;
}

main h3{
    margin-top: 0px;
    padding-top: 40px;
    color: var(--main-purple);
    text-align: center;
}
main p{
    font-family: 'Roboto Mono', monospace;
    text-align: justify;
    color: #d0d0d0;
}


/* ! texte */

/* style des boutons */ 

.boutonsAccueil{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.boutonsAccueil a{
    transition-duration: var(--transition-general);
    color:white;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    background-color: var(--main-purple);
    clip-path: polygon(8% 0, 100% 0%, 92% 100%, 0% 100%);
    width: 60%;
    font-size: 8vw;
    margin: 10px;
    padding: 10px;
    
}

.boutonsAccueil a::after{
    content: "";
    transition-duration: 0.5s;
    background-color: rgba(22, 22, 22, 0.25);
    clip-path: polygon(8% 0, 100% 0%, 92% 100%, 0% 100%);
    transform: translateX(-100%);
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.boutonsAccueil a:hover::after{
    transform: translateX(0%);
}

@keyframes boutonAccueilAnimation {
    0%{transform:rotate(0deg,0deg)}
    25%{transform: rotate(10deg,0deg);}
    50%{transform:rotate(0deg,0deg)}
    75%{transform: rotate(-10deg,0deg);}
    0%{transform:rotate(0deg,0deg)}

}

/* !fin du style des boutons */

.LienFichierTelechargeable{
    font-weight: bold;
    color: var(--main-purple);
    text-decoration: none;
}

.LienFichierTelechargeable:hover{
    color :#72226f;
}


/* page A propos partie compétences*/

.titreComp{
    text-align: center;
}

.competences img{
    width: 60%;
}

.competences h4{
    color: var(--main-purple);
    text-align: center;
}
.competences p {
    text-align: center;
}

article{
    background-color: #444444;
    border-bottom: 4px solid var(--main-purple);
    border-radius: 20px;
    margin: 10px;
    padding: 10px;
    box-shadow: 0px 5px 20px var(--main-noir);
}

/* !page A propos partie compétences*/

/* page realisation */

.partie_Photos{
    min-height: 100vh;
    background-color: var(--main-noir);
    
}


.galerieSite img {
    z-index: 98;
    width: 100%;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

}

.logo_maquette img{
  width: 100%;
}

.maquette_telecharger{
  text-align:center;
}

.maquette_telecharger a img{
  width : 50px;
}

.galeriePhotos img{
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    
}
.prochainnement{
    margin: 0px;
    padding-bottom: 50px;
    padding-top: 50px;
}



/* !page realisation */

/* page contact */

.titreContact{
    text-align: center;
    font-size: 4em;
    color: var(--main-purple);
  	margin: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.InformationContact{
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.InformationContact p{
    margin-left: 10px;
    font-size: 1rem;
}

.InformationContact a{
  	font-family: 'Roboto Mono', monospace;
    color: #d0d0d0;
    text-decoration: none;
}


.illustrationContact{
    text-align: center;
}

.illustrationContact img{
    width: 90%;
}

.formulaireContact{
  	padding-top:20px;
 	padding-bottom:20px;
}
              

form{
    width: 90%;
    background:var(--main-noir);
    padding: 10px;
    border: 5px solid var(--main-purple);
    border-radius: 20px;
    padding-bottom: 20px;
    box-shadow: 0px 5px 5px rgba(22, 22, 22, 0.5);
}

form label{
    font-family: 'Teko', sans-serif;
    color: var(--main-purple);
    font-size: 1.5em;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
    
}

form input{
    width: 90%;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px;
}

form textarea{
    width: 90%;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.centerButton{
    text-align: center;
}

form button{
    background: transparent;
    border: none;
}

.resultatDuMail{
    color: var(--main-purple);
}

/* !page contact */

main>.contenuMention{
  min-height : 70vh;
}

main>.contenuMention ul{
	padding:0px;
}



/* Footer Small  */

footer{
    padding-top: 20px;
    background-color: var(--main-purple);
}

footer a {
    font-family: 'Teko', sans-serif;
    color: white;
    text-decoration: none;
}


footer>div>h2{
    text-align: center;
    padding: 15px;
    margin: 0;
}

footer>div>h3{
  	color:white;
    text-align: center;
    padding: 10px;
    margin: 0;
}

/* !footer */


/* définition des classe gérant les display */

/* !définition de la classe gérant les display pour small*/

.hiddenSmall{
    display: none;
}