/* itemsLIST.CSS */

.bareme_top {
	display: none;
}

.brandsFilter {
	position: relative;
}
.brandsFilter article {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 40%;
	margin: 20px 24.8% 0 10%;
	padding: 0 0 3px 3px;
}

@media (max-width: 1300px) {
	.brandsFilter article {
		margin: 20px 5% 20px 5%;
	}
}
@media (max-width: 500px) {
	.brandsFilter article {
		margin: 20px 2% 20px 2%;
	}
}

.brandsFilter article a {
	font-size: 0.64rem;
	font-weight: 600;
	text-transform: uppercase;
	color: white;
	display: inline-block;
	background-color: #014389;
	margin: 3px 3px 0 0;
	padding: 5px 6px 6px;
	transition: 0.4s;
}
.brandsFilter article a:hover {
	background-color: #fde900;
	color: #014389;
}
.brandsFilter article .active {
	background-color: #fde900;
	color: #014389;
}

.AvArFilter {
	position: absolute;
	right: 25%;
	top: 0;
	font-size: 0.8rem;
}
.brandsFilter .AvArFilter a {
	font-size: 0.64rem;
	font-weight: 600;
	text-transform: uppercase;
	color: white;
	display: inline-block;
	background-color: #6a6f75;
	margin: 3px 0 0 0;
	padding: 5px 6px 6px;
	transition: 0.4s;
}
.brandsFilter .AvArFilter a:hover {
	background-color: #fde900;
	color: #014389;
}
.brandsFilter .AvArFilter .active {
	background-color: #fde900;
	color: #014389;
}

@media (max-width: 1400px) {
	.AvArFilter {
		right: 26%;
	}
	.brandsFilter article {
		margin: 20px 24.8% 0 5%;
	}
}
@media (max-width: 1300px) {
	.AvArFilter {
		right: 5%;
	}
}
@media (max-width: 970px) {
	.brandsFilter article {
		width: 54%;
	}
}
@media (max-width: 860px) {
	.brandsFilter article {
		width: 90%;
	}
	.AvArFilter {
		margin-top: -30px;
		left: 5%;
		right: auto;
	}
}

.ListSeparator {
	background-color: var(--blue-theme);
	margin: 0 5% 10px 5%;
	color: #fde900;
	text-align: center;
	padding: 10px 0;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 4px;
	font-size: 0.84rem;
	text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
	border-bottom: 1px dashed white;
	cursor: pointer;
}
.ListSeparator .fas {
	color: white;
	opacity: 0.4;
}

.listItems {
	display: flex;
	margin: 8px 5% 8px 5%;
	min-height: 200px;
	/* max-height: 230px; */
}

.listItems article {
	border: 1px gray solid;
	flex: 7;
	display: flex;
}

.LI_imgBox {
	width: 25%;
	display: flex;
	position: relative;
}

.listItems article a {
	color: black;
}

.LI_imgBox .marque {
	padding: 2rem 0;
	object-fit: contain;
	width: 30%;
}

.LI_imgBox .prod {
	width: 66%;
}

.LI_imgBox img {
	max-height: 200px;
	object-fit: contain;
	padding: 1%;
}

.LI_content {
	display: flex;
	flex-direction: column;
	width: 75%;
	padding-left: 2rem;
	padding: 1% 2% 0.5%;
}

.LI_content div {
	display: flex;
	align-items: center;
}

.LI_head {
	justify-content: space-between;
}

.priceBox {
	display: flex;
	align-items: flex-end;
	width: 100%;
	flex: 1;
	justify-content: space-between;
	align-self: flex-start;
}

.priceBox span {
	margin-left: 8px;
}

.LI_head h3 {
	font-size: 1.18rem;
	font-weight: 600;
	margin: 0;
	margin-right: 1rem;
	line-height: 1.2;
	padding-bottom: 8px;
}

.LI_head p {
	margin: 0;
	margin-left: 1rem;
	white-space: nowrap;
}

