/*					HEADER					 */
:root {
	--bglogosalamandre: #c34d56;
	--nvbar1textcolor: #392d2b;
	--nvbar1bgcolor: white;
	--nvbar1basketcolor: #c34d56;
	--nvbar1buttonOFF: #bdb7a7;
	--nvbar1buttontextOFF: white;
	--nvbar1buttonON: #7ebaa9;
	--nvbar1buttontextON: white;

	--nvbar2textcolor: white;
	--nvbar2bonsplanscolor1: #f8de74;
	--nvbar2bonsplanscolor2: #d6a16f;
	--nvbar2bonsplanscolor3: #c7b061;
	--nvbar2bonsplanscolor4: #dfc087;
	--nvbar2bonsplanscolor5: #7ebaa9;

	--nvbar2bgcolor: #656871;
	--nvbar2hovertextcolor: #392d2b;
	--nvbar2droptextcolor1: #392d2b;
	--nvbar2droptextcolor2: white;
	--nvbar2droptextcolor3: rgb(150, 75, 81);
	--nvbar2dropbgcolor1: #f5f5e6;
	--nvbar2dropbgcolor2: #bdb7a7;
	
	--nvbar2dropbgcolor3: #f5f5e6;	/*	dd-content dropdown menu	*/

	--largeurBlocAdresses:235px;
}

.wrap{ overflow:hidden; }

.logged { display:none; }
.logged.in {
	position: absolute;
	left: 67px;
	font-size: 8px;
	font-weight: 700;
	color: #FFF;
	background-color: #7ebaa9;
	height: 24px;
	width: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	line-height: 1;
	top: 20px;
}

.loader-conteneur { display:none; }
.loader-conteneur.show {
	display:flex;
	align-items:center;
	justify-content:center;
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(0,0,0,0.7);
    z-index:9999;
	transition:all .3s -.5s ease
}

.loader-conteneur img { width:70vw; }

header {
	z-index:10;
	position:fixed;
	width:100%;
	top:0;
	left:0;
}

.navbar1 {
	background:var(--nvbar1bgcolor);
	z-index:2;
	width:100vw;
	height:66px;
	display:flex;
	justify-content:space-between;
}

.navbar1 .dtc-logo {
	position:relative;
	z-index:0;
	width:750px;
	bottom:55px;
	display:flex;
	align-items:center;
}

.logo-megastore img {
	object-fit:contain;
	width:100%;
}

.navbar1 .logo-megastore {
	position:absolute;
	top:50%;
	right:8.8%;
	width:170px;
	background-color:var(--nvbar1basketcolor);
	display:flex;
	flex-direction:row;
	align-items:center;
	color:white;
	font-size:21px;
	font-weight:600;
	font-style:italic;
	padding:3px 15px 3px 5px;
	border-radius:25px 8px;
}

.logo-megastore img {
	object-fit:contain;
	width:20px;
	height:20px;
}

/* conteneurs icones */
.navbar1>ul {
	display:flex;
	align-items:center;
	gap:30px;
	z-index:2;
}

.navbar1 li { height:100%; }

/* logo salamandre */
.navbar1 .logo {
	background-color:var(--bglogosalamandre);
	height:66px;
	width:66px;
	padding:10px;
	justify-content:center;
}

.navbar1>ul>li>button img {
	height:46px;
	margin:2px auto;
	padding-top:4px;
}

.navbar1 a, .navbar1 button {
	background-color:transparent;
	border:none;
	color:var(--nvbar1textcolor);
	position:relative;
}

.navbar1 li.dropdown>button {
	font-weight:900;
	font-size:10px;
	text-transform:uppercase;
	display: flex;
	flex-direction: column;
}

.navbar1 .navbar_basket>button {
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	margin-right:25px;
	padding-bottom:2px;
}

/* nb articles panier */
.navbar1 .navbar_basket_nb {
	position:absolute;
	left:94%;
	font-size:8px;
	font-weight:700;
	color:var(--nvbar1bgcolor);
	background-color:var(--nvbar1basketcolor);
	height:24px;
	width:24px;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:50%;
	line-height:1;
}

