/*
	Theme Name: WEBFOLIO MP
	Theme URI: http://html5blank.com
	Description: Theme d'un webfolio
	Version: 0.0.1
	Author: Mailys Padiolleau
	Author URI: http://toddmotto.com
	Tags: Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/
* {
    box-sizing: inherit;
}
html {
    font-size:10px; /* font-size:62.5% / 1rem = 10px */
    box-sizing: border-box;
}
body {
    font-family: 'Varta', sans-serif;
    font-weight: 400;
    color:#131211;
    font-size:1.6rem; /* 16px */
    line-height: 1.5;
    margin:0;
    padding: 0;
    background-color: #f7f7f7;
}
a{
    text-decoration: none;
    color:#131211;
}
img{
    max-width: 100%;
    object-fit: cover;
}
img[alt] { 
 	font-size:1.6rem;
	font-family: 'Varta', sans-serif;
	font-weight: 400;
}
/**************************généralité*******************************/
/**************scrollbar*******************/
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
}
::-webkit-scrollbar {
    width: 18px;
}
::-webkit-scrollbar-thumb {
    background: #cbb79e; 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a89782; 
}
/***************header******************/
/******front page*********/
.home header{
    width: 100%;
    height: 100vh;
    background-image: url("img/banniere-accueil.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 100%;
    background-size: 50%;
	display: flex;
    flex-direction: column;
    align-content: flex-start;
}
#containerHomepage{
    position: relative;
    justify-self: center;
    margin: auto 0;
    width: 50%;
}
#titreHomepage, #textHomepage{
    padding: 50px;
    margin: 0 auto;
    max-width:500px ;
    max-height: 300px;
    z-index: 1;
	position:relative;
    border-radius: 10px;
}
#textHomepage{
    margin-top: 40px;
}
#titreHomepage h1{
    color: #131211;
    font-family: 'Marvel', sans-serif;
    font-size: 6rem;
    font-weight: 700;
    margin:0;
    position: relative;
    padding:0;
    text-align: center;
}
#titreHomepage svg{
    position: absolute;
    width: 350px;
    height: 300px;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: -1;
    object-fit: cover;
} 
#textHomepage h2{
    color: #131211;
    text-transform: uppercase;
    font-family: 'Marvel', sans-serif;
    font-size: 2.5rem;
    font-weight: 400;
    text-align: center;
    animation: drawfil 2s normal forwards ease-out;
}
#textHomepage h3{
    font-family: 'Varta', sans-serif;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    animation: drawfil 2s normal forwards ease-out;
}
@keyframes drawfil {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
/*************page contact**************/
.page-id-94 header{
    width: 100%;
    height: 100vh;
    position: relative;
}
.page-id-94 header::after {
    content: "";
    background-image: url("img/bg-contact.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    filter: blur(3px);
    position: absolute;
    z-index: -100;   
}
/*************page à propos**************/
.page-id-91 header{
    width: 100%;
    height: 100vh;
    position: relative;
}
.page-id-91 header::after {
    content: "";
    background-image: url("img/bg-contact.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    filter: blur(3px);
    position: absolute;
    z-index: -100;   
}
/*************page expertise**************/
.page-id-97 header{
    width: 100%;
    height: 100vh;
    position: relative;
}
.page-id-97 header::after {
    content: "";
    background-image: url("img/bg-contact.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    filter: blur(3px);
    position: absolute;
    z-index: -100;   
}
/*************page réalisation**************/
.post-type-archive-realisation header{
	width: 100%;
    height: 100vh;
    position: relative;
}
.post-type-archive-realisation header::after{
	 content: "";
    background-image: url("img/bg-contact.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    filter: blur(3px);
    position: absolute;
    z-index: -100; 
}
/**************mentions légales*******************/
.page-id-105 header{
	width: 100%;
    height: 100vh;
    position: relative;
}
.page-id-105 header::after{
	 content: "";
    background-image: url("img/bg-contact.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    filter: blur(3px);
    position: absolute;
    z-index: -100; 
}
/*************page projet**************/
.single-realisation header{
    width: 100%;
    height: 100%;
    position: relative;
}
/******************NAV***********************/
nav{
    display: flex;
    justify-content: space-between;
}
nav ul li{
    list-style: none;
    display: inline-block;
    margin:0 40px;
	z-index:1;
	position:relative;
}
nav ul li::before{
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    width: 0px;
    height: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    position: absolute;
    background-image: url("img/losangeverticalLI.svg");
}
nav ul li:hover::before{
    animation: hoverLI 0.5s normal forwards ease-out;
}
@keyframes hoverLI {
    0%{
        opacity: 0;
        width: 0px;
        height: 0px;
    }
    100%{
        opacity: 1;
        width: 120px;
        height: 60px;
    }
}
nav ul li a{
    color: #131211;
    text-transform: uppercase;
    font-family: 'Marvel', sans-serif;
    font-size: 2.2rem;
    font-weight: 500;
    display: inline-block;
}
nav img{
    height: 80px;
    margin:8px;
    object-fit: cover;
    display: block;
    margin-left: 20px;
    padding:2px;
}
/***** autres NAV*******/
.page-id-91 nav, .page-id-94 nav, .single-realisation nav, .post-type-archive-realisation nav, .page-id-97 nav, .page-id-105 nav{
	background-color: #cbb79e;
	align-items: center;
}
.page-id-91 nav  ul li::before, .page-id-94 nav  ul li::before, .single-realisation nav  ul li::before, .post-type-archive-realisation nav  ul li::before, .page-id-97 nav  ul li::before, .page-id-105 nav  ul li::before{
	background-image: url("img/losangeverticalfonceLI.svg");
}
/****************titre h1********************/
#titreApropos, #titreContact, #titreRealisation, #titreExpertise, #titreMentions{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80vh;
}
#titreApropos  h1, #titreContact h1, #titreRealisation h1, #titreExpertise h1, #titreMentions h1{
    color: #131211;
    text-transform: uppercase;
    font-family: 'Marvel', sans-serif;
    font-size: 8rem;
    letter-spacing: 4px;
    font-weight: 500;
    display: inline-block;
    position: relative;
    margin: 100px auto;
}
#titreApropos  h1::before, #titreContact h1::before, #titreRealisation h1::before, #titreExpertise h1::before, #titreMentions h1::before{
    content:"";
    width: 350px;
    height: 300px;
    background-image: url("img/losange.svg");
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    top: -80%;
    left: -50%;
    z-index: -1;
}
#headerProjet #headerProjetTexte h1{
    color: #131211;
    font-family: 'Marvel', sans-serif;
    font-size: 5rem;
    font-weight: 700;
    margin:20px 0;
    padding:0;
}
/*****************titre h2*******************/
#expertise #textExpertise h2, #realisation h2, #etapeTravail h2, #texteApropos h2, #texteContact h2{
    color: #131211;
    font-family: 'Marvel', sans-serif;
    font-size: 5rem;
    font-weight: 700;
    margin: 20px 0;
    position: relative;
    padding:0;
    text-align: center;
    text-transform: uppercase;
}
#headerProjet #headerProjetTexte h2{
    font-family: 'Varta', sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    max-width: 400px;
    margin: 20px 0;
    margin-bottom: 50px;
}
/******************FOOTER**************************/
footer{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 50vh;
	 background-color:#231303 ;
}
/***********contact***************/
footer #contactMP p, footer #RSfooter p{
    text-transform: uppercase;
    font-family: 'Marvel', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    color: #f7f7f7;
    margin:40px 0;
}
footer #contactMP img{
    max-width: 30px;
    max-height: 30px;
    margin-right:40px;
}
footer #contactMP a{
    color: #f7f7f7;
}
footer #contactMP .mail, footer #contactMP .tel{
    margin: 40px 0;
    display: flex;
    align-items: center;
}
/**********logo footer*************/
footer #logoFooter a img{
    height: 90px;
}
/*******reseaux sociaux***********/
footer #RSfooter p{
    text-align: center;
}
footer #RSfooter #reseauxSociauxFooter{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
footer #RSfooter #reseauxSociauxFooter a{
    margin: 0 40px;
}
/****copyright*****/
.copyright, .copyright a{
    color: #f7f7f7;
    text-align: center;
    font-size: 1.2rem;
    position: relative;
    z-index: 50;
    background-color:#231303 ;
    margin: 0;
    padding-bottom: 10px;
}
/*************************page d'accueil********************************************************************************/
/**********************section expertise***********************************************/
#expertise{
    height: 100vh;
    width: 100%;
    margin:0;
    padding: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/***********div texte************/
