/*	--------------------------------------------------
	
	FEUILLE DE STYLE : commun_videos.css
	(c) Le Rouge & le Noir. - Tous droits réservés.
	
	--------------------------------------------------	*/

	
/* ____________________________________________________________________________________________________________________________________________________________________________________________________________________________ */
/* ============================================================================================================================================================================================================================ */
/*  STRUCTURATION DE LA MISE EN PAGE  */


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* LES VIDÉOS */


#corps_videos {
	width: 100%;
}
#corps_videos.rn_traversant {
	background: #000;
	color: #fff;
	padding-bottom: .5em;
}
#corps_videos ul.listevideos {
	list-style: none;
	margin: 0 0 5px 0;
	padding: 0;
	width: 100%;
}
#corps_videos ul.videossuivantes li {
	display: inline-block;
	vertical-align: top;
	width: 50%;
}
#corps_videos ul.listevideos li .capsule-video {
	display: block;
	padding: 0 1px 0 0;
	max-width: 100%;
}
#corps_videos ul.listevideos li+li .capsule-video {
	padding: 0 0 0 3px;
}
#corps_videos ul.listevideos li .mini_capsule-video {
	overflow: hidden;
}
#corps_videos ul.listevideos li .mini_capsule-video iframe {
	width: 100%;
}
#corps_videos ul.videossuivantes li .mini_capsule-video iframe {}

#corps_videos a {
	color: #bbb;
	text-decoration: none;
}
#corps_videos a:hover {
	color: #fff;
}
#corps_videos ul.listevideos li a {
	padding: 1em 10px 1em 0;
}

/* Pour le hack suivant : http://nicolasgallagher.com/micro-clearfix-hack/ */
#corps_videos ul.listevideos:before, #corps_videos ul.listevideos:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}
#corps_videos ul.listevideos:after {
	clear: both;
}


/* ____________________________________________________________________________________________________________________________________________________________________________________________________________________________ */
/* ============================================================================================================================================================================================================================ */
/*  GESTION DES LARGEURS & RÉSOLUTIONS  */


/* En-dessous de 700px de largeur, on passe les deux vidéos côte à côte en blocs l'un en-dessous de l'autre. */
@media (max-width: 700px) {
	#corps_videos ul.videossuivantes li {
		width: 100%;
	}
}