/*
Breakpoint 	Class infix 	Dimensions
X-Small 	None 	<576px
Small 	sm 	≥576px
Medium 	md 	≥768px
Large 	lg 	≥992px
Extra large 	xl 	≥1200px
Extra extra large 	xxl 	≥1400px
*/

:root {
  --banner_yellow_bg: rgb(35, 38, 53);
  --banner_red_text: white;
  --pill_border: white;
  --tarifs_head_bg: rgba(43, 131, 151, 0.7);
  --tarifs_yellow_box_border: rgb(35, 38, 53);
  --menu_color: rgba(43, 131, 151, 0.7);
  --pill_one: rgba(43, 131, 151, 0.7);
  --pill_two: rgb(248, 203, 173);
  --radius_value : 10px;
}

html, body {
	margin: 0;
	padding: 0;
}

body {
	background-image: url('assets/img/bg.jpg');
	background-repeat: repeat;
	font-family: Georgia, serif;
	line-height: 200%;
}

#page {
	max-width: 940px;
	margin: 0 auto;
	margin-top: 16px;
	/*border: 1px solid blue;*/
}

@media not all and (min-width: 576px) {
	.do {
		display: none !important;
	}
}
@media (min-width: 576px) {
	.mo {
		display: none;
	}
}

.clearfix {
	clear: both;
}

#page_header {
	/*border: 1px solid red;*/
}

@media (min-width: 576px) {
	#header_header {
		height: 60px;
	}
}
#header_header {
	background-color: var(--banner_yellow_bg);
	color: var(--banner_red_text);
	position: relative;
	padding-top: 10px;
	padding-bottom: 10px;
}

#header_header>span {
	position: relative;
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

#header_header>span>span {
	display: block;
}

@media (min-width: 576px) {
	#header_header>span {
		position: absolute;
		bottom: 15px;
		right: 10px;
		height: auto;
		display: inline;
	}
	#header_header>span>span {
		display: inline;
	}
}

#header_header a, #header_header a:hover, #header_header a:visited {
	color: var(--banner_red_text);
}
@media (min-width: 576px) {
	.mo {
		display: none;
	}
	#header_header a, #header_header a:hover, #header_header a:visited {
		text-underline-offset: 5px;
	}
	#header_header {
		padding-top: 0px;
		padding-bottom: 0px;
	}
}

#header_footer {
	/*background-color: white;*/
	position: relative;
	height: auto;
	border-bottom: 1px solid grey;
	margin-top: 10px;
	padding-bottom: 10px;
	padding-left: 5px;
	padding-right: 5px;
	display: flex;
	justify-content: space-between;
	max-width: 100vw;
	/*font-family: Arial, Helvetica;*/
}

#header_footer.opened {
	height: 240px;
}

#do_main_menu {
	display: none;
	white-space: nowrap;
}

#mo_main_menu {
	float: right;
}

#header_footer.closed #mo_main_menu ul {
	display: none;
}

#header_footer.opened #mo_main_menu ul {
	display: block;
}

#pv {
	float: left;
}

#menubtn {
	float: right;
}

#mo_main_menu ul {
	list-style: none;
	position: absolute;
	left: 0px;
	top: 39px;
	width: calc(100% - 2px);
	margin: 0;
	padding: 0;
	border: 1px dashed grey;
}

#mo_main_menu ul li {
	width: 100%;
	text-align: center;
}

#mo_main_menu a, #mo_main_menu a:visited {
	color: grey;
	text-decoration: none;
	width: 100%;
	display: block;
	padding-top: 5px;
	padding-bottom: 5px;
}
#mo_main_menu a:hover, #mo_main_menu li.active a {
	background-color: var(--menu_color);
	color: var(--banner_red_text);
}