#expertise #textExpertise{
    margin-left: 70px;
}
/**********titre************/
#expertise #textExpertise h2::before{
    position: absolute;
    content: "";
    width: 250px;
    height: 215px;
    top: -95%;
    z-index: -1;
    right: 40%;
    background-image: url("img/losange.svg");
    background-size: cover;
    background-repeat: no-repeat;
}
#expertise #textExpertise h2{
    transform: translateX(-300%);
	opacity:0;
}
.animExph2{
    animation: titreExpertise 2s normal forwards ease-out;
}
@keyframes titreExpertise {
    0%{
        transform: translateX(-300%);
		opacity:0;
    }
    100%{
        transform: translateX(0%);
		opacity:1;
    }
}
/************texte**************/
#expertise #textExpertise{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#expertise #textExpertise p{
    font-family: 'Varta', sans-serif;
    font-size: 16px;
    font-weight: 400;
    margin-top: 80px;
    max-width: 600px;
    transform: translateX(150%);
}
.animExpp{
    animation: textExpertise 2s normal forwards ease-out;
}
@keyframes textExpertise {
    0%{
        transform: translateX(150%);
    }
    100%{
        transform: translateX(0%);
    }
}
/*************image****************/
#expertise figure{
    max-width: 300px;
    max-height: 400px;
}
/****bouton en savoir plus**********/
#expertise #textExpertise .boutonEnSavoirPlus, #etapeTravail #texteEtapeTravail .boutonEnSavoirPlus{
    margin:40px 0;
    padding: 8px 50px;
    align-self: flex-end;
    text-align: center;
    border:#cbb79e  solid 3px;
    position: relative;
    z-index: 1;
    font-weight: 600;
    text-transform: uppercase;
    transition: border-color 500ms linear, background-color 300ms linear ;
}
#expertise #textExpertise .boutonEnSavoirPlus::after, #etapeTravail #texteEtapeTravail .boutonEnSavoirPlus::after{
    content:"";
    width: 100%;
    height: 100%;
    border:#231303 solid 3.5px;
    z-index: 2;
    position: absolute;
    top: -30%;
    left: -6%;
    transition: all 300ms linear;
}
#expertise #textExpertise .boutonEnSavoirPlus:hover, #etapeTravail #texteEtapeTravail .boutonEnSavoirPlus:hover{
    background-color: #cbb79e;
    border-color:#231303 ;
    font-weight:700;
}
#expertise #textExpertise .boutonEnSavoirPlus:hover::after, #etapeTravail #texteEtapeTravail .boutonEnSavoirPlus:hover::after{
    top: -4px;
    left: -3px;
}
/*******************************SECTION REALISATIONS*****************************/
#realisation{
    width: 100%;
    margin:0;
    margin-top: 30px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #cbb79e;
    overflow: hidden;
    position: relative;
}
#realisation h2{
    margin: 140px 0 50px 200px;
    align-self: flex-start;
    z-index: 2;
}
/***********************TITRE************************/
#realisation h2::before{
    position: absolute;
    content: "";
    width: 250px;
    height: 215px;
    top: -95%;
    z-index: -1;
    right: 40%;
    background-image: url("img/losange-fonce.svg");
    background-size: cover;
    background-repeat: no-repeat;
}
/*********next projet bouton************/
#realisation button{
    bottom: 5%;
    right: 25%;
    position: absolute;
    border:none;
    background-color: transparent;
    cursor: pointer;
}
#realisation button p{
    text-transform: uppercase;
    font-family: 'Marvel', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    position: relative;
}
#realisation button p::after{
    content: "";
    position: absolute;
    background-image: url("img/fleche.svg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 123px;
    height: 30px;
    bottom: -130%;
    right: -80%;
}
/************les réalisations**************/
/******conteneur de 2 slides*********/
#realisation .conteneurReal{
    padding-bottom: 100px;
    padding-top: 100px;
    padding-left: 100px;
    width: 1600px;
    overflow: hidden;
    display: flex;
    margin-bottom: 50px;
    margin-left: 400px;
    position: relative;
}
/************bloc beige entre les réalisations****************/
#realisation .conteneurReal::after{
    content: "";
    position: absolute;
    height: 100%;
    width: 10%;
    background-color: #cbb79e;
    top:0;
    left:50%;
}
/***********1 realisatinon**************/
#realisation .dossierRealisation{
    position: relative;
    margin-left:100px;
    width: 800px;
}
/*****texte*******/
#realisation .dossierRealisation .texteRealisation{
    position: absolute;
    max-width: 210px;
    top: -15%;
    z-index: 20;
    left: -15%;
}
.slick-slide .texteRealisation{
    visibility: hidden;
    opacity: 0;
    transition: visibility 1s ease, opacity 2s ease;
}
.slick-current .texteRealisation{
    visibility: visible;
    opacity: 1;
}
#realisation .dossierRealisation .texteRealisation h3{
    font-family: 'Marvel', sans-serif;
    font-size: 4rem;
    font-weight: 600;
}
#realisation .dossierRealisation .texteRealisation p{
    font-family: 'Varta', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
} 
#realisation .dossierRealisation .texteRealisation h4{
    font-family: 'Marvel', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    text-transform: uppercase;
}
/******image realisation******/
#realisation .dossierRealisation figure{
    margin: 0;
    width: 600px;
    height: 350px;
    position: relative;
}
#realisation .dossierRealisation figure a img{
    width: 600px;
    height: 350px;
    object-fit: cover;
    display: block;
    z-index: -1;
}
/****effet degradé sur image realisation******/
.slick-current .imgRealisation::after{
    content: "";
    background: rgb(203,183,158);
    background: linear-gradient(90deg, rgba(203,183,158,1) 0%, rgba(203,183,158,1) 24%, rgba(203,183,158,0) 100%);
    height: 100%;
    z-index: 1;
    width: 20%;
    position: absolute;
    top: 0;
    left: -1%;
}
/****element slick****/
.slick-track{
    display: flex;
}
/***********************section comment allons nous travailler******************************************/
.color{
    padding: 0;
    margin: 0;
    background-color:#231303 ;
    position: relative;
}
#etapeTravail{
    width: 100%;
    margin:0;
    padding: 0;
    z-index: 60;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #f7f7f7;
    transition: transform 1s ease,  border-radius 1s ease;
}
/*****************titre***************/
#etapeTravail h2{
    margin-left: 80px;
    z-index: 2;
    margin-top: 120px;
}
#etapeTravail h2::before{
    position: absolute;
    content: "";
    width: 250px;
    height: 215px;
    top: -95%;
    z-index: -1;
    right: 83%;
    background-image: url("img/losange.svg");
    background-size: cover;
    background-repeat: no-repeat;
}
/*******************TEXTE*****************/
#texteEtapeTravail{
    margin: 80px 20px;
    padding: 40px 80px;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
