html {
    font-family: Helvetica,sans-serif;
    -ms-text-size-adjust:auto;
    -webkit-text-size-adjust:auto
}
* {
    margin:0;
	padding: 0
}
img,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
    display: block
}
img, object, embed, canvas, video, audio, picture {
    max-width: 100%;
	height: auto;
       _width: 100%; /* IE6 seulement */
}
a {
	text-decoration: none
}
table {
    border-collapse:collapse;
    border-spacing:0
}
td,th {
    padding:0
}
ul {
	list-style-type: none
}

body {
    -webkit-tap-highlight-color:#FFF498
}
.bigger,
.big,
h1,
h2,
h3,
h4,
h5,
h6,
strong {
    font-weight: bold
}
h1, h2, h3, h4, ul, menu {
	margin: 0.5em 0.5em
}
	h1, h2 {
	font-style: italic;
	font-weight: 100
}
em {
    font-style:italic
}
/* class */
.list-circle {
	list-style-type: circle;
	list-style-position: inside
}
.list-circle li{
	text-indent: 0.2em
}
.block {
	display: block
}
.float-l {
	float: left;
	margin: 0px 5px
}
.center {
	text-align: center
}
.white {
	color: white
}
.info {color: red;
	text-shadow: 2px 2px 2px black;
	font-weight: bold;
	font-size: 1.2em;
}
.dble-marge {margin-top: 1.5em; margin-bottom: 1.5em;}

