/* CSS Document */
html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 100%;
	font-family: 'Raleway', sans-serif;
	background-color: #313131;
}
body {
	margin: 0px;
	padding: 0px;
	padding-bottom: 3rem;
}
.clear {
	clear: both;
}
.sombre {
	background-color: #313131;
	
}
.sombre h1, .sombre h2, .sombre h3, .sombre p {
	color: #FFFFFF;
}
.clair {
	background-color: #FFFFFF;
}
.clair h1, .clair h2, .clair h3, .clair p {
	color: #313131;
}
.bouton {
	display: block;
	text-align: center;
}
.boutonLien {
	display: inline-block;
	background-color: #313131;
	color: #ccff00;
	padding: 1rem;
	padding-top: 0.8rem;
	padding-bottom: 0.8rem;
	text-align: center;
	border-radius: 1rem;
	text-decoration: none;
}
.boutonLien:hover {
	background-color: #ccff00;
	color: #313131;
	
}
	.sombre .boutonLien {
		background-color: #CCFF00;
		color: #000000;
	}
	.sombre .boutonLien:hover {
		background-color: #FFFFFF;
	}

.article h1 {
	font-family: 'Lobster Two', cursive;
	padding-left: 1rem;
	font-weight: normal;
}
.article h3 {
    margin-bottom: 0px;
    font-size: 1rem;
    font-style: italic;
}
.header {
	padding-bottom: 0.7rem;
}
.header ul {
	list-style: none;
	margin: 0px;
	padding: 0rem;
	padding-top: 0.5rem;
	display: flex;
}
.header li {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	
}
.header img {
	max-width: 100%;
	height: auto;
}