.LI_content .promo {
	background: var(--yellow-theme);
	font-size: 1.3rem;
	padding: 0 6px;
}

.LI_content .price {
	font-weight: bold;
	font-size: 1.8rem;
	white-space: nowrap;
}

.normalPrice {
	white-space: nowrap;
	margin-left: auto !important;
}
.conditionsPrice {
	display: none;
	white-space: nowrap;
	margin-left: auto !important;
}

.LI_content .priceConditions {
	font-weight: 500;
	font-size: 0.9rem;
	color: #696969;
	white-space: nowrap;
	margin-left: auto;
	/* background-color: #eeeeee; */
	/* padding: 3px 7px; */
	border-radius: 3px;
	margin-right: 2vw;
	display: inline-block;
}
.LI_content .priceConditions sup {
	font-weight: 700;
	font-size: 0.6em;
}

.LI_content .price_ttc_cndt {
	display: inline-block;
	font-size: 1.6rem;
	font-weight: 700;
	color: #000000;
	border-radius: 4px;
	margin-top: 5px;
	margin-left: auto;
	white-space: nowrap;
	margin-right: 12px;
}
.LI_content .price_ttc_cndt sup {
	font-weight: 700;
	font-size: 0.6em;
}

.LI_content .price sup {
	font-size: 0.9rem;
}

.LI_content .initialPrice {
	color: gray;
	text-decoration: line-through;
	font-size: 1.3rem;
}

.LI_body {
	justify-content: space-between;
}

.LI_body > p {
	font-weight: 300;
	margin: 0;
	max-width: 70%;
}

.LI_body p {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 600;
}

.LI_body .stock,
.LI_body .outOfStock,
.LI_body .lastItems {
	font-size: 0.64rem;
	font-weight: 600;
	/*background-color: #f1f1f1;
	padding: 2px 10px;*/
	padding: 4px 0;
	border-radius: 200px;
}

.LI_body .stock {
	color: rgb(74, 173, 18);
	text-transform: uppercase;
	font-size: 1.2em;
	padding-top: 5px;
}

.LI_body .outOfStock {
	color: rgb(204, 63, 38);
	text-transform: uppercase;
	font-size: 1em;
	text-align: right;
}

.LI_body .lastItems {
	color: orange;
	text-transform: uppercase;
	font-size: 1em;
}

.stock p {
	margin: 0;
}

.outOfStock i,
.lastItems i {
	margin-right: 0.5rem;
}

.stock i {
	background-color: rgb(74, 173, 18);
	color: black;
	border-radius: 50%;
	margin-right: 0.5rem;
}

.LI_bottom {
	margin-top: auto;
	align-items: flex-end !important;
	/* flex: 1; */
}

.LI_bottom > * {
	flex: 2;
}

.LI_bottom .cart {
	flex: 1;
}

.LI_bottom .pConn {
	font-size: 0.8em;
	font-weight: 500;
	color: #6a95c3;
	line-height: 1.2em;
	padding-bottom: 4px;
	display: none;
	margin-top: 30px;
}
.LI_bottom .pConn .fas {
	font-size: 1.1em;
	margin: 0 3px 3px 0;
	color: #777;
}
.LI_bottom .pConn a {
	font-weight: 600;
	text-decoration: underline;
	color: #4fb303;
}
.LI_bottom .pConn a:hover {
	text-decoration: none;
	color: #555;
}

.expert,
.kit {
	position: relative;
}
.kit {
	font-size: 0.74rem;
	color: #014389;
	flex: none;
	position: relative;
	display: block;
	cursor: pointer;
}
.kit,
.kit a,
.kit a:hover {
	color: var(--blue-theme);
}

