/* oswald-200 - latin */
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200;
  src: url('./fonts/oswald-v57-latin-200.woff2') format('woff2');
}
/* oswald-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/oswald-v57-latin-300.woff2') format('woff2');
}
/* oswald-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/oswald-v57-latin-regular.woff2') format('woff2');
}

/* oswald-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/oswald-v57-latin-600.woff2') format('woff2');
}

/* roboto-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/roboto-v51-latin-300.woff2') format('woff2');
}

/* roboto-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/roboto-v51-latin-regular.woff2') format('woff2');
}

/* roboto-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/roboto-v51-latin-500.woff2') format('woff2');
}

/* roboto-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/roboto-v51-latin-600.woff2') format('woff2');
}

/* roboto-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/roboto-v51-latin-700.woff2') format('woff2');
}



body{width:100%;background:white;margin:0 auto;text-align:center;font-family:'Roboto', Verdana, Helvetica, sans-serif;
			font-weight:300;font-size:18px; line-height:1.75;color:black;overflow:auto}

*{margin:0;padding:0;box-sizing:border-box}

img{aspect-ratio:auto;max-inline-size:100%;block-size:auto}

header{position:fixed;float:left;text-align:center;width:100%;font-size:16px;z-index:10000}
header img{border:none}

#logo{float:left;width:100%;text-align:center;height:75px;margin-bottom:10px}
#logo a img{height:75px;width:auto}

h1{float:left;width:100%;margin:75px 0 0 0;padding:10px 5%;font:600 30px/60px 'Oswald', sans-serif;text-align:center;clear:both;color:#0050A7;background:#EFF7FA}
h1 span{color:#009DDD}
h1 span span{color:#84DAFF}

hr{float:left;margin:0;height:10px;width:100%;clear:both;border:0;box-shadow:0 10px 10px -10px #64B1CE inset}
hr.souligne{float:none;height:2px;width:50px;min-width:50px;margin:0 auto 10px auto;clear:both;border:0;background:#1371C3;box-shadow:none}


h2{margin:0 0 15px 0;font:600 25px 'Oswald', Verdana, Helvetica, sans-serif;color:#1371C3;text-align:left;overflow:hidden}
h2 span{color:#1371C3}



/**------------------------------ Menu de navigation ---------------------------------------------------------------**/
nav{float:left;text-align:center;width:100%;z-index:10;color:black;background:white}
nav ul{width:100%;text-align:right;list-style-type:none;margin:0 auto;line-height:75px;padding:0 5%}
nav ul li{display:inline-block}
nav ul li a{padding:0 10px;color:black;font:400 18px/75px 'Oswald', Verdana, Helvetica, sans-serif;letter-spacing:0;text-decoration:none;display:block}
nav ul li a.actif, nav ul li ul li a.actif{font-weight:400;color:#1371C3}
nav ul li a.actif:hover, nav ul li ul li a.actif:hover{color:#009DDC;text-decoration:none}
nav ul li a:hover {color:black}

nav ul li.tel{margin:17.5px 0}
nav ul li.tel{float:right}
nav ul li.tel a{background:#1371C3;color:white;font-size:18px;font-weight:400;line-height:40px;padding:0 11px}

nav ul li.home{float:left;padding:0}
nav ul li.home a{margin-right:20px}
nav ul li.home a img{height:75px;width:auto;vertical-align:middle}

nav ul li.contact{border-right:none}

nav ul li ul{position:absolute;top:75px;margin:0;padding:0;border:solid 1px lightgrey;width:auto;z-index:;display:none;background:white;text-align:left}
nav ul li:hover ul{display:block}
nav ul li ul li{padding:0 10px;width:100%;display:block;border-bottom:solid 1px lightgrey}
nav ul li ul li:last-child{border:none}
nav ul li ul li a{line-height:40px}

a.tel{display:none;float:left;font-family:"Oswald";width:100%;font-size:27px;font-weight:400;line-height:60px;color:white;background:#1371C3;text-decoration:none;margin:0;padding:0}

nav h6{display:none;width:100%}
nav h6 a:hover{color:none;text-decoration:none;background:none}
nav select{display:none;color:none;background:none}
/**------------------------------ Menu de navigation ---------------------------------------------------------------**/

#texte{text-align:left;width:100%}
#texte a {color:#1371C3;font-weight:600;text-decoration:none} 
#texte a:hover {text-decoration: underline} 
#texte h1 a {text-align:left;font-size:20px;font-weight:normal}

#texte form{float:left;width:100%;margin:20px 0}
#texte form ul{float:left;width:100%;list-style-type:none;list-style-image:none;padding:0;margin:0}
#texte form ul.remarque{display:none}
#texte form ul li{float:left;margin:5px 2% 10px 0;width:49%}
#texte form ul li:nth-child(2n){margin:5px 0}
#texte form ul li input{font-family: "Roboto";width:100%;height:40px;padding:0 5%;font-size:18px;background:white;border:solid 1px #009DDC}
#texte form ul li select{font-family: "Roboto";width:100%;padding:0 5%;height:40px;font-size:18px;border:solid 1px #009DDC}
#texte form ul li.envoyer input{width:300px;height:40px;background:#1371C3;color:white;border:solid 1px #E6F8FF}
#texte form ul li.message{width:100%}
#texte form ul li.message textarea{font-family: "Roboto";min-width:100%;max-width:100%;min-height:120px;max-height:120px;font-size:18px;padding:10px 2.5%;border:solid 1px #009DDC;background:white}

input, textarea{background:#F2F2F2}

#texte ul{padding-left:40px;list-style-image:url(images/webdesign/puce.png)}

#texte p{margin:0 0 15px 0;text-align:left}

.p1{font-weight:400}
.p2{font-weight:500}
.p3{color:#1371C3;font-weight:500}
.p4{font-weight:300}
#texte p.p5{margin-top:15px}

#accueil{float:left;width:100%;padding:0 5% 0 0}
#accueil a {color:#1371C3;font-weight:600;padding:5px 15px;text-decoration:none}
#accueil img{float:right;aspect-ratio:4/3;width:50%;height:auto;margin:0 0 0 20px}
 

.service-info{color:#1371C3;font-weight:400;padding:10px 0;background:white}

#texte .imageg {float:left;max-width:40%;margin:20px 20px 20px 0;padding:0}
.realisation{float:left;margin:10px 10px 10px 0;padding:0;display:inline;border:solid 3px white}

#texte .imaged{float:right;max-width:50%;margin:0 0 0 20px;border-radius:20px;border:solid 1px white}

.rubrique_ext1{float:left;width:100%;padding:30px 5%;border-bottom:solid 1px #AFE6F5}
.rubrique_ext1:first-child{border-top:solid 1px #AFE6F5}
.rubrique_ext2{float:left;width:100%;padding:30px 5%;border-bottom:solid 1px #AFE6F5;background:#EFF7FA}

.rubrique{float:left;width:100%}
.rubrique img{margin:10px 5px 20px 5px}
.rubrique p.lien{width:100%;margin:0 auto;text-align:center;font-weight:500}
.rubrique p.contact{font-size:18px;font-weight:400}

#texte ul.services{width:100%;padding:0 0 10px 0;display:flex}
#texte ul.services li{width:32%;list-style:none;padding:30px;margin:10px;border:solid 1px #AFE6F5;text-align:center;background:white;border-radius:20px}
#texte ul.services li:hover{background:#D3E9F1;border:solid 1px #0050A7}
#texte ul.services li:hover p{color:#1371C3}
#texte ul.services li a{text-decoration:none;font-weight:300;font-size:18px;color:black;display:block}
#texte ul.services li a:hover{color:#1371C3}
#texte ul.services li img{max-height:100px; width:auto;margin:0;padding:0}
#texte ul.services li h3{margin:0 0 5px 0;padding:0;text-align:center;font-size:20px;color:#333}
#texte ul.services li:first-child{margin-left:0}
#texte ul.services li:last-child{margin-right:0}

h2.service{width:100%;text-align:center;color:#014EAD;font-size:30px}

#texte ul.reparation{width:100%;padding:0;margin:20px 0;list-style:none;display:flex}
#texte ul.reparation li{float:left;width:49%;background:white;margin:0;padding:30px;margin:0;border:solid 1px #AFE6F5;border-radius:20px}
#texte ul.reparation li h2{;line-height:30px;text-align:center}
#texte ul.reparation li:first-child{margin:0 2% 0 0}
#texte ul.reparation li ul{padding:0 0 0 30px}
#texte ul.reparation li ul li{width:100%;padding:0;border-radius:none;border:none;line-height:1.75;list-style-image:url(images/webdesign/puce.png)}


#texte a.tel2{color:#1371C3;font-weight:600;padding:5px 15px;text-decoration:none;border-radius:10px}

.rubrique ul{clear:left;margin-bottom:20px}
.rubrique ul li{margin:0}

.playcolor{float:left;width:50%;padding:0 5%;display:inline-block}
.playcolor:nth-child(2n+1){clear:left}

#texte .intro2 a{color:#1371C3;padding:5px 15px}

.intro2{float:left;width:50%;padding:0 5% 0 0;font-size:18px;line-height:1.75}

#texte .formulaire{float:left;width:50%;padding:0;background:#DCEDFC;border:solid 1px #009DDC;margin-top:0;margin-bottom:20px}
#texte .formulaire h2{background:#1371C3;color:white;text-align:center;line-height:50px;padding:0 5%}
#texte .formulaire h2::after{display:none}
#texte .formulaire form, #texte .formulaire p{padding:0 5%}
#texte .formulaire p{font-weight:400;font-size:20px}
#texte .formulaire form{margin:0}

.center{text-align:center;font-size:17px}

.creations1{width:100%;clear:both;background:white}
.creations2{width:100%;clear:both;background:#f2f2f2;border-bottom:solid 1px #e2e2e2;border-top:solid 1px #e2e2e2}

.rubrique_crea1{float:left;width:50%;text-align:center}
#texte .rubrique_crea1 p{clear:left;text-align:left;width:100%;margin-top:15px}
#texte .rubrique_crea1 p.lien{clear:left;text-align:center;font-family:"Oswald"}
.rubrique_crea1 h2{text-align:center;margin-bottom:10px}
.rubrique_crea1 h2::after, .rubrique_crea2 h2::after{display:none}
.rubrique_crea1 a{margin:0 auto;text-align:center}
.rubrique_crea1 a img{width:100%;height:auto;margin:0 auto;box-shadow:0 0 10px #333;aspect-ratio:16/9}

.rubrique_crea2{float:right;width:50%;text-align:center}
#texte .rubrique_crea2 p{clear:left;text-align:left;width:100%;margin-top:15px}
#texte .rubrique_crea2 p.lien{clear:left;text-align:center;font-family:"Oswald"}
.rubrique_crea2 h2{text-align:center;margin-bottom:10px}
.rubrique_crea2 a{margin:0 auto;text-align:center}
.rubrique_crea2 a img{width:100%;height:auto;margin:0 auto;box-shadow:0 0 10px #333;border:solid 1px lightgrey}


.evidence1{font-weight:bold;color:#006599}
.evidence2{color:#777}
.evidence3{font-weight:500;color:#05447a}
.evidence4{font-weight:500;color:#777}
.region{font-weight:500;color:#FF6600}

.ref1,.ref2{float:left;width:100%}

.ref1 p.intro, .ref2 p.intro{clear:left}

.ref1 span,.ref2 span{color:#006599;font-weight:bold}
.ref1 span.p1{font-weight:500;color:black}

.creation1,.creation2{float:left;width:100%}
.creation3{float:left;width:100%}

footer{float:left;width:100%;color:white;font:400 18px/40px 'Oswald';background:#0050A7}
footer a {font:inherit;font-weight:400;color:#E6F8FF;text-decoration: none;padding:0 5px} 
footer a:hover{text-decoration:underline}

footer #coordonnees{padding:10px 5%}

#tel-horaires{width:100%;padding:15px 5%;font-weight:300;background:#0059BB;color:white;text-align:left;font:200 20px/30px 'Oswald';border-bottom:solid 1px #006BE1}
#tel-horaires ul{width:100%;padding:0;list-style:none}
#tel-horaires ul li{width:100%}

#plan-site, #services-info{width:90%;margin:0 auto;padding:20px 0}

@media only screen and (max-width:960px){
	
	img{max-width:100%;height:auto}
	
	h1{float:left;margin-top:130px;line-height:50px}

	header{width:100%;border:none;height:auto;border-bottom:solid 1px lightgrey}
	#logo{float:none;height:auto;text-align:center}
	#logo img{margin:40px auto 0 auto;padding:0;width:100%;max-width:300px}
	
	#texte .intro2{padding:20px 0}
	
	.intro2, #texte .formulaire{width:100%}
	.depannagepc{display:flex;flex-direction:column-reverse}
	
	.playcolor{width:100%}
	
	a.tel{display:block}
	nav ul li.tel{display:none}
	
	nav{position:fixed;left:0;top:60px;z-index:100;overflow:hidden}
	nav h6{float:left;width:100%;max-width:100%;margin:0;padding:0 5%;display:inline-block;text-align:center;height:75px;border-bottom:solid 1px #AFE6F5;background:white url(images/webdesign/menu-icon-2.png) right center no-repeat}
	nav h6 a{color:white;text-decoration:none;width:80%;margin:0 auto;vertical-align:middle}
	nav h6 a img{width:auto;height:75px}
	nav ul{float:left;width:100%;max-width:100%;margin:0;padding:0;display:none;line-height:40px}
	nav ul li{width:100%;max-width:100%;margin:0;padding:0;text-align:left;height:auto;border-bottom:solid 1px #AFE6F5;line-height:40px}
	nav ul li.tel{line-height:40px;margin:0;border-bottom:solid 1px lightgrey}
	nav ul li.home{display:none}
	nav ul li.intervention a{color:white}
	nav ul li a{line-height:40px}
	nav ul li a.actif{color:#009DDC;background:white;border:none}
	nav ul li a.actif:hover{color:#009DDC;background:white}
	nav:hover ul li ul{width:100%;top:0;display:block;margin:0;padding:0;display:block;position:relative;border-bottom:none}
	nav:hover ul{display:block}
	
	#texte form ul, #texte form ul li, #texte form ul li.message, #texte form ul li input, #texte form ul li select, #texte form ul li.message textarea{width:100%}
	
	#texte form ul li.envoyer input{width:100%;height:40px;background:#1371C3;color:white;border:solid 1px #E6F8FF}
	
	#texte ul.services{width:100%;padding:0;margin:0;display:block}
	#texte ul.services li:first-child{margin:0 0 20px 0}
	#texte ul.services li:last-child{margin:0 0 20px 0}
	#texte ul.services li{width:100%;margin:0 0 20px 0}
	
	#texte ul.reparation{display:block;margin:0}
	#texte ul.reparation li{float:left;width:100%;margin:0;padding:15px 30px;margin:0;border:solid 1px #AFE6F5}
	#texte ul.reparation li:first-child{margin:5% 0}
	#texte ul.reparation li ul li:first-child{margin:0}

	.rubrique_crea1,.rubrique_crea2{float:left;width:96%;margin:0 2%}
	.rubrique_crea1 a img, .rubrique_crea2 a img{margin:0;border:none}


	img.realisation {max-width:96%;width:96%;height:auto;margin:2%;padding:0}
	img.imageg{max-width:50%;float:left;margin:2% 2% 0 0;padding:0;border:none;box-shadow:none}
	img.imaged{max-width:50%;float:right;margin:2% 0 0 2%;padding:0;border:none;box-shadow:none}
	#accueil img{max-width:50%}
	
	footer #coordonnees{width:100%;float:left;text-align:center}
}


@media only screen and (min-width:1160px)
{	
	.creation1, .rubrique_crea1{width:47.5%;margin:0 2.5% 0 0}
	.creation2, .rubrique_crea2{width:47.5%;margin:0 0 0 2.5%}
	.ref1{float:left;width:47.5%;margin:0 2.5% 0 0}
	.ref2{float:right;width:47.5%;margin:0 0 0 2.5%}

}