#HEADER{
	position:relative;
	z-index:55;
	font-family:Arial,Helvetica,Verdana,sans-serif;
}
#HEADER *{margin:0;padding:0;}
#HEADER ul{list-style:none;}
#HEADER a, #HEADER a *{cursor:pointer;}
#MENU{clear:both;position:relative;height:1px;}
#MENU, #MENU *{margin:0;padding:0;}
#MENU #onglets{padding-left:0}
#MENU #onglets li{
	float:left;
}
#MENU i {
	color:#2969B0;
}
#onglets .lien_onglet {
	display:block;
	text-align:center;
	font-size:18px;
	position:relative;
	z-index:101;
	margin-top:-30px;
}
/*powered by m1decresp1*/
#onglets .lien_onglet{
	height:31px;
	margin-bottom:4px;
	padding:5px 4px 0 4px;
	color:#fff;
	background-color:#808080;	
	border-top: 0px solid #ccc;
	border-bottom: 0px solid #fff;
	border-left: 0px solid #ccc;
	border-right:0px;
	text-decoration:none;transition: all 700ms ease-in-out 200ms;
}
#onglets .current .lien_onglet, #onglets .lien_onglet:hover{
	color:#000000;background-color:#fff;border-bottom:none;text-decoration:none;transition:none;border-left: 0px solid #ccc;
}
#onglets .lien_onglet.hover{
	color:#000;background-color:#FFFFFF;border-left: 0px solid #ccc;border-bottom:0px;text-decoration:none;border-left: 0px solid #ccc;
}
#onglets .lien_onglet:hover{height:31px;margin-bottom:0;}
#onglets .current .lien_onglet{position:static}
#onglets .current .hover, #onglets .current .lien_onglet:hover{position:relative}
/* modif line-height plus petites */ 
.pos_menu_1{
	left:198px;
}
.pos_menu_2{
	left:385px;	
}
.pos_menu_3{
	left:533px;	
}
#onglet_0 .lien_onglet{width:190px;line-height:1.3em;}
#onglet_1 .lien_onglet{width:180px;line-height:1.3em;}
#onglet_2 .lien_onglet{width:180px;line-height:1.3em;}
#onglet_3 .lien_onglet{
	position:absolute;color:white;font-style:italic;
		
}
#onglets li .gros_menu{
	width:1024px;
	/*height:343px;*/
	height:610px;
	padding:0px;
	border:0px solid #ccc;
	border-bottom: 1px solid #ccc;
	/*-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	*/
	background-color:#fff;
	position:absolute;
	top:6px;
	left:0px;
	z-index:100;
	display:none;
}
.babord{left:0}
.centre{left:-200px}
.tribord{right:0}

.col_9{
	overflow-y: scroll;
	overflow-x: hidden;
}

.col_1,
.col_2,
.col_3,
.col_4,
.col_5, 
.col_6,
.col_7,
.col_8,
.col_9,
.col_10,
.col_11{
	display:inline;
	float:left;
	position:relative;
	margin-left:5px;
	margin-right:5px;
	top:10px;
	left:10px;	
	/*border: 1px solid rgb(23,163,69);*/
}

.col_1  /* gauche */
{	
	width:780px;
}
.col_2  /* droite */
{		
	top:15px;	
	width:200px;			
}
.col_3  /* gauche / bat ordi */
{	
	width:380px;		
	height:150px;	
}		
.col_4  /* gauche / bat ordi / bat ordi hp */
{		
	top:10px;
	width:90px;	
}				
.col_5  /* titre */
{	
	position:absolute;		
	top:-5px;
	left:10px;
}
.col_6 /* autres produits */
{	
	position:absolute;
	width:380px;	
	top:95px;
	left:10px;
}
.col_7  /* titre droite */
{			
	top:0px;
}				
.col_8  /* liste droite */
{	
	position:absolute;		
	top:25px;
	left:10px;
}
.col_9  /*  */
{		
	left:0px;
	top:10px;
	width:780px;
	height:200px;
	background-color:#FFF;
}
.col_10  /*  */
{	
	left:20px;
	width:780px;	
}
.col_11  /*  */
{			
	width:180px;		
}
.menu_img1 
{	
	position:absolute;		
	top:0px;
	/*right:-10px;*/
	right:0px;
}
.menu_img2 
{	
	position:absolute;		
	top:145px;
	/*right:-10px;*/
	right:0px;
}
.menu_img3
{	
	position:absolute;		
	top:343px;
	/*right:-10px;*/
	right:0px;
}
.separateur_menu_central{
	position:absolute;
	color:white;
	background-color:white;
	width:1px;
	height:20px;
	z-index:200;
	top:-22px;
}
.bandeau_fond_menu{
	position:fixed;
	z-index: 100;
	top:92px;/*165px coro*/ 
	width:100%;
	height:36px;
	background-color:#808080;	
}
.petit_txt_menu{
	font-size:13px;
	display:inline;
}

.header-side-menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	/* background: #5c6974; */
	margin-bottom: 10px;
	background: rgb(242,242,242);
	color: #5c6974;

	box-shadow: rgba(0,0,0,0.2) 0 2px 5px;
}