.kit a {
	display: block;
	width: 100%;
	color: #062f5a !important;
	font-weight: 600 !important;
	font-size: 1em;
	padding: 4px;
	border-radius: 200px;
	text-decoration-line: underline;
	text-decoration-style: dashed;
}
.kit .k-content {
	font-size: 0.6rem;
	font-weight: 700;
	float: left;
	position: relative;
	min-width: 340px;
	max-width: 80%;
	display: none;
	visibility: hidden;
	margin: 10px 0;
	padding: 7px 10px;
	border: 1px solid #c7c7c7;
	position: absolute;
	bottom: -5px;
	left: 10px;
	background-color: #f4f8fb;
	line-height: 1.5em;
	border-radius: 5px;
	cursor: pointer;
	-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
.kit .k-content p {
	margin: 0;
}
.kit:hover .k-content {
	display: block;
	visibility: visible;
}

.expertMsg {
	position: absolute;
	background-color: white;
	bottom: 100%;
	left: 10%;
	border: 2px var(--blue-theme) solid;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 1.5rem;
	width: fit-content;
}

.expertMsg q {
	font-size: 1rem;
}

.counter {
	justify-content: center;
	margin-left: auto;
}

.counter > div {
	border: 1px #999 solid;
	padding: 0.1rem 0.5rem;
	justify-content: space-between !important;
}

.counter i {
	font-size: 1.8em;
	margin: 0 0.3rem;
	cursor: pointer;
}

/* .LI_bottom .counter p {
    font-weight: bold; 
    font-size: 2em;
    margin: 0 2rem;
} */
.counter input {
	font-weight: bold;
	font-size: 1.5em;
	line-height: 2em;
	border: none;
	padding: 0;
	outline: none;
	width: 4.2rem;
	text-align: center;
	margin-left: 1rem;
}
.LI_bottom .cart {
	justify-content: flex-end;
}
.LI_bottom .cart a {
	display: flex;
}

.LI_bottom img {
	height: 40px;
}

.LI_aside {
	flex: 2;
	margin-left: 1%;
	border: 1px black solid;
	padding: 4px 0 4px 4px;
	position: relative;
	opacity: 0;
	transition: 0.3s ease;
}

.listItems aside p {
	margin: 0;
	font-size: 10px;
}

.listItems aside h6 {
	margin: 0;
	font-size: 11px;
	color: orange;
	margin-bottom: 8px;
}

.listItems aside i {
	position: absolute;
	top: 8px;
	right: 8px;
}

.cataList {
	padding: 1% 5%;
	background: white;
	border-bottom: 3px var(--blue-theme) solid;
	box-shadow: 0 2px 20px #ccc;
	/* background: var(--grey-theme); */
}
.cataList aside {
	padding: 1rem;
	background: var(--grey-theme);
}
.cataList aside > div {
	display: flex;
	align-items: center;
	border: 1px black solid;
	margin: 4px 0;
	cursor: pointer;
	transition: 0.3s all ease;
	width: 350px;
	/* height: 4.5vh; */
	height: 45px;
	overflow: hidden;
}
.cataList aside > div:hover {
	/* background-color: var(--blue-theme);
	color: white;
	transition: 0.3s all ease; */
	background: white;
	border: 1px black dashed;
}

/* .cataList aside > div:hover img {
	filter: invert(1);
} */

.cataList img {
	/* max-height: 4.2vh; */
	height: 26px;
	margin-left: 12px;
}
.cataList aside h4 {
	margin: 0;
	margin-left: 0.5rem;
	line-height: 1.3em;
	font-size: 0.92rem;
	/* white-space: nowrap;
	text-overflow: ellipsis; */
}
/* deja dans ListItems.vue */
/* .legendBox.shortLegend, .legendBox.longLegend  {font-size: .6em;font-weight: 500;line-height: 1.2em;} */
/* .legendBox i {font-size:1.7em} */
.cataList .refFinder {
	/* width: calc(350px + 2rem); */
	width: 700px;
	max-width: 90vw;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	/* margin: 0 1rem; */
	border: 1px var(--blue-theme) solid;
	margin: auto;
	margin-bottom: 1rem;
	/* border-radius: 3px; */
}
.cataList .refFinder:hover {
	background: #fff;
}
/* .cataList .refFinder:hover img {
	filter: unset;
} */
.cataList .refFinder .blueBtn {
	font-size: 1em;
}
.cataList .refFinder input {
	width: auto;
	flex: 1;
	margin-left: 8px;
	font-size: 0.8rem;
}

.LI_content .legendBox div p {
	border-bottom: 1px dashed #d5d5d5;
    padding: 3px 5px;
}
.LI_content .legendBox div .p-separ {
	border:0 !important
}
.LI_content .legendBox div p:hover {
	background-color: rgba(0, 0, 0, 0.04);
}
.LI_content .legendBox div p span:first-child {
	font-weight: 400;
}

.LI_content .legendBox div .p-car-s {
	background-color: #e8eff7;
    color: #014389;
    font-weight: 700;
}

/* R�f�rences compl�mentaires - listing */
.listItems.mxh-none {
	max-height: none !important;
}
.section_more_ref {
	text-align: center;
	width: 100%;
}

.more_refs {
	background-color: white;
	background: linear-gradient(135deg, rgba(255, 255, 255, 1) 39%, rgba(240, 240, 240, 0.3113620448179272) 100%);
	max-height: none;
}
.more_refs article {
	border: 1px dashed #3184dc;
	text-align: left;
}
.more_refs h3 {
	color: #014389;
}

.more_ref_error_msg {
	margin: 40px;
	color: #888888;
	border: 1px dashed #888888;
	padding: 10px;
}

.btn_more_refs {
	display: inline-block;
	border: 1px solid var(--blue-theme);
	padding: 14px 24px;
	background-color: #fde900;
	color: #011c38;
	width: 500px;
	max-width: 100vw;
	margin: 45px 0;
	cursor: pointer;
	-webkit-box-shadow: 0px 0px 9px -4px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0px 0px 9px -4px rgba(0, 0, 0, 0.75);
	box-shadow: 0px 0px 9px -4px rgba(0, 0, 0, 0.75);
}
.btn_more_refs:hover {
	background-color: #014389;
	color: #fde900;
}

.section_more_ref .brandsFilter .more_ref_bf {
	width: 80%;
}

.section_more_ref .legendBox {
	max-height: 90px;
	overflow: hidden;
}
.section_more_ref .legendBox:hover {
	/*max-height:none;
	overflow:visible;*/
}

/* .R�f�rences compl�mentaires - listing */

.bxMsg {
	width: 95.8%;
	margin: 5px 0 10px 1%;
	line-height: 1.2em;
	padding: 10px 8px;
	font-size: 0.8rem;
	font-family: "Encode Sans Expanded", "Segoe UI", Arial, sans-serif;
	font-weight: 400;
	border: 1px dashed #8c8c8c;
}
.listingAndFilter {
	display: flex;
	align-items: flex-start;
	margin-top: 1rem;
}
.listingAndFilter .listItems:first-child {
	margin-top: 0;
}
.filterAside {
	flex: 2;
	background: var(--grey-theme);
	margin-left: 3%;
	padding: 1.5rem 2rem;
	max-height: calc(95vh - 100px);
	position: sticky;
	top: 5vh;
	margin-bottom: 1.5rem;
	color: #333333;
	overflow: auto;
	box-shadow: 0px 0px 8px 0 #777a;
}
.filterAside h4 {
	text-transform: uppercase;
	font-size: 0.9rem;
	margin: 0 0 8px;
	color: var(--blue-theme);
}
.filterAside p {
	margin: 0;
	margin-bottom: 0.5rem;
	color: black;
	background-color: #e4e4e4;
	padding: 3px 5px;
	font-size: 0.82em;
	font-weight: 600;
	border-bottom: 1px solid #d8d8d8;
}
.filterAside input[type="submit" i] {
	border: 1px solid var(--blue-theme);
	background-color: var(--blue-theme);
	color: white;
	padding: 4px 20px;
	border-radius: 3px;
	font-size: 0.9em;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	margin-top: 7px;
}
.filterAside input[type="submit" i]:hover {
	border: 1px solid #444;
	background-color: #444;
}

.filterAside div {
	display: flex;
	flex-direction: column;
	font-weight: 500;
}
.filterAside .lesmarques {
	border-bottom: 1px dotted #999;
	padding-bottom: 1rem;
}
.filterAside .lesmarques span {
	color: #999;
	cursor: pointer;
	font-size: 0.9em;
}
.filterAside .lesmarques span:hover {
	color: black;
}
.filterAside label {
	display: flex;
	align-items: center;
	font-weight: 500;
	font-size: 0.92em;
}

.filterAside a {
	margin: 0 4px 0 0;
	padding: 2px 7px;
	color: var(--blue-theme);
	border-bottom: 1px solid white;
	font-size: 0.83em;
}
.filterAside a .fas {
	opacity: 0.6;
}
.filterAside a:hover {
	background-color: var(--blue-theme);
	color: white;
}

.filterAside input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin-right: 10px;
}

