/* pour extends */

.btn, .btn:visited, button { padding:0.6em 1em 0.5em; margin:0.2rem; display:inline-block; 
	background-color:$grayLighter; color:$grayDarker; 
	border:0; @include border-radius(0);
	&:hover { color:$white; background-color:$couleurLien; }
}


.inline { margin:0; padding:0;
	li { display:inline;
		&:after {  content:' - '; }
		&:last-child:after { content:''; }
	}
}


/* .flex { padding:0; display: flex; align-items: flex-start; justify-content:space-between; flex-flow:row wrap; align-items:stretch; } */
/* la liste flexbox */
.flex { @include flex;
	flex-grow: 1;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 4em;
	> * { overflow:hidden; }
	&.flex1 > * { flex:1; } // pour tout mettre sur une seule ligne tout le temps
}
.spacebetween { -webkit-justify-content: space-between; /* Safari */ justify-content: space-between; }
.flex2 > * { flex-basis:100%/2; }
.flex3 > * { flex-basis:100%/3; }
.flex4 > * { flex-basis:100%/4; }
.flex5 > * { flex-basis:100%/5; }
.flex6 > * { flex-basis:100%/6; }

@include media($bp-medium) {
		
	.flex2 > * { flex-basis:100%/2; }
	.flex4 > * { flex-basis:100%/2; }
	.flex6 > * { flex-basis:100%/2; }
	
}
@include media($bp-small) {
	
	.flex3 > *,
	.flex5 > * { flex-basis:100%; }

}
@include media($bp-xxsmall) {
	
	.flex2 > *,
	.flex4 > *,
	.flex6 > * { flex-basis:100%; }

}