/*------------------------------------------------------------------------------
	WEB : page design
------------------------------------------------------------------------------*/


/*==============================
	PARAMS
==============================*/

:root {
	/* Layout */
		/* Wrapper */
		--layout-wrapper-width: 12000px;



	/* Font */
		/* Main */
		--font-main: 'Ubuntu', 'Arial', 'Helvetica', 'Palatino', sans-serif;
		--font-signature : 'Handlee', 'Arial', 'Helvetica', 'Palatino', sans-serif;



	/* Color */
		/* Color 0 (blanc) */
		--color0: #ffffff;

		/* Color 1 (taupe) */
		--color1-light3: #f9f9f9;
		--color1-light2: #e9e8e7;
		--color1-light: #bcb7b3;
		--color1: #69625d;
		--color1-dark : #201d1d;
		--color1-trans4: #69625d88;

		/* Color 2 (beige) */
		--color2-light2: #ffffff;
		--color2-light: #f5efeb;
		--color2: #dcccc0;
		--color2-dark: #a78366;
		--color2-dark2: #5c4533;

		/* Color 3 (vert) */
		--color3-light: #e5efe5;
		--color3: #b8d1b8;
		--color3-dark: #75a575;
		--color3-dark2: #355335;

		/* Color 4 (brique) */
		--color4-light: #f8ebe5;
		--color4: #f2d1c9;
		--color4-dark: #dd8570;
		--color4-dark2: #722c1e;

		/* Color 5 (turquoise) */
		--color5-light: #e8f0f2;
		--color5: #bad4db;
		--color5-dark: #5a98a9;
		--color5-dark2: #355c66;

		/* By function */
		--color-body-bg: #fbfbfb;
		--color-wrapper-bg: transparent;



	/* Image */
		/* By function */
		--image-body-bg: url("../medias/bg1.png");

}










/*==============================
	Layout
==============================*/

/* Body & Wrapper */
.wrapper {
	min-height: 100vh;
	max-width: var(--layout-wrapper-width);
	margin: 0 auto 0 auto;
	padding: 1px;
}










/*==============================
	Style
==============================*/

/* Set font */
* {
	color: var(--color1);
	font-family: var(--font-main);
}




/* General */
.hidden {
	display: none;
}
a {
	color: var(--color5-dark2);
	text-decoration: none;
	transition: 300ms;
}
a:hover {
	opacity: 0.4;
}
a.selected {
	color: var(--color5-dark);
}





/* Body & Wrapper */
body {
	background-color: var(--color-body-bg);
	background-image: var(--image-body-bg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	margin: 0;
}
.wrapper {
	background-color: var(--color-wrapper-bg);
	padding: 0;
}





/* Nav & Header */
nav {
	position: fixed;
	z-index: 10;
	width: 100%;
	box-shadow: 0 0 10px var(--color1-light3);
	background-color: var(--color1-light3);
}
nav ul {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;

}
nav ul li {
	padding: 1vw 2vw;
}
nav ul li a {
	font-size: 1.6vw;
	color: var(--color1-dark);
	text-decoration: none;
}
nav img {
	width: 3vw;
	height: 3vw;
}

/* Header */
header h1 {
	position: relative;
	top: 6vw;
	margin: 0;
	padding: 10vw 0 0 0;
	font-size: 9vw;
	text-align: center;
}
header h2 {
	padding: 5vw 0 10vw 0;
	background-color: var(--color2);
	font-size: 2.5vw;
	text-align: center;
	text-transform: uppercase;
}





/* Section & Articles */
section {
	margin-top: 10vw;
}
article {
	padding: 0;
	background-color: var(--color2-light);
}
article > h1 {
	padding-top: 4vw;
	font-size: 5vw;
	text-align: center;
}

article ul {
	display: flex;
	flex-direction: row;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style: none;
}
article ul li {
	width: 100%;
	box-sizing: border-box;
	background-color: var(--color2);
	padding: 4vw 4vw 2vw 4vw;
	text-align: center;
}
article ul li i {
	font-size: 6vw;
	color: var(--color1-trans4);
}
article ul li h2 {
	font-size: 2.5vw;
	text-align: center;
}
article ul li p {
	font-size: 1.3vw;
	text-align: center;
	line-height: 1.5;
}

article ul.list {
	display: block;
	list-style: square outside;
	line-height: 1.5;
}
article ol.list {
	display: block;
	list-style-type: upper-greek;
	line-height: 1.5;
}
article ul.list > li {
	margin-left: 2vw;
	padding: 1vw 0 0 1vw;
	font-size: 1.4vw;
	text-align: justify;
}
article ol.list > li {
	padding: 1vw 0 0 1vw;
	font-size: 1.4vw;
	text-align: justify;
}
article h2 {
	margin-top: 4vw;
	margin-bottom: 2vw;
}
article h1+h3 {
	margin-top: -5vw;
	margin-bottom: 10vw;
	font-size: 3.5vw;
	text-align: center;
	font-style: italic;
}



/* Article 1 */
article.enum1 li {
	padding: 4vw 10vw;
}
article.enum1 li:nth-child(2n+1) {
	background-color: var(--color1-light2);
}
article.enum1 li:nth-child(2n+2) {
	position: relative;
	background-color: var(--color1-light);
}
.signature {
	margin: 2vw 0 0 0;
	font-size: 2vw;
	font-family: var(--font-signature);
	font-weight: bolder;
	font-style: italic;
	text-align: right;
}
.signatureTitle {
	font-size: 1.5vw;
	font-family: var(--font-signature);
	font-weight: lighter;
	font-style: italic;
}
#imgArticle1 {
	position: absolute;
	top: 7vw;
	left: -10vw;
	width: 20vw;
}



