@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/a9d8f2') 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: #333;
		font-weight: bold;

		background:	url('/f/svg/hole/st/container/3e9dd5') 4px 18px no-repeat, // cercle
					url('/f/svg/hole/st/container/a9d8f2') 0px 14px no-repeat, // contour blanc
					url('/f/svg/dot/st/container/a9d8f2') 20px 0 no-repeat;    // ligne
		background-size: 38px, 46px, 6px 100%;

		// Gestion du before (compteur css) //
		&[data-n]:before{
			content: attr(data-n);

			font-size: 1.3em;
			color: #fff;
			font-weight: bold;

			display: inline-block;
			position: absolute;
			left: 35px;
		}
	}




}