:root {
	--nav-liens-txt:black;
	--nav-liens-actif:#db812e;
	--nav-hover-txt:black;
	--nav-hover-fond:#e2e2e2;
	--nav-legend-txt:#fff;
	--nav-legend-fond:#9a9a9a;
	--connexion-btn-txt:white;
	--connexion-btn-fond:#538a73;
	--connexion-placeholder:black;
	--inscription-txt:black;
	--inscription-fond:#f1f1f1;
	--header-liens-mobile-txt:white;
	--header-mobile-fond:rgba(0, 0, 0, .78);
	--header-mrgHB-mobile-niv0:60px;
	--header-mrgH-mobile-niv1:20px;
	--header-mrgH-mobile-niv2:20px;
	--header-mrgH-mobile-niv3:15px;
	--header-mrgH-mobile-niv4:15px;
	--header-int-mobile-niv0:15px;
	--header-int-mobile-niv1:20px;
	--header-int-mobile-niv2:20px;
	--header-int-mobile-niv3:15px;
	--header-int-mobile-niv4:10px;
	/* popover panier */
	--article-fond1:#f1f1f1;
	/* dropdown */
	--niv0-fond:transparent;
	--contenu-fond:#fff;
	--contenu-separateur:#a3a3a3;
}

header {
	padding:45px 45px 0px 45px;
	position:relative;
}

nav {
	display:flex;
	justify-content:space-between;
}

.navig__logo {
	display:flex;
	justify-content:space-between;
	margin-bottom:14px;
}

.logo__JB {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:27px;
	height:62px;
	z-index:0;
}

.JB__france {
	color:var(--nav-liens-txt);
	font-size:14px;
	font-weight:500;
	letter-spacing:2.9px;
}

.navig__logo:visited { color:var(--nav-liens-txt); }

.entete__panier { margin-top:5px; }

.logo__fb-top svg {
	width:60px;
	height:60px;
	margin-left:10px;
}

.logo__fb-top #LogoFb .cls-1 { fill:#a6a6a6; }

.logo__fb-top #LogoFb:hover .cls-1 { fill:#0866ff; }
.logo__fb-top #LogoFb .cls-2 { fill:transparent; }

/* unlogged box */
header .conteneur-login {
	position:relative;
	left:-50px;
	width:280px;
	padding:20px;
	flex-direction:column;
	align-items:center;
	gap:20px;
	display:flex;
	background-color:#fff;
	box-shadow:1px 2px #e2e2e2;
}

header .conteneur-login form {
	display:flex;
	flex-direction:column;
	gap:15px;
	width:100%;
}

header .conteneur-login input {
	border:1px solid #a9a9a9;
	padding-left:3px;
	width:100%;
	font-weight:400;
}

header .conteneur-login input::placeholder {
	color:var(--connexion-placeholder);
	font-size:12px;
}

header .conteneur-login button {
	font-size:14px;
	font-weight:600;
	padding:5px 16px;
	color:var(--connexion-btn-txt);
	background-color:var(--connexion-btn-fond);
	margin:auto;
}

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

header .conteneur-login a button {
	color:var(--inscription-txt);
	background-color:var(--inscription-fond);
}

header .resterConnecte__msg {
	font-size:12px;
	font-weight:500;
}

header .conteneur-login .input-checkmark {
	top:6px;
}

/* */

.entete__desktop {
	display:flex;
	align-items:center;
	gap:10px;
}

.entete__desktop>button { background-color:white; }

#headerBurger {
	position:absolute;
	top:58px;
	right:45px;
	width:41px;
	height:41px;
	padding:7px;
	border:2px solid var(--txtnoir);
	display:none;
	background-color:white;
}

.navig__entete {
	position:relative;
	display:flex;
	justify-content:center;
	align-self:flex-end;
	gap:30px;
	z-index:5;
}

#menuDeroulant1 .dd-content { display:none; }

#menuDeroulant1 li { cursor:pointer; }

#menuDeroulant1>li {
	font-size:16px;
	font-weight:500;
	color:var(--nav-liens-txt);
	background-color:var(--niv0-fond);
	letter-spacing:2.8px;
	height:29px;
	position:relative;
}

#menuDeroulant1 #menu-produits li { cursor:default !important; }
#menuDeroulant1 #menu-produits li span { cursor:pointer !important; }

#menuDeroulant1 .dd-content {
	letter-spacing:normal;
	position:absolute;
	width:186px;
	background-color:var(--contenu-fond);
	top:0px;
	left:-12px;
	flex-direction:column;
	font-size:12px;
	font-weight:600;
	border:solid 1px #e2e2e2;
}

#menuDeroulant1 .dd-content#login-menu { width:fit-content !important; }

