:root{
	--corpo-color: 22,33,105;
}
	body{
		background-color: #fff;
	}
	#presentation p{
		color: #000 !important
	}
	article{
		margin: -20px auto 0 auto;
		padding: 0 1em;
		background: transparent;
		border: none;
		border-radius: 0;
	}
	article section{
		background: #fff;
		padding: 0 .5em;
		margin-bottom: 0;
	}
	article section:not(:first-child){
		margin: 2em auto 1em auto;
		padding: 0 1em;
	}
	article section:first-child{
		margin-bottom: 1em;
		margin-top: 20px;
	}
	article section:first-child h2{
		padding-top: .5em
	}
	h1{
		font-size: 3em;
		color: #000;
		display: none;
	}
	h1, h2, h3{font-weight: bold}
	h2{
		padding-top: 0;
		border: none;
		margin-top: 1em;
		border-bottom: 1px solid #ccc;
	}
	h3{
		font-size: 1.25em;
		margin: .5em auto !important;
		padding-top: 0;
		border-bottom: none;
	}
	a.color-corpo{
		color: rgba(var(--corpo-color),1) !important;}
	.btn-link{
		color: #000 !important;
		font-weight: bold;
		text-decoration: underline
	}
	.btn-link:hover{
		text-decoration: underline !important;
	}
	.btn-ecouter, .btn-classif{
		background: transparent !important;
	}
	.row{
		display: flex;
		flex-wrap: wrap;
	}
	.flex{
		display: flex;
	}
	.flex-center{
		align-content: center;
		justify-content: center;
	}
	.annonce{
		background: #f5f5f5;
		padding: 1em 0;
		background-size: cover;
		background-position: center center;
		border-radius: .375em;
		box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
	}

	.annonce h2{margin: .5em auto; border: none; text-align: center}
	.annonce p{font-size: 1.25em}
	.annonce + .annonce{margin-top: 3em}
	.edito-content{
		display: flex;
		flex-direction: column;
		margin-bottom: 1em
	}
	/*.edito-content h3{
		flex: 1;
	}*/
	.btn-universalis, .btn-secondary{
		margin: 0 .5em;
		flex: 1;
		/* max-width: 275px*/
	}
	.btn-light {
		color: #212529;
		background-color: #f8f9fa;
		border-color: #f8f9fa;
	}
	.btn-light:hover {
		color: #212529;
		background-color: #e2e6ea;
		border-color: #dae0e5;
	}
	.btn-secondary {
		color: #fff;
		background-color: #6c757d;
		border-color: #6c757d;
	}
	.btn-secondary:hover {
		color: #fff;
		background-color: #5a6268;
		border-color: #545b62;
	}
	.edito-intro{
		flex: 1
	}
	.edito-poster{
		border-radius: .375em;
		width: 100%;
		min-height: 200px;
		height: auto;
		object-fit: cover;
		box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
		margin-bottom: .5em;
	}
	.fdl-container{
		display: flex;
	}
	.fdl-image a{display: block; width: 100%; height: 100%; z-index: 3}
	.fdl-poster{
		/* float: left; */
		margin-bottom: .5em;
		margin-right: 1em;
		border-radius: .375em;
		box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
		object-fit: cover;
		height:200px;
		width: auto;
		overflow : hidden;
	}
	.fdl-copy{text-align: center; font-size: .75em; color: #666; font-style: italic}


	.fdl-content{
		padding-bottom: 1em;
	}

	.fdl-show p{
		z-index: 3;
	}
	.fdl-show-intro{
		color: #fff;
		font-weight: bold;
		text-shadow: 0 0 5px #333
	}

	.tools{
		margin-bottom: 1em
	}
	.tools-blog{
		border-radius: .375em;
		max-width: 100%;
		height: auto;
		box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
		margin-bottom: 1em;
	}

	.tools-guide-poster{
		border-radius: .375em;
		margin: 0 1em .5em;
		box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
	}

	.btn-classif{
		margin: 1em auto;
		display: block;
	}
	.classif-item{
		min-height: 150px;
		display: flex;
		align-items: stretch;
		justify-content: center;
		border-radius: .375em;
		background-repeat: no-repeat;
		background-position: center center;
		background-size:cover;
		margin: .5em 0;
		box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
	}
	.classif-item a{
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0,0,0,.25);
		width: 100%;
		color: #fff;
		text-shadow: 0 0 5px #666;
		font-weight: bold;
		position: relative;
		z-index: 2;
		font-size: 1.25em;
		text-align: center;
		border-radius: .375em;
		padding: 0 .5em;
	}
	.classif-item a.classif-link{
		color: #fff !important;
	}

	.image-protected{
		position: relative;
		z-index: 1;
	}
	.image-protected::before{
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: transparent;
		content: "";
		z-index: 2;
	}

	.image-quizz{
		border-radius: .375em;
		box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
	}
	.list-quizz li{
		margin: .5em
	}
	.list-quizz a{
		display: block;
		padding: .5em 1em;
		color: #333;
		border: 1px solid #ccc;
		border-radius: .375em;
		text-decoration: none;
	}
	.list-quizz a:hover{
		background: #f5f5f5;
		text-decoration: none;
	}
	.list-quizz a.alert-danger:hover{
		background: #f2dede;
	}
	.list-quizz a.alert-success:hover{
		background: #dff0d8;

	}
	.news-content{
		display: flex;
		flex-direction: column;
		margin-bottom: 1em;
		text-align: center;
		justify-content: start;
		/*align-items: center;*/
	}
	.news-content img{
		height: 250px;
		border-radius: .375em;
		box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
		object-fit: cover;
		overflow : hidden;
	}

	.btn-ecouter, .btn-classif{
		background-color: #066e7b;
	}

		.section-corpo{
		--corpo-color: 22,33,105;
	}
	.btn-corpo{
		background-color: rgba(var(--corpo-color),.75)
	}
	.btn-corpo:hover{
		background-color: rgba(var(--corpo-color),1)
	}
	.bloc-credits{
		border-top: 1px solid #eee;
		padding-top: 1em !important;
		font-size: .8em !important
	}
	@media(max-width: 768px){
		header.header{margin-bottom: 0}
		article section:first-child{
			padding-top: 1px;
		}
		h2{
			padding-top: 0;
		}

		.fdl-show{
			min-height: 150px
		}
		.fdl-container{
			display: block;
		}
		.fdl-poster{
			float: none;
			display: block;
			margin: 0 auto
		}
		.news-content h3{font-size: 1em}
	}