/*
╭━━━━━━━━━━━━╯ Karimba.net ╰━━━━━━━━━━━━╮
	Feuille de styles des sélecteurs
 __________________________________________________________ 
	© 2019 https://www.karimba.net
╰━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╯
*/

.selecteur {
	font-size: 0.95em;
}
.selecteur .compos {
	padding: 2% 0;
}
.selecteur .part,
.selecteur .compos li {
	display: inline-block;
	width: 22.5em;
	margin: 0 0.3em;
	font-size: 0.5em;
}
.selecteur .part .fleche {
	display: block;
	background: transparent url(../img/fleche-2-haut.png) no-repeat center;
	background-size: 1.7em;
	height: 3em;
	 -webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		  -o-transition: all 0.3s ease;
			 transition: all 0.3s ease;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.selecteur .part .fleche.bas {
	background-image: url(../img/fleche-2-bas.png);
}
.selecteur .part .fleche:hover {
	background-size: 2.3em;
	filter: grayscale(1) brightness(0.7);
}
.selecteur .part .fleche.limit,
.selecteur .part .fleche.limit:hover {
	filter: grayscale(1);
	opacity: 0.2;
	background-size: 1.7em;
	cursor: default;
}

.selecteur .part .clip {
	position: relative;
	height:25em;
	background:  #AF1917;
	overflow: hidden;
}
.selecteur .part .clip,
.selecteur .compos li {
	-webkit-box-shadow:0 0.2em 1em rgba(0,0,0,0.2);
	   -moz-box-shadow:0 0.2em 1em rgba(0,0,0,0.2);
			box-shadow:0 0.2em 1em rgba(0,0,0,0.2);
}
.selecteur .part .clip ul.pane {
	position: absolute;
	left: 0;
	top:0;
	width: 100%;
	transform: translateY(0);
	 -webkit-transition: top 0.4s cubic-bezier(.54,1.42,.73,1), transform 0.2s ease;
		-moz-transition: top 0.4s cubic-bezier(.54,1.42,.73,1), transform 0.2s ease;
		  -o-transition: top 0.4s cubic-bezier(.54,1.42,.73,1), transform 0.2s ease;
			 transition: top 0.4s cubic-bezier(.54,1.42,.73,1), transform 0.2s ease;
}
.selecteur.launch .part .clip ul.pane {
	 -webkit-transition: none !important;
		-moz-transition: none !important;
		  -o-transition: none !important;
			 transition: none !important;
}
.selecteur .part .clip ul.pane.limittop {transform: translateY(2em);}
.selecteur .part .clip ul.pane.limitbottom {transform: translateY(-2em);}
.selecteur .part .clip ul.pane li,
.selecteur .compos li {
	position: relative;
	background: #FFF;
	overflow: hidden;
}
.selecteur .part .clip ul.pane li {height: 25em;}
.selecteur .compos li {
	padding: 0.5em 0.5em 1em;
	vertical-align: top;
}
.selecteur .part .clip ul.pane li div.img {
	position: relative;
	height: 15em;
	background: #3E3C3C no-repeat center;
	background-size: cover;
	color: #FFF;
}
.selecteur .part .clip ul.pane li div.txt {
	position: relative;
	vertical-align: middle;
}
.selecteur .part .clip ul.pane li div.nouveau {
	display: block;
	position: absolute;
	font-size: 1.2em;
	font-weight: 700;
	letter-spacing: 0.08em;
	top: 50%;
	left:0;
	width: 6em;
	margin-top: 3em;
    padding: 0.2em 0.5em;
	background: #AF1917;
	color: #FFF;
	-webkit-transform: rotate(-90deg);
	   -moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
			transform: rotate(-90deg);
	-webkit-transform-origin: left top;
	   -moz-transform-origin: left top;
		-ms-transform-origin: left top;
			transform-origin: left top;
}
.selecteur .part .clip ul.pane li h5 {
	font-size: 2em;
	font-weight: 200;
	padding: 0.2em;
}
.selecteur .part .clip ul.pane li h6,
.selecteur .compos li h6 {
	font-size: 1em;
	color: #AF1917;
	padding: 0 1em 0.2em;
	line-height: 1em;
}
.selecteur .compos li h6 {
	margin: 0.3em 0 0.6em;
	font-size: 1.2em;
}
.selecteur .compos li h6 em {
	font-style: normal;
	font-weight: 400;
	color: #3E3C3C;
}
.selecteur .part .clip ul.pane li p.descr,
.selecteur .compos li p.descr {
	font-size: 0.85em;
	line-height: 1.2em;
    padding: 0 1em;
}
.selecteur .compos li p.descr {font-size: 1em;}
.selecteur .part .clip ul.pane li a,
.selecteur .compos li a,
#selecteur-suggestion a {
	display: block;
	position: relative;
	text-decoration: underline;
	font-size: 0.75em;
	color: #3E3C3C;
	letter-spacing: 0.03em;
    width: 6em;
    margin: 0.5em auto;
}
.selecteur .part .clip ul.pane li a:hover,
.selecteur .compos li a:hover,
#selecteur-suggestion a:hover {
	color: #62AD23;
}
.selecteur .part .clip ul.pane li a span.popover,
.selecteur .compos li a span.popover,
#selecteur-suggestion a span.popover {
	position: absolute;
	background: #62AD23;
	font-size: 1.2em;
	border-radius: 0.2em;
    bottom: 1.7em;
    left: -9em;
    width: 23em;
    padding: 0.3em;
	color: #FFF;
	-webkit-box-shadow:0.1em 0.2em 0.5em rgba(0,0,0,0.3);
	   -moz-box-shadow:0.1em 0.2em 0.5em rgba(0,0,0,0.3);
			box-shadow:0.1em 0.2em 0.5em rgba(0,0,0,0.3);
	-webkit-transition: all 0.3s ease;
	   -moz-transition: all 0.3s ease;
		 -o-transition: all 0.3s ease;
			transition: all 0.3s ease;
	transform: rotateX(90deg);
    transform-origin: bottom;
	opacity: 0;
}
.selecteur .part .clip ul.pane li a:hover span.popover,
.selecteur .compos li a:hover span.popover,
#selecteur-suggestion a:hover span.popover {
	display: block;
	transform: rotateX(0deg);
	opacity: 1;
}
.selecteur .part .clip ul.pane li a span.popover:after,
.selecteur .compos li a span.popover:after,
#selecteur-suggestion a span.popover:after {
	content:"";
	display:block;
	position:absolute;
	left:50%;
	margin-left:-6px;
	bottom:-5px;
	width:0;
	height:0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 5px solid #3E3C3C;
}
.selecteur .part .clip ul.pane li a span.popover small,
.selecteur .compos li a span.popover small,
#selecteur-suggestion a span.popover small {
	display: block;
	font-size: 0.8em;
}