#menuDeroulant1 .dd-content li {
	min-height:41px;
	padding:13px 5px 13px 10px
}

#menuDeroulant1 .dd-content li:hover { background-color:var(--gris-clair3); }

#menuDeroulant1 .niv-1 { top:29px; }

#menuDeroulant1 .niv-2 {
	left:100%;
	top:unset;
}

.mt24 { margin-top:-24px; }

#menuDeroulant1 .niv-2:has(legend) {
	transform:translateY(0);
	top:0px;
}

#menuDeroulant1 .niv-3 {
	left:100%;
	top:unset;
	margin-top:-25px;
}

#menuDeroulant1 .niv-2:has(legend) ul.niv-3 { top:unset; }

#menuDeroulant1 .niv-4 {
	left:100%;
	top:unset;
	margin-top:-25px;
}

#menuDeroulant1 .dd-content li a,
#menuDeroulant1 .dd-content li span {
	font-size:12px;
	display:flex;
	text-transform:uppercase;
}

menu#menuDeroulant1>li ul li:not(:last-child) { border-bottom:1px solid var(--contenu-separateur); }

#menuDeroulant1 a,
#menuDeroulant1 a:visited { color:var(--nav-liens-txt); }

#menuDeroulant1 legend {
	padding:7px 10px 7px 15px;
	background-color:var(--nav-legend-fond);
	color:var(--nav-legend-txt);
	letter-spacing:2px;
	font-size:9px;
}

.entete__icones {
	display:flex;
	align-items:center;
	gap:6px;
	margin-bottom:14px;
}

.btn-panier img {
	width:50px;
	height:50px;
	cursor:pointer;
}

.basket_btn { background:#FFF; }

.navbar_basket_nb {
	position:relative;
	margin-top:-35px;
	margin-left:50px;
	font-size:9px;
	font-weight:700;
	color:white;
	background-color:#C34D56;
	height:24px;
	width:24px;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:50%;
	line-height:1;
}

.dd_panier {
	position:absolute;
	display:none;
	top:112px;
	right:0px;
	background-color:#FFF;
	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;
}

.dd_panier>li {
	font-size:14px;
	font-weight:600;
	letter-spacing:3px;
}

.dd_panier li :hover { background-color:white; }

.dd_panier .articles {
	display:flex;
	flex-direction:column;
	gap:5px;
	margin-top:10px;
	overflow-y:scroll;
	max-height:300px;
}

.dd_panier ::-webkit-scrollbar {
	-webkit-appearance:none;
	opacity:0;
	width:0;
	height:0;
}

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

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

.dd_panier .title {
	font-weight:700;
	text-transform:uppercase;
}

.dd_panier .nomArticle {
	width:130px;
	font-weight:500;
	overflow:hidden;
	text-overflow:ellipsis;
}

.dd_panier .serieArticle {
	width:63px;
	font-weight:500;
}

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

.dd_panier .prixUnit { font-weight:600; }

.dd_panier .warningArticle {
	opacity:0;
	width:25px;
	height:32px;
	margin-right:-20px;
}

.dd_panier .soustotArticle {
	width:76px;
	text-align:end;
	font-weight:600;
}

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

.dd_panier button {
	align-self:flex-end;
	font-weight:700;
	background-color:var(--nav-liens-actif);
	color:var(--fond-blanc);
	padding:9px 10px;
	margin-top:16px;
	float:right;
}

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

.afficher { display:flex !important; }

.show { display:flex !important; }

.active-orange { color:var(--orange) !important; }

.active-bouton { background-color:var(--orange); }

@media screen and (min-width:1370px) {
 #menuDeroulant1>li:hover>ul.hover { display:flex !important; }
}

@media screen and (max-width:1390px) {
	.logo__fb-top { display:none;  }

	.navig__entete {
		position:absolute;
		height:calc(100% - 121px);
		top:121px;
		right:0px;
		width:100%;
		padding:var(--header-mrgHB-mobile-niv0) 0;
		background-color:var(--header-mobile-fond);
		flex-direction:column;
		align-items:flex-start;
		justify-content:flex-start;
		gap:var(--header-int-mobile-niv0);
		margin-right:0;
		display:none;
		animation:reveal-right 0.1s ease-in 1 normal;
		-webkit-tap-highlight-color:transparent;
	}

	menu#menuDeroulant1>li ul li:not(:last-child) { border-bottom:none }

	#menuDeroulant1 .dd-content, header .conteneur-login { box-shadow:none; }
 
	#menuDeroulant1 .dd-content {
		border:none;
		box-shadow:none;
	}

	#menuDeroulant1>li {
		margin-bottom:var(--header-int-mobile-niv0);
		font-size:28px;
		height:fit-content;
		color:var(--header-liens-mobile-txt);
		padding-left:100px;
	}

	#menuDeroulant1 li>a, #menuDeroulant1 li>a:visited { color:var(--header-liens-mobile-txt); }

	#menuDeroulant1 .dd-content {
		background-color:transparent;
		height:fit-content;
		top:0;
		left:0;
		width:unset;
		position:relative;
		transform:translateY(0);
	}

	#menuDeroulant1 .dd-content li { min-height:unset; }
	#menuDeroulant1 li, #menuDeroulant1 ul { width:100%; }

	header { position:unset; }

	#menuDeroulant1 .dd-content li span,
	#menuDeroulant1 .dd-content li a {
		font-size:24px;
		font-weight:500;
		padding:0;
		line-height:1.5;
	}

	#menuDeroulant1 .niv-1 li {
		height:fit-content;
		padding-left:50px;
	}

	#menuDeroulant1 ul.niv-1 {
		margin-top:var(--header-mrgH-mobile-niv1);
		gap:var(--header-int-mobile-niv1);
	}

	#menuDeroulant1 ul.niv-2 {
		margin-top:var(--header-mrgH-mobile-niv2);
		gap:var(--header-int-mobile-niv2);
	}

	#menuDeroulant1 ul.niv-3 {
		margin-top:var(--header-mrgH-mobile-niv3);
		gap:var(--header-int-mobile-niv3);
	}

	#menuDeroulant1 ul.niv-4 { gap:var(--header-int-mobile-niv4); }
	#menuDeroulant1 .niv-4 li:first-child { margin-top:var(--header-mrgH-mobile-niv4); }

	menu#menuDeroulant1>li ul li:not(:last-child) { border-bottom:none; }

	#menuDeroulant1 .dd-content li:hover { background-color:unset; }

	#menuDeroulant1 legend { display:none; }

	.entete__icones { margin-right:65px; }

	#headerBurger { display:block; }

	#menu .dd-content { animation:none; }
}

