@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");:root{--header-height: 3rem;--nav-width: 68px;--first-color: #4723D9;--first-color-light: #AFA5D9;--white-color: #F7F6FB;--body-font: 'Nunito', sans-serif;--normal-font-size: 1rem;--z-fixed: 100}*,::before,::after{box-sizing: border-box}


			.glassMorphisteModal {
				background: rgb(160 195 189 / 89%);
				backdrop-filter: blur(17px);
				-o-filter: blur(5px);
				-ms-filter: blur(5px);
				filter: blur(0px);
				border: 2px solid #164e56;
			}	
			.glassMorphisteModal:before {
				height: 421px;
				width: 274px;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 20px;
				box-shadow: 10px 10px 20px -10px rgba(0, 0, 0, 0.1);
				border-top: 1px solid rgba(255, 255, 255, 0.2);
				border-left: 1px solid rgba(255, 255, 255, 0.2);
				position: relative;
				left: 10%;
				top: 108px;
			}
			.selection {
				font-family: Montserrat, sans-serif;
				font-weight: 500;
				color: #0f6872;
				opacity: 2.7;
				font-size: 1.4rem;
				font-weight: bold;
				margin-top: 0;
				text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
			}	
			
			.selectionWhite {
				font-family: Montserrat, sans-serif;
				font-weight: 500;
				color: white;
				opacity: 2.7;
				font-size: 1.4rem;
				font-weight: bold;
				margin-top: 0;
				text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
			}	

/*
 @media screen and (orientation: portrait) {
      html {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100vh;
        height: 100vw;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
      }
    }
*/

	.glassMorphiste {
		background: rgb(117 105 181 / 1%);
		backdrop-filter: blur(15px);	
	}

	a{text-decoration: none;color:black}
	.header{
		width: 100%;
		height: var(--header-height);
		position: fixed;top: 0;left: 0;
		display: flex;align-items: center;
		justify-content: space-between;
		padding: 0 3rem;
		background-color: #1e0e0e; /* var(--white-color);*/
		z-index: var(--z-fixed);
		transition: .5s}
	.header_toggle{color: var(--first-color);font-size: 2.5rem;cursor: pointer}
	.header_img{
		width: 35px;height: 35px;
		display: flex;justify-content: center;border-radius: 50%;
		overflow: hidden}
		
	.header_img img{width: 40px}
	
	.body-pd{
		padding-left: calc(var(--nav-width) + 1rem)}
		.active{color: var(--black-color)
	}
	.active::before{
		content: '';
		position: absolute;
		left: 0;
		width: 2px;
		height: 32px;
		background-color: var(--white-color);
		text-decoration: none;}
	.height-100{height:7vh}
	
	.bx {
		font-family: boxicons !important;
		font-weight: 400;
		font-style: normal;
		font-variant: normal;
		line-height: 1;
		text-rendering: auto;
		display: inline-block;
		text-transform: none;
		speak: none;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
	
	.l-navbar{
		position: fixed;
		top: 0;left: -30%;
		width: var(--nav-width);
		height: 100vh;
		background-color: #45338d; 
		padding: .5rem 1rem 0 0;transition: .5s;z-index: var(--z-fixed);
		background: rgb(117 105 181 / 1%);
		backdrop-filter: blur(10px);
		border: 3px solid #3e978d;
	}
	
		
	/* Style lorsque la navbar est partiellement ouverte */
	.l-navbar.show {
		width: 250px; /* Largeur partielle */
	}
	/* Style pour la navbar complètement déployée */
	.l-navbar.expanded {
		width: 400px; /* Largeur complète */
	}	
	.nav{
		/* height: 100%; */
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden}
	.nav_logo, 
	.nav_link{display: grid;grid-template-columns: max-content max-content;align-items: center;column-gap: 1rem;padding: .5rem 0 .5rem 1.5rem;color:black;}
	.nav_logo{margin-bottom: 2rem}
	.nav_logo-icon{font-size: 1.25rem;color: #020008;color: white;}
	.nav_logo-name{color: #040010;font-weight: 700;color: #f2f0f7;}
	.nav_link{position: relative;color:#040010);margin-bottom: 1.5rem;transition: .3s;font-size: x-large;text-decoration: none;}
	.nav_link:hover{
		color: var(--white-color);
		-moz-box-shadow: 4px 4px 10px #888;  
		-webkit-box-shadow: 4px 4px 10px #888;  
		box-shadow:4px 4px 5px #2fcac4;
		color:black;
	}
	.nav_icon{font-size: 1.25rem;color: black;}
	.show{left: 0}

	
	.recherche {
		padding:0px;	
	}
	.marge {
		margin:0 22px 0 21px;
	}
	.d-flex--custom {
		display: flex !important;
	}
	.bouton-panier {
		position: relative;
		top: 1px;
		left: 113px;
		/* z-index: 100; */
	}
	
	.troisBar {
		color:white;	
	}
	/* 
	.shadow {
	  -moz-box-shadow: 4px 4px 10px #888;  
	  -webkit-box-shadow: 4px 4px 10px #888;  
	  /* box-shadow:4px 4px 6px #888; 
	  box-shadow: box-shadow: 0 0.5rem 1rem rgb(20 1 1 / 53%) !important; 
	  		   box-shadow: 15px 19px 10px -4px rgb(39 82 94 / 72%);
	  
	
	}*/
.shadow {box-shadow: 0 0.5rem 1rem rgb(20 1 1 / 53%) !important;} 

@media (min-width: 576px) and (max-width: 768px) {

	body{margin: calc(var(--header-height) + 2rem) 0 0 0;padding-left: calc(var(--nav-width) + -2rem)}
	.header{height: calc(var(--header-height) + 1rem);padding: 0 2rem 0 calc(var(--nav-width) + 2rem)}
	.header_img{
	    width: 40px;
	}
	.header_img img{width: 45px}
	.l-navbar{left: 0;padding: 1rem 1rem 0 0}
	
	.show{
		width: calc(var(--nav-width) + 25%);
		/* background-color: whitesmoke; */
	}
	.body-pd{padding-left: calc(var(--nav-width) + 188px)}

   .marge {
		margin:0 22px 0 -102px;
	}
	
	/* Barre de navigation en mode partiellement ouverte */
	.nav-bar.show {
	  width: 250px; /* Largeur partielle */
	  transition: width 0.3s ease-in-out;
	}
	
	/* Barre de navigation en mode complètement déployée */
	.nav-bar.expanded {
	  width: 400px; /* Largeur complète */
	  transition: width 0.3s ease-in-out;
	}
	
	/* Padding du body et du header pour correspondre à la largeur de la navbar */
	.body-pd {
	  padding-left: 250px;
	}
	
	.nav-bar.expanded ~ .body-pd {
	  padding-left: 400px;
	}
	
	.bouton-panier {
		position: relative;
		top: 5px;
		left: 233px;
		z-index: 100;
	}
}


@media (min-width: 376px) and (max-width: 575px) {
   	
	.d-flex-custom {
		display: flex !important;
		flex-direction: column;
	}	
	.bouton-panier {
		position: fixed;
        top: 0px;
        left: 302px;
	}	
}




/*
@media screen and (min-device-width: 576px) and (max-device-width: 768px) { 

}

 Ajustement de la hauteur pour des petits écrans 
@media (max-height: 575px) {
   
}*/