html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {margin: 0; padding: 0;}
table {border-collapse: collapse;}
img {border: none;}
ul, ol {margin-left: 20px; padding-bottom: 20px; line-height: 1.6em;}
p {padding-bottom: 15px; text-align: justify;}
.clear {height: 1px; clear: both;}
.clear-last {height: 80px; clear: both;}
.clear-last-contact {height: 60px; clear: both;}

a {text-decoration: none; color: #3d3d3d;}
a:hover {text-decoration: underline;}

html {height: 100%;}
body {position: relative; min-height: 100%; font-family: 'PT sans', arial; font-size: 14px; color: #3d3d3d; line-height: 1.4em;}

h1 {font-size: 18px; padding-bottom: 25px;}
h2 {font-size: 18px; padding-bottom: 25px;}
h3 {font-size: 16px; padding-bottom: 20px; margin-top: 45px;}
h1 .fleche {color: white; background-color: #b91d29; display: inline-block; padding: 2px 10px; font-weight: normal; text-transform: uppercase; font-size: 16px;}
h2 .fleche {color: white; background-color: #b91d29; display: inline-block; padding: 2px 10px; font-weight: normal; text-transform: uppercase; font-size: 16px;}
h3 .fleche2 {color: white; background-color: #D08512; display: inline-block; padding: 2px 10px; font-weight: normal; text-transform: uppercase; font-size: 15px;}

h2.titre, h1.titre {font-size: 33px; text-align: center; text-transform: uppercase; text-align: center; padding-bottom: 50px; line-height: 40px;}

#en-tete {background-color: #232323;}
#en-tete .fond-haut {height: 160px; text-align: center; background: url("/img/fond-diabolicom.jpg") no-repeat center center;}
#en-tete .bandeau-haut {color: #ccc; text-align: center; line-height: 26px; padding: 0 10px;}

#page {width: 100%;}
#page .page2 {width: 100%; max-width: 1040px; margin: auto;}
#page .contenu {padding: 50px 20px 50px 20px;}
#page .fond-gris {background-color: #F2F2F2;}

.realisation {float: left; width: 290px; height: 330px; margin-bottom: 35px; margin-right: 38px; padding: 8px; background-color: white; border: 1px solid #dadada;}
.realisation.last {margin-right: 0;}
.realisation .titre {font-weight: bold; padding-top: 6px; font-size: 15px;}
.realisation .site a {color: #7C7C7C;}
.realisation .texte {padding-top: 8px; font-size: 13px;}
.realisation .type {font-size: 13px; font-weight: bold; padding-top: 15px;}
.realisation .type img {vertical-align: -5px; width: 100%;}
.realisation img {width: 100%;}

#page.page-realisations .contenu {padding-left: 0; padding-right: 0;}
#page.page-realisations .realisation {margin-right: 19px; margin-left: 19px;}

.lien-all-rea {font-size: 18px; font-weight: bold; text-align: center;}

.col-page-left {float: left; width: 470px; margin-right: 60px;}
.col-page-right {float: left; width: 470px;}

.col-left-contact {float: left; width: 570px;}
.col-right-contact {float: left; width: 370px; margin-left: 60px; font-size: 18px; text-align: center;}

#formulaire_contact input, #formulaire_contact textarea {margin-bottom: 6px; margin-top: 2px; border: 1px solid #cccccc; padding: 3px; font-family: 'PT sans', arial; font-size: 13px;}
#formulaire_contact textarea {width: 420px; height: 180px;}
#formulaire_contact .resp2 {display: none;}
#formulaire_contact select {font-family: 'PT sans', arial; font-size: 14px;}

#carte {width: 100%; height: 450px; margin: auto; border-top: 2px solid #7E7E7E;}

#reseaux {height: 120px; width: 910px; margin: auto;}

#pied-de-page {position: absolute; bottom: 0; width: 100%; background-color: #232323; color: white; height: 60px; text-align: center; padding-top: 10px; line-height: 21px;}
#pied-de-page a {color: white;}
#pied-de-page span {font-family: arial;}
#pied-de-page .retour {display: none;}
#pied-de-page .r1 {display: none;}
#pied-de-page .r2 {display: none;}
#pied-de-page .liens {color: #ccc;}
#pied-de-page .liens a {color: #ccc; font-size: 13px;}

.display-mobile-10 {display: none;}
.display-mobile-11 {display: none;}

@media screen and (max-width: 1055px)
{
	.list-realisation {width: 654px; margin: auto;}
	#page.page-realisations .list-realisation {width: 692px;}
	.realisation.last {margin-right: 38px;}
	.realisation.last2 {margin-right: 0;}
	.list-realisation .site3 {display: none;}
	
	.col-page-left {margin-right: 0; width: 100%;}
	.col-page-right {width: 100%;}
	
	.informatique .titre {padding-bottom: 0 !important;}
	.informatique {text-align : center;}
	.informatique .col-page-left {float: none; max-width: 100%;}
	.informatique .col-page-left img {max-width: 100%;}
	.informatique h3 {margin-top: 0;}
	.informatique p {text-align: center;}
	.informatique .col-page-right {padding-bottom: 40px;}
	
	.print-objet .titre {padding-bottom: 0 !important;}
	.print-objet {text-align : center;}
	.print-objet .col-page-left {float: none; max-width: 100%;}
	.print-objet .col-page-left img {max-width: 100%;}
	.print-objet h3 {margin-top: 0;}
	.print-objet p {margin-top: 0; padding-bottom: 40px; text-align: center;}
	
	.col-right-contact {display: none;}
	.col-left-contact {float: none; width: 580px; margin-right: 0; margin: auto; padding-bottom: 60px;}
	.col-left-contact h2 {text-align: center;}
}

@media screen and (max-width: 950px)
{
	#reseaux {display: none;}
}
@media screen and (max-width: 800px)
{
	.display-mobile-10 {display: inline;}
	.no-display-mobile-10 {display: none;}
	
	#pied-de-page {height: 75px;}
}

@media screen and (max-width: 740px)
{
	#pied-de-page .r1 {display: inline;}
	#pied-de-page .p2 {display: none;}
	#pied-de-page {height: 95px;}
	.clear-last {height: 100px; clear: both;}
	.clear-last-contact {height: 80px; clear: both;}
}

@media screen and (max-width: 710px)
{
	.list-realisation {width: 308px; margin: auto;}
	#page.page-realisations .list-realisation {width: 308px;}
	
	.realisation.last {margin-right: 0;}
	.realisation.last2 {margin-right: 0;}
	.realisation {margin-right: 0;}
	
	#page.page-realisations .realisation {margin-right: 0; margin-left: 0;}
}

@media screen and (max-width: 600px)
{
	#carte {display: none;}
	
	.col-left-contact {width: 100%;}
	#formulaire_contact .resp1 {display: none;}
	#formulaire_contact .resp2 {display: block;}
	#formulaire_contact table {width: 100%;}
	#formulaire_contact textarea {width: 100%;}
}

@media screen and (max-width: 480px)
{
	#pied-de-page .retour {display: inline;}
	#pied-de-page .p1 {display: none;}
	#pied-de-page .r1 {display: none;}
	#pied-de-page .r2 {display: inline;}
	#pied-de-page .p5 {display: none;}
	#pied-de-page {height: 135px;}
	.clear-last {height: 140px; clear: both;}
	.clear-last-contact {height: 120px; clear: both;}
}

@media screen and (max-width: 440px)
{
	#pied-de-page .r2 {display: inline;}
	#pied-de-page .p5 {display: none;}
	#pied-de-page {height: 155px;}
	.clear-last {height: 140px; clear: both;}
	.clear-last-contact {height: 120px; clear: both;}
	
	.site-portails img {width: 100%}
}

@media all and (max-width: 400px)
{
	.display-mobile-11 {display: inline;}
	.no-display-mobile-11 {display: none;}
}

@media screen and (max-width: 382px)
{
	#logo {width: 100%;}
}