.filterAside .lesmarques input[type="checkbox"] {
	float: left;
}
.filterAside .lesmarques label {
	display: inline-block;
	align-items: center;
	font-weight: 500;
	margin-top: 3px;
	min-height: 20px;
	padding: 0;
	float: left;
	font-size: 0.9em;
	font-weight: 500;
}
.filterAside .lesmarques .fas {
	font-size: 0.9em;
}

.ArianeProAdvice {
	display: flex;
}
.ArianeProAdvice .filArianne {
	flex: 1;
}

.conseil_pro {
	margin-left: auto;
	margin-right: 5%;
	background: var(--yellow-theme);
	border: 2px var(--yellow-theme) solid;
	height: 43px;
	display: flex;
	align-items: center;
	padding: 0 8px;
	text-transform: uppercase;
	transition: 0.5s ease;
	cursor: pointer;
	font-weight: 600;
}
.conseil_pro:hover {
	background: white;
	color: var(--blue-theme);
	border: 2px var(--blue-theme) solid;
}
.conseil_pro img {
	margin-right: 4px;
	width: 30px;
	height: 30px;
	object-fit: cover;
	border-radius: 50%;
}

@media all and (max-width: 1500px) {
	.LI_head h3 {
		font-size: 1.5rem;
		margin-right: 0.5rem;
	}

	.LI_head p {
		margin: 0;
		margin-left: 0.5rem;
	}

	.LI_content .promo {
		font-size: 1.1rem;
	}

	.LI_content .price {
		font-size: 1.5rem;
	}

	.LI_content .price sup {
		font-size: 0.7rem;
	}
}