.header-side-menu .logo-side-menu {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 30px;
}

.header-side-menu .logo-side-menu p{
	font-size: 16px;
	font-weight: bold;
}

#side-menu {
	transition: transform 0.3s ease;
	transform: translateX(-100%);
	position: fixed;
	top:0;
	width: 500px;
	height: 100%;
	background: rgb(242,242,242);
	z-index: 1000;
	overflow-y: auto;
	overflow-x: hidden;
}

#side-menu.open {
	transform: translateX(0);
}

#side-menu.close {
	transform: translateX(-100%);
}

#cross-side-menu, #cross-side-menu-search{
	width: 30px;
	cursor: pointer;
}
  
.no-scroll {
	overflow: hidden;
	padding-right: calc(15px);
}
.subheader-side-menu{
	height: 50px;
	padding: 10px;
	background-color: #fff;
	font-size: 18px;
	font-weight: bold;
	/* box-shadow: rgba(0,0,0,0.2) 0 2px 5px; */
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.subheader-side-menu div{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:10px;
}
.subheader-side-menu a.link{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;

}
.subheader-side-menu a{
	display: block;
	color: #5c6974;
}
.section-side-menu{
	margin-top: 10px;
	box-shadow: rgba(0,0,0,0.2) 0 2px 5px;
}
.footer-side-menu .row-side-menu{
	/*background-color: #595959;*/
	font-size: 18px;
	font-weight: bold;
	/*grid-template-columns: 1fr;
	border:1px solid #626262;
	*/
}

.footer-side-menu .row-side-menu a{
	color: #000;
	display: flex;
	align-items: center;
}
.footer-side-menu .row-side-menu a:hover{
	/*color: rgb(93, 174, 43);*/
	color: #000;
}
.title-side-menu{
	padding: 10px;
	background-color: #fff;
	font-size: 20px;
	font-weight: bold;
}
.title-side-menu a{
	color: #fb9902;
}
.row-side-menu{
	width: 100%;
	height: 70px;
	line-height: 30px;
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	display: grid;
	grid-template-columns: 1fr 70px;
	align-items: center;
}
.row-side-menu a{

	box-sizing: border-box;
	padding: 20px;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	font-size: 18px;
	font-weight: 500;
	/*color: #111827;*/
	color: #000;
}
.row-side-menu a:hover{
	color: #4a65a0;
}
.arrow-right{
	width: 100%;
	height: 100%;
	background: url(/image/icons/arrow.png) no-repeat center;
	background-size: 20px;
	cursor: pointer;
	transition: all 0.2s;
}
.dropdown-side-menu{
	visibility: hidden;
	max-height: 0;
	overflow: hidden;
	transition: all 0.2s ease-in;
}
.deploy{
	visibility: visible;
	max-height: 900px;
	transition: all 0.4s ease-out;
}
.rotate{
	transform: rotate(90deg);
	transition: all 0.2s;
}
.subrow-side-menu{
	width: 100%;
	height: 50px;
	line-height: 50px;
	background-color: #f3f3f3;
	border-bottom: 1px solid #ccc;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
}
.subrow-side-menu a{
	box-sizing: border-box;
	padding: 0 40px;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	color: #111827;
	transition: all 0.2s;
}
.subrow-side-menu a:hover{
	background-color: #51626F;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	padding: 0 50px;
	transition: all 0.2s;
}
#side-menu-search{
	transition: transform 0.3s ease;
	transform: translateX(100%);
	position: fixed;
	top:0;
	width: 100%;
	height: 100%;
	background: rgb(242,242,242);
	z-index: 1000;
	overflow-y: auto;
	overflow-x: hidden;
}
#side-menu-search .header-side-menu{
	display: grid;
	grid-template-columns: 80px 1fr 30px;
	align-items: center;
	padding: 10px;
	background: rgb(242,242,242);
	color: #5c6974;
	box-shadow: rgba(0,0,0,0.2) 0 2px 5px;
}
#side-menu-search .subheader-side-menu{
	grid-template-columns: 1fr;
}
#side-menu-search .header-side-menu input{
	border: 1px solid #ccc;
	padding: 10px;
	font-size:16px;
	height: 20px;
	background-color: #fff;
	margin: 0 20px;
}
#side-menu-search .header-side-menu input:focus{
	outline: none;
}
#side-menu-search.open {
	transform: translateX(0);
}
#side-menu-search.close {
	transform: translateX(100%);
}
.panier-side-menu{
	position: fixed;
	z-index: 1000;
	top: 0;
	right: 0;
	width: 550px;
	height: 100%;
	background-color: #fff;
	box-shadow: rgba(0,0,0,0.3) -2px 0 20px;
	transition: transform 0.3s ease;
}
.panier-side-menu.open{
	transform: translateX(0);
}
.panier-side-menu.close{
	transform: translateX(100%);
	box-shadow: none;
	top:0;
	right:0;
	height: 100%;
}
.panier-side-menu-close{
	width: 30px;
	cursor: pointer;
}
.panier-side-menu-title{
	box-sizing: border-box;
	font-size: 20px;
	font-weight: bold;
	padding: 5px;
}
.panier-side-menu .body-side-menu{
	box-sizing: border-box;
	padding: 10px;
	height: calc(100vh - 545px);
	overflow-y: auto;
}
.panier-side-menu .subheader-side-menu{
	height: 100px;
}
.panier-side-menu-content{
	display: flex;
	flex-direction: column-reverse;
}