#texteEtapeTravail ul{
    margin-bottom: 40px;
    align-self: flex-start;
}
#texteEtapeTravail li{
    margin: 15px 0;
}
#etapeTravail #texteEtapeTravail .boutonEnSavoirPlus{
    align-self: flex-end;
    margin: 0;
}
/**animation du cadre***/
.animTravail::after{
    content: "";
    width: 50%;
    top: 0;
    position: absolute;
    right: 0;
    height: 100%;
    border: #cbb79e solid 3px;
    border-width: 3px 3px 3px 0px;
    animation: textDroite 1.5s normal forwards ease-out;
}
.animTravail::before{
    content: "";
    width: 50%;
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    border: #cbb79e solid 3px;
    border-width: 3px 0px 3px 3px;
    animation: textGauche 1.5s normal forwards ease-out;
}
@keyframes textDroite {
    0%{
        transform: translateX(150%);
    }
    100%{
        transform: translateX(0%);
    }
}

@keyframes textGauche {
    0%{
        transform: translateX(-150%);
    }
    100%{
        transform: translateX(0%);
    }
}

/******************animation footer et section travail*************************/
#footer{
    position: absolute;
    bottom: 0;
    z-index: 1;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 50vh;
    transition: position 1s ease, bottom 1s ease, visibility 1s ease;
}
.animFooteractif{
    visibility: visible;
}
.animTravailactif{
    transform: translateY(-300px) scale(0.95,1);
    border-radius: 20px;
    border: #cbb79e 10px solid;
}
/********************************************************page à propos*******************************************************/
#aPropos{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:50px;
}
#imgApropos {
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:20px;
}
#imgApropos img{
    max-width: 100%;
    border-radius: 10px;
    object-fit: cover;
    max-height: 470px;
    max-width: 350px;
}
#texteApropos{
    flex:1;
    width: 50%;
    padding:20px;
}
#texteApropos h2{
    font-size: 4rem;
    font-weight: 500;
    margin:20px;
}
#texteApropos p{
    margin:20px;
}
/***********************************************************page contact*****************************************************/
#texteContact{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#texteContact h2{
    font-size: 3rem;
    margin-top: 50px;
}
#texteContact p{
    max-width: 700px;
    text-align: center;
}
/*********2ieme section avec logo***************/
#lescontact{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
}
.contactPage a{
    display: flex;
    align-items: center;
}
.contactPage  a img{
    width: 40px;
    height: 40px;
}
.contactPage a p{
    color:#131211;
    margin-left: 10px;
}
#lescontact #logopagecontact{
    height: 90px;
}
/**********************************formulaire*************************************/
#formulaire{
    width: 100%;
    padding:50px;
    overflow: hidden;
}
#formulaire form{
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: 100%;
    margin: 0 100px;
}
#formulaire form input.champsclassique{
    background-color: #cbb79e;
    border: none;
    height: 35px;
    width: 500px;
}
.champsclassique:focus-visible{
    border-color: #131211;
}
#conteneurGauche textarea{
    background-color: #cbb79e;
    border: none;
    height: 300px;
    width: 500px;
}
#conteneurGauche p, #conteneurDroit p{
    margin:20px;
}
h3#form{
    color: #131211;
    font-family: 'Marvel', sans-serif;
    font-size: 3rem;
    font-weight: 500;
    margin:20px;
    margin-left: 50px;
    padding:0;
}
#conteneurGauche{
    flex:1;
    width: 50%;
}
#conteneurDroit{
    flex:1;
    width: 50%;
    margin-top: 10px;
}
#conteneurDroit>p:last-of-type{
    color:#231303;
    font-size: 13px;
}

/*******bouton envoyer*********/
#boutonEnvoyer{
    font-family: 'Varta', sans-serif;
    margin:40px 20px;
    font-size: 1.6rem;
    padding: 8px 50px;
    align-self: flex-end;
    text-align: center;
    border:#cbb79e  solid 3px;
    position: relative;
    z-index: 1;
    font-weight: 500;
    background-color: transparent;
    text-transform: uppercase;
    transition: border-color 500ms linear, background-color 300ms linear ;
}
#boutonEnvoyer:hover{
    background-color: #cbb79e;
    border-color:#231303 ;
    font-weight:700;
}
/*****************************************page archive réalisation***************************************************/
/*****************section formulaire de recherche**************/
#formulaireRechercheRealisation{
    margin:50px;
    display: flex;
    justify-content: center;
}
#formulaireRechercheRealisation form .containerRechercheRealisation{
    display: inline-block;
    position: relative;
    margin:20px;
    padding-left: 35px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#formulaireRechercheRealisation form .containerRechercheRealisation input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