/* Article 2 */
article.enum2 ul li:nth-child(4n+1) {
	background-color: var(--color2);
}
article.enum2 ul li:nth-child(4n+2) {
	background-color: var(--color1-light3);
}
article.enum2 ul li:nth-child(4n+3) {
	background-color: var(--color4);
}
article.enum2 ul li:nth-child(4n+4) {
	background-color: var(--color3-light);
}



/* Article 3 */
article.enum3 {
	padding: 15vw 0;
}
article.enum3 h1 {
	margin: 0;
	font-size: 4vw;
	text-align: center;
	color: var(--color1-dark);
	font-weight: lighter;
}
article.enum3 h2 {
	margin: 2vw 0 5vw 0;
	font-size: 1.5vw;
	text-align: center;
	color: var(--color1-dark);
	font-weight: lighter;
	font-style: italic;
}
article.enum3 ul {
	width: 90vw;
	margin: 0 auto;
}
article.enum3 ul li {
	background-color: transparent;
	text-align: center;
}
article.enum3 ul li i {
	padding: 1.5vw;
	border-radius: 100%;
	font-size: 4vw;
}
article.enum3 ul li:nth-child(6n+1) i {
	background-color: var(--color2);
}
article.enum3 ul li:nth-child(6n+2) i {
	background-color: var(--color3);
}
article.enum3 ul li:nth-child(6n+3) i {
	background-color: var(--color4);
}
article.enum3 ul li:nth-child(6n+4) i {
	background-color: var(--color1-light2);
}
article.enum3 ul li:nth-child(6n+5) i {
	background-color: var(--color5);
}
article.enum3 ul li:nth-child(6n+6) i {
	background-color: var(--color1-light);
}



/* Article 4 */
article.enum4 ul li {
	padding: 4vw 10vw;
	font-size: 1.5vw;
}
article.enum4 > ul > li > a > i, article.enum4 > ul > li > a > h2 {
	color: var(--color1-light2);
}
article.enum4 ul li h3 {
	margin: 0;
	color: var(--color1-dark);
}
article.enum4 ul li i.small {
	margin: 3vw 0 1vw 0;
	font-size: 3vw;
	color: var(--color0);
}
article.enum4 ul li:nth-child(2n+1) {
	background-color: var(--color5-dark);
}
article.enum4 ul  li:nth-child(2n+2) {
	background-color: var(--color1);
}
#imgAppointment {
	width: 30vw;
}



/* Article 5 */
article.enum5 {
	position: relative;
	padding: 10vw 15vw;
	background-color: var(--color3);
	text-align: center;
}
article.enum5 h5 {
	font-size: 5vw;
	line-height: 1.5;
	font-weight: lighter;
	font-style: italic;
	transition: 1000ms;
}
article.enum5 h5::before, article.enum5 h5::after {
	position: absolute;
	content: "\"";
	font-size: 25vw;
	color: #FFFFFF99;
	transition: 500ms;
}
article.enum5 h5::before {
	top: 6vw;
	left: 3vw;
}
article.enum5 h5::after {
	bottom: 0vw;
	right: 9vw;
}
article.enum5:hover h5::before, article.enum5:hover h5::after {
	color: #FFFFFF;
}
article.enum5:hover h5 {
	color: #000000;
}





/* Footer */
footer {
	margin: 3vw 0 1vw 0;
	background-color: var(--color2);
}
footer ul {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	list-style: none;
}
footer ul li {
	padding: 2vw 3vw;
	font-size: 1.5vw;
}