@media screen and (max-width: 767px) {/*  nav  */
	.menu {
		font-size: 0.8rem;
		display: flex;                /* Transformation en flexbox */
		padding:0;                    /* Suppression des marges internes */
		justify-content: center	/* Alignements des liens dans le menu */
	}
	.menu a {
		display:block;                /* Transformation en block */
		min-width: 4.3em;             /* Largeur minimale des liens */   
		margin: 0.2rem;               /* Marges externes */
		padding: 0.2rem 0;            /* Marges internes */
		text-align: center;           /* Centrage du texte */   
		background-color: #1ABC9C;    /* Arrière-plan */
		color: #fff;                  /* Couleur du texte */
		text-decoration: none;        /* Suppression du soulignement */
		border: 1px solid #fff;       /* Ajout d'une bordure */
		border-radius: 20px;           /* Arrondis des bordures */
		transition: all 1s ;          /* Ajout des effets de transition */
	}
	.menu a:hover,
	.menu a:hover.actif {
		background-color: #ed2794;
		color: #ffe843;
		border-color: #ffe843;
	}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {/*  nav  */
	.menu {
		display: flex;                /* Transformation en flexbox */
		padding:0;                    /* Suppression des marges internes */
		justify-content: flex-end;/* Alignements des liens dans le menu */
	}
	.menu a {
		display:block;                /* Transformation en block */
		min-width: 8rem;             /* Largeur minimale des liens */   
		margin: 0.5rem;               /* Marges externes */
		padding: 0.4rem 0;            /* Marges internes */
		text-align: center;           /* Centrage du texte */   
		background-color: #1ABC9C;    /* Arrière-plan */
		color: #fff;                  /* Couleur du texte */
		border: 1px solid #fff;       /* Ajout d'une bordure */
		border-radius: 20px;           /* Arrondis des bordures */
		transition: all 1s ;          /* Ajout des effets de transition */
	}
	.menu a:hover,
	.menu a:hover.actif {
		background-color: #ed2794;
		color: #ffe843;
		border-color: #ffe843;
	}
}
@media screen and (min-width: 1024px) {/*   nav   */
	.menu {
		display: flex;                /* Transformation en flexbox */
		padding:0;                    /* Suppression des marges internes */
		justify-content: space-around;/* Alignements des liens dans le menu */
	}
	.menu a {
		display:block;                /* Transformation en block */
		min-width: 8rem;             /* Largeur minimale des liens */   
		margin: 0.5rem;               /* Marges externes */
		padding: 0.4rem 0;            /* Marges internes */
		text-align: center;           /* Centrage du texte */   
		background-color: #1ABC9C;    /* Arrière-plan */
		color: #fff;                  /* Couleur du texte */
		border: 1px solid #fff;       /* Ajout d'une bordure */
		border-radius: 20px;           /* Arrondis des bordures */
		transition: all 1s ;          /* Ajout des effets de transition */
	}
	.menu a:hover,
	.menu a:hover.actif {
		background-color: #ed2794;
		color: #ffe843;
		border-color: #ffe843;
	}
}
	/*      sections 1   */
@media screen and (max-width: 767px) {/* sections 1 */
	.s1 {
		background-image: url("img/banner-bg.png");
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		max-width: 95%;
		height: auto;
		margin: 1em auto;
		background-color: #efefef;
		overflow: hidden
	}
	.s1 header { /* menu*/
		position: absolute;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		width: 95%;
		-webkit-box-align: space-around;
		-webkit-align-items: space-around;
		-ms-flex-align: space-around;
		align-items: space-around;
		-webkit-box-pack: end;
		-webkit-justify-content: flex-end;
		-ms-flex-pack: end;
		justify-content: flex-end;
		z-index: 10
	}
	.s1 .wrapper, .s2 .wrapper, .s2, .s3-p2 .wrapper, .s3-p3 {
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		flex-direction: column;
		max-width: 95%;
		height: 100%;
		margin: 4rem auto;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center
	}
	#adresse h1, #RDV h1 {
		margin-top: 0;
		margin-bottom: 0;
		font-size: 1.2em;
		font-family: "Raleway", Helvetica, sans-serif;
		font-weight: 100;
		color: white
	}
	#adresse h2 {
		font-size: 1.1rem
	}
	#RDV p {
		font-size: 1rem;
		margin-top: 2rem
	}
	adress h4, .mail a {
		color: white;
		font-size: 1em
	}
	.image {
		max-width: 50%
	}
	
	.item-1, .image, .footer-bloc, .pb-bucco {
		padding: 0.5rem
	}
	#hygiene a {
		color:#04177a;
	}
	#dent-brosse, #dent-sante, #dentifrice {
		display: block;
		margin-left: auto
	}
	.item-1 a:hover, .pb-bucco a:hover {
		color: blue
	}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {/*  sections 1   */
	.s1 {
		background-image: url("img/banner-bg.png");
		background-repeat: no-repeat;
		position: relative;
		max-width: 95%;
		height: auto;
		margin: 1rem auto;
		background-color: #efefef;
		overflow: hidden
	}
	.s1 header { /* menu*/
		position: absolute;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		width: 95%;
		-webkit-box-align: space-around;
		-webkit-align-items: space-around;
		-ms-flex-align: space-around;
		align-items: space-around;
		-webkit-box-pack: end;
		-webkit-justify-content: flex-end;
		-ms-flex-pack: end;
		justify-content: flex-end;
		z-index: 10
	}
	.s1 .wrapper, .s2, .s2 .wrapper, .s3-p2 .wrapper, .s3-p3 {
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		max-width: 95%;
		height: 100%;
		margin: 2rem auto;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: space-around;
		-webkit-justify-content: space-around;
		-ms-flex-pack: space-around;
		justify-content: space-around;
	}
	#adresse {
		color: white;
		min-width:70%
	}
	#adresse h1 {
		margin-top: 3.5rem; 
		margin-bottom: 0.5rem;
		font-size: 2.2rem;
		width: 95%;
		font-family: "Raleway", Helvetica, sans-serif;
		font-weight: 100;
	}
	adress h4, #RDV p {
		margin-top: 1.5rem
	}
	#RDV h1 {
		font-size: 1.7em
	}	
	adress h4, .mail a {
		color: white;
		font-size: 1.1em
	}
	#about .wrapper .couronne {
		width: 80%;
		align-self: center
	}
	#about .wrapper .couronne img {
		width: 85%
	}
	#formation {
		min-width: 60%
	}
	#formation h2 {
		margin-top: 0;
		margin-bottom: 3rem;
		font-size: 2.5rem;
		font-family: "Raleway", Helvetica, sans-serif;
		font-weight: 100;
		color: #04177a
	}
	.s1 .wrapper .item-1 {
		width: 100%
	}
	.s2 p, .item-1 {
		text-align: justify
	}
	.item-1, .image, .footer-bloc, .pb-bucco {
		padding: 3rem
	}
	#hygiene a {
		color:#04177a;
	}
	#brosse-dent img, #dent-sante, #dentifrice {
		display: block;
		/*margin-left: auto*/
	}
	#dentifrice img {
		height: 100%
	}
	#dent-sante img {
		margin-top: 3rem
	}
}
@media screen and (min-width: 1024px) {/* sections 1 */

	.s1 {
		background-image: url("img/banner-bg.png");
		background-repeat: no-repeat;
		position: relative;
		max-width: 95%;
		height: auto;
		margin: 1rem auto;
		background-color: #efefef;
		overflow: hidden
	}
	.s1 header { /* menu*/
		position: absolute;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		width: 95%;
		-webkit-box-align: space-around;
		-webkit-align-items: space-around;
		-ms-flex-align: space-around;
		align-items: space-around;
		-webkit-box-pack: end;
		-webkit-justify-content: flex-end;
		-ms-flex-pack: end;
		justify-content: flex-end;
		z-index: 10
	}
	.s1 .wrapper, .s2, .s2 .wrapper, .s3-p2 .wrapper, .s3-p3 {
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		max-width: 95%;
		height: 100%;
		margin: 2rem auto;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: space-around;
		-webkit-justify-content: space-around;
		-ms-flex-pack: space-around;
		justify-content: space-around;
	}
	#adresse h1, #RDV h1, #hygiene {
		margin-top: 0;
		margin-bottom: 0;
		font-size: 3rem;
		font-family: "Raleway", Helvetica, sans-serif;
		
	}
	#RDV p {
		font-size: 1.3em
	}
	#adresse h2 {
		margin-bottom: 2em
	}
	adress, #RDV p {
		margin-top: 3rem
	}
	adress h4, .mail a {
		color: white;
		font-size: 1.3em
	}
	#about .wrapper .couronne {
		width: 80%;
		align-self: center
	}
	#about .wrapper .couronne img {
		width: 85%
	}
	#about .wrapper .formation {
		width: 95%;
		padding: 2rem
	}
	#about .wrapper .formation h1, #container-galerie h1 {
		margin-top: 0;
		margin-bottom: 3rem;
		font-size: 3rem;
		font-family: "Raleway", Helvetica, sans-serif;
		font-weight: 100;
		color: #04177a
	}
	.s1 .wrapper .item-1 {
		width: 80%
	}
	.s1 .wrapper .item-1 p, .s2 p, .item-1 {
		text-align: justify
	}
	.item-1, .image, .footer-bloc, .pb-bucco {
		padding: 3rem
	}
	#hygiene, #pb-bucco {
		font-size:1rem
	}
	#hygiene a {
		color:#04177a;
	}
	#hygiene h1, #pb-bucco h1, #soins h1 {
		font-size: 2.5rem
	}
	#dent-brosse, #dent-sante, #dentifrice {
		display: block;
		margin-left: auto
	}
	#dentifrice img {
		height: 100%
	}
	#dent-sante img {
		margin-top: 3rem
	}
}
@media screen and (max-width: 767px) {/*  section2   */
	.s2, .s3, .s3-p3, .s3-p2{
		position: relative;
		max-width: 95%;
		height: auto;
		margin: 10px auto;
		background-color: #efefef;
		overflow: hidden
	}
	.s2 .wrapper .formation ul {
		list-style-image: url("img/logo-dent-20px.png"); /* list image dent*/
		color: #42423f;
		line-height: 2;
		font-size: 1em;
		padding-left: 1.5em
	}
	#about .wrapper .couronne img {
		width: 50%
	}
	#about .wrapper .formation {
		width: 95%
	}
	#about .wrapper .formation h2 {
		margin-top: 0;
		margin-bottom: 0.5em;
		font-size: 2em;
		font-family: "Raleway", Helvetica, sans-serif;
		font-weight: 100;
		color: #04177a
	}
	#hygiene p, .s2 p {
		text-align: justify
	}
	#caries {
		order: 2
	}
	#pb-bucco h1, #soins h1 {
		color: #040c88
	}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {/*     section2   */
	.s2, .s3, .s3-p3, .s3-p2{
		position: relative;
		max-width: 95%;
		height: auto;
		margin: 2rem auto;
		background-color: #efefef;
		overflow: hidden
	}
	#formation ul {
		color: #42423f;
		line-height: 2;
		font-size: 1.2em;
		list-style-image: url("img/logo-dent-20px.png"); /* list image dent*/
	}
	#pb-bucco h1, #soins h1 {
		color: #040c88
	}
}
@media screen and (min-width: 1024px) {/*     section2   */
	.s2, .s3, .s3-p3, .s3-p2{
		position: relative;
		max-width: 95%;
		height: auto;
		margin: 2rem auto;
		background-color: #efefef;
		overflow: hidden
	}
	.s2 .wrapper .formation ul {
		color: #42423f;
		line-height: 3;
		font-size: 1.3em
	}
	.s2 .wrapper .formation ul {
		list-style-image: url("img/logo-dent-20px.png"); /* list image dent*/
	}
	#pb-bucco h1, #soins h1 {
		color: #040c88
	}
}
@media screen and (max-width: 767px) {/*     section 3    */
	.s3 h2 {
		font-size: 2em
	}
	#lien-google {
		line-height: 2
	}
	#lien-google h3 {
		font-size: 1.5em
	}
	#google-map iframe {
		width: 15rem;
		height: 15rem;
		align-self: center
	}
	#container-galerie { 
		display: block;
		text-align: center;
		background-color:#efefef
	}
	#container-galerie h2, #lien-google h3 {
		text-align:center;
		color: #04177a
	}
	#img-galerie img {
		width: 70%;
		height: auto;
		display: inline;
		margin: 3px;
		border: solid 2px grey
	}
	table {
		width: 100%;
		margin: auto;
		color: #444445;
		border-collapse: collapse;
		text-align: center
	}
	thead tr {
		font-size: 1.2em;
		background-color: #04177a;
		color: white;
	}
	th, tr {
		padding: 8px
	}
	tbody, tr, th, td {
		font-size: 1em;
		border: 2px solid #ddd
	}
	.s2, .s3-p3 {
		-webkit-box-pack:space-evenly;
		-webkit-justify-content:space-evenly;
		-ms-flex-pack:space-evenly;
		justify-content: space-evenly
	}
	#soin-dent {
		border: none
	}
	.top {
		float: right;
	}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {/*  section 3  */
	.s3 h2 {
		font-size: 2.5em
	}
	#lien-google {
		padding: 0;
		line-height: 1.8rem
	}
	#lien-google h3 {
		font-size: 1.5em
	}
	#google-map iframe {
		width: 25rem;
		height: 25rem
	}
	#container-galerie { 
		display: block;
		text-align: center;
		background-color:#efefef
	}
	#container-galerie h2, #lien-google h3 {
		text-align:center;
		color: #04177a
	}
	#img-galerie img {
		display: inline;
		max-width: 20%;
		margin: 0.5rem;
		border: solid 2px grey
	}
	table {
		width: 90%;
		margin: 2rem auto;
		color: #444445;
		border-collapse: collapse;
		text-align: center
	}
	thead tr {
		font-size: 1.8em;
		background-color: #04177a;
		color: white;
	}
	th, tr {
		padding: 1.1rem
	}
	tbody, tr, th, td {
		font-size: 1.1em;
		border: 2px solid #ddd
	}
	.s2, .s3-p3 {
		-webkit-box-pack:space-evenly;
		-webkit-justify-content:space-evenly;
		-ms-flex-pack:space-evenly;
		justify-content: space-evenly
	}
	#soin-dent {
		border: none
	}
	.top {
		float: right
	}
}
@media screen and (min-width: 1024px) {/*     section 3    */
	.s3 h2 {
		font-size: 3em
	}
	#lien-google h3 {
		font-size: 2em
	}
	#lien-google {
		line-height: 2em
	}
	#google-map iframe {
		width: 40rem;
		height: 25rem
	}
	#container-galerie { 
		display: block;
		text-align: center;
		background-color:#efefef
	}
	#container-galerie h2, #lien-google h3 {
		text-align:center;
		color: #04177a
	}
	#img-galerie img {
		display: inline;
		margin: 0.5rem;
		border: solid 2px grey
	}
	table {
		width: 50%;
		margin: 2rem auto;
		color: #444445;
		border-collapse: collapse;
		text-align: center
	}
	thead tr {
		font-size: 2em;
		background-color: #04177a;
		color: white;
	}
	th, tr {
		padding: 1.2rem
	}
	tbody, tr, th, td {
		font-size: 1.2em;
		border: 2px solid #ddd
	}
	.s2, .s3-p3 {
		-webkit-box-pack:space-evenly;
		-webkit-justify-content:space-evenly;
		-ms-flex-pack:space-evenly;
		justify-content: space-evenly
	}
	#soin-dent {
		border: none
	}
	.top {
		float: right
	}
}
@media screen and (max-width: 767px) {/*    footer    */
	footer {
		background-image: url("img/footer-bg.png");
		background-repeat: no-repeat;
		position:relative;
		max-width: 95%;
		
		margin: 2px auto;
		background-color: #efefef;
		overflow: hidden
	}
	.contenu-footer {
		display: flex;  /* Transformation en flexbox */
		flex-direction: column;
		-webkit-box-pack: start;
		-webkit-justify-content: start;
		-ms-flex-pack: start;
		justify-content: start
	}
	.footer-bloc {
		color: #42423f;           /*Couleur du texte */
		margin:0;
		padding: 0.2rem 1rem;
		width: 95%
		
	}
	.footer-bloc ul {
		width: 100%;
		font-size: 0.8em
	}
	.footer-bloc a {
		text-align: center;           /* Centrage du texte */   
		color: #42423f             /*  Couleur du texte */
	}
	.footer-bloc a:hover, .mail a:hover {
		color: blue             /*  Couleur du texte */
	}
	.footer-bloc ul {
		list-style-type: circle
	}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {/*    footer    */
	footer {
		background-image: url("img/footer-bg.png");
		position:relative;
		max-width: 95%;
		height: auto;
		margin: 1rem auto;
		background-color: #efefef;
		overflow: hidden
	}
	.contenu-footer {/* flexbox */
		display: flex;            
		-webkit-box-pack: start;
		-webkit-justify-content: start;
		-ms-flex-pack: start;
		justify-content: start
	}
	.footer-bloc {
		flex: 25%;	/* determine la largeur des blocs avec padding*/
		padding: 0.3rem;
		color: #42423f;
		margin:0
	}
	.footer-bloc a {  
		color: #42423f
	}
	.footer-bloc a:hover, .mail a:hover {
		color: blue
	}
	.footer-bloc ul {
		list-style-type: circle
	}
	.footer-bloc li {
		font-size: 0.6rem
	}
}
@media screen and (min-width: 1024px) {/*    footer    */
	footer {
		background-image: url("img/footer-bg.png");
		position:relative;
		max-width: 95%;
		height: auto;
		margin: 2rem auto;
		background-color: #efefef;
		overflow: hidden
	}
	.contenu-footer {
		display: flex;             /* Transformation en flexbox */
		-webkit-box-pack: space-evenly;
		-webkit-justify-content: space-evenly;
		-ms-flex-pack: space-evenly;
		justify-content: space-evenly;
	}
	.footer-bloc {
		flex: 1 1 30rem;
		color: #42423f;           /*Couleur du texte */
		margin:0;
		padding: 1rem
	}
	.footer-bloc a {
				  /* Marges internes */
		text-align: center;           /* Centrage du texte */   
		color: #42423f             /*  Couleur du texte */
	}
	.footer-bloc a:hover, .mail a:hover {
		color: blue             /*  Couleur du texte */
	}
	.footer-bloc ul {
		list-style-type: circle
	}
}