#formulaireRechercheRealisation form .containerRechercheRealisation .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
}
#formulaireRechercheRealisation form .containerRechercheRealisation:hover input ~ .checkmark {
    background-color: #ccc;
}
#formulaireRechercheRealisation form .containerRechercheRealisation input:checked ~ .checkmark {
    background-color: #cbb79e;
}
#formulaireRechercheRealisation form .containerRechercheRealisation .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
#formulaireRechercheRealisation form .containerRechercheRealisation input:checked ~ .checkmark:after {
    display: block;
}
#formulaireRechercheRealisation form .containerRechercheRealisation .checkmark:after {
    left: 6px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/****************sections les réalisations***********************/
.containerRealisation{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.containerRealisation .unerealisation{
    margin: 50px 30px;
}
.containerRealisation .unerealisation .texteArchiveRealisation{
    width: 200px;
}
.containerRealisation .unerealisation .texteArchiveRealisation a h3{
    color: #131211;
    font-family: 'Marvel', sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
}
.containerRealisation .unerealisation .texteArchiveRealisation a h3::before{
    position: absolute;
    content: "";
    background-image: url("img/losangeseul.svg");
    background-repeat: no-repeat;
    background-size:cover;
    top: -25%;
    left: -5%;
    z-index: -1;
    width: 40px;
    height: 60px;
}
.containerRealisation .unerealisation .texteArchiveRealisation h4{
    color: #131211;
    font-family: 'Marvel', sans-serif;
    font-size:1.6rem;
    font-weight: 700;
    text-transform: uppercase;
}
.containerRealisation .unerealisation .imgArchiveRealisation, .containerRealisation .unerealisation .imgArchiveRealisation img{
    width: 500px;
    height: 350px;
    margin: 0;
    padding: 0;
}
/*****************************************************************page projet*******************************************************************/
#headerProjet, #Projet{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
#headerProjetTexte, #headerProjetImg{
    height: 400px;
    width: 400px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
#headerProjetImg{
    height: 600px;
    width: 600px;
    margin: 0;
    padding: 0;
}
#headerProjet #headerProjetTexte p{
    font-family: 'Varta', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    margin:20px 0;
}
/*******bouton voir le site*********/
#headerProjet #headerProjetTexte .voirLeSite{
    margin:40px 10px;
    padding: 8px 50px;
    text-align: center;
    max-width: 200px;
    border:#cbb79e  solid 3px;
    position: relative;
    z-index: 1;
    font-weight: 600;
    text-transform: uppercase;
    transition: border-color 500ms linear, background-color 300ms linear ;
}
#headerProjet #headerProjetTexte .voirLeSite::after{
    content:"";
    width: 100%;
    height: 100%;
    border:#231303 solid 3.5px;
    z-index: 2;
    position: absolute;
    top: -30%;
    left: -6%;
    transition: all 300ms linear;
}
#headerProjet #headerProjetTexte .voirLeSite:hover{
    background-color: #cbb79e;
    border-color:#231303 ;
    font-weight:700;
}
#headerProjet #headerProjetTexte .voirLeSite:hover::after{
    top: -4px;
    left: -3px;
}
/*************section projet*****************/
#ProjetTexte{
    max-width: 650px;
    margin-left: 10px;
}
#ProjetTexte .TitreProjetProjet, #ProjetProcederetape .TitreProjetProjet, #ProjetFinal .TitreProjetProjet{
    color: #131211;
    font-family: 'Marvel', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    margin:20px 0;
    padding:0;
    text-transform: uppercase;
}
#Projetphoto{
    width: 500px;
    margin: 0;
    padding: 0;
}
#ProjetTexte p:nth-of-type(3){
    color: #131211;
    font-family: 'Marvel', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    text-decoration: underline;
}
#ProjetTexte h4{
    font-weight: 400;
}
/*******************section etapes de procéder***************************/
#ProjetProcederetape{
    width: 100%;
    height: 100%;
    padding: 0 40px;
}
#ProjetProcederetape .TitreProjetProjet{
    margin: 30px 40px;
}
.EtapeProjetProceder{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}
.EtapeProjetProceder .NumeroEtapesProjet{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin: 10px;
}
.EtapeProjetProceder .NumeroEtapesProjet h3{
    font-family: 'Marvel', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    margin: 20px 0;
}
.EtapeProjetProceder .NumeroEtapesProjet h5{
    font-family: 'Varta', sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    margin: 0;
}
.EtapeProjetProceder .NumeroEtapesProjet img{
    width: 73px;
    height: 110px;
}
/*****************section proceder*******************/
#ProjetProceder{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 40px;
}
#ProjetProceder .Etapes{
    width: 100%;
    height: 100%;
    margin: 60px auto;
    padding: 0;
}
#ProjetProceder .Etapes p{
	max-width:1000px;
}