.panier-side-menu-content h2{
	padding: 0 10px;
}

.panier-side-menu-content .promotion{
	display: flex;
	overflow-x: scroll;
	background-color: rgb( 59 , 89 , 152 );
	padding-left: 10px;
}

.panier-side-menu .item-cart {
	padding: 15px 0;
}
.panier-side-menu .item-cart .item-cart-title{
	font-size: 20px;

}
.panier-side-menu .promotion{
	height: 320px;
	width: 100%;
}
.body-side-menu::-webkit-scrollbar {
	background-color: #f5f5f5;
	width: 12px; /* Largeur de la scrollbar */
}  
  /* La partie de la scrollbar qui indique la position */
.body-side-menu::-webkit-scrollbar-thumb {
	border: 3px solid #f5f5f5;
	background-color:#888;
	border-radius: 10px;
}
  
  /* La partie de la scrollbar qui indique la position au survol */
.body-side-menu::-webkit-scrollbar-thumb:hover {
	background-color: #555;
}
  
  /* La partie de la scrollbar qui indique la position lorsqu'on clique dessus */
.body-side-menu::-webkit-scrollbar-thumb:active {
	background-color: #333;
}
  
  /* La piste sur laquelle la scrollbar se déplace */
.body-side-menu::-webkit-scrollbar-track {
	background-color: #f5f5f5;
}

#mask{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: 999;
	display: none;
}

#mask.open{
	display: block;
}

.panier-side-menu .subheader-side-menu{
	gap: 10px;
}

.panier-side-menu .subheader-side-menu a{
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.2s;
	border-radius: 5px;
}
.panier-side-menu .subheader-side-menu a.button-panier{
	background-color: #5c6974;
	color: #fff;
}
.panier-side-menu .subheader-side-menu a.button-panier:hover{
	background-color: #3f474e;
	transition: all 0.2s;
}

.panier-side-menu .subheader-side-menu a.button-panier-outline{
	background-color: #fff;
	color: #5c6974;
	border: 1px solid #5c6974;
	cursor: pointer;
}
.panier-side-menu .subheader-side-menu a.button-panier-outline:hover{
	background-color: #5c6974;
	color: #fff;
	transition: all 0.2s;
}

.item-cart{
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	
	border-top: 1px solid #ccc;
	margin: 10px;
	font-size: 14px;
}
.item-cart-image{
	display: flex;
	align-items: center;
	gap:10px;
}
.item-cart-image img{
	width: 50px;
	height: 50px;
}

.item-cart-content{
	width: 100%;
	display: grid;
	grid-template-columns: 2fr 3fr 3fr 1fr;
	align-items: center;
	justify-items: center;
	font-size: 16px;
	margin-top: 5px;
}

.footer-side-menu-total{
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 10px;
}
.creation_commande_sans_compte{
	box-sizing: border-box;
	position: fixed;
	z-index: 1000;
	top: 0;
	right: 0;
	background-color: #fff;
	transform: translateX(100%);
	transition: all 0.3s;
	width: 500px;
	height: 100%
}

.creation_commande_sans_compte.open{
	transform: translateX(0);
	transition: all 0.3s;
}

.creation_commande_sans_compte .body-side-menu{
	box-sizing: border-box;
	padding: 20px;
	overflow-y: auto;
}

.creation_commande_sans_compte .body-side-menu h2{
	font-size: 28px;
	font-weight: bold;
	color:#000;
	margin-bottom: 50px;
}

.creation_commande_sans_compte .body-side-menu hr{
	margin: 50px;
	opacity: 0.7;
}

.creation_commande_sans_compte .body-side-menu .button_side_compte{
	background-color: rgb(93, 174, 43);
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s;
}

.creation_commande_sans_compte .body-side-menu .button_side_compte:hover{
	background-color: #5c6974;
	transition: all 0.2s;
}

.creation_commande_sans_compte .body-side-menu .b_rev{
	background-color: #5c6974;
}

.creation_commande_sans_compte .body-side-menu .b_rev:hover{
	background-color: rgb(93, 174, 43);
}

.creation_commande_sans_compte .body-side-menu .button_side_compte a{
	color: #fff;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 12px;
}

.creation_commande_sans_compte .body-side-menu .avantages{
	font-size: 16px;
	font-weight: 500;
	margin-top: 10px;
	padding-left: 20px;
}

.creation_commande_sans_compte .body-side-menu .avantages i{
	margin-right: 20px;
}

@media screen and (max-width: 580px){
	.panier-side-menu{
		width: 100%;
	}
	
	.subheader-side-menu{
		font-size: 14px;
	}

	#side-menu{
		width: 100%;
	}

	.creation_commande_sans_compte{
		width: 100%;
	}
}