@media all and (max-width: 1400px) {
	.listItems {
		margin: 1% 5%;
	}

	/*.LI_head h3 {
        font-size: 1.7rem;
    }*/

	.LI_head p {
		margin-left: 0.5rem;
		font-size: 0.9rem;
	}

	.LI_content .promo {
		font-size: 1.1rem;
	}

	.LI_content .price {
		font-size: 1.8rem;
	}

	.LI_content .price sup {
		font-size: 0.8rem;
	}

	.LI_content .initialPrice {
		font-size: 0.9rem;
	}

	.LI_content {
		padding: 1% 0.5% 0.5%;
	}
}

@media all and (max-width: 1300px) {
	.listItems {
		flex-direction: column;
		height: unset;
		min-height: unset;
		max-height: unset;
	}

	.listItems article {
		height: unset;
		flex: unset;
	}

	.listItems aside {
		display: none;
		flex: unset;
	}

	.LI_head h3 {
		font-size: 1.3rem;
		margin-right: 0.5rem;
	}
	.LI_content .flexstart {
		margin: 8px 0;
	}
	.filterAside {
		padding: 1rem;
		flex: 3;
	}
}

@media all and (max-width: 1200px) {
	.cataList {
		padding: 0 1% 1%;
	}
}

@media all and (max-width: 1100px) {
	.filterBar .refFinder input {
		/*width: 350px;*/
		font-size: 0.8rem;
	}

	.filterBar {
		flex-wrap: wrap;
	}
}