@media (min-width: 576px) {
	#mo_main_menu {
		display: none;
	}
	#header_footer, #header_footer.opened {
		height: 120px;
		margin-top: 0;
		padding-bottom: 0;
		padding-left: 0;
		padding-right: 0;
		align-items: center;
	}
	#pv {
		text-align: center;
		display: block;
		font-size: 22px;
		padding-left: 10px;
		padding-right: 10px;
		height: unset;
		line-height: unset;
	}
	
	#do_main_menu {
		width: 100%;
		display: flex;
		justify-content: end;
		height: 100%;
		margin-right: 0px;
	}
	
	#do_main_menu>ul {
		list-style: none;
		margin: 0;
		padding: 0;
		padding-right: 10px;
		display: flex;
		justify-content: space-evenly;
		flex-wrap: wrap;
		column-gap: 5px;
		align-items: center;
	}
	
	#do_main_menu>ul>li {
		height: 60px;
	}
	
	#do_main_menu a {
		height: 50px;
		line-height: 50px;
		margin-top: 5px;
		display: block;
		padding-left: 5px;
		padding-right: 5px;
		border-radius: 5px;
	}
	
	#do_main_menu a, #do_main_menu a:visited {
		color: grey;
		text-decoration: none;
	}
	
	#do_main_menu a:hover, #do_main_menu li.active a {
		background-color: var(--menu_color);
		color: var(--banner_red_text);
		border-bottom: 1px solid var(--banner_red_text);
	}
}

@media (min-width: 940px) {
	#header_footer, #header_footer.opened {
		height: 100px;
	}
	#pv {
		width: auto;
		text-align: left;
		padding-left: 10px;
	}
	#do_main_menu {
		width: auto;
		height: 100px;
		margin-right: 5px;
	}
	#do_main_menu>ul {
		display: block;
	}
	#do_main_menu>ul>li {
		float: left;
		position: relative;
		margin-left: 15px;
		height: 100px;
	}
	#do_main_menu a {
		height: 80px;
		line-height: 80px;
		margin-top: 10px;
		display: block;
		padding-left: 5px;
		padding-right: 5px;
	}
}

#page_content {
	/*background-color: white;*/
	overflow: auto;
	padding: 10px;
	font-size: 18px;
}

#page_footer {
	/*background-color: white;*/
	border-top: 1px solid grey;
	text-align: center;
	color: grey;
	padding: 10px;
}

#mailto, #mailto:visited {
	color: grey;
}

/* ACCUEIL */
.home_content {
	display: flex;
	flex-direction: row;
	width: 100%;
	align-items: center;
}

.home_content .col_left {
	width: 100%;
	font-size: 30px;
	text-align: center;
}
.home_content .col_right {
	width: 0;
	display: none;
}

@media (min-width: 576px) {
	.home_content .col_left {
		width: calc(100% / 3 * 2);
	}
	.home_content .col_right {
		width: calc(100% / 3);
		display: block;
	}
}

#home_logo {
	max-width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* QUI SUIS-JE */
.qui-suis-je_content {
	display: flex;
	flex-direction: row;
	width: 100%;
	align-items: center;
}



.qui-suis-je_content .col_left {
	width: 100%;
	font-size: 20px;
	text-align: justify;
}
.qui-suis-je_content .col_right {
	width: 0;
	display: none;
}

@media (min-width: 576px) {
	.qui-suis-je_content .col_left {
		width: calc(100% / 3 * 2);
	}
	.qui-suis-je_content .col_right {
		width: calc(100% / 3);
		display: block;
	}
}

#qui-suis-je-img {
	max-width: 90%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* MA PRATIQUE */
.ma-pratique_content {
	font-size: 20px;
	text-align: justify;
}

.ma-pratique_content .pill {
	border-radius: 15px;
	border: 3px solid var(--pill_border);
	height: 60px;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	width: fit-content;
	padding: 0 10px;
	font-family: calibri;
}

.ma-pratique_content .pill_deroulement_bilan {
	background-color: var(--pill_one);
	margin-left: auto;
	margin-right: auto;
	color: white;
}

.ma-pratique_content .chart {
	width: 100%;
	overflow: auto;
}
.ma-pratique_content .chart img {
	width: 576px;
}
@media (min-width: 576px) {
	.ma-pratique_content .chart {
		width: auto;
	}
	.ma-pratique_content .chart img {
		width: 100%;
		max-width: 100%;
	}
}

/* TARIFS */

.tarifs_content {
	color: var(--pill_border);
}