@media (max-width : 1000px) {
	/*div.selecteur {font-size: 0.83333em;}*/
}
@media (max-width : 900px) {
	.selecteur .part .clip ul.pane li div.img {height: 14em;}
	.selecteur .part .clip ul.pane li h5 {font-size: 1.6em;padding: 0;}
	.selecteur .part .clip ul.pane li h6 {font-size: 1.2em;}
	.selecteur .part .clip ul.pane li p.descr {font-size: 1em;}
	.selecteur .part .clip ul.pane li a {font-size: 0.9em;}
	.selecteur .part .clip ul.pane li a span.popover {left: -7em;width: 19em;}
	.selecteur .compos li h6 {font-size: 1.5em;}
	.selecteur .compos li p.descr {font-size: 1.2em;}
	.selecteur .compos li a {font-size: 1.1em;}
	.selecteur .compos li a span.popover {left: -5em;width: 15em;}
}


@media (max-width : 700px) {
	.selecteur .part {
		width: 100%;
		margin: 0;
		font-size: 0.8em;
	}
	.selecteur .part .clip {height: 15em;}
	.selecteur .part .clip ul.pane li {
		display: table;
		width: 100%;
		height: 15em;
	}
	.selecteur .part .clip ul.pane li div.img {
		display: table-cell;
		width: 50%;
	}
	.selecteur .part .clip ul.pane li div.txt {
		display: table-cell;
		width: 50%;
		padding-top: 2em;
	}
	.selecteur .part .clip ul.pane li h5 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.selecteur .compos {padding: 5% 0 2%;}
	.selecteur .compos li {
		display:block;
		width: 100%;
		margin: 0 0 1em;
		font-size: 0.65em;
	}
}
@media (max-width : 500px) {
	.selecteur .part .clip ul.pane li p.descr {font-size: 0.85em;}
	.selecteur .part .clip,
	.selecteur .part .clip ul.pane li {height: 18em;}
}
@media (max-width : 420px) {
	.selecteur .part .clip,
	.selecteur .part .clip ul.pane li {height: 25em;}
	.selecteur .part .clip ul.pane li {display:block;}
	.selecteur .part .clip ul.pane li div.img,
	.selecteur .part .clip ul.pane li div.txt {
		display: block;
		width: 100%;
		padding-top: 0;
	}
	.selecteur .part .clip ul.pane li h5 {position: relative;}
}



/* ╰━━┅┉┈  © KARIMBA.NET - www.karimba.net  ┈┉┅━━╯ */