@media screen and (max-width:850px) {
	.logo__JB img { width:100%; }

	.entete__icones { margin-left:20px; }

	.dd_panier {
		position:absolute;
		left:50%;
		transform:translateX(-50%);
		animation:none;
	}
}

@media screen and (max-width:650px) {
	header { padding:25px 25px 0 25px; }

	#headerBurger { top:38px; }

	.navig__entete { width:100vw; }
	.entete__icones { margin-right:75px; }

	#menuDeroulant1>li { padding-left:55px; }

	#menuDeroulant1 .niv-1 li { padding-left:35px; }
}


@media screen and (max-width:460px) {
	.entete__desktop { position:unset; }

	.btn-panier img {
		width:40px;
		height:40px;
	}

	.dd_panier {
		width:100vw;
		padding:15px;
		position:fixed;
		top:106px;
	}
 
	.dd_panier > div { min-height:191px; }
	.dd_panier .articles { gap:10px; }

	.dd_panier .nomArticle { grid-area:nom; }

	.dd_panier .serieArticle {
		grid-area:serie;
		width:auto;
	}

	.dd_panier .prixUnit { grid-area:pu; }

	.dd_panier .quantiteArticle {
		grid-area:quantite;
		align-self:self-start;
	}

	.dd_panier .soustotArticle {
		grid-area:sstot;
		align-self:center;
	}

	.dd_panier .articles li {
		display:grid;
		grid-template-areas:"nom nom serie"
		"pu quantite sstot";
		grid-template-columns:minmax(10vmax, auto) 30px auto;
		padding-bottom:18px;
	}
 
	.dd_panier .articles li:nth-child(odd) { background-color:var(--article-fond1); }
	.JB__france { font-size:12px; }
}

@media screen and (max-width:450px) {
	#headerBurger { right:25px; width:35px; height:35px; }
	.entete__icones { margin-right:55px; }
	.navbar_basket_nb { margin-top:-30px; margin-left:40px; }

	.navig__entete {
		top:106px;
		height:calc(100% - 106px);
	}

	#menuDeroulant1 .dd-content li span,
	#menuDeroulant1 .dd-content li a {
		font-size:18px;
		line-height:1.5;
	}
}

@media screen and (max-width:430px) {
	.navig__entete { width:100vw; }

	#menuDeroulant1>li { padding-left:35px; }

	#menuDeroulant1 .niv-1 li { padding-left:20px; }
}

@media screen and (max-width:375px) {
	.JB__france { font-size:9px; }
}

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

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


@keyframes reveal-right {
	0% { transform:translateX(100%); }
	100% { transform:translateX(0%); }
}