.header h1, p {
	margin: 0px;
	padding: 0px;
	color: #999999;
}
.header h1 {
	color: #ccff00;
	margin-bottom: 0.3rem;
}
.header a {
	text-decoration: none;
	color: #999999;
}
.header li:last-child {
	display: flex;
}
.header li:last-child div {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}
.imageIndex {
	background-color: #dcdcdc;
}
.imageIndexConteneur {
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.imageIndex img {
	max-width: 100%;
	height: auto;
	display: block;
}
.main {
	background-color: #dcdcdc;
	min-height: 600px;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
	.repereNav {
		font-size: 0.8rem;	
		padding: 0px;
		color: #009ee3;
		font-weight: bold;
	}
	.repereNav a {
		color: #e4007d;
		font-size: 0.7rem;
		font-weight: lighter;
	}
	.liste_prestations h1 {
	font-family: 'Raleway', sans-serif;
	
}

	.liste_prestations li a, .liste_prestations li a p  {
		color: #313131;
		text-decoration: none;	
	}
	.liste_prestations li h1, p {
		margin: 0px;
		padding: 0px;
	}
	.liste_prestations li {
		text-align: center;
	}
	.liste_prestations img {
		max-width: 100%;
		height: auto;
		display: block;
		margin-left: auto;
		margin-right: auto;
}
/*------------------------------------------MEDIA largeur---------------------------*/
@media (min-width: 0px){
	.header li:nth-child(1), .header li:nth-child(3) {
		display: none;
	}
	.header p {
	display: none;
	}
	.header li:nth-child(2) {
		margin-left: 0px;
		margin-right: auto;	
	}
	.header li {
	width: 50%;
	}
	.navIndex {
		background-color: #dcdcdc;
	}
	.nav ul, .navIndex ul {
		background-color: #dcdcdc;
		list-style: none;
		margin: 0px;
		padding: 0px;
		display: flex;
		flex-wrap: wrap;
	}
	.nav {
		background-color: #000000;
	}
	.nav li, .navIndex li {
		background-color: #000000;
		margin: auto;
		text-align: center;
		width: calc((100% / 2) );
		border-bottom: 0.5rem solid #dcdcdc;
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.nav  li:nth-child(2n+1), .navIndex  li:nth-child(2n+1) {
		width: calc((100% / 2 - 0.5rem) );
		border-left: 0.5rem solid #dcdcdc;

	}

	.nav li:first-child, .navIndex li:first-child {
		display: none;
	}
	.nav p, .navIndex p {
		margin: 0px;

	}
	.nav p a, .navIndex p a {
		text-decoration: none;
		padding: 1.5rem;
		display: block;
	
		background-color: #000000;
		color: #FFFFFF;
		font-size: 1.5rem;
	
	}
	.nav p a:hover, .navIndex p a:hover {
		background-color: #ccff00;
		color: #000000;
		
	}
	.imageRubrique {
		display: none;
	}
	.article {
		padding-top: 1rem;
		padding-bottom: 4rem;
	}
	.article p, .article h1, .article h2, .article h3 {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.boutonLien {
		margin-top: 1rem;
		margin-bottom: 1rem;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
	.conteneurFooter ul {
		margin: 0px;
		padding: 0px;
		list-style: none;
	}
	.conteneurFooter h1 {
		font-size: 1.4rem;
		color: #ccff00;
		font-weight: lighter;
	}
	.conteneurFooter p {
		padding: 0rem;
	}
	.conteneurFooter p a {
		color: #999999;
		font-size: 1.2rem;
		text-decoration: none;
	}
	.conteneurFooter ul {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0px;
		margin-bottom: 0px;
		padding-bottom: 1rem;
		text-align: center;
	}
	.conteneurFooter div:last-child p {
		margin-left: auto;
		margin-right: auto;
		display: inline-block;
		width: 100%;
		text-align: center;
		color: #FFFFFF;
	}
	.conteneurFooter div:last-child p a {
		color: #ccff00;
	}
	.contact {
		background-color: #313131;
		list-style: none;
		margin: 0px;
		padding: 3rem;
		text-align: center;
	}
	.contact li:first-child {
		display: none;
	}
	.contact span {
		color: #ccff00;
	}
	.listeRubrique {
		text-align: center;
		list-style: none;
		padding: 0px;
		padding-top: 3rem;
	}
	.bigBox {
		display: none;
	}
	.liste_prestations {
		margin: 0px;
		padding: 0px;
		margin-left: auto;
		margin-right: auto;
		list-style: none;
		background-color: #FFFFFF;
	}
	.liste_prestations li {
		font-size: 0.7rem;
		border-bottom: 1rem solid #dcdcdc;
		padding: 1rem;
	}
	.imageIndex {
		display: none;
	}
	.liste_prestations p {
		font-size: 1rem;
	}
	.listeImpression {
		list-style: none;
		margin: 0px;
		padding: 0px;
	}

    .threeBox {
        display: none;
    }
    .choixCreation {
        margin: 0px;
        padding: 1rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
        list-style: none;
        text-align: center;
    }
    .choixCreation li {
        padding-bottom: 1rem;
        border: 4px dashed #FFFFFF;
        border-radius: 1rem;
        margin-bottom: 2rem;
    }
    .choixCreation h3 {
        color: #CCFF00;
        font-size: 1.5rem;
    }
}


@media (min-width: 720px){
	.header, .main .conteneurMain, .footer .conteneurFooter, .nav ul, .imageRubrique, .navIndex ul, .imageIndexConteneur {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.header li {
		width: calc(99% / 3);
	}
	.header li:nth-child(3) {
	display: block;
	padding-left: 2rem;
	}
	.header li:nth-child(2) p:last-of-type, .header li:nth-child(3) p, .header li:last-child p {
		display: block;
		font-size: 1rem;
	}
	.header h1 {
		font-size: 1.5rem;
		margin-bottom: 0.3rem;
	}
	.article h1, .article h2, .article h3, .article p {
		padding-left: 3rem;
		padding-right: 3rem;
		margin-bottom: 1rem;

	}
	.imageRubrique {
		display: block;
	}
	.conteneurFooter {
		padding-top: 1rem;
	}

	.article h2 {
    font-size: 1.2rem;
    background-image: url(../images/h2.jpg);
    background-size:contain;
    background-repeat: no-repeat;
	background-position: -1rem center;
	display: inline-block;
	margin-top: 4rem;
	}
	.footer {
	background-image: url(../images/base/frise_couleur_hor.jpg);
	background-repeat: repeat-x;
	background-position: top center;
}
	.conteneurFooter {
		padding-top: 1.5rem;
	}
	.conteneurFooter div {
		display: flex;
		flex-wrap: wrap;
	}
	.conteneurFooter ul {
		width: calc(99% / 2);
	}
	.conteneurFooter div:last-child {
		border-top: 1px dashed #FFFFFF;
	}
	.conteneurFooter div:last-child p {
		margin-left: auto;
		margin-right: auto;
		display: inline-block;
		width: calc(95% /4);
		text-align: center;
		color: #FFFFFF;
	}
	.conteneurFooter div:last-child p a {
		font-size: 0.9rem;
	}
	.contact li:first-child {
		display: block;
	}
	.contact {
		display: flex;
	}
	.contact li {
		width: calc(100% / 2);
		margin: auto;
	}
	.liste_prestations {
		display: flex;
		flex-wrap: wrap;
	}
	.liste_prestations li {
		width: calc((100% / 2) - 2.5rem);
		border-right: 1rem solid #dcdcdc;
		margin-left: auto;
		margin-right: auto;
		border-bottom: 0rem solid #dcdcdc;
		border-top: 1rem solid #dcdcdc;
	}
	.liste_prestations li:nth-child(2n+2) {
		border-right: 0rem;
	}
	.liste_prestations li:last-child {
		display: none;
	}
        .threeBox {
        list-style: none;
        background-color: #dcdcdc;
        display: flex;
        text-align: center;
        padding: 0px;
        margin: 0px;
        flex: auto;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
      
       
    }
    .threeBox li {
        width: calc(100% / 3);   
        text-align: center;
        margin-left: 0px;
    }
    .threeBox li:nth-child(2) {
        border-left: 0.5rem solid #dcdcdc;
        border-right: 0.5rem solid #dcdcdc;
    }
	
}




@media (min-width: 1024px){
	
	.header li:first-child {
		display: block;
	}
	.header li {
		width: calc(100% / 4);
	}
	.header li:nth-child(3) {
	padding-left: 0rem;
	}
	.header li:nth-child(2) p:first-of-type, .header li:nth-child(2) p:last-of-type, .header li:nth-child(3) p, .header li:last-child p {
		display: block;
		font-size: 0.8rem;
	}
	.header h1 {
		font-size: 1.3rem;
		margin-bottom: 0.3rem;
	}
	.nav ul, .navIndex ul {
		background-color: #001DFF;
		flex-wrap: nowrap;
	}
	.nav li:first-child, .navIndex li:first-child {
		display: block;
	}
	.nav li, .navIndex li {
		width: calc(100% / 5);
		border: 0px;
		background-color: #FF0004;
		-webkit-flex: auto;
		-moz-flex: auto;
		-ms-flex: auto;
		-o-flex: auto;
		flex: auto;
	}
	.nav  li:nth-child(2n+1), .navIndex  li:nth-child(2n+1) {
		width: inherit;
		border-left: 0px;
	}
	.nav li, .navIndex li {
		border-right: 1px solid #dcdcdc;
	}
	.nav li:last-child, .navIndex li:last-child {
		border-right: 0px;
	}
	.nav p a, .navIndex p a {
		font-size: 1rem;
		padding: 1rem;
	}
	.conteneurFooter {
		padding-top: 1.5rem;
	}
	.conteneurFooter h1 {
		font-size: 0.8rem;
	}
	.header li:first-child {
	max-width: 170px;
	margin-left: 0px;
	}
	.header li:nth-child(2) {
		width: 32%;
		margin-left: 0px;
	}
	.header li:nth-child(3) {
		width: 20%;
	}
	.header, .main .conteneurMain, .footer .conteneurFooter, .nav ul, .imageRubrique, .navIndex ul, .imageIndexConteneur {
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
	.boutonLien {
		display: inline-block;
	}

	.conteneurFooter p {
		padding: 0rem;
	}
	.conteneurFooter h1 {
		font-size: 1rem;
	}
	.conteneurFooter p a {
		font-size: 0.8rem;
	}
	.conteneurFooter ul {
		width: calc(99% / 4);
		text-align: center;
	}
	.conteneurMain {
		padding-bottom: 6rem;
	}
	.contact {
		background-image: url(../images/bg_mail.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		padding: 0px;
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	.contact li {
		width: 30%;
		margin-left: 2rem;
			
	}
	.contact li p {
		color: #FFFFFF;
	}
	.contact li:last-child {
		margin-right: 0px;
		margin-left: auto;
	}
	.bigBox {
		display: block;
		float: left;
		margin: 2rem;
		border-top-right-radius: 1.5rem;
		border-bottom-left-radius: 1.5rem;
		border: 1px solid #999999;
	}
	.liste_prestations {
		background-color: #dcdcdc;
		padding-top: 0.5rem;
	}
	.liste_prestations li:last-child {
		display: block;
	}
	.liste_prestations li {
		margin-left: auto;
		margin-right: auto;
		margin-top: 0px;
		margin-bottom: 0px;
		width: calc((100% / 3) - 2.4rem);
		border: 0px;
		background-color: #FFFFFF;
		border-bottom: 0.5rem solid #dcdcdc;
	}
	.liste_prestations li:nth-child(3n+2){
		border-left: 0.5rem solid #dcdcdc;
		border-right: 0.5rem solid #dcdcdc;
	}
	.liste_prestations p {
		font-size: 0.8rem;
	}
	.liste_prestations h1 {
		font-size: 1rem;
	}
	.listeImpression {
		display: flex;
		flex-wrap: wrap;
		width: 90%;
		margin: auto;

	}
	.listeImpression li {
		background-color: #FFFFFF;
		width: calc((100% / 2) - 1rem);
		margin-right: 1rem;
		margin-left: 0px;
		margin-top: 2rem;
		margin-bottom: 1rem;
		padding-bottom: 3rem;
		border-radius: 3.5rem;
		padding-top: 1rem;
	
	}
	.listeImpression li:nth-child(2n+2){
		margin-right: 0px;
	}
	.listeImpression p {
		font-size: 1rem;
		color: #000000;
	}
	.listeImpression h3 {
		font-size: 1.1rem;
		color: #009ee3;
	}
    .choixCreation {
        display: flex;
    }
    .choixCreation li {
        margin-left: 10%;
        width: calc(90% / 2 - 10%);
        margin: auto;
    }
	.floatRight {
		float: right;
	}
	.floatLeft {
		float: left;
	}
	
}