#ProjetProceder .Etapes .TitreEtapeProcederProjet, #ProjetFinal .avantapres .TitreEtapeProcederProjet{
    font-family: 'Marvel', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin:40px 30px;
    text-transform: uppercase;
    position: relative;
}
#ProjetProceder .Etapes .TitreEtapeProcederProjet::before{
    content: "";
    position: absolute;
    top: -75%;
    left: -1%;
    z-index: -1;
    background-image: url("img/losangeseul.svg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 50px;
    height: 75px;
}
#ProjetProceder .Etapes .sousTitreProceder{
    font-family: 'Varta', sans-serif;
    font-size: 1.9rem;
    font-weight: 600;
    margin:40px 60px;
}
#ProjetProceder .Etapes .textProceder{
    max-width: 1200px;
    margin: 60px 10px;
}
#ProjetProceder .Etapes .IMGetapes, #ProjetFinal .photomockupProduitFinal{
    display: flex;
    justify-content: space-around;
    margin: 0;
    padding: 0;
}
#ProjetProceder .Etapes figure,  #ProjetProceder .Etapes figure img , #ProjetFinal .photomockupProduitFinal figure, #ProjetFinal .photomockupProduitFinal figure img{
	margin:0;
    padding: 10px;
    width: 650px;
	object-fit:contain;
    height: 500px;
}
#ProjetProceder .Etapes .FlexROWetape{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 30px 0;
    padding: 0;
}
#ProjetProceder .Etapes .FlexROWetape:nth-of-type(2){
    flex-direction: row-reverse;
}
#ProjetProceder .Etapes .texteFlex {
    max-width: 650px;
}
#ProjetProceder .Etapes .scrollImage{
    overflow: scroll;
    width: 700px;
	margin: 0 auto;
    height: 500px;
    overflow-x: hidden;
}
#ProjetProceder .Etapes .scrollImage img{
	width: auto;
    height: auto;
}
#ProjetProceder .Etapes .moodboardIMG{
    width: 100%;
	height:100%;
    display: flex;
    justify-content: center;
}
#ProjetProceder .Etapes .moodboardIMG img{
    width: 800px;
    height: 500px;
}
#ProjetProceder .Etapes .couleurs figure, #ProjetProceder .Etapes .couleurs figure img{
    width: 200px;
    height: 300px;
}
#ProjetProceder .Etapes .containerLogo{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#ProjetProceder .Etapes .imgLogo figure img, #ProjetProceder .Etapes .imgLogo figure, #ProjetProceder .Etapes .containerLogo .containerLogoproceder figure img, #ProjetProceder .Etapes .containerLogo .containerLogoproceder figure{
    width: 300px;
    height: 300px;
}
#ProjetProceder .Etapes .containerLogo .containerLogoproceder{
    width: 700px;
}
/*************section produit final******************/
#ProjetFinal{
    padding: 50px;
}
#ProjetFinal .TitreProjetProjet{
    margin: 20px 40px;
}
#ProjetFinal .avantapres{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
#ProjetFinal .avantapres figure{
    margin: 30px 10px;
    padding: 0;
    width: 1000px;
    height: 400px;
    overflow: scroll;
    overflow-y: hidden;
    display: flex;
}
#ProjetFinal .avantapres figure img{
    max-width: 800px;
    max-height: 400px;
}
/**********************************************************page expertise**********************************************************************/
/********************section services de la page services***************/
#pageExpertise{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 0;
    padding: 0;
}
#pageExpertise .services{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 40px;
    width: 500px;
}
#pageExpertise .services figure img{
    width: 130px;
    height: 130px;
}
#pageExpertise .services figure{
    margin: 0;
    padding: 0;
    width: 150px;
    height: 150px;
}
#pageExpertise .services h2{
    color: #131211;
    font-family: 'Marvel', sans-serif;
    font-size: 3rem;
    font-weight: 700;
}
#pageExpertise .services p{
    max-width: 300px;
    text-align: center;
}
/****************section comment allons nous travailler*********************/
#NotreCollaboration {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#NotreCollaboration h2{
    margin: 90px;
    z-index: 2;
    position: relative;
    color: #131211;
    font-family: 'Marvel', sans-serif;
    font-size: 5rem;
    font-weight: 700;
}
#NotreCollaboration h2::before{
    position: absolute;
    content: "";
    width: 250px;
    height: 215px;
    top: -92%;
    z-index: -1;
    right: 75%;
    background-image: url("img/losange.svg");
    background-size: cover;
    background-repeat: no-repeat;
}
#NotreCollaboration #etapescollaboration{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}
#NotreCollaboration #etapescollaboration .collaborations{
    margin: 40px 150px;
    border: #cbb79e 3px solid;
    width: 750px;
    height: 100%;
    padding: 20px;
    position: relative;
}
#NotreCollaboration #etapescollaboration .collaborations:nth-of-type(even){
    align-self: flex-end;
}
#NotreCollaboration #etapescollaboration .collaborations h3{
    color: #131211;
    font-family: 'Marvel', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    display: flex;
    background-color: #f7f7f7;
    align-items: center;
    position: absolute;
    top: 6%;
    left: -6.5%;
    margin:0;
}
#NotreCollaboration #etapescollaboration .collaborations h3 img{
    width: 73px;
    height: 110px;
    margin: 10px;
}
#NotreCollaboration #etapescollaboration .collaborations p{
    width: 700px;
    margin-top: 130px;
}
/*************************************************************mentions légales**************************************************************/

#mentionslegales{
	padding:0;
	margin:50px;
}
#mentionslegales h2{
	color: #131211;
    font-family: 'Marvel', sans-serif;
    font-size: 5rem;
    font-weight: 700;
    margin: 20px 0;
    padding:0;
    text-align: center;
    text-transform: uppercase;
}

