@import 'constants';

/* [1] Formulaire de type timeline
=========================================================*/
#WRAPPER > #CONTAINER section[data-timeline]{
	display: block;
	position: relative;

	background-color: #fff;

	font-size: .9em;
	color: #000;

	/* (1) On ajoute le liseré à droite pour TOUS les éléments */
	& *:not(.no-line){

		color: #333;

		margin: 0 20px;
		padding: 5px 60px;

		background: url('/f/svg/dot/st/container/aaaaaa') 20px 0 no-repeat;
		background-size: 6px 100%;

	}


	/* (2) Titres de sections */
	& h5:not(.no-line),
	& [data-title]:not(.no-line){
		padding: 20px 60px;

		font-size: 1.4em;
		color: #777;
		font-weight: bold;

		background:	url('/f/svg/hole/st/container/777777') 4px 16px no-repeat, // cercle
					url('/f/svg/hole/st/container/ffffff') 2px 14px no-repeat, // contour blanc
					url('/f/svg/dot/st/container/aaaaaa') 20px 0 no-repeat;    // ligne
		background-size: 38px, 42px, 6px 100%;

		// Gestion du before (compteur css) //
		// &[data-n]:before{
		// 	content: attr(data-n);
		//
		// 	font-size: 1.3em;
		// 	color: #999;
		// 	font-weight: bold;
		//
		// 	display: inline-block;
		// 	position: absolute;
		// 	left: 37px;
		// }
	}




}