
#ouvragesexp .divVignettes{
	padding:0 8em 0 8em;
	align-items:center;
}

#ouvragesexp .content{
	margin-bottom:2.2em;
	}
#ouvragesexp header.major {
	margin-top:0.1em;
	margin-bottom:0.1em;
}
#ouvragesexp header h4{
	margin-top:0.1em;
	margin-bottom:0.1em;
	/*ajouté pour que les différentes parties des vidéos soient bien visibles*/
	font-size: 1.75em;
	text-align:center;
}
#ouvragesexp p{
	margin-top:0.6em;
	margin-bottom:0.5em;
}
#ouvragesexp legend{
	margin-top:0.2em;
	margin-bottom:0.1em;
}
#ouvragesexp .textvid{
	font-size:0.9em; 
	line-height:1.25em; 
	margin:0 0 1em 0 ;
}

/*.divVignettes{
	width:80%;
}*/

.divVignettes h5 {
		font-family: 'Bellerose', Garamond, Sérif;
		font-size: 1.1em;
		font-weight:100;
		letter-spacing:0.1em;
	}
.divVignettes p {
	text-align:center;
	}

/* Spotlights */

	.spotlights {
		border-top: 0 !important;
	}

		.spotlights + * {
			border-top: 0 !important;
		}

		.spotlights > section {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: row;
			-webkit-flex-direction: row;
			-ms-flex-direction: row;
			flex-direction: row;
			justify-content: space-around;
			background-color: #282520;
		}

.spotlights > section > .divVignettes {
	width:100%;
    display: flex;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
	justify-content: space-evenly;		
    align-items: center;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;	
    flex-wrap: wrap; /***  pour que les blocs de vidéos se partagent l'espace ***/
		-moz-flew-wrap:wrap;
		-webkit-flew-wrap:wrap;
		-ms-flew-wrap:wrap;
    flex-direction: row;
		-moz-flex-direction: row;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
}

				.spotlights > section > .image img {
					border-radius: 0;
					display: block;
					height:max-content;
					width:max-content;
					margin:auto;/* 2em auto 2em; */border: 3px solid white;
				
				}

				.spotlights > section > .image:before {
					background: rgba(36, 41, 67, 0.9);
					content: '';
					display: block;
					/*height: 100%;*/ /*retiré car empêchait de cliquer sur le lien de la note1 de la page pasquier*/
					left: 0;
					opacity: 0;
					position: absolute;
					top: 0;
					width: 100%;
				}

			.spotlights > section > .content {
				display: -moz-flex;
				display: -webkit-flex;
				display: -ms-flex;
				display: flex;
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				-moz-justify-content: center;
				-webkit-justify-content: center;
				-ms-justify-content: center;
				justify-content: center;
				-moz-align-items: center;
				-webkit-align-items: center;
				-ms-align-items: center;
				align-items: center;
				padding: 2em 3em 0.1em 3em ;
				width: 70%;
			}

				.spotlights > section > .content > .inner {
					margin: 0 auto;
					max-width: 100%;
					width: 65em;
				}
				/*code ajouté pour centrer les commentaires sur toute la largeur de la page */
				.spotlights > section > .content > .inner > .legende{
					width:150%;
					margin-left:-60%;
					margin-bottom: 4em;
					/*margin: 0 auto;
					max-width: 100%;
					width: 65em;*/
				}

			.spotlights > section:nth-child(2n) {
				-moz-flex-direction: row-reverse;
				-webkit-flex-direction: row-reverse;
				-ms-flex-direction: row-reverse;
				flex-direction: row-reverse;
				background-color: #261f1c;
			}

				.spotlights > section:nth-child(2n) > .content {
					-moz-align-items: -moz-flex-end;
					-webkit-align-items: -webkit-flex-end;
					-ms-align-items: -ms-flex-end;
					align-items: flex-end;
				}
					/*code ajouté pour centrer les commentaires sur toute la largeur de la page */
					.spotlights > section:nth-child(2n) > .content > .inner > .legende{
						width:150%;
						margin-left:-2%;
						margin-bottom: 4em;
						/*margin: 0 auto;
						max-width: 100%;
						width: 65em;*/
					}