/****************************************************media queries*****************************************************************************/
@media screen and (max-width:1360px){
    /************************************page contact*****************/
    #formulaire form{
        margin: 10px 0;
    }
    #formulaire{
        padding: 10px;
    }
    /**********************************page d'accueil****************/
    /**section landing page**/
    nav ul li {
        margin: 0 25px;
    }
    /**section realisation**/
    #realisation button{
        right: 30%;
    }
    /*landing page*/
    .home header{
        background-position: 95vh;
        background-size: contain;
    }
	/******************************page expertise*****************************/
	#pageExpertise .services {
    width: 400px;
	}
}
@media screen and (max-width:1265px){
    /**********************************page d'accueil****************/
    /*landing page*/
    .home header{
        background-position: 88vh;
    }
}
@media screen and (max-width:1215px){
    /*******************************page d'accueil**************************/
    /**section realisation**/
    #realisation button{
            right: 35%;
            z-index: 50;
    }
    /*landing page*/
    .home header{
        background-position: 80vh;
    }
    nav ul li {
        margin: 0 18px;
    }
	/****************************page projet***********************************/
    #ProjetTexte{
        max-width: 500px;
        margin-left: 20px;
    }
	 /*************************page archive realisation*****************/
    #formulaireRechercheRealisation{
        margin:30px;
    }
	/*********************************page expertise************************/
    #expertise .services{
        width: 400px;
    }
    #NotreCollaboration #etapescollaboration .collaborations{
        margin: 40px 100px;
    }
}
@media screen and (max-width:1150px){
    /*****************************************page d'accueil****************/
        /**section landing page**/
        nav ul li {
            margin: 0 20px;
        }
        nav img {
            height: 60px;
        }
        /*landing page*/
    .home header{
        background-position: 75vh;
    }
    nav ul li {
        margin: 0 15px;
    }
    /**********************************page contact******************************/
    #formulaire form input.champsclassique, #conteneurGauche textarea {
        width: 400px;
    }
	/*****************************page archive realisation***********************/
    .containerRealisation .unerealisation .imgArchiveRealisation, .containerRealisation .unerealisation .imgArchiveRealisation img {
        width: 400px;
        height: 300px;
    }
    #formulaireRechercheRealisation{
        margin:10px;
    }
	/**********************************page expertise************************/
    #NotreCollaboration #etapescollaboration .collaborations{
        margin: 40px 80px;
    }
}
@media screen and (max-width:1060px){
    /***************************page d'accueil*******************************/
        /**section landing page**/
        nav ul li {
            margin: 0 15px;
        }
        nav ul li a{
            font-size: 2rem;
        }
        /*section réalisation*/
        #realisation .conteneurReal::after {
            display: none;
        }
        #realisation .conteneurReal{
            width: 800px;
            margin-left: 100px;
        }
        #realisation .dossierRealisation .texteRealisation {
            max-width: 200px;
            left: -7%;
        }
        #realisation button{
            right: 12%;
        }
        /*landing page*/
        .home header{
            background-position: 70vh;
        }
    /***************************************page à propos***************************/
    #texteApropos{
        padding:0;
    }
    #texteApropos p{
        margin:0;
    }
	/*********************************page projet************************************/
    #headerProjetImg{
        height: 500px;
        width: 500px;
    }
	/**********************************page expertise*******************************/
    #pageExpertise .services {
    width: 350px;
	}
	#NotreCollaboration #etapescollaboration .collaborations{
        margin: 40px 50px;
        width: 550px;
    }
    #NotreCollaboration #etapescollaboration .collaborations p{
        width: 510px;
    }
    #NotreCollaboration #etapescollaboration .collaborations h3{
        top: 4%;
        left: -9%;
    }
}
@media screen and (max-width:980px){
	/**************************page d'accueil**********************************/
    /*landing page*/
    .home header{
        background-position: 100%;
        background-size: cover;
    }
    #containerHomepage {
        width: 100%;
        max-height: none;
        margin-top: 120px;
    }
    #titreHomepage h1{
        z-index: 50;
		margin-top:10px;
    }
    #titreHomepage svg {
        z-index: 20;
    }
    #containerHomepage::before{
        content: "";
        position: absolute;
		width: 60%;
    	height: 110%;
        top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
        background-color: #f7f7f7c4;
    }
	#textHomepage {
    margin-top: 30px;
    padding: 10px;
	width: 60%;
    }
	/****************************page projet***********************************/
    #ProjetTexte{
        max-width: 450px;
    }
    #headerProjetTexte{
        margin-left: 10px;
    }
	 /*******************************page archive realisation*****************/
    .containerRealisation .unerealisation .imgArchiveRealisation, .containerRealisation .unerealisation .imgArchiveRealisation img {
        width: 370px;
        height: 260px;
    }
	 /*************************************page expertise************************/
    #expertise .services{
        width: 300px;
    }
}
@media screen and (max-width:910px){
        /****************************page projet***********************************/
    #headerProjetImg{
        height: 400px;
        width: 400px;
    }
    #Projetphoto{
        width: 400px;
    }
    #headerProjet #headerProjetTexte h1, #headerProjet #headerProjetTexte p, #headerProjet #headerProjetTexte h2{
        margin: 10px 0;
    }
    #ProjetTexte{
        max-width: 380px;
    }
}
@media screen and (max-width:885px){
    /**********************************page d'accueil**************************/
    /**section etape travail**/
    #etapeTravail h2::before{
        right: 76%;
    }
    /*section realisation*/
    #realisation button{
        right: 21%;
    }
    /*landing page**/
    /*******************************page contact*****************************/
    #formulaire form input.champsclassique, #conteneurGauche textarea {
        width: 300px;
    }
    #texteContact h2, h3#form {
        font-size: 2.5rem;
    }
    h3#form {
        margin-left: 20px;
    }
	 /*******************************page archive realisation***************************/
    .containerRealisation .unerealisation .imgArchiveRealisation, .containerRealisation .unerealisation .imgArchiveRealisation img {
        width: 340px;
        height: 240px;
    }
    .containerRealisation .unerealisation .texteArchiveRealisation a h3{
        font-size: 2.4rem;
    }
    .containerRealisation .unerealisation .texteArchiveRealisation a h3::before{
        top:-30%;
    }
}