@media all and (max-width: 968px) {
	.listItems p {
		margin: 0;
	}

	/* .LI_body > p {
		display: none;
	} */

	.LI_head {
		flex-wrap: wrap;
	}

	.LI_head > div {
		width: 100%;
		order: 1;
	}

	.LI_bottom {
		flex-wrap: wrap;
	}

	.LI_bottom > * {
		flex: unset;
	}

	.LI_bottom .expert {
		width: 100%;
	}

	.LI_bottom .kit {
		width: 100%;
	}

	.listItems article {
		/* height: 220px; */
		height: auto;
	}

	.expert,
	.outOfStock {
		font-size: 0.9em;
	}

	.filterBar .refFinder {
		width: 100%;
		margin-top: 0.5rem;
	}

	.cata {
		flex-direction: column;
	}

	.cata aside {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.cata aside > div {
		width: 32.5%;
	}
}
@media all and (min-width: 1000px) {
	.filterAside .closeFilters {
		display: none;
	}
	.btnShowFilter {
		display: none;
	}
	.bgFiltersPanel {
		display: none;
	}
}
@media all and (max-width: 1000px) {
	.listingAndFilter {
		flex-direction: column;
	}
	.bgFiltersPanel {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);
		cursor: pointer;
		z-index: 7;
	}
	.filterAside {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 50%;
		max-height: unset;
		height: 100vh;
		margin: 0 !important;
		z-index: 8;
		border-right: 4px solid var(--blue-theme);
	}
	.filterAside .closeFilters {
		position: absolute;
		top: 1rem;
		right: 1rem;
		cursor: pointer;
		font-size: 1.7rem;
	}
	.btnShowFilter {
		padding: 0.5rem 1rem;
		border: 1px solid var(--blue-theme);
		color: var(--blue-theme);
		font-weight: bold;
		cursor: pointer;
		text-align: center;
		margin: auto;
		margin-bottom: 1rem;
	}
}

@media all and (max-width: 768px) {
	.priceBox {
		flex-wrap: wrap;
	}
	.cata aside > div {
		width: 49%;
	}
	.LI_bottom .cart {
		padding-right: 1rem;
	}
}

@media all and (max-width: 500px) {
	/*.LI_imgBox {
        width: 35%;
    }*/

	.LI_imgBox .prod {
		/* width: 100%; */
		max-height: 150px;
	}

	.LI_imgBox .marque {
		position: absolute;
		bottom: 0;
		right: 0;
		max-width: 50%;
		padding: 0;
	}

	.LI_content {
		width: 100%;
		justify-content: space-evenly;
	}

	.LI_content .price {
		font-size: 1.4rem;
	}

	.LI_head h3 {
		font-size: 1.3rem;
	}

	.LI_bottom .counter p {
		margin: 0 0.7rem;
	}

	.LI_bottom {
		margin-top: 0;
	}

	.counter > div {
		border: 0;
		padding: 0;
	}

	.counter i,
	.counter p {
		font-size: 1.5em;
	}

	.LI_content .initialPrice {
		font-size: 0.7rem;
	}

	.filterBar > p {
		order: 2;
		margin: 0.2rem;
	}

	.filterBar .refFinder {
		margin-top: 1rem;
	}

	.filterBar .refFinder i {
		margin: 0 0.5rem;
		font-size: 1.5em;
	}

	.filterBar .refFinder div {
		width: 98%;
		margin: 0 1%;
	}

	.listItems {
		margin: 2%;
	}

	.catalogueNav p {
		display: none;
	}

	.LI_article {
		flex-direction: column;
		height: 400px;
	}

	.LI_imgBox {
		width: 100%;
		/* height: 40%; */
	}
}

@media all and (max-width: 400px) {
	.filterBar {
		padding: 10px 4px;
	}

	.listItems article {
		height: auto;
	}

	.LI_imgBox .marque {
		max-width: none;
	}
}