.spotlights > section > .divVignettes {
	width:40%;
				-moz-justify-content: center;
				-webkit-justify-content: center;
				-ms-justify-content: center;
				justify-content: center;
				-moz-align-items: center;
				-webkit-align-items: center;
				-ms-align-items: center;
				align-items: center;
			}

		@media screen and (max-width: 1920px) {

			.spotlights > section > .image {
				width: 40%;
			}

			.spotlights > section > .content {
				width: 60%;
			}
		/*code ajouté pour centrer les commentaires sur toute la largeur de la page */
				.spotlights > section > .content > .inner > .legende{
					width:150%;
					margin-left:-57%;
				}
				.spotlights > section:nth-child(2n) > .content > .inner > .legende{
					width:150%;
					margin-left:5%;
				}

		}


		@media screen and (max-width: 1680px) {

			.spotlights > section > .image {
				width: 40%;
			}

			.spotlights > section > .content {
				width: 60%;
			}

		}

		@media screen and (max-width: 1280px) {
			#ouvragesexp .divVignettes{
				padding:0 1.5em 0 1.5em;
				align-items:center;
				}

			.spotlights > section > .image {
				width: 45%;
			}
			/* ajout pour le responsive de la galerie vidéo */
			#ouvragesexp .divVignettes{
				padding:0 3em 0 3em;
				align-items:center;
				}

			.spotlights > section > .content {
				width: 55%;
			}
		/*code ajouté pour centrer les commentaires sur toute la largeur de la page */
				.spotlights > section > .content > .inner > .legende{
					width:210%;
					margin-left:-103%;
				}
				.spotlights > section:nth-child(2n) > .content > .inner > .legende{
					width:210%;
					margin-left:-8%;
				}

		}

		@media screen and (max-width: 980px) {
			#ouvragesexp .divVignettes{
				padding:0 1em 0 1em;
				align-items:center;
				}
		
			#ouvragesexp .content{
				margin-bottom:1em;
			}
			.spotlights > section {
				display: block;
			}

				.spotlights > section > .image {
					width: 100%;
					max-height:30vh;
					display:contents;
					vertical-align: middle;
				}
				.spotlights > section:nth-child(2n) > .image {
					width: 100%;
					max-height:30vh;
					display:contents;
					vertical-align: middle;
				}
					.spotlights > section > .image img {
						border-radius: 0;
						display: block;
						height:max-content;
						width:max-content;
						vertical-align:middle;
				}


				.spotlights > section > .content {
					padding: 4em 3em 2em 3em ;
					width: 100%;
				}
				.spotlights > section:nth-child(2n) > .content {
					padding: 4em 3em 2em 3em ;
					width: 100%;
				}
				/*code ajouté pour centrer les commentaires sur toute la largeur de la page */
				.spotlights > section > .content > .inner > .legende{
					width:100%;
					margin-left:0%;
				}
				.spotlights > section:nth-child(2n) > .content > .inner > .legende{
					width:100%;
					margin-left:0%;
				}

		}

		@media screen and (max-width: 736px) {
		
			/* ajout pour le responsive de la galerie vidéo */
			#ouvragesexp .divVignettes{
				padding:0 0.3em 0 0.3em;
				align-items:center;
				}
				
			#ouvragesexp .content{
				margin-bottom:1em;
			}
			.spotlights > section > .content {
				padding: 3em 1.5em 1em 1.5em ;
			}
			.spotlights > section:nth-child(2n)  > .content {
				padding: 3em 1.5em 1em 1.5em ;
			}
		/*code ajouté pour centrer les commentaires sur toute la largeur de la page */
				.spotlights > section > .content > .inner > .legende{
					width:100%;
					margin-left:0%;
				}
				.spotlights > section:nth-child(2n) > .content > .inner > .legende{
					width:100%;
					margin-left:0%;
				}

		}