/*==============================
	Page 'prices.html'
==============================*/

/* Table */
article.prices table {
	width: 98%;
	margin: 0 auto;
	border-spacing: 0.3vw;
	font-size: 2vw;
	text-align: center;
}
span.euro {
	opacity: 0.3;
}
.row2 span.euro {
	color: white;
}
.x {
	opacity: 0.3;
}





/* Row */
article.prices table tr.row0 td {
	padding: 0;
}
.row0 td .hLine {
	display: block;
	border-top: solid 0.4vw var(--color1);

}
.row0 td span:not(.hLine) {
	position: relative;
	top: -1.5vw;
	padding: 0 1vw;
	background-color: var(--color-body-bg);
	color: var(--color1);
	font-style: italic;
	font-weight: bolder;
}
.row1 {
	font-size: 1.7vw;
	font-weight: bolder;
}
article.prices table tr.row2 td {
	color: var(--color0);
	font-size: 3vw;
	font-weight: bolder;
}





/* Column */
article.prices table tr td {
	padding: 1vw 0.5vw;
}
.col1 {
	width: 5vw;
	background-color: transparent;
	font-size: 1.5vw;
	text-align: right;
}
.col4, .top1 {
	border-right: solid 2vw var(--color-body-bg);
}
.col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10 {
	width: 20vw;
}
.col2 {
	background-color: var(--color5-light);
}
.col3 {
	background-color: var(--color1-light2);
}
.col4 {
	background-color: var(--color1-light2);
}
.col5 {
	background-color: var(--color5-light);
}
.col6 {
	background-color: var(--color4-light);
}
.col7 {
	background-color: var(--color2-light);
}
.col8 {
	background-color: var(--color3-light);
}





/* Cells */
article.prices table tr.row1 td.col2 {
	background-color: var(--color5-light);
}
article.prices table tr.row2 td.col2 {
	background-color: var(--color5-dark);
}
article.prices table tr.row1 td.col3 {
	background-color: var(--color1-light2);
}
article.prices table tr.row2 td.col3 {
	background-color: var(--color1-light);
}
article.prices table tr.row1 td.col4 {
	background-color: var(--color1-light2);
}
article.prices table tr.row2 td.col4 {
	background-color: var(--color1-light);
}
article.prices table tr.row1 td.col5 {
	background-color: var(--color5);
}
article.prices table tr.row2 td.col5 {
	background-color: var(--color5-dark);
}
article.prices table tr.row1 td.col6 {
	background-color: var(--color4);
}
article.prices table tr.row2 td.col6 {
	background-color: var(--color4-dark);
}
article.prices table tr.row1 td.col7 {
	background-color: var(--color2);
}
article.prices table tr.row2 td.col7 {
	background-color: var(--color2-dark);
}
article.prices table tr.row1 td.col8 {
	background-color: var(--color3);
}
article.prices table tr.row2 td.col8 {
	background-color: var(--color3-dark);
}
article.prices table tr.row7 td.col7 {
	font-weight: bolder;
}
article.prices table tr.row7 td.col8 {
	font-weight: bolder;
}




/* Notes */
ul.notes {
	display: flex;
	flex-direction: column;
	padding: 3vw 5vw 2vw 11vw;
	font-size: 1.5vw;
}
ul.notes li {
	padding: 0.5vw	;
	text-align: left;
	background-color: transparent;
}










/*==============================
	DoubleEnum
==============================*/

article.doubleEnum > ul {
	display: flex;
	flex-direction: column;
}
article.doubleEnum > ul > li > ul {
	display: flex;
	flex-direction: row;
}
article.doubleEnum > ul > li:nth-child(2n+2) > ul {
	flex-direction: row-reverse;
}
article.doubleEnum > ul > li > ul > li {
	padding: 6vw;
}
article.doubleEnum li {
	padding: 0;
	background-color: transparent;
}
article.doubleEnum p {
	font-size: 1.6vw;
	text-align: justify;
}
article.doubleEnum img {
	width: 100%;
}
article.doubleEnum > ul > li:nth-child(9n+1) > ul > li:nth-child(2n+1) {
	background-color: var(--color2-dark);
}
article.doubleEnum > ul > li:nth-child(9n+1) > ul > li:nth-child(2n+2) {
	background-color: var(--color2);
}
article.doubleEnum > ul > li:nth-child(9n+2) > ul > li:nth-child(2n+1) {
	background-color: var(--color1);
}
article.doubleEnum > ul > li:nth-child(9n+2) > ul > li:nth-child(2n+2) {
	background-color: var(--color1-light);
}
article.doubleEnum > ul > li:nth-child(9n+3) > ul > li:nth-child(2n+1) {
	background-color: var(--color4-dark);
}
article.doubleEnum > ul > li:nth-child(9n+3) > ul > li:nth-child(2n+2) {
	background-color: var(--color4);
}
article.doubleEnum > ul > li:nth-child(9n+4) > ul > li:nth-child(2n+1) {
	background-color: var(--color3-dark);
}
article.doubleEnum > ul > li:nth-child(9n+4) > ul > li:nth-child(2n+2) {
	background-color: var(--color3);
}
#map {
	z-index: 3;
	width: 100%;
	height: 40vw;
}










