@charset "UTF-8";
/* CSS Document */


/*	Temp. */
.boutons.impression { display: none;}
/* / Temp. */



@font-face {
	font-family: 'bebas_neueregular';
	src: url('polices/bebasneue-webfont.eot');
	src: url('polices/bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
		 url('polices/bebasneue-webfont.woff2') format('woff2'),
		 url('polices/bebasneue-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'bebasregular';
	src: url('polices/bebas-webfont.eot');
	src: url('polices/bebas-webfont.eot?#iefix') format('embedded-opentype'),
		 url('polices/bebas-webfont.woff2') format('woff2'),
		 url('polices/bebas-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}



* {
	box-sizing: border-box;
}


h1 {
	margin: 5px auto 26px;
	/* typo */
	font-family: "bebas_neueregular", sans-serif;
	color: #00acdc;
	font-size: 5rem;
	line-height: 1em;
	text-align: left;
}
h3 {
	padding-bottom: 9px;
	border-bottom: 1px solid #00acdc;
	margin-bottom: 27px;
	/* typo */
	text-align: left;
}
h3::before, h3::after {
	margin: 0px;
	padding-bottom: 0px;
	content: "";
	background: none;
	width: auto;
	height: auto;
}
h3 span { color: #bbb; }

h5, h6 {
	margin: 10px 0px;
	/* typo */
	font-size: 2.4rem;
	color: #00acdc;
	font-weight: 600;
}
h6 { color: #5e6569; }

dl { margin-top: 10px; }
dt { margin: 20px 0px; }

.boutons {
	text-align: right;
}
.boutons button {
	padding: 10px 16px;
	margin-left: 6px;
	font-weight: 600;
}
.intro .boutons {
	float: right;
}

button:hover {
	background: #000;
	color: #fc9b2a;
}

/* Formulaires */

[type="checkbox"]:not(:checked), [type="checkbox"]:checked,
[type="radio"]:not(:checked), [type="radio"]:checked
{
	position: absolute; left: -9999px;
}
[type="radio"]:not(:checked) + label, [type="radio"]:checked + label {
	position: relative;
	padding: 1px 12px 4px 29px;
	cursor: pointer;
	color: #343434;
}
[type="radio"]:not(:checked) + label:before, [type="radio"]:checked + label:before {
	position: absolute;
	left: 0px;
	top: 0px;
	content: '';
	width: 24px;
	height: 24px;
	border: 1px solid #949494;
	border-radius: 1px;
	transition: all ease-out 0.5s;
}
[type="radio"]:checked + label:before {
	border: 3px solid #fc9b2a;
	background-color: #fc9b2a;
	transform: rotate(360deg);
	width: 26px; height: 26px;
	top: -1px; left: -1px;
}

[type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label {
	width: 198px;
	height: 44px;
	margin: 0px 11px 15px 0px;
	padding: 11px 0px 0px 0px;
	background-color: #ebebeb;
	display: inline-block;
	cursor: pointer;
	transition: all ease-out 0.3s;
	/* typo */
	font-size: 1.6rem;
	color: #343434;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
}
[type="checkbox"]:checked + label {
	background-color: #5e6569;
	/* typo */
	color: #fff;
}

input[type="submit"] {
	width: 198px;
	height: 44px;
}
input[type="submit"]:hover {
	background-color: #000;
	color: #fc9b2a;
}

input[type="submit"] + p { margin-top: 5px; }

/* / Formulaires */


#content {
	position: relative;
	background: url('fond-autoeval.jpg') no-repeat center bottom;
	padding-bottom: 150px;
}

aside {
	position: absolute;
	left: 0px;
	top: 0px;
	background: #fbf8f4 url('fond-lateral.jpg') no-repeat center bottom;
	width: 301px;
	height: 100%;
	padding: 44px 0px 35px;
	/* typo */
	text-align: center;
}
aside h4 {
	margin-bottom: 26px;
	font-size: 1.8rem;
	text-transform: none;
}
aside p {
	margin: 0px;
	text-align: center;
}
aside a.bouton:link, aside a.bouton:visited {
	padding: 0px 40px;
	background-color: #fc9b2a;
	font-size: 1.8rem;
	font-weight: 600;
	height: 45px;
	line-height: 2.5em;
}
#content aside a.bouton:hover { color: #fc9b2a; }

main {
	margin: 0px auto;
	max-width: 1330px;
	min-height: 750px;
	padding: 35px 0px 21px 58px;
}
.intro { margin-bottom: 35px; overflow: hidden; }
.intro p { float: left; }
.intro strong { color: #fc9b2a; }

.rapport {
	background-color: #f5f5f5;
	margin: -15px auto 16px;
	padding: 18px 20px 35px 14px;
}
.rapport h4 {
	margin: 0px 0px 10px;
	color: #404040;
	font-family: "bebas_neueregular", sans-serif;
	font-size: 35px;
}
p.theme {
	display: inline-block;
	background-color: #5e6569;
	width: 198px;
	height: 44px;
	margin: 0px 11px 11px 0px;
	padding: 11px 0px 0px 0px;
	border-radius: 2px;
	/* typo */
	font-size: 1.6rem;
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
}
.tableau p.theme {
	margin-top: 11px;
	line-height: 2.5rem;
}

.tableau {
	position: relative;
	background: url('tableau-fleches.png') no-repeat 12px top;
	max-width: 666px;
	height: 666px;
	padding: 0px 0px 20px 20px;
	margin-bottom: 50px;
}
.tableau .sup {
	position: absolute;
	background: url('tableau-boussole.png') no-repeat center center;
	top: 236px;
	left: 286px;
	width: 144px;
	height: 144px;
	z-index: 300;
}
.bloc {
	position: relative;
	float: right;
	width: 296px;
	max-width: 296px;
	height: 294px;
	max-height: 294px;
	padding: 10px;
	margin: 0px 0px 26px 24px;
	background-color: #ebebeb;
}
.bloc header {
	position: relative;
	top: -10px;
	left: -10px;
	width: calc(100% + 20px);
	padding: 10px 13px 8px;
}
.bloc.grace header { background-color: #90bf10; text-align: right; }
.bloc.boost header { background-color: #ffcc00; }
.bloc.change header { background-color: #03c8d5; text-align: right; }
.bloc.derive header { background-color: #fc5f5d; }
.bloc header h3 {
	display: inline-block;
	margin: 0px;
	padding: 0px;
	border: none;
	/* typo */
	font-family: "bebas_neueregular", sans-serif;
	font-size: 3rem;
	color: #404040;
}
.bloc.grace header h3,
.bloc.change header h3 {
	float: right;
}
.bloc header a {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: 0px 8px;
	border: 1px solid #fff;
	border-radius: 15px;
	vertical-align: super;
	/* typo */
	color: #fff;
	font-size: 1.1rem;
	line-height: 1.6rem;
	text-align: center;
	font-family: "PT Serif", serif;
}
.bloc.grace header a, .bloc.change header a { vertical-align: middle; }
.bloc header em {
	display: block;
	clear: both;
	/* typo */
	font-size: 1.6rem;
	line-height: 1.4rem;
	font-weight: 400;
}
.bloc p {
    margin: 0px;
	font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.4rem;
}
.bloc p.theme {
	padding: 3px 8px;
	width: auto;
	height: auto;
}
a.infobulle.actif { background-color: #00acdc; }
div.infobulle {
	opacity: 0;
	transition: all ease-in 0.3s;
	position: absolute;
	top: 42px;
	left: 8px;
	background-color: #fff;
	border: 1px solid #999;
	border-radius: 6px;
	box-shadow: 0px 5px 12px #aaa;
	padding: 6px 8px;
	width: 100%;
	z-index: 350;
	/* typo */
	font-size: 1.45rem;
	line-height: 1.45em;
}


/* === PAGES === */


.etape1 aside {
	padding-top: 71px;
}
.etape1 form[name="domaines"] {
	max-width: 640px;
}
.etape1 form[name="domaines"] input[type="submit"]   {
	margin-top: 22px;
}

.etape2 aside button {
	margin: 4px auto;
	width: 198px;
	height: 44px;
	background-color: #ebebeb;
	/* typo */
	color: #343434;
	font-weight: 600;
}
.etape2 aside button.actif {
	background-color: #5e6569;
	color: #fff;
}
.etape2 aside button:hover {
	background: #000;
	color: #fc9b2a;
}
.etape2 section { margin-bottom: 65px; }
.etape2 section#passion { margin-bottom: 35px; }
.etape2 section > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 9px;
	margin: 8px 0px;
	height: auto;
}
.etape2 section > div:nth-child(2n+1) { background-color: #efefef; }
.etape2 section > div:hover { background-color: #d9f5fe; }
.etape2 section > div p {
	margin: 0px 20px 0px 0px;
	max-width: 625px;
	text-align: left;
	flex-shrink: 1;
}
.etape2 section .cases { flex-shrink: 0; }

.etape3 dl { margin-top: 10px; }
.etape3 dt { margin-top: 25px; }

/* === / PAGES === */



@media screen and (max-width:1870px) {
aside {
	position: relative;
	background: #fbf8f4 url('fond-lateral.jpg') no-repeat center bottom;
	width: auto;
	height: auto;
	min-height: 150px;
	margin-bottom: 45px;
	padding: 5px 0px 10px !important;
}
aside > div {
	max-width: 1330px;
	margin: 0px auto;
}
aside p {
	display: inline-block;
	vertical-align: middle;
}
aside p > img {
	height: 148px;
	margin: 20px 20px 0px 0px;
}
aside button { margin: 5px auto 20px; }
main { padding: 30px; }
}
@media screen and (max-width:1000px) {
.etape2 section > div { display: block; }
.etape2 section > div p { margin-bottom: 6px; }
[type="radio"]:not(:checked) + label, [type="radio"]:checked + label {
	display: inline-block;
	margin: 7px 0px 0px;
}
}
@media screen and (max-width:720px) {
aside p { display: block; }

.tableau { background: none; padding-left: 0px; }
.tableau .sup { display: none; }
.tableau .bloc { float: left; }
.tableau .bloc.grace header, .tableau .bloc.change header { text-align: left; }
.tableau .bloc.grace header h3, .tableau .bloc.change header h3 { float: none; }
}
@media screen and (max-width:650px) {
.tableau .bloc { margin-left: 0px; }
}