@font-face { 	
	font-family: "Retro_Gaming"; src: url('../police/retro_gaming/Retro_Gaming.ttf');
}

@font-face { 	
	font-family: "segoe_ui"; src: url('../police/segoe-ui/Segoe_UI.ttf');
}
body, html{
    margin: 0;
    font-family: Retro_Gaming, serif;
}
a{
    text-decoration: none;
}

/* bouton */
.button{
    color: black;
    background-color: #d69dcb;
    border-radius: 50px;
    padding: 2%;
    text-align: center;
	font-size: 1.1em;
    font-family: Retro_Gaming, serif;
}
/*fin bouton contact*/

body{
    background-color: #45046E;
}

header {
	background-color: #14054A;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 7%;
    padding-right: 7%;
}
.logo{
    width: 150px;
    padding-top:4%;
}
nav ul li a{
	color: white;
	font-size: 1em;
}
ul{
	list-style-type: none;
    margin: 0px;
    padding-left: 0px;
}
nav > ul{
	display: flex;
    justify-content: center;
}

nav > ul > li{
    padding: 20px;
	text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}


/*page accueil*/

h1{
	color: white;
    text-align: center;
    margin-bottom: 50px;
}

h2 {
	color: white;
    text-align: center;
    font-size: 1.2em;
}
.banniereacc > p{
	color: white;
    height: 10px;
}
.banniereacc > p{
    font-size: 120%;
    color: black;
    margin-top: -24%;
    margin-bottom: 24%;
    margin-left: 26%;
    width: 65%;
}
.tpresentation{
    padding-top: 3%;
}
.presentation2 {
	display: flex;
    justify-content:center;
}

.imgpresentation{
	width: 100%;
    padding: 50px;
}
.ppresentation{
    padding: 30px;
    text-align: justify;
   
}
.ppresentation2{
    padding-left: 50px;
    padding-right: 50px;
}
#presentation > div > div > p{
	font-size: 1.1em;
	color: white;
	font-family: segoe_ui, serif;
}
.articles{
   display: flex;
   justify-content: space-evenly;
}
#services > h2{
    text-align: center;
}

#services p{
	margin: 7%;
	font-size: 1.1em;
	color: white;
	font-family: segoe_ui, serif;
}
.imagerealisation{
    width: 35%;
}
.imgrealisation{
    text-align: center;
}
.imgvaleurs{
    text-align: center;
}


div > article > img{
    height: 30%;
}
.articles > article{
    width: 31%;
    text-align: center;
}
article{
    padding-bottom: 0px;
}
div > p{
	font-size: 1.3em;
	color: white;
	font-family: segoe_ui, serif;
}
.valeurs{
    display: flex;
    justify-content: center;
}
.pvaleurs{
    width: 50%;
    text-align: justify;
}
.pvaleurs2{
     padding-left: 50px;
    padding-right: 50px;
}

.realisation{
    display: flex;
    justify-content: center;
    padding: 50px;
}
.prealisation p{
    margin-bottom: 35px;
}
.img2realisation{
    width: 50%;
    text-align: center;
}
.image2realisation{
    width: 70%;
}
/*fin page accueil*/

/*footer*/
footer > div > a > img{
    display: inline-block;
    width: 3%;
    padding: 14px;
}
footer > div> img{
    width: 14%;
    margin-left: 8%;
    margin-top: 1%;
}
footer{
    background-color: #14054A;
}
div.footer{
    text-align: center;
    padding-bottom: 3%;
}
.infos > p{
    text-align: center;
    margin: 0px;
    padding-bottom: 15px;
    font-size: 1em;
}
footer a{
    color: white;
}
/*fin footer*/


img{
	max-width: 100%;
}



/*page agence*/
.agencevaleurs{
    display: flex;
    justify-content: center;
}
.agencevaleurs > div{
    width: 50%;
}
.agencevaleurs > div > img{
    width: 100%;
    padding: 2%;
}
.robotvaleurs{
    margin: 20px;
}
.phistoire, .pagencevaleurs{
    text-align: justify;
}
.phistoire{
    padding-left: 20%;
    padding-right: 20%;
    padding-bottom: 6%;
}
.notrehistoire{
    padding-top: 3%;
}
.pagencevaleurs{
    padding-left: 7%;
    padding-top: 3%;
}
.agencevaleurs{
    margin-bottom: 8%;
    margin-right: 5%;
    margin-left: 5%;
}
/*fin page agence*/




/*page projets*/
.nosprojets > div > a{
    width: 25%;
    margin: 10px;
}
.nosprojets{
    padding-top: 3%;
}
.projets1{
    display: flex;
    justify-content: space-evenly;
    margin: 50px;
}
.projets2{
    display: flex;
    justify-content: space-evenly;
    padding-top:5%; 
}
video{
    width: 46.5%;
    margin: 10px;
}
.boutoncentrer{
    text-align: center;
}
.projet{
    margin-bottom: 8%;
    margin-top: 8%;
}
/*fin page projets*/





/*page contact*/
.envoyer{
    grid-area: envoyer;
}
.contact{
    padding-top: 3%;
}
input{
    height: 3em;
    margin-top:7px;
}
textarea{
    margin-top:7px;
}
label{
    color:white;
    display: grid;
}
textarea{
    height: 15em;
}
::placeholder {
  color: #767676;
  font-size: 1.3em;
  font-weight: 300;
  font-style: italic;
  font-family: segoe_ui, serif;
}
.imagerobot{
    grid-area: robot;
    text-align: center;
    
    padding-bottom: 5%;
}
.nom{
    grid-area: nom;
}
.prenom{
    grid-area: prenom;
}
.email{
    grid-area: email;
}
.sujet{
    grid-area: sujet;
}
.message{
    grid-area: message;
}
.form{
    grid-area: form;
    padding: 10%;
}