/* drop-down menus */
.navbar1 ul li .dropdown-content, .navbar2 menu ul li .dropdown-content {
	border-left:1px solid #bdb7a7 !important;	/* #bdb7a7 */
	border-bottom:1px solid #bdb7a7 !important;
	border-right:1px solid #bdb7a7 !important;
}

.navbar1 .dd_vehicules {
	position:absolute;
	top:65px;
	background-color:var(--nvbar2dropbgcolor3);
	background-color:var(--nvbar2dropbgcolor3);
	display:flex;
	flex-direction:column;
	justify-content:center;
	width: 240px;
	font-size:14px;
	z-index:4;
	padding:20px 15px 20px 12px;
	animation:reveal-in 0.1s ease-out 1 normal;
}

.navbar1 .dd_vehicules form {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:20px;
}

.navbar1 .dd_vehicules select:active {
	height:25px;
	line-height:2;
	background-color:#bdb7a7;
}

.navbar1 .dd_vehicules select option {
	padding:0;
	background-color:white;
	height:15px;
}

.navbar1 .dd_vehicules select option:hover { background-color:#656871; }

.navbar1 .dd_vehicules select {
	width:100%;
	height:25px;
	line-height:2.2;
	padding-left:5px;
	font-size:14px;
	outline:1px solid var(--color0b);
}

.navbar1 .dd_vehicules form div { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px; }

.navbar1 .dd_vehicules button { align-self:flex-end; }

.navbar1 .dd_compte {
	position:absolute;
	z-index:4;
	top:66px;
	right:110px;
	background-color:var(--nvbar2dropbgcolor3);
	width:250px;
	padding:20px;
	font-size:14px;
	font-weight:400;
	animation:reveal-in 0.1s ease-out 1 normal;
}

.navbar1 .dd_compte button, .navbar1 .dd_compte a { width:100%; }

.container-login {
	max-width:250px;
	background-color: var(--nvbar2dropbgcolor3);
	border: 1px solid #bdb7a7 !important;
	padding: 20px;
	font-size: 14px;
	font-weight: 400;
}

.dd_compte.container-login { border-top: none !important; }

.container-login form {
	display:flex;
	flex-direction:column;
	gap:15px;
	width:100%;
	font-weight:600;
}

.container-login input {
	border:1px solid var(--color10);
	padding-left:3px;
	width:100%;
	font-weight:400;
}

.container-login input::placeholder { color:var(--color0b); }

.container-login button { margin:4px auto; }

.container-login button:first-child { margin: 0px auto; }

.container-login button:active { filter:brightness(.9); }

.container-login a { text-align:center; }

/* .container-login a button { background-color:var(--color4); }	*/

.container-login .user { padding-left:20px; }

.container-login .deconnexion { padding-left:20px; }

.container-login .deconnexion:hover {
	color:var(--bglogosalamandre);
}

.navbar1 .dd_panier {
	position:absolute;
	top:65px;
	right:0;
	background-color:var(--nvbar2dropbgcolor3);
	display:flex;
	flex-direction:column;
	justify-content:center;
	width:450px;
	font-size:14px;
	z-index:4;
	padding:15px 30px 18px 20px;
	animation:reveal-in 0.1s ease-out 1 normal;
}

.navbar1 .dd_panier .articles {
	display:flex;
	flex-direction:column;
	gap:6px;
	line-height:1.9;
}

.navbar1 .dd_panier .articles li {
	display:inline-flex;
	gap:1px;
	justify-content:space-between;
	margin:0;
}

.navbar1 .dd_panier .title {
	margin:9px 0;
	font-weight:700;
	text-transform:uppercase;
	text-align: right;
}

.navbar1 .dd_panier .articles .refArticle {
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
	width:130px;
}

.navbar1 .dd_panier .articles .nomArticle {
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
	width:130px;
}

.navbar1 .dd_panier .vehArticle {
	width:73px;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
}

.navbar1 .dd_panier .quantiteArticle {
	display:flex;
	justify-content:center;
	align-items:center;
	border:1px solid var(--blackborders);
	padding:3px 14px;
	text-align:center;
	width:36px;
	height:28px;
	overflow:hidden;
}

.navbar1 .dd_panier .warningArticle {
	opacity:0;
	width:25px;
	height:32px;
	display:flex;
	align-items:center;
	padding-bottom:5px;
}

.navbar1 .dd_panier .soustotArticle {
	width:86px;
	text-align:end;
}

.navbar1 .dd_panier .totalArticle {
	display:flex;
	justify-content:space-between;
	margin-top:12px;
}

.navbar1 .dd_panier button { margin-top:16px; float:right; }

.navbar1 .dd_panier button:disabled { background-color:#bdb7a7; }

.navbar1 .dd_panier span.warningArticle.active { opacity:1; }

.navbar1 .dd_vehicules,
.navbar1 .dd_panier,
.navbar1 .dd_compte { display:none; }

/* *********		navbar2		 ********** */

.navbar2 #menuburger,
.burger_input { display:none; }

.navbar2 {
	position:relative;
	background-color:var(--nvbar2bgcolor);
	width:100vw;
}

.navbar2 menu ul {
	height:100%;
	height:47px;
	display:flex;
	justify-content:center;
	margin-right:10px;
	align-items:center;
}

.navbar2 menu ul li { position:relative; }

.navbar2 menu .separator { border-right: 2px solid var(--nvbar2textcolor); }
.navbar2 menu .dropdown, .navbar2 menu .separator { content:''; padding-left:10px; padding-right:10px; line-height: 0.7; }

.navbar2 menu ul li>button,
.navbar2 .bons_plans {
	background-color:transparent;
	font-size:14px;
	font-weight:700;
	letter-spacing:4px;
	color:white;
	border:none;
}

.navbar2 menu ul li>button:hover { color:var(--nvbar2hovertextcolor); }

.navbar2 menu ul li.languages {
	display:flex;
	justify-content:space-between;
	gap:5px;
}

.navbar2 menu ul li.languages a:first-of-type { margin-left:15px; }

.navbar2 .bons_plans { color:var(--nvbar2bonsplanscolor1); }

.navbar2 .bons_plans:visited { color:var(--nvbar2bonsplanscolor1); }

.navbar2 .bons_plans:hover { filter:brightness(1.1); }

.navbar2 .dropdown-content a, .navbar2 .dropdown-content a:visited { color:var(--nvbar2droptextcolor1); }


/* ------------------------------ */

.navbar2 menu ul li .dropdown-content { display:none; }
.navbar2 menu ul li .dropdown-content {
	position:absolute;
	top: 29px;
	flex-direction:column;
	justify-content:center;
	min-width:100%;
	width:auto;
	font-size:14px;
	z-index:1;
	line-height: normal;
	background-color:var(--nvbar2dropbgcolor3);
}

.navbar2 menu ul li .dropdown-content .menu-link {
	padding: 18px 50px 15px 20px;
	text-transform:uppercase;
	font-size: 14px;
	font-weight: 700;
	color: var(--nvbar2droptextcolor1);
}

.navbar2 menu ul li .dropdown-content .menu-link:hover { background:#A7A7A7; }

.navbar2 menu ul li .dropdown-content .menu-link:not(:last-of-type) { border-bottom: 1px solid var(--blackborders); }

.navbar2 menu ul li .dropdown-content .menu-link p { font-weight:normal; }

/* ------------------------------ */

.navbar2 .dd_atelier .prestations {
	padding: 20px 16px 16px 16px;
	color:var(--nvbar2droptextcolor1);
	font-weight:600;
	font-size:13px;
	display:flex;
	flex-direction:column;
	gap:5px;
}

.navbar2 .dd_atelier .prestations h3 { text-transform:uppercase; }

.navbar2 .dd_atelier h3 {
	font-weight:700;
	font-size:14px;
	color:var(--nvbar2droptextcolor1);
}

.navbar2 .dd_atelier p {
	color:var(--nvbar2droptextcolor3);
	font-weight:700;
	font-size:14px;
}

.navbar2 .dd_atelier .conditions {
	float: left;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.navbar2 .dd_atelier p a {
	display:inline-block;
	text-decoration:underline;
	text-transform:lowercase;
	font-style:italic;
	font-size:12px;
	font-weight:600;
}

.navbar2 .dd_atelier p a:hover { color:var(--nvbar2droptextcolor1); }

.navbar2 .dd_atelier .dix_pourcent { font-size:23px; }

.navbar2 .dd_atelier .rdv-link-block {
	background-color:var(--nvbar2dropbgcolor2);
	padding:20px 15px;
	text-align:center;
}

.navbar2 .dd_atelier form {
	font-size:14px;
	display:flex;
	flex-direction:column;
	align-items:flex-end;
}

.navbar2 .dd_atelier form label { color:var(--nvbar2droptextcolor2); }

.navbar2 .dd_atelier form input,
.navbar2 .dd_atelier textarea {
	border:none;
	outline:none;
	font-size:12px;
	padding-left:8px;
	width:100%;
	margin:5px 0;
	color:var(--nvbar2droptextcolor1);
	background-color:var(--nvbar2dropbgcolor3);
}

.navbar2 .dd_atelier form textarea {
	min-height:90px;
	max-width:100%;
	min-width:100%;
	color:var(--nvbar2droptextcolor1);
}

.navbar2 .dd_atelier form input { height:27px; }

.navbar2 .dd_atelier textarea,
.navbar2 .dd_atelier input::placeholder { font-style:italic; }


/* *********************************************** effets clic****************************** */

.navbar2 menu>li>button:active { margin:2px -2px -2px 2px; }

.navbar2 li>div { animation:reveal-in 0.1s ease-out 1 normal; }

/*				MEDIA QUERIES					*/

@media screen and (max-width:1380px) {
	.navbar1 .wrap { overflow:hidden; }
	.navbar1 .wrap .dtc-logo img { object-fit: contain; }

	.navbar1 ul li { position: relative; }
	.navbar1 ul li .dropdown-content { top:auto; }
	
	.navbar1 ul li .dropdown-content.dd_vehicules { right:auto; }
	.navbar1 ul li .dropdown-content.dd_compte { right:auto; }
	.navbar1 ul li .dropdown-content.dd_panier {  }

	.navbar1 .dropdown-content { z-index:4; }

	.navbar2 #burgercheck,
	.navbar2 #menuburger {
		position:absolute;
		right:0;
		top:-67px;
		display:block;
		background-color:var(--nvbar1basketcolor);
		width:67px;
		height:67px;
		padding:12px;
	}

	.navbar2 #burgercheck { display:none; }

	.navbar2 .burger {
		background-color:var(--nvbar2bgcolor);
		z-index:1;
	}
	
	.dropdown-content.burger.show {
		height: fit-content;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.navbar2 menu {
		position:absolute;
		right:0px;
		top:0px;
		padding:10px 15px;
		flex-direction:column;
		display:none;
		width:291px;
		margin-right:0;
	}

	.navbar2 menu ul {
		display: flex;
		justify-content: center;
		margin-right: 10px;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.navbar2 menu .separator { border-right: none; overflow: hidden; }
	.navbar2 menu .dropdown, .navbar2 menu .separator { content:''; padding-top:15px; padding-left:0; padding-right:0; padding-bottom:15px; }

	.navbar2 { z-index:2; }

	.navbar2 menu ul li { /* overflow: hidden; */ }

	.navbar2 menu ul li .dropdown-content {
		position: relative;
		top: 20px;
		flex-direction: column;
		justify-content: center;
		min-width: 100%;
		width: auto;
		font-size: 14px;
		z-index: 1;
		background-color: var(--nvbar2dropbgcolor3);
		margin-bottom: 35px;
	}
}

@media screen and (max-width:1200px) {

	.navbar1 .wrap { width:640px; }
	.navbar1 .wrap .dtc-logo {
		max-width: 100%;
		margin: auto;
		display: inline-flex !important;
		align-items: center;
		bottom: 10px;
		position: relative;
		height: 66px;
	}

	.navbar1 .wrap .dtc-logo img { max-width:100%; }
	
	.navbar1 .logo-megastore { top: 30%; }

/*
	.navbar1 { flex-direction:column; height:auto; }
	.wrap { margin:auto; padding:0; position:relative; max-width:100%; }
	.navbar1 .wrap .dtc-logo { bottom:0; max-width:100%; margin:auto; }
	.navbar1 .wrap .dtc-logo img { max-width:100%; }

	.navbar1 .wrap .dtc-logo .logo-megastore a { top: 5vw; width:fit-content; font-size: calc(8px + 1vw); }

	.logo { display:none; }
	.nv1_icons { display:flex; flex-direction:row; align-items:center; justify-content:center; }
*/
}

@media screen and (max-width:1080px) {
	.navbar1 ul li .dd_panier { right: 0; }
	.navbar1 .wrap { width: 480px; }

	.navbar1 .wrap .dtc-logo { bottom: 0; }
}


@media screen and (max-width: 982px) {
	.navbar2 menu { padding:0; }

	.navbar2 menu ul {
		margin:0;
		padding:20px;
		display:block;
		min-height:100vh;
	}

	.navbar2 menu ul li { width:100% !important; }

	.navbar2 menu ul .dropdown-content { width:100% !important; }
	
	.navbar2 menu ul li .dropdown-content { margin-bottom:20px; }
}

@media screen and (max-width:938px) {
	.navbar1 { flex-direction:column; height:auto; }
	.navbar1 .wrap {
		margin: 0 0 -15px 0;
		padding:0;
		position:relative;
		max-width:100%;
		width:100%;
	}

	.navbar1 .wrap .dtc-logo { bottom:0; max-width:100%; width:100%; margin:auto; }
	.navbar1 .wrap .dtc-logo img { max-width:100%; }

	.navbar1 .wrap .dtc-logo .logo-megastore { top:20px; width:fit-content; font-size: calc(8px + 1vw); }

	.logo { display:none; }

	.nv1_icons { display:flex; flex-direction:row; align-items:center; justify-content:center; }

	.navbar2 #burgercheck, .navbar2 #menuburger {
		top: -54px;
		width: 54px;
		height: 54px;
	}
}

@media screen and (max-width:680px) {
	.navbar1 ul li .dropdown-content {
		right: 0;
		left: 0;
		width: 100%;
		position: fixed;
	}
	
	.navbar1 ul li .dropdown-content form {
		max-width:300px; margin:auto;
	}
}

@media screen and (max-width:540px) {
	.logged.in { left: 51px; top: 12px; }

	.navbar1 > ul > li > button img { height: 36px; }
	.navbar1 li.dropdown > button { font-size:8px; }
	
	.navbar1 .wrap .dtc-logo .logo-megastore a { font-size: calc(6px + 1vw); }

	.navbar1 .wrap .dtc-logo .logo-megastore a img {
		object-fit: contain;
		width: 3.1vw;
		height: 3.1vw;
		margin-right:5px;
	}

	.nv1_icons { justify-content:start; margin-left:20px; }
}

@media screen and (max-width:420px) {
	.nomArticle { display:none; }
}

@media screen and (max-width:360px) {
	.nv1_icons { margin-left:10px; }
	.navbar1 > ul { gap:10px; }
	.navbar2 menu ul li > button { line-height: normal; }
}

/*										ANIMATIONS								 */

@keyframes reveal-in {
	0% { transform:rotateX(90deg); transform-origin:top; }
	100% { transform-origin:top; transform:rotateX(0); }
}