@media screen and (max-width:840px){
    /**********************************page d'accueil*********************************/
        /**section landing page**/
        #titreHomepage, #textHomepage{
            max-width: 450px;
        }
		#textHomepage {
		margin-top: 10px;
		padding: 1px;
		}
		#containerHomepage::before{
			top:50%;
		}
        /*menu burger*/
        nav ul.hamMenu{
            position: absolute;
            top: 10%;
			z-index:100;
			padding:0;
            max-width: 170px;
            right: 0;
            background-color: #f7f7f7c4;
			text-align:center;
        }
        nav ul.hamMenu{
            display: none;
        }
		nav ul.hamMenu li {
		padding: 15px 0;
		margin: 0;
		width: 100%;
		}
		nav ul.hamMenu li::before{
			display:none;
		}
		nav ul.hamMenu li:hover{
			background-color:#cbb79e;
		}
		nav ul.hamMenu li:hover a{
			color:#f7f7f7;
		}
        .hamburger {
            align-self: flex-end;
            padding: 15px 15px;
            display: inline-block;
            cursor: pointer;
            transition-property: opacity, filter;
            transition-duration: 0.15s;
            transition-timing-function: linear;
            font: inherit;
            color: inherit;
            text-transform: none;
            background-color: transparent;
            border: 0;
            margin: 0;
            overflow: visible; }
            .hamburger:hover {
                opacity: 0.7; }
            .hamburger.is-active:hover {
                opacity: 0.7; }
            .hamburger.is-active .hamburger-inner,
            .hamburger.is-active .hamburger-inner::before,
            .hamburger.is-active .hamburger-inner::after {
                background-color:#231303; }
        
        .hamburger-box {
            width: 40px;
            height: 24px;
            display: inline-block;
            position: relative; }
        
        .hamburger-inner {
            display: block;
            top: 50%;
            margin-top: -2px; }
            .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
            width: 40px;
            height: 4px;
            background-color: #231303;
            border-radius: 4px;
            position: absolute;
            transition-property: transform;
            transition-duration: 0.15s;
            transition-timing-function: ease; }
            .hamburger-inner::before, .hamburger-inner::after {
            content: "";
            display: block; }
            .hamburger-inner::before {
            top: -10px; }
            .hamburger-inner::after {
            bottom: -10px; }
            .hamburger--stand .hamburger-inner {
                transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; }
                .hamburger--stand .hamburger-inner::before {
                    transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
                .hamburger--stand .hamburger-inner::after {
                transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
            
            .hamburger--stand.is-active .hamburger-inner {
                
                transform: rotate(90deg);
                background-color: transparent !important;
                transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; }
                .hamburger--stand.is-active .hamburger-inner::before {
                top: 0;
                transform: rotate(-45deg);
                transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
                .hamburger--stand.is-active .hamburger-inner::after {
                bottom: 0;
                transform: rotate(45deg);
                transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); 
            }
    /******************************************page à propos**************************/
    #aPropos{
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 100%;
    }
    #texteApropos{
        width: 100%;
    }
	/**************************************page projet***********************************/
    #headerProjetImg{
        height: 350px;
        width: 350px;
    }
    #headerProjet #headerProjetTexte h2{
        margin-bottom: 10px;
    }
    #headerProjet #headerProjetTexte .voirLeSite{
        margin: 10px 10px;
    }
    #Projet{
        flex-direction: column;
    }
    #ProjetTexte{
        max-width: 600px;
    }
	/*******************************page archive realisation************************/
    .containerRealisation .unerealisation .imgArchiveRealisation, .containerRealisation .unerealisation .imgArchiveRealisation img {
        width: 310px;
        height: 210px;
    }
	/********************************************page expertise************************/
    #NotreCollaboration #etapescollaboration .collaborations{
        margin: 40px;
        width: 500px;
    }
    #NotreCollaboration #etapescollaboration .collaborations p{
        width: 470px;
    }
    #NotreCollaboration #etapescollaboration .collaborations h3{
        left: -10%;
    }
    #NotreCollaboration h2::before{
        right: 70%;
    }
}
@media screen and (max-width:780px){
    /*************************************page d'accueil***********************************/
	#titreHomepage {
		padding: 40px;
		margin-top:40px;
	}
	#textHomepage {
    margin-top: 50px;
	}
    /**section etape travail**/
    #etapeTravail h2::before {
        top: -40%;
        right: 50%;
    }
    #etapeTravail h2{
        max-width: 350px;
        font-size: 4rem;
    }
    /**footer**/
    footer #contactMP{
        margin-left: 20px;
    }
    footer #logoFooter{
        display: none;
    }
    #footer{
        position: relative;
        visibility: visible;
        z-index: 1;
    }
    .animFooteractif{
        position: relative;
        visibility: visible;
        z-index: 1;
    }
    .animTravailactif{
        transform: none;
        border: none;
        border-radius: 0px;
    }

	/******************************page expertise****************************************/
    #expertise .services{
        width: 250px;
        height: 450px;
    }
    #NotreCollaboration h2{
        font-size: 4rem;
        margin: 60px 50px;
    }
    #NotreCollaboration h2::before {
        right: 25%;
        top:-120%;
    }
}
@media screen and (max-width:760px){
    /***************************************page d'accueil**************************/
    /*landing page*/
    #titreHomepage svg{
    width: 200px;
    height: 172px;
    }
    #textHomepage{
        margin-top: 0;
    }
    /********************************page contact*********************************/
    #lescontact div:nth-of-type(2){
        display: none;
    }
	 /***********************************page projet*****************************/
    #headerProjet{
        flex-direction: column;
    }
    #headerProjetImg{
        height: 450px;
        width: 450px;
    }
    #ProjetTexte{
        max-width: 500px;
    }
	/****************************************page archive realisation*****************/
    .containerRealisation{
        flex-direction: column;
        align-items: center;
    }
    .containerRealisation .unerealisation .imgArchiveRealisation, .containerRealisation .unerealisation .imgArchiveRealisation img {
        width: 500px;
        height: 350px;
    }
    .containerRealisation .unerealisation {
        margin:30px 30px;
    }
    #formulaireRechercheRealisation form .containerRechercheRealisation {
        margin: 10px;
    }
}
@media screen and (max-width:725px){
    /**************************************************page d'accueil****************/
    /**section expertise**/
    #expertise{
        height: 100%;
        flex-direction: column-reverse;
    }
    #expertise #textExpertise {
        margin-left: 20px;
    }
    #expertise #textExpertise h2{
        margin:0;
        margin-top: 100px;
    }
    #expertise #textExpertise .boutonEnSavoirPlus{
        margin: 40px 10px;
    }
    #expertise #textExpertise h2::before {
        width: 200px;
        height: 172px;
        top: -65%;
    }
    /*section realisation*/
    #realisation button{
        right: 35%;
    }
    #realisation h2::before {
        width: 200px;
        height: 172px;
    }
}
@media screen and (max-width:680px){
	/***********************************page d'accueil**************************/
	#titreHomepage h1{
		font-size:5rem;
	}
    /************************************page contact********************************/
    #formulaire form {
        flex-direction: column;
        align-items: center;
    }
    #formulaire form input.champsclassique, #conteneurGauche textarea {
        width: 400px;
    }
    #conteneurGauche,#conteneurDroit {
        width: 100%;
    }
    #conteneurDroit{
        margin-top: 0;
    }
    #boutonEnvoyer{
        margin: 20px 10px;
    }
    #formulaire {
        padding: 0;
    }
    #conteneurDroit p:first-of-type label{
        font-size: 1.4rem;
    }
    #conteneurGauche p, #conteneurDroit p {
        margin: 20px 0;
    }
	 /****************************************page expertise*****************************/
    #expertise .services{
        width: 200px;
        height: 490px;
    }
    #NotreCollaboration #etapescollaboration {
        align-items: center;
    }
    #NotreCollaboration #etapescollaboration .collaborations:nth-of-type(even){
        align-self: center;
    }
}
@media screen and (max-width:600px){
    /***********************************page d'accueil**************************/
	#titreHomepage h1{
		font-size:4rem;
	}
    /*footer*/
    footer{
        flex-direction: column;
        height: 100%;
    }
    footer #contactMP{
        text-align: center;
    }
	/***********************************page archive realisation*****************/
    .containerRealisation .unerealisation .imgArchiveRealisation, .containerRealisation .unerealisation .imgArchiveRealisation img {
        width: 400px;
        height: 300px;
    }
    #formulaireRechercheRealisation form .containerRechercheRealisation:hover input ~ .checkmark {
        background-color: transparent;
    }
	/*****************************************page expertise************************/
    #expertise .services{
        margin: 20px;
        height:450px ;
    }
    #expertise .services figure, #expertise .services figure img{
        width: 100px;
        height: 100px;
    }
    #expertise .services h2 {
        font-size: 2.5rem;
    }
    #expertise .services p{
        font-size: 1.5rem;
    }
    #NotreCollaboration #etapescollaboration .collaborations{
        margin: 30px 0;
        margin-left: 35px;
        width: 440px;
    }
    #NotreCollaboration #etapescollaboration .collaborations p{
        width: 410px;
    }
    #NotreCollaboration #etapescollaboration .collaborations h3 {
        left: -11%;
    }
    #NotreCollaboration h2{
        margin: 80px 0px;
    }
}
@media screen and (max-width:500px){
    /*****************************page d'accueil*****************************/
    /**section expertise**/
    #expertise figure {
        display: none;
    }
    #expertise #textExpertise h2{
        font-size: 4rem;
    }
    #expertise #textExpertise h2::before {
        top: -90%;
    }
    #expertise #textExpertise p{
        margin-left: 15px;
        margin-right: 15px;
    }
    /**section etape travail**/
    #texteEtapeTravail{
    padding: 20px 20px;
    }
    #etapeTravail h2::before {
        width: 200px;
        height: 172px;
        top: -20%;
    }
    /*section realisation*/
    #realisation h2{
        font-size: 4rem;
        margin: 80px 0 50px 120px;
    }
    #realisation .dossierRealisation .texteRealisation{
        max-width: 150px;
        top: 0;
    }
    #realisation .dossierRealisation .texteRealisation h3{
        font-size: 3rem;
        margin: 10px 0;
    }
    #realisation .dossierRealisation figure a img, #realisation .dossierRealisation figure  {
        height: 250px;
        width: 400px;
    }
    #realisation button p::after{
        width: 99px;
        height: 24px;
        bottom: -110%;
        right: -50%;
    }
    #realisation .conteneurReal {
        padding-top: 50px;
    }
    .slick-current .imgRealisation::after {
        width: 40%;
    }
    #realisation button{
        right: 38%;
    }
    /*******************************page contact**********************************/
    #formulaire form input.champsclassique, #conteneurGauche textarea {
        width: 350px;
    }
    #conteneurGauche,#conteneurDroit {
        max-width:350px;
    }
	/*************************************page projet***********************************/
    #headerProjetImg{
        height: 400px;
        width: 400px;
    }
    #headerProjet #headerProjetTexte h1{
        font-size:4rem;
    }
    #ProjetTexte{
        max-width: 470px;
    }
	/**********************************page archive realisation*****************/
    .containerRealisation .unerealisation .imgArchiveRealisation, .containerRealisation .unerealisation .imgArchiveRealisation img {
        width: 370px;
        height: 260px;
    }
    #formulaireRechercheRealisation{
        margin:10px;
    }
	/**************************************page expertise************************/
    #expertise .services{
        margin: 15px;
        width: 150px;
        height:500px ;
    }
    #expertise .services p{
        width: 150px;
        margin: 0;
    }
    #NotreCollaboration #etapescollaboration .collaborations h3 {
        left: -11.5%;
        font-size: 3rem;
    }
    #NotreCollaboration #etapescollaboration .collaborations h3 img{
        width: 60px;
        height: 90px;
    }
    #NotreCollaboration #etapescollaboration .collaborations{
        margin: 30px 0;
        margin-left: 25px;
        width: 370px;
    }
    #NotreCollaboration #etapescollaboration .collaborations p{
        width: 340px;
    }
    #NotreCollaboration h2 {
        max-width: 250px;
        margin:40px 0;
    }
    #NotreCollaboration h2::before {
        right: 4%;
        top: -35%;
        opacity: 0.8;
    }
}
@media screen and (max-width:400px){
    /*********************************page d'accueil*****************************/
    /**section expertise**/
    #expertise #textExpertise h2::before {
        right: 25%;
    }
    /**section etape travail**/
    #texteEtapeTravail {
        margin: 20px 20px;
    }
    /*section realisation*/
    #realisation button{
        right: 42%;
    }
    #realisation .dossierRealisation figure a img, #realisation .dossierRealisation figure {
        height: 230px;
        width: 330px;
    }
    #realisation .dossierRealisation{
        width: 350px;
    }
    .slick-current .imgRealisation::after {
        width: 60%;
    }
	/**********************************page projet***********************************/
    #headerProjetImg{
        height: 320px;
        width: 320px;
    }
    #headerProjet #headerProjetTexte h1{
        font-size: 3.5rem;
    }
    #ProjetTexte{
        max-width: 350px;
    }
	/*************************************page archive realisation*****************/
    .containerRealisation .unerealisation .imgArchiveRealisation, .containerRealisation .unerealisation .imgArchiveRealisation img {
        width: 340px;
        height: 240px;
    }
	 /***************************************page expertise************************/
    #NotreCollaboration #etapescollaboration .collaborations{
        width: 340px;
    }
    #NotreCollaboration #etapescollaboration .collaborations p{
        width: 300px;
        margin-top: 120px;
    }
    #NotreCollaboration #etapescollaboration .collaborations h3 {
        left: -12.5%;
    }
}
@media screen and (max-width:385px){
    /**********************************page d'accueil*********************/
    /*section realisation*/
    #realisation .dossierRealisation .texteRealisation {
        max-width: 120px;
        left: -2%;
    }
    /*section realisation*/
    #realisation .dossierRealisation .texteRealisation h3 {
        margin: 0;
    }
    /**********************************page contact*************************/
    #formulaire form input.champsclassique, #conteneurGauche textarea {
        width: 300px;
    }
    #conteneurGauche,#conteneurDroit {
        max-width:300px;
    }
	/**********************************page archive realisation*****************/
    .containerRealisation .unerealisation .imgArchiveRealisation, .containerRealisation .unerealisation .imgArchiveRealisation img {
        width: 300px;
        height: 200px;
    }
    .containerRealisation .unerealisation {
        margin:20px 10px;
    }
	/******************************************page expertise************************/
    #expertise .services{
        margin: 5px;
    }
    #NotreCollaboration #etapescollaboration .collaborations{
        width:270px;
    }
    #NotreCollaboration #etapescollaboration .collaborations p{
        width: 240px;
    }
    #NotreCollaboration #etapescollaboration .collaborations h3 {
        left: -16%;
    }
}
@media screen and (max-width:340px){
    /********************************************page d'accueil********************/
    /**section expertise**/
    #expertise #textExpertise h2::before {
        right: 18%;
    }
    /**section etape travail**/
    #etapeTravail h2::before {
        right: 40%;
    }
    #etapeTravail #texteEtapeTravail .boutonEnSavoirPlus {
        padding: 8px 40px;
    }
    /*section realisation*/
    #realisation .dossierRealisation .texteRealisation {
        left: -1%;
    }
    #realisation h2{
        margin: 80px 0 50px 100px;
    }
    /******************************************page contact***************************/
    #formulaire form input.champsclassique, #conteneurGauche textarea {
        width: 280px;
    }
    #conteneurGauche,#conteneurDroit {
        max-width:280px;
    }
	/***********************************page expertise****************************/
    #expertise .services{
        margin: 10px;
        width: 250px;
        height: 380px;
    }
    #expertise .services p{
        width: 250px;
    }
    #NotreCollaboration #etapescollaboration .collaborations{
        width:260px;
    }
    #NotreCollaboration #etapescollaboration .collaborations p{
        width: 230px;
        margin-top: 110px;
    }
    #NotreCollaboration #etapescollaboration .collaborations h3 {
        left: -16.5%;
        font-size: 2.7rem;
        top: 2%;
    }
}