/* variable du site */


/* !variable du site */

header>img{
    display: none;
}

header{
    justify-content: flex-end;
}

.menuLarge h2{
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.menuLarge h2:hover {
      color:white;
      
}

/* menu sur écran large */

.menuLarge{
    display: flex;
}

.menuLarge a{
  color: var(--main-purple);
  text-decoration: none;
  padding-left: 10px;
  padding-right:10px;
}

/* !menu sur écran large */


/* couverture large*/

.couverture{
    min-height: 100vh;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.couverture h1{
    margin: 0px;
    padding: 20px;
    font-size: 5vw;
    border: solid 8px var(--main-brown);
    border-radius: 20px;
}

.couverture>div>.profession {
    white-space: nowrap; 
    width: 0px;
    overflow: hidden;
    text-overflow: clip;
    animation: ecrire 2s steps(20) 0s 1  forwards;
}

@keyframes ecrire {
    0%{width: 0px;}
    100%{width: 100%;}
}

.couverture h2{
    margin: 0px;
    text-align: left;
    font-size: 4vw;
    
}

/* !couverture large */

/* contenu principale */ 

main{
    display: flex;
    justify-content: center;
}

main>section{
    min-width: 1200px;
}

.accueilSection{
    margin-top: 50px;
}

main h3{
    font-size: 1.5em;
    text-align: initial;
}

main section {
    /*margin-top: 100px;*/
    margin-bottom: 100px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 15px 30px;
}

/* supprimer le grid du contenu pour la partie réalisation*/

.conteneurPrincipaleRealisation{
    display: initial;
    margin-bottom: 0px;
}

/* style des boutons large */

.boutonsAccueil{
    margin-top: 50px;
    flex-direction: inherit;
}

.boutonsAccueil a{
    transition-duration: var(--transition-general);
    color:white;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    width: 50%;
    font-size: 2em;
    margin: 10px;
    padding: 10px;
    
}

/* !style des boutons large */

.imageTextAccueil{
    width: 90%;
    margin-top: 20px;
}

/* image de a propos */

.imageTextPropos{
    width: 100%;
    margin-top: 60px;

}

/* !image de a propos */

/* page A propos partie compétences*/

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

.competences h4{
    font-size: 1.1em;
}

.competences img{
    width: 100px;
}

article{
    border-bottom: 4px solid var(--main-purple);
    width: 195px;
    padding: 20px;
    margin: 0px;
    margin-bottom: 20px;
    border-radius: 20px;
    box-shadow: 0px 5px 20px var(--main-noir);
}

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

/* page réalisation */ 

.galerieSite{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap : 15px 15px; 
}

.galeries{
    padding-top: 50px;
    padding-bottom: 50px;
}

.maquettes{
    display: flex;
    align-items: center;
}

.maquette_telecharger a img{
  width : 70px;
}

.logo_maquette{
    width: 50%;
}
.logo_maquette >img {
    width: 70%;
}

.download{
    width: 50%;
}

.galeriePhotos{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(auto-fill,200px);
    grid-auto-columns: 200px;
    grid-auto-flow: dense;
    grid-gap : 10px 10px;
}

.galeriePhotos div{
   display: inline-block;
}

.galeriePhotos  img {
    object-fit: cover;
    width: 100%;
    max-height: 200px;
    margin: 0px;
  }

.galeriePhotos>.portrait{
    grid-row: span 3;
    max-height: 620px;
}

.prochainnement{
    text-align: center;
}


/* !page réalisation */ 


/* page contact */

.contenuContact{
    color: white;
    margin-top: 20px; 
  	min-height: 75.7vh;
  	margin-bottom:0px;
}

.zoneInformationContact{
    display: flex;
    flex-direction: column;
}

.illustrationContact{
    text-align: center;
}

.illustrationContact img{
    width: 60%;
}


.InformationContact img{
    width: 40px;
}

.InformationContact p{
    color: white;
    margin-left: 20px;
}

.InformationContact a {
    color: white;
}


.formulaireContact{
    display: flex;
    align-items: center;
    justify-content: center;
}

form{
    width: 50%;
    padding: 30px;
    border-radius: 40px; 
}


form input{
    width: 100%;
}

form textarea{
    width: 100%;
}

/* !page contact */

/*page mentions légales*/

main>.contenuMention{
  display:initial;
}

main>.contenuMention ul{
  padding-left:40px;
}


/* !page mentions légales*/

.showLarge{
    display: initial;
}


.menuFooter{
    display: flex;
    justify-content: space-around;
}

.mentions{
    display: flex;
    justify-content: space-evenly;
}