/* ---------------------------------------------- */
/* Important : 									  */
/* ne pas faire de modification sans  			  */
/* vérifier le comportement avec 				  */
/* Internet Explorer.         					  */
/* ---------------------------------------------- */

/* 
positionnements de blocs :
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible
https://fr.learnlayout.com/position.html
*/

:root{
	/* bordures apparentes (développement) : */
	 /*--voirBordures:1px; */
}

#schema, #colonneGauche, #colonneCentrale, #colonneDroite, .indicationGauche, .indicationDroite, .blocTxt, .blocFleche {
	padding:0;
	margin:0;	
}

#schema {
	display:flex;
	justify-content:space-around;
	border:var(--voirBordures) solid green;
}

#colonneGauche {
	text-align:right;
	border:var(--voirBordures) solid blue;
}

#colonneCentrale {
	/* width:20em; */
	border:var(--voirBordures) solid green;
}

#colonneDroite {
	text-align:left;
	border:var(--voirBordures) solid blue;
}


.indicationGauche, .indicationDroite { 
	position:relative;
	display:flex;
	/*width:15em;*/
	width:13.5em;
	border:var(--voirBordures) solid green;
}

.indicationGauche { justify-content: flex-end;} /* blocs empilés à droite */
.indicationDroite { justify-content: flex-start;} /* blocs empilés à gauche */


.blocTxt, .blocFleche {
	/* bloc enfant centré verticalement : */
	display:flex;
	justify-content:center;
	flex-direction:column;
	border:var(--voirBordures) solid red;
}

.blocTxt { 
	/*width:12em ;*/
	width:10.5em ;
}

/*
.fleche {
	height:2em;
	padding:0 0.5em;
}
*/


.flecheDroite {
	/* https://css-tricks.com/snippets/css/css-triangle/ */

	border-top: 1em solid transparent;
	border-bottom: 1em solid transparent;
	border-left: 0.75em solid rgb(255,141,2);

	margin-left:0.5em;
	margin-right:0.5em;
}

.flecheGauche {
	/* https://css-tricks.com/snippets/css/css-triangle/ */

	border-top: 1em solid transparent;
	border-bottom: 1em solid transparent;
	border-right: 0.75em solid rgb(255,141,2);

	margin-left:0.5em;
	margin-right:0.5em;
}


.puce {
     background: rgb(255,141,2);
     border-radius: 50%;
     display: inline-block;
     height: 0.8em;
     width: 0.8em;
     margin:0 0.5em;
     /*margin-right: 4px;*/
}