* { 
margin:auto; 
padding:0px;
box-sizing: border-box; 
font-family:  Verdana, Arial, Helvetica, sans-serif; 
} 
/** top right bottom left */

/** BASIC */
html, body { max-width:100%; height: 100%; background-color: #FFFFFF; font-size: 0.95em; }
#wrapper { display: flex; width: 100%; max-width:100%; flex-direction: column; flex-wrap: wrap;
   BORDER-top: #333333 10px solid;  BORDER-bottom: #333333 10px solid; padding:0 10 0 10; max-width: 1200px;}

footer{padding: 25px 0px 50px 0px; background-color: #333333;}


/** TEXTS */
body, th, td, textarea, select {color: #1b1b1b; text-align: left; background-color: white;}
p, dl, input, i { margin-bottom: 1.0em; }		
ul, ol {text-align: left; margin: 10px; padding-left: 1em; padding-bottom: 0.75em; }
li { margin-bottom: 1.25em; }
section { margin: 0px 0px 0px 0px; padding: 10px 10px 10px 10px; }

h1 {margin: 0px; font-size: 1.5em; font-weight: 600;  padding-top: 0.75em; color: black;}	
h2 {font-size: 1.0em; }
h3 {font-size: 1.1em;}
h4 {}
h5 {margin: 0px;   font-weight: 100; }
h6 {margin: 0px;  font-weight: 100; }
.top_font_color{color: white; font-weight: 600; }
.b {font-weight: 600;}


/** DETAILS */
.section{padding: 15px 10px 15px 40px;}
.section_top{display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: column;  margin: auto; padding: 15px; width: 90%;}
.section_apropos{padding: 40px 25px 25px 25px; }
.apropos3{padding: 15px 20px 10px 20px; border: solid 10px #70D2F3;}
.section_detail{ display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center;}
.section_contact{ display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center;   padding-left:0px; padding-right:20px; padding-bottom: 35px;}
.section_realisations{padding: 5px 25px 15px 35px;}
.section_tarifs{padding: 10px 30px 10px 25px; width: 100%;}

.center {text-align: center;}
.format{color: blue;}
.gauche {float: left;}
.droit { float: left;}
#left { float: left; }
#right { float: right;}


/** couleur1: #6A95F6 bleu pâle */ 
/** couleur1: #000099   bleu foncé */
/** couleur1: #0000FF bleu acier:  */
/**  #00ace6 bleu1  */
/**  #3663B6 bleu2  */
/**  #003699 bleu3  */



/**couleur2:  black*/
.bleu1 {color: #00ace6;}
.bleu2 {color: #3663B6;}
.bleu3 {color: #003699;}
.borderPale{border-left: solid thin #E6E9ED; border-right: solid thin #E6E9ED;}

.bleu2_light {color: #D6E0F7;}
.color2 {color: #c22f42;}
.color3 {color: #dfb020;}
.color4 {color: #3B3B3B;}
.rouge{color: #C22F42;}
.vert{color: #60748F;}
.grey2b{ color: #2b2b2b;}
.reddark {color: #c22f42;}
.bgColor1 {background-color: #D6E0F7;}
.bgColor2 {background-color:#EBF0FB;}
.blue {color: #00ace6;}
.bg_black {background-color: #70D2F3;}
.bg_pink {background-color: #F5CAD5;}
.bg_green{background-color: #20df50;}
.bg_mainColor_2 {background-color: #6A6AD6}
.bg_mainColor2 { background: linear-gradient(to top, #00ace6 0%, white 100%)}
.bg_blue {background-color: #00ace6}
.bg_white{background-color: white;}
.bggrey{background-color: grey;}
.bg_light{background-color: #bbbbbb;}
.white{color: white;}
.black{color: black;}
.bgwhite{background-color: white;}
.bg_responsive{position: relative; }
.bg_responsive ::before {content: "";background: url(images/responsive-design-symbol.svg) center no-repeat; position: absolute; top: 0px;right: 0px;bottom: 0px;left: 0px;opacity: 0.01;}
.bg_list{position: relative; }
.bg_list ::before {content: "";background: url(images/list.svg) center no-repeat;position: absolute;top: 0px;right: 0px;bottom: 0px;left: 0px;opacity: 0.1;}
.bg_book{position: relative; }
.bg_book ::before {content: "";background: url(images/living-room-books-group.svg) center no-repeat;position: absolute;top: 0px;right: 0px;bottom: 0px;left: 0px;opacity: 0.1;}
.bg_tipex{position: relative; }
.bg_tipex ::before {content: "";background: url(images/tipex.svg) center no-repeat;position: absolute;top: 0px;right: 0px;bottom: 0px;left: 0px;opacity: 0.1;}
.bg_domain-registration{position: relative; }
.bg_domain-registration ::before {content: "";background: url(images/domain-registration.svg) center no-repeat;position: absolute;top: 0px;right: 0px;bottom: 0px;left: 0px;opacity: 0.1;}
.bg_size{background-size: 200px 100px;}
.padding20 {padding: 20px;}
.title {background-color: #00ace6; margin-bottom: 15px; }

.pd_bottom_10{padding-bottom: 10px;}
.doublebox {display: flex; justify-content: space-between; flex-wrap: wrap; width = "80%";}

.photo2{background-image: url("images/5.png"); height: 450px;}
.bloc_evenement{display: inline-block;  height: auto; vertical-align:text-top; border-radius: 10px; padding: 5px;  margin: 15px 15px 5px 0px; 
	border-style: solid; border-width: thin; border-color: #333333; background-color: white;}
.bloc-collections { display: inline-block; vertical-align:text-top; border-radius: 10px; padding: 5px;  margin: 5px; background-color: white; }
.bloc-contact { display:block; vertical-align:text-top;}
.border{border: solid #333333 1px;}
.border_top {border-top: solid 2px #333333;}
.entete {display: flex; justify-content: space-around; flex-wrap: wrap; padding: 10px 20px 0px 20px; flex-direction:row; padding-bottom: 10px;}
.menu {border: solid 4px; width:50px; height: 50px; border-radius:15px; padding-top:15px;}
/** weight et Height de l'entête: espace occupé par le SVG pixel par défaut si pas d'unité indiqué */
.photo3 {background-image: url("images/responsive-design-symbolb.svg"); opacity: 0.5; height: 105px;}
.photo4 {background-image: url("images/list.svg"); opacity: 0.5; height: 100px;}
.photo5 {background-image: url("images/living-room-books-groupc.svg"); opacity: 0.5; height: 105px;}
.photo6 {background-image: url("images/tipex.svg"); opacity: 0.5; height: 100px;}
.photo7 {background-image: url("images/domain-registrationc.svg"); opacity: 0.5; height: 105px;}
/** HEADER */

nav {display: flex; flex-wrap: wrap; justify-content: flex-end; align-items:center; padding-bottom: 5px; padding-top: 5px;}
nav a {font-weight: 800;  max-height: 45px;}
.top {display: flex; flex-direction: row; justify-content: space-between; background-color: #333333; padding: 2px 20px 0 10px;}
.top2 {display: flex; justify-content:space-between; background-color: #333333; margin:10px; padding: 10px; align-items: center;}
.nav{color: white; background-color: gray; padding: 0.5em 0.5em 0.5em 0.5em;}
/** LINKS */

a:visited {color: #1b1b1b; text-decoration: none;}
a:link {color: #5b5b5b; text-decoration: none;}
a:hover {color: #0000FF; text-decoration: none; }
a:active {color: #0000FF; text-decoration: underline;}

a.white:visited {color: white;}
a.white:link {color: white;}
a.white:hover {color: white;text-decoration: underline;}
a.white:active {color:white;}

a.rouge:visited {color: #C22F42;}
a.rouge:link {color: #C22F42;}
a.rouge:hover {color: #C22F42;text-decoration: underline;}
a.rouge:active {color:#C22F42;}

.menu{display: block;}
.deco{border: thin dotted white;  padding: 2px;}
		.services{display: flex; flex-wrap: wrap; justify-content: center; flex-direction: row;}
		.services > div{display: flex; flex: 80%; flex-wrap: wrap; margin:10px 20px 10px 0px; justify-content: space-between; 
		flex-direction: column; padding: 1px; background-color: #00ace6;}
		.services2{ display: block; margin: 5px; background-color: white; padding: 15px 15px 0 15px;  }	
	
		
		
		.services3{display: flex; flex-wrap: wrap; justify-content: center; flex-direction: row;}
		.services3 > div{display: flex; flex: 30%; flex-wrap: wrap; margin:5px; justify-content: space-between; flex-direction: column; 
			 background-color: #c22f42;}
		.services4 {display: flex; flex-direction: column; }
		.services5{ display: flex; margin: 1px 1px 0px 1px; flex-direction: column; align-items: center; padding: 15px 15px 0px 15px; 
		background-color: white; height: 225px; }	
		.services6 {background-color: #F29EB5; padding: 15px 0px 10px 0px;}
		.services7 {background-color: #F0A611; padding: 15px 0px 10px 0px;}
		.rev6for7{}
		.rev7for6{}

		
		.grad{background-image: linear-gradient(to right, #dfb020 , yellow, #dfb020 , yellow, #dfb020 , yellow);}
.modalites{padding:20px 15px 5px 10px; font-weight: 600;}				
.blockshad1 {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}	
.blockshad2 {box-shadow: 5px 5px 5px #dfb020;}
.blockshad3 {box-shadow: 5px 5px 5px grey;}	

		.bloc_50 { }

.img_entete	{ padding-right: 20px;}	

/** BOUTIQUE */
		
		a.bouton-ajouter  {display:inline-block; width:130px; line-height:28px; text-align:center; vertical-align:middle; 
		background:url('/reflexions/includes/ajouter-au-panier.jpg') no-repeat; color:white; text-decoration:none;}
		a.bouton-ajouter:hover {background:url('/reflexions/includes/ajouter-au-panier1.jpg') no-repeat;}
		a.bouton-ajouter:active {background:url('/reflexions/includes/ajouter-au-panier.jpg') no-repeat;}
		
		a.bouton-supprimer {display:inline-block; width:17px; line-height:15px; background:url('/reflexions/includes/supprimer1.jpg') no-repeat; color:white; text-decoration:none;}
		a.bouton-supprimer:hover { display:inline-block; width:17px; line-height:15px; background:url('/reflexions/includes/supprimer2.jpg') no-repeat; color:white; text-decoration:none;}
		a.bouton-supprimer:active {background:url('/reflexions/includes/supprimer3.jpg') no-repeat;}
		
		a.bouton-modifier {display:inline-block;width:130px;line-height:28px;text-align:center;vertical-align:middle;background:url('/reflexions/includes/modifier.jpg') no-repeat;color:white;text-decoration:none;}
		a.bouton-modifier:hover {background:url('/reflexions/includes/modifier2.jpg') no-repeat;}
		a.bouton-modifier a:active {background:url(/reflexions/includes/) no-repeat;}

		.panier { width: 160px; height: 50px; background-image:url('/reflexions/includes/panier4am.gif'); background-size:36px 29px; background-repeat:no-repeat; background-position:left bottom; padding-top: 20px; padding-left: 15px; margin-left:25px;}

		.bloc0, .bloc1 {border-radius: 10px; padding: 5px;  margin: 5px 5px 5px 0px; border: 2px solid #5b5b5b;}		
		.bloc1 {border-radius: 10px; padding: 5px;  margin: 5px 5px 5px 0px; border: 2px solid #5b5b5b;}	
		
		.bloc2b {display: flex; flex:100%; flex-direction: row; border-radius: 10px; padding: 5px; margin: 5px 5px 5px 0px;}
		.bloc3b, .bloc4b {width: 50%; border-radius: 10px; padding: 5px; margin: 5px 10px 15px 0px; border: 2px solid #5b5b5b;}
		.bloc5b {flex: 100%;  display: flex; flex-direction: column; margin: 0px;}
		#devise {display: block;}
		.devise {width: 100%; text-align: left;}
		.cv {flex: 100%;  display: flex;}
		
		.bout {display: flex; flex-direction: column; width: 100%; margin:0px;}
		.bout p:nth-child(3) {text-align: left; margin: 5px;}
		.boutique_e {text-align: left; padding-left: 100px;}
		/** Formulaire */
		.boutique input[type="text"]{ background-color: #FFFFFF; border: 1px solid #D6D9DC; border-radius: 3px; width: 25%; padding: 7px; font-size: 14px;}
		

		.formulaire { background-color: #F6F7F8; border: 1px solid #D6D9DC; border-radius: 3px; width: 80%; padding: 20px; margin: 10px 0 40px 0;}


		.formulaire-item { margin-bottom: 40px; }		
		.formulaire-item input[type="text"],.formulaire-item input[type="tel"], .formulaire-item input[type="password"],
		.formulaire-item input[type="email"] { background-color: #FFFFFF; border: 1px solid #D6D9DC; border-radius: 3px; width: 40%; padding: 7px; font-size: 14px;}
		.formulaire-item label {margin-bottom: 15px;} 
		/** bouton submit*/
		.formulaire-item button { font-size: 16px; font-weight: bold; color: #FFFFFF; background-color: #B3C0C8; border: none; border-radius: 3px; padding: 10px 40px; cursor: pointer;}
		.formulaire-item button:hover { background-color: #AAB2B7;}
		.formulaire-item button:active {background-color: #949799;}
		/** met du rouge si erreur ex pas de @*/
		.formulaire-item input[type='text']:invalid,
		.formulaire-item input[type='email']:invalid {border: 1px solid #D55C5F; color: #D55C5F; box-shadow: none; /* Remove default red glow in Firefox */
		 }
		 
		 /** textarea*/
		.formulaire-item textarea {border: 1px solid #D6D9DC; border-radius: 3px; min-height: 200px; margin-bottom: 10px; padding: 7px; resize: none;}
 		/** on peut aussi mettre font-family: "Helvetica", "Arial", sans-serif; font-size: 14px;*/
		.formulaire-item .instructions { color: #999999; font-size: 14px; margin-bottom: 30px;}	 
		
		 /** Checkbox*/
		.formulaire-item .checkbox-label { margin-bottom: 0;}



/*Extra small devices: phones*/
	@media only screen and (max-width: 630px) 
	{
			
		.img0s { margin: auto; padding:3px;}
		.img1 { float: left; padding:3px;}
		.img1_ent { padding-right: 10px; padding-bottom: 10px; width: 75px; height: 75px;}
		.img2 {margin: auto; padding:100px;}
		.img3 {margin: auto; display: block;  max-width: 100%; }
		.contenu-image {margin: auto; display: block; padding: 3px;  max-width: 100%;}
		.imageServices {width: 30%; height: 30%;}
		.imgPanier {margin: auto; padding: 3px;  height: 60px ; border: thin dotted;}
		.bloc-collections { width:100%; }	
		.blocs_50 { 
		display: flex; flex:1; 
		flex-wrap: wrap;		
		height: auto; 
		vertical-align:text-top; 
		}
		.header_image { background: url(images/tablet3.jpg) no-repeat right top; height: 250px; padding: 15px 0 35px 45px; 
		display: flex; flex-direction: column; background-color: white;}
		.doublebox {flex-direction: column;}
		.blocmenu {width: auto; padding: 5px; margin: 2px; display: flex;  justify-content: center; align-items: center; background-color: gray;}	
	
		.borderContact{border-bottom: solid #5b5b5b thin;}
		.mg_top_contact{padding-left: 20px;}	
		.contact_padding_bloc_2{padding-top:0px;}
		.mini{display: block; }
		.mini2{margin: auto;}
		.top {flex-direction: column; padding: 2px 10px 0 10px;}
		.lineTop {background-color: white; width: 100%; height: 1px;}	

		
		.services3 {padding: 0 10px 0 10px;}
		.services3 > div{flex: 80%;}
		
		
		.bloc2b {flex-direction: column; }
		.bloc3b, .bloc4b {width: 100%;}
		.blocdevise {display: inline-block; border-radius: 5px; padding: 5px; margin: 2px; border: 1px solid #b3c0c8;}

		/** FOOTER */
		
		.test {color: blue;}
		nav a {font-size: 0.75em;}
		nav {justify-content: center;}
	}


/*Small devices: portraits tablets, large phones*/		
	@media only screen and (min-width: 631px) and (max-width: 960px) 
	{	

		/** IMG */
		.img0s { margin: 10px 10px 10px 10px; padding:3px;}
		.img1 { float: left; margin: 5px 10px 5px 5px;}
		.img1_ent { float: left; margin: 5px 10px 5px 15px; padding-bottom: 10px;}
		.img2 { float: right; margin: 3px 0px 10px 15px; padding:3px;}
		.img3 { float: right; margin: auto;}
		.contenu-image {margin: auto; padding:3px; max-width: 100%;}
		.imgPanier {margin: 10px; padding: 3px; height: 80px ; border: thin dotted;}
		.imageServices {}
		.header_image { background: url(images/tablet.jpg) no-repeat right top; height: 400px; padding: 15px 0 35px 45px; display: flex; 
		flex-direction: column; background-color: white;}
		/** blocs pour textes divers (arbres sécuritaires, dangereux), page du Post */
		.bloc-collections { width:45%; }
		
		.blocs_50 { 
		display: flex; flex:1; 
		flex-wrap: wrap;		
 
		vertical-align:text-top; 
		}
		
		.doublebox {flex-direction: row;}
		.blocmenu {width: auto;  padding: 5px; margin: 2px; display: flex;  justify-content: center; align-items: center; background-color: gray;}
		.borderContact{border-bottom: solid #5b5b5b thin;}
		.mg_top_contact{padding-left: 20px;}	
		.contact_padding_bloc_2{padding-top:20px;}
		.mini2{}
		.top2 {padding: 2px 20px 0 10px; }


		.lineTop {display: none;}
		.services3 {padding: 0 15px 0 15px;}
		.services3 > div{flex: 40%; }
		.rev6for7{background-color: #F0A611;}
		.rev7for6{background-color: #F29EB5;}

		/* FOOTER */
		logo {
		background: url(images/header-2.jpg) no-repeat right bottom;
		padding: 15px 0 35px 45px;}
		.test {color: red;}
		
		
		.bloc2b {flex-direction: column; }
		.bloc3b, .bloc4b {width: 100%;}
		.blocdevise {display: inline-block; border-radius: 10px; padding: 10px; margin: 5px; border: 1px solid #b3c0c8;}
}	
	
/*Large devices: pc*/
	@media only screen and (min-width: 961px )
	{
		#wrapper { flex: initial; flex-direction: column;}
		/** IMG */
		.img0s {padding:3px; margin: auto; height:450px;}
		.img1 { float: left; margin: 5px 10px 5px 10px; padding: 3px;}
		.img1_ent { float: left; margin: 5px 10px 5px 15px; padding: 3px;  padding-top: 20px; }
		.img2 {float: right; margin: 3px 10px 10px 15px; padding:3px;}
		.img3 {float: right; margin: 3px 10px 10px 15px;}
		.img_logo { float: left; margin: 10px 0px 10px 10px; padding:3px;}
		.imgPanier {padding: 3px;  height: 100px ; border: thin dotted;}
		.contenu-image {}
		.imageServices {}
		.bloc-collections { width: 45%;}
		.bloc_50 { 
		display: flex; flex:1; 
		flex-wrap: wrap; 		
		height: auto;		
		vertical-align:text-top;
		padding: 10px 0px 0px 10px;
	
		}


		.mille { width:1000px; margin: auto; }
		.doublebox {flex-direction: row;}
		.section_detail{flex-direction: row;  margin: auto; width:1000px;}
		.section_contact{justify-content: space-between; flex-direction: row;  margin: auto; width:1000px; }
	
		.section_realisations{  margin: auto; width:1000px; }
		.section_apropos{ margin: auto; width:1000px;}
		.section_tarifs{ border-left: solid thin white; border-right: solid thin white;margin: auto;}
		.bloc-contact { width:50%; }
		.blocmenu {text-align: center; padding: 10px; margin: 5px; display: flex; justify-content: center; align-items: center; background-color: gray
		.borderContact{border-right: solid #5b5b5b thin;}
		.mg_top_contact{padding-top: 20px;}	
		.contact_padding_bloc_2{padding-top:85px;}
		.mini{display: block; padding-top: 50px;}
		.mini2{}
		.top2 { padding: 2px 20px 0 10px; }
		.lineTop {display: none;}		
		.header_image {background: url(images/tablet2.jpg) no-repeat right top; height: 700px; padding: 35px 0 50px 45px; display: flex; 
		flex-direction: column; background-color: white;}
		.test {color: green;}
		.photo3 { background-position: center;  background-repeat: no-repeat;  height: 1000px;  background-size: 300px 300px;}
		.photo4 { background-position: center;  background-repeat: no-repeat; height: 200px;}
		.photo5 { background-position: center;  background-repeat: no-repeat; height: 200px;  background-size: 150px 150px;}
		.photo6 { background-position: center;  background-repeat: no-repeat; height: 200px;}
		.photo7 { background-position: center;  background-repeat: no-repeat; height: 280px; background-size: 200px 200px;}
		#devise {display: block;}
		.blocdevise {display: block;}
	
	}
	/*XX Large devices: pc large screen*/
	@media only screen and (min-width: 1441px )
	{
					
	}