.tarifs_content .head {
	margin-top: 10px;
	text-align: justify;
	background-color: var(--tarifs_head_bg);
	border-radius: 20px;
	border: 1px solid var(--pill_border);
	padding: 5px 15px;
	font-size: 18px;
	margin-bottom: 20px;
}

.tarifs_content .four_blocs {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 20px;
}

.tarifs_content .four_blocs .bloc {
	border-radius: 20px;
	background-color: white;
	border: 1px solid var(--tarifs_yellow_box_border);
	width: calc(50% - 10px);
	max-width: calc(50% - 10px);
	color: rgb(35, 38, 53);
}

.tarifs_content .four_blocs .bloc .title {
	display: block;
	width: 100%;
	text-align: center;
	font-weight: bold;
	padding-top: 15px;
}

.tarifs_content .four_blocs .bloc .desc {
	display: block;
	font-style: italic;
	text-align: center;
	font-size: 80%;
	margin-left: 2em;
	margin-right: 2em;
	width: calc(100% - 4em);
}

.tarifs_content .four_blocs .bloc .t {
	display: block;
	width: 100%;
	text-align: center;
}

.tarifs_content .four_blocs .bloc ul {
	margin-top: 10px;
	margin-bottom: 10px;
	list-style-type: '-   '
}

.tarifs_content .four_blocs .bloc ul li {
	padding-bottom: 5px;
}

.tarifs_content .four_blocs .bloc ul li .rf {
	float: right;
	margin-right: 25px;
}

@media not all and (min-width: 576px) {
	.tarifs_content .four_blocs {
		display: block;
	}
	
	.tarifs_content .four_blocs .bloc {
		border-radius: 20px;
		background-color: var(--banner_yellow_bg);
		border: 1px solid var(--tarifs_yellow_box_border);
		width: 100%;
		max-width: 100%;
		margin-bottom: 20px;
	}
}

/* CABINET */
.cabinet_content .fwidth_bloc img {
	max-width: 100%;
}
.cabinet_content .four_blocs {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 20px;
}

.cabinet_content .four_blocs .bloc {
	width: calc(50% - 10px);
	max-width: calc(50% - 10px);
}

.cabinet_content .four_blocs .bloc img, .cabinet_content .four_blocs .bloc iframe {
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	display: block;
	aspect-ratio: 1/1;
}

@media not all and (min-width: 576px) {
	.cabinet_content .four_blocs {
		display: block;
	}
	.cabinet_content .four_blocs .bloc {
		width: 100%;
		max-width: 100%;
		margin-bottom: 20px;
	}
}

/* LES TESTS */
.les-tests_content .pill {
	border-radius: 15px;
	border: 3px solid var(--pill_border);
	height: 60px;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	width: fit-content;
	padding: 0 10px;
	font-family: calibri;
}
.les-tests_content .pill_les-tests {
	background-color: var(--pill_one);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 15px;
}

.les-tests_content .pill.title {
	background-color: var(--pill_two);
	width: 180px;
	text-align: center;
	box-sizing: border-box;
}

.les-tests_content .text {
	width: calc(100% - 230px);
}

.les-tests_content .les-tests-body {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	row-gap: 20px;
}

.les-tests_content .row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

@media not all and (min-width: 940px) {
	.les-tests_content .text {
	width: calc(100% - 200px);
}
}

@media not all and (min-width: 576px) {
	.les-tests_content .les-tests-body {
		display: block;
	}
	.les-tests_content .row {
		display: block;
	}
	.les-tests_content .pill.title {
		width: 100%;
		height: 40px;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 10px;
	}
	.les-tests_content .text {
		width: 100%;
		margin-top: 5px;
	}
}

/* Avec fond uni */

#page {
	background-color: rgba(255, 255, 255, 0.7);
	border-bottom-left-radius: var(--radius_value);
	border-bottom-right-radius: var(--radius_value);
	margin-bottom: 16px;
	border-top-left-radius: var(--radius_value);
	border-top-right-radius: var(--radius_value);
}

#page_header {
	border-top-left-radius: var(--radius_value);
	border-top-right-radius: var(--radius_value);
}

#header_header {
	border-top-left-radius: var(--radius_value);
	border-top-right-radius: var(--radius_value);
}