.grille{
    /*width: 100vw;*/
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
    "form robot";
    
}
.form{
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: auto;
    grid-template-areas:
    "nom prenom"
    "email email"
    "sujet sujet"
    "message message"
    "envoyer .";
    grid-gap: 15px;
}

.robot{
    width: 60%;
}

@media (max-width: 768px) {
    .grille{
    grid-template-columns: auto;
    grid-template-areas: 
        "form"
        "robot";
    }
    
    .form{
    grid-template-columns: auto;
    grid-template-areas:
        "nom"
        "prenom"
        "email"
        "sujet"
        "message"
        "envoyer";  
    }
}

@media (max-width: 480px) {
    .grille{
        grid-template-areas:
        "form"
        "robot";
        grid-template-columns: repeat(1, auto);
    }
    .form{
        grid-template-columns: repeat(1, auto);
        grid-template-areas:
        "nom"
        "prenom"
        "email"
        "sujet"
        "message"
        "envoyer";
    }
    .imagerobot{
        display: none;
    }
    .form{
        grid-area: form;
        padding-top: 0%;
    }
    ::placeholder {
      font-size: 0.9em;
    }
}
/*fin page contact*/




/* version mobile et tablette */

@media (max-width: 768px) {
    header {
        padding-left: 4%;
        padding-right: 4%;
    }
    
    .agencevaleurs{
        display: block;
    }
    .agencevaleurs > div > img{
        width: 70%;
        padding: 0px;
    }
    .robotvaleurs{
        text-align: center;
        margin:0px;
    }
    .phistoire{
        padding-left: 8%;
        padding-right: 8%;
        padding-bottom: 6%;
        font-size: 1em;
    }
    .pagencevaleurs{
        padding-bottom: 0%;
        padding-left: 8%;
        padding-right: 8%;
        font-size: 1em;
    }
    .agencevaleurs > div{
        width: 100%;
    }
    
    
    
  footer > div > a > img{
        width: 5%;
        padding: 10px;
    }
}




 @media (max-width: 480px) {
     header {
        display: block;
    }
    .logo{
        width: 30%;
    
    }
    nav > ul{
        display: block;
    }
     nav{
        padding-bottom: 4%;
    }
    
    h1{
        font-size:1.5em;
    }
    
     
     
    .banniereacc > p{
        font-size: 65%;
    }
    .banniereacc > p{
         height: 10px;
     }
    .tpresentation{
        padding-top: 3%;
    }
    .presentation2 {
        display: block;
    }

    .imgpresentation{
        width: 100%;
        text-align: center;
        padding: 0px;
    }
     .img0{
         width: 40%;
     }
    .ppresentation{
        padding: 30px;
    }
    .ppresentation2{
        padding-left: 0px;
        padding-right: 0px;
    }
    #presentation > div > div > p{
        font-size: 1em;
    }
    .articles > article{
        width: 100%;
    }
    .articles{
       display: block;
    }
     .img1{
         width: 20%;
     }
    .img2{
         width: 30%;
     }
     .img3{
         width: 25%;
     }
    article{
        padding-bottom: 50px;
    }
    #services p{
        font-size: 1em;
    }
    div > p{
        font-size: 1em;
    }
    .imgvaleurs{
        text-align: center;
    }
    .valeurs{
        display: block;
        margin-bottom: 50px;
    }
    .pvaleurs{
        width: 100%;
    }
    .pvaleurs2{
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 20px;
    }
    .imagerealisation{
        width: 100%;
    }
    .imgrealisation{
        text-align: center;
    }
    .realisation{
        display: block;
        padding: 20px;
        margin-bottom: 20px;
    }
    .prealisation{
        text-align: center;
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: 10px;
    }
    .img2realisation{
        width: 100%;
    }
    .image2realisation{
        width: 90%;
    }
     
     
     
     
    .agencevaleurs{
        display: block;
        margin-right: 0;
        margin-left: 0;
    }
    .agencevaleurs > div{
        width: 100%;
    }
    .agencevaleurs > div > img{
        width: 90%;
        padding: 0px;
    }
    .phistoire{
        padding-left: 8%;
        padding-right: 8%;
        padding-bottom: 6%;
        font-size: 1em;
    }
    .pagencevaleurs{
        padding-bottom: 0%;
        padding-left: 8%;
        padding-right: 8%;
        font-size: 1em;
    }
     
     
     
     
    .projet{
        margin-bottom: 20%;
        margin-top: 20%;
    }
    .projets1{
        display: block;
        margin: 0px;
    }
    .projets2{
        display: block;
        padding-top:0%; 
    }
     .nosprojets{
         margin-left: 20px;
         margin-right: 20px;
     }
     .nosprojets > div > a{
        width: 40%;
        margin: 0px;
    }
     .nosprojets > div > a > img{
        padding-top: 10px;
        padding-bottom: 10px;
     }
     .nosprojets > h1{
         margin-bottom: 30px;
     }
     video{
        width: 100%;
        margin: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
     
    footer > div > img{
        width: 35%;
        margin-left: 0%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
     footer > div > a > img{
        width: 8%;
        padding: 12px;
    }
    .infos > p{
        font-size: 0.7em;
        padding-bottom: 10px;
    }
     .logofooter{
         text-align: center;
     }
}
/* fin version mobile et tablette */



/*page 404*/
.e404{
    height: auto;
}
.couleur{
    background-color: #14054A;
}
/*fin page 404*/