html {background:#fbfcfd;}
body {font-family: 'Source Sans Pro', sans-serif;text-align:center;padding:0;margin:0;}

div.conteneur {
	margin:0;
	text-align:left;
	padding:0 20px;
}

.header {text-align:left;width:100%;padding-right:4%;box-sizing: border-box;}
.header a {color:#fff;}

.header div:nth-child(1) {
	float:left;
}
.header.header-carto {padding:10px 20px 0 20px;border-bottom:2px solid #0d2380;height:90px;}
.header div img#logo {width:200px;}
.header div:nth-child(2) {
	float:right;
}
	
p {
	font-size:16px;
	color:#0d3280;
	line-height:23px;
	margin:10px 0 0 0;
}
p a, ul li a {color:#0d3280;}

p.footer {font-size:13px;margin:80px auto 0 auto;text-align:center;color:#fff;background:#0d3280;padding:1%;}
p.footer a {color:#fff;}

h1, h2 {
	color:#0d3280;
	text-transform:uppercase;
	font-weight:bold;
	font-size:47px;
	margin-bottom:0px;
}

h2 {font-size:29px;margin-top:40px;}

#logo {width:300px;}

.logos {margin:0 auto;text-align:center;margin-top:60px;}

#bandeau-beta {
	width:100%;
	background:#0d3280;
	color:#fff;
	display:block;
	padding:1% 2%;
	margin:2% 0;
	font-size:13px;
	font-style: italic;
}

#bandeau-beta a {color:#fff;}

@media only screen and (min-width: 768px) {
	#conteneur-haut {
		background:#fbfcfd;
	  	background: linear-gradient(to right bottom, #fbfcfd 50%, #0d3280 50%);
	  	background-size:60% 100%;
	  	background-repeat:no-repeat;
	  	background-position:right top;
	}
	div.conteneur {width:45%;}
	.header {text-align:right;}

	.quatre-indicateurs {display:flex;justify-content:center; }
	.un-indicateur {width:25%;}
	.container-logos .un-indicateur {width:20%;}

	.logos {width:80%;}
	.logos img {width:180px;padding:10px 30px;}

	#mooc p {margin-right:80px;}
}

.un-indicateur a {
	float:right;
	padding:5% 5%;
}

@media only screen and (max-width: 767px) {
	div.conteneur, body, #conteneur-haut {width:100%;margin:0;padding:0;}
	.academie {background:#0d3280;color:#fff;padding:10px 20px 30px 20px;}
	.academie h1 {color:#fff;}
	.academie p {color:#fff;}

	#mooc {padding:20px;}
	.footer {text-align:center;}
	.header {padding:0 0 2% 4%;}

	.quatre-indicateurs {padding:2% 0;}
	.logos img {width:160px;padding:0 5px;}

	.un-indicateur a {float:none;display:block;width:60%;margin:0 auto;text-align:center;}
}

#mooc-nr {width:80%;max-width:1170px;margin:80px auto 0 auto;}

.un-indicateur {background:#0d3280;padding:20px;margin:4px;box-sizing:border-box;}
.un-indicateur p, .un-indicateur h3 {color:#fff;}
.un-indicateur img {width:100%;border:2px solid #fff;}
.un-indicateur h3 {min-height:75px;}

#mooc-nr > p {margin-bottom:40px;}

/* bouton */
.button-ifs {
	overflow: hidden;
	-webkit-transition: border-color 0.3s, color 0.3s;
	transition: border-color 0.3s, color 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	background:#0d3280;
	text-decoration:none;
}

.un-indicateur .button-ifs {background:#fff;}
.button-ifs::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 150%;
	height: 100%;
	background: #37474f;
	z-index: -1;
	-webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
	transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
	-webkit-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.3s;
	transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
}
.un-indicateur .button-ifs:before {background:#fff;}
.button-ifs:hover {color: #000;border-color: #0d3280;}
.button-ifs.button-inverted:hover {color: #000;border-color: #fff;}
.un-indicateur .button-ifs:hover {color: #fff;border-color: #fff;}
.button-ifs:hover::before {
	opacity: 1;
	background-color: #fff;
	-webkit-transform: rotate3d(0, 0, 1, 0deg);
	transform: rotate3d(0, 0, 1, 0deg);
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button-ifs.button-inverted:hover::before {background-color: #fff;}
.un-indicateur  .button-ifs:hover::before {background-color: #0d3280;}
.button {
	margin-top: 1em;
	padding: 1.3em 1em;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	background:#0d3280;
	color:#fff;
	display:inline-block;
}
.un-indicateur .button {background:#fff;color:#0d3280;}

.button:focus {outline: none;}
.button > span {vertical-align: middle;}
.button-ifs {border: 3px solid;}
.button-ifs {letter-spacing: 0px;text-transform: uppercase;}
.button-ifs {font-size: 15px;font-weight:bold;}
.header a.button {padding:0.5em 0.5em;margin-top:0;}
a.button.non-active {background:#4b6eb8;}

.header span, .header a.classique {color:#0d3280}

.droit-utilisation {text-align:center;}
.droit-utilisation img {background:#0D3280;width:300px;padding:20px;}