/*==============================
	Classic
==============================*/

article.classic {
	box-sizing: border-box;
	padding: 0 20vw 5vw 20vw;
	background-color: var(--color2-light);
}
article.classic h2 {
	padding: 2vw 0 0.5vw 0;
	font-size: 2vw;
	line-height: 1.3;
}
article.classic p {
	font-size: 1.5vw;
	text-align: justify;
	line-height: 1.5;
}
article.classic img {
	width: 100%;
}










/*==============================
	Backgrounds
==============================*/

body.bgIndex {
	background-image: url('../medias/bgIndex.png');
}
body.bgConsultation {
	background-image: url('../medias/bgConsultation.png');
}
body.bgCancer {
	background-image: url('../medias/bgCancer.png');
}
body.bgPresentation {
	background-image: url('../medias/bgPresentation2.png');
}
body.bgPrices {
	background-image: url('../medias/bgPrices.png');
}
body.bgPrices article {
	background-color: var(--color1-light3);
}

body.bgContact {
	background-image: url('../medias/bgContact.png');
}











/*==============================
	Responsive design
==============================*/

/* Media query : mobile */
@media (max-width: 1000px) {
	/* body {
		background-color: red;
	} */





	/* Nav & Header */
	nav ul li {
		padding: 2vw 2vw;
		text-align: center;
	}
	nav ul li a {
		font-size: 2.5vw;
	}
	nav img {
		width: 6vw;
		height: 6vw;
	}

	/* Header */
	header h1 {
		top: 8vw;
		font-size: 12vw;
	}
	header h2 {
		padding: 6vw 0 12vw 0;
		font-size: 3vw;
	}





	/* Section & Articles */
	section {
	}
	article {
		margin-top: 50vw;
	}
	article > h1 {
		font-size: 7vw;
	}
	article ul {
		flex-direction: column;
	}
	article ul li {
		padding: 8vw 8vw 4vw 8vw;
	}
	article ul li i {
		font-size: 15vw;
	}
	article ul li h2 {
		font-size: 5.5vw;
	}
	article ul li p {
		font-size: 3vw;
	}
	article ul.list > li {
		margin-top: 2vw;
		font-size: 3vw;
	}
	article ol.list > li {
		margin-top: 2vw;
		font-size: 3vw;
	}
	article h2 {
		margin-top: 4vw;
		margin-bottom: 2vw;
	}



	/* Article 1 */
	article.enum1 li {
		padding: 4vw 10vw;
	}
	article.enum1 li:nth-child(2n+1) {
		padding-bottom: 20vw;
	}
	article.enum1 li:nth-child(2n+2) {
		padding-top: 20vw;
	}
	.signature {
		margin: 4vw 0 0 0;
		font-size: 5vw;
	}
	.signatureTitle {
		font-size: 4vw;
	}
	#imgArticle1 {
		top: -15vw;
		left: 35vw;
		width: 30vw;
	}



	/* Article 3 */
	article.enum3 {
		padding: 15vw 0;
	}
	article.enum3 h1 {
		font-size: 8vw;
	}
	article.enum3 h2 {
		margin: 4vw 0 10vw 0;
		font-size: 3vw;
	}
	article.enum3 ul li i {
		font-size: 12vw;
	}



	/* Article 4 */
	article.enum4 ul li {
		font-size: 3vw;
	}
	article.enum4 ul li i.small {
		margin: 4vw 0 1.5vw 0;
		font-size: 6vw;
	}
	#imgAppointment {
		width: 40vw;
	}





	/* Footer */
	footer {
		margin: 20vw 0 5vw 0;
		padding: 1vw 6vw;
	}
	footer ul {
		flex-direction: column;
	}
	footer ul li {
		padding: 0.5vw 0;
		font-size: 3vw;
		text-align: right;
	}





	/*==============================
		DoubleEnum
	==============================*/

	article.doubleEnum > ul > li > ul {
		flex-direction: column;
	}
	article.doubleEnum > ul > li:nth-child(2n+2) > ul {
		flex-direction: column;
	}
	article.doubleEnum > ul > li > ul > li {
		padding: 10vw;
	}
	article.doubleEnum p {
		margin-top: 5vw;
		font-size: 3vw;
	}
	article.doubleEnum h2 {
		margin-top: 10vw;
	}
	article.doubleEnum h3 {
		font-size: 4vw;
		padding-bottom: 5vw;
	}
	article.doubleEnum img {
		width: 100%;
	}
	article.doubleEnum > ul > li > ul > li:nth-child(2n+1) {
		padding: 0;
	}
	#map {
		width: 50%;
		height: 35vw;
		margin: 17.5vw auto;
		transform-origin: center center;
		transform: scale(2);
	}





	/*==============================
		Classic
	==============================*/

	article.classic {
		padding: 3vw 5vw 10vw 5vw;
	}
	article.classic h2 {
		padding: 8vw 0 4vw 0;
		font-size: 5.5vw;
	}
	article.classic p {
		margin-top: 5vw;
		font-size: 3vw;
	}
	article.classic img {
		width: 100%;
	}


}



