/* valeurs par d�faut modifiables dans les sections suivantes */

/* svp, ne touchez jamais aux valeurs par d�faut, merci       */

section.s-overflow /*	div sp�ciale pour scroller en x ou y */ {
  overflow-x: auto;
  overflow-y: auto;
}
div.float-left {
  float: left;
  padding: 1rem;
  width: 49%;
  box-sizing: border-box;
}
div.float-right {
  float: right;
  padding: 1rem;
  width: 49%;
  box-sizing: border-box;
}
div.float-left img,
div.float-right img {
  width: 100%;
  height: auto;
}
div.float-stop {
  clear: both;
}
div.float-fin::after {
  content: "";
  clear: both;
}
div.grille-defaut {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
div.grille-defaut figure {
  margin: 0.5rem; /*	margin des colonnes, donne donc 1rem MINIMUM (0.5rem + 0.5rem) entre 2 colonnes*/
  text-align: center; /* pour centrer l'image et le texte dans la colonne */
  width: 140px; /* 	la largeur minimum est de 100px mais cela d�pend de l'icone ou de l'image,
					du texte � afficher, un titre simple en petit font size, va entrer dans 100px
					on fonctionne en px fixe ici, PAS DE POURCENTAGE*/
  /*width: 270px;	/*	la largeur MAXIMUM pour les cellulaires est de 320px en comptant les marges
					ce qui donne donc un grand maximum de 270px par colonne (1rem = +/- 10px)
					car il faut compter les marges des conteneurs de la grille fix�e au minimum � 1rem
					il est d�sagr�able de refaire tout le style quand il ne r�pond pas aux limites...*/
}
div.grille-defaut img	/* 	il n'est d'usage d'utiliser une image plus grande que 270px dans le flex pour
					avoir un responsive convenable, il faut utiliser un autre mod�le si nous avons
					des images plus larges que 270px, on fonctionne en px fixe ici, PAS DE POURCENTAGE*/ {
}
div.grille-defaut figcaption	/* 	figcaption h�rite de son parent figure. En remettant ici le texte � gauche
						il n'y aura que l'image centr�e dans la colonne
						on fonctionne en px fixe ici, PAS DE POURCENTAGE*/ {
  text-align: left;
}

table.table-defaut {
  border: 1px solid black;
  width: 100%;
}
table.table-defaut th /* header, titre */ {
  border-bottom: 1px solid grey;
  text-align: left;
  vertical-align: middle;
  padding: 8px 15px;
}
table.table-defaut td /* data, cellule */ {
  border-bottom: 1px solid grey;
  padding: 8px 15px;
}
table.table-defaut td img	/* image dans le cellule */ {
  width: 100%;
  max-width: 270px;
  max-height: 200px;
}
/**************************************************************************************************/

/* Dans cette section, vous avez un canevas css de base, prendre une copie et coller � la fin dans l'ordre des pages et des positions */

/* Toutes les sections de la home de m01 � m99, chaque page du menu a une centaine, le premier est m101, le deuxi�me est m201 etc...       */

/* nom de la page et ou de la position en t�te du css */
/******************************************************/
section.m00 {
  padding: 1rem;
}
section.m00 header {
}
section.m00 header h1 {
}
section.m00 header hr {
  width: 50%;
  margin: 0 auto;
  color: pink;
}
/******************************************************/
div.float00 {
  /*border: 2px solid pink;		*/
  /*background-color: pink;		*/
}
div.float00 div.float-left {
  /*padding: 1rem;	*/
  /*width: 49%;		*/
}
div.float00 div.float-right {
  /*padding: 1rem;	*/
  /*width: 49%;		*/
}

div.float00 div.float-left img,
div.float00 div.float-right img {
  /*max-width: 100%;		*/
  /*max-height: 100%;		*/
}
/******************************************************/
div.grille00 {
}
div.grille00 figure {
  /*margin: 0.5rem;		*/
  /*text-align: center;	*/
  /*width: 140px;			*/
}
div.grille00 img {
}
div.grille00 figcaption {
  /*text-align: left;		*/
}
/******************************************************/
table.table00 {
  /*border: 1px solid black;		*/
  /*border-collapse: collapse;	*/
  /*border-collapse: separate;	*/
  /*border-spacing: 10px 50px;	*/
  /*empty-cells: hide;			*/
  /*table-layout: fixed;			*/
  /*width: 100%;					*/
}
table.table00 tr /*	row, ligne 	*/ {
}
table.table00 tr:nth-child(even) /* OU odd */ {
  /*background-color: yellow		*/
}
table.table00 tr:hover {
  /*background-color: green;		*/
}
table.table00 tr.ligne00 /*	si nous avons une ligne particuli�re que nous d�sirons styliser */ {
}
table.table00 th /* header, titre 	*/ {
  /*border-bottom: 1px solid grey;	*/
  /*border: 1px solid black;			*/
  /*height: 50px;						*/
  /*text-align: left;					*/
  /*vertical-align: middle;			*/
  /*padding: 8px 15px;				*/
  /*background-color: blue;			*/
  /*color: white;						*/
}
table.table00 td /* data, cellule */ {
  /*border-bottom: 1px solid grey;	*/
  /*border: 1px solid black;			*/
  /*height: 30px;						*/
  /*text-align: center;				*/
  /*vertical-align: bottom;			*/
  /*padding: 8px 15px;				*/
}
table.table00 td img	/* image dans le cellule, on ne d�passe pas 270px pour le responsive */ {
  /*width: 100%;				*/
  /*max-width: 270px;			*/
  /*max-height: 200px;		*/
}
table.table00 td.cell00 /*	si nous avons une cellule particuli�re que nous d�sirons styliser */ {
  /*padding: 0;				*/
  /*width: 270px;				*/
  /*max-width: 270px;			*/
}
/******************************************************/

/***********************************  mentions l�gales - politique de confidentialit� - Conditions g�n�rales de vente *****************************/
div.legal {
  padding: 1rem; /*	padding par d�faut */
}

/*	la div h00 sert au titre si on a besoin de plusieurs balises dans la partie titre, sinon la h seule*/

div.legal h1 {
  font-size: ;
  line-height: ; /*	<= font-size + padding */
}
div.legal h2 {
}
div.legal hr {
  width: 50%;
  margin: 0 auto;
  color: pink;
}
/************************************************************************************************************
			V o t r e		c o d e		v a		�	p a r t i r		d ' i c i			
Prenez une copie du mod�le00 m00 float00 grille00 table00 etc... et copiez le code ici � la fin
Incr�mentez le mod�le m01 float01 etc... aux noms de balises de votre copie et codez
/****************************************************************************************************************/
section.b20 {
  margin: 0.5rem;
  margin-top: 4rem;
  border: 1px solid #707070ba;
  border-radius: 10px;
  box-shadow: 1px 1px 5px #707070ba;
  padding: 3rem;
  text-align: center;
  min-height: 320px;
}
section.b20 header {
}
section.b20 header h2 {
  padding-bottom: 2rem;
}
section.b20 header h3 {
  padding-bottom: 2rem;
  color: #f23e3e;
}
section.b20 a {
  padding: 5px 10px;
  border: 1px solid #f23e3e;
  color: #191919;
}
div.arriere {
  /* background: url("../../../images/tmpl/gepar-1.jpg") no-repeat;
  background-size: cover;
  background-position: center;
  filter: blur(4px); */

  margin: 0.6rem;
  margin-top: 1px;
  border-radius: 10px;
  min-height: 200px;
  position: absolute;
  min-width: 64.8%;
  min-height: 339px;
  opacity: 0.5;
}
section.b30-1 {
  margin: 0.5rem;
  margin-top: 4rem;
  border: 1px solid #707070ba;
  border-radius: 10px;
  box-shadow: 1px 1px 5px #707070ba;
  padding: 3rem;
  min-height: 280px;

  background: url("../../../images/tmpl/gepar-1.jpg") no-repeat;
  background-size: cover;
  background-position: center;

  /*width: 100%;*/
}

section.b30-1 h3 {
  padding-bottom: 2rem;
  color: #f23e3e;
}
section.b30-1 div.gauche {
  float: left;
}
section.b30-1 div.droite {
  float: right;
  width: 40%;
  text-align: left;
  filter: blur(0px);
}
section.b30-2 div.arret {
  clear: both;
}

section.b30-2 {
  margin: 0.5rem;
  margin-top: 4rem;
  border: 1px solid #707070ba;
  border-radius: 10px;
  box-shadow: 1px 1px 5px #707070ba;
  padding: 3rem;
  text-align: center;
  min-height: 280px;
}
section.b30-2 a {
  color: black;
}
div.notre-societe {
  width: 80%;
  margin: 1rem auto;
  padding: 1rem;
}
div.nos-services {
  width: 80%;
  margin: 1rem auto;
  padding: 1rem;
}

/* ///////////////////////////////////////////////////////////////////// EDITION EDWIN ///////////////////////////////////////////////////////////////////// */

#b30-i-manche {
  max-width: 1366px;
  margin: 0 auto;
}