/* Media query : tablet */
@media (min-width: 1000px) and (max-width: 1200px) {
	/* body {
		background-color: orange;
	} */


}



/* Media query : laptop */
@media (min-width: 1200px) {
	/* body {
		background-color: yellow;
	} */





	/* Nav & Header */
	nav ul li {
		padding: 0.5vw 2vw;
	}
	nav ul li a {
		font-size: 1.2vw;
	}
	nav img {
		width: 3vw;
		height: 3vw;
	}

	/* Header */
	header h1 {
		top: 4.5vw;
		font-size: 6vw;
	}
	header h2 {
		padding: 5vw 0 8vw 0;
		font-size: 2vw;
	}





	/* Section & Articles */
	article > h1 {
		font-size: 3vw;
	}
	article ul li i {
		font-size: 4vw;
	}
	article ul li h2 {
		font-size: 1.8vw;
	}
	article ul li p {
		font-size: 1vw;
	}
	article h1+h3 {
		margin-top: -2vw;
		margin-bottom: 6vw;
		font-size: 2vw;
	}



	/* Article 1 */
	.signature {
		font-size: 1.8vw;
	}
	.signatureTitle {
		font-size: 1.4vw;
	}
	#imgArticle1 {
		top: 3vw;
		left: -10vw;
		width: 20vw;
	}





	/* Article 4 */
	article.enum4 ul li {
		padding: 3vw 7vw;
		font-size: 1.2vw;
	}
	article.enum4 ul li i.small {
		margin: 2vw 0 0.7vw 0;
		font-size: 2.5vw;
	}
	#imgAppointment {
		width: 20vw;
	}



	/* Article 5 */
	article.enum5 {
		padding: 5vw 10vw;
	}
	article.enum5 h5 {
		font-size: 3.5vw;
	}
	article.enum5 h5::before, article.enum5 h5::after {
		font-size: 15vw;
	}
	article.enum5 h5::before {
		top: 4vw;
		left: 3vw;
	}
	article.enum5 h5::after {
		bottom: 0vw;
		right: 9vw;
	}





	/* Footer */
	footer {
		margin: 3vw 0 1vw 0;
	}
	footer ul li {
		padding: 1.5vw 3vw;
		font-size: 1vw;
	}










	/*==============================
		Page 'prices.html'
	==============================*/

	/* Table */
	article.prices table {
		border-spacing: 0.2vw;
		font-size: 1.5vw;
	}





	/* Row */
	.row1 {
		font-size: 1.5vw;
	}
	article.prices table tr.row2 td {
		font-size: 2vw;
	}





	/* Column */
	.col1 {
		width: 5vw;
		font-size: 1.2vw;
		border-right: solid 3vw var(--color-body-bg);
	}
	.col4, .top1 {
		border-right: solid 5vw var(--color-body-bg);
	}




	/* Notes */
	ul.notes {
		font-size: 1vw;
	}
	ul.notes li {
		padding: 0.3vw	;
	}





	/*==============================
		DoubleEnum
	==============================*/

	article.doubleEnum > ul > li > ul > li {
		padding: 8vw;
	}
	article.doubleEnum p {
		font-size: 1.4vw;
	}
	article.doubleEnum h3 {
		font-size: 1.4vw;
	}
	#map {
		position: relative;
		top: 7.5vw;
		transform-origin: center center;
		transform: scale(2);
		width: 50%;
		margin: auto;
		height: 15vw;
	}
	.stayHere {
		display: block;
		position: sticky;
		top: 5vw;
	}



}