/***************************************************************************************/
/* MODULE *

Modules are the reusable, modular parts of our design.
They are the callouts, the sidebar sections, the product lists and so on.

/***************************************************************************************/
/* A savoir *

.nav-listings = <ul>
.sous-menu = <ul>

/***************************************************************************************/
/* 06/06/2024 TEMP *
#nav-galerie a::after
{
	content: 'new';
	font-weight: bold;
	font-style: italic;
	font-size: x-small;
	line-height:1em;
	text-transform: uppercase;
	color: yellow;
	background-color: red;

	margin-left: 1em;
	padding: 0.2em 0.5em;
	border-radius: 1em;

	/* position: relative; *
	/* top: -0.5em; *
}
/* 06/06/2024 TEMP */
/***************************************************************************************/

.l-nav-listings
{
	display: block;

	/**/
/*	background-color: var(--nav-listings-bg-color);*/
	overflow: hidden;
	transition: width 0.3s, height 0.3s !important;
	/**/

	/**
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	/**/
}

/* design bouton */
.button-open-nav-listings,
.button-close-nav-listings
{
	display: none;
}


.nav-content
{
	background-color: var(--nav-listings-bg-color);
	transition: width 0.3s, height 0.3s !important;

	position: relative;
	height: 100%;
	width: 100%;
}

.nav-back
{
	display: none;
	background-color: var(--bg-color-fullscreen);
}

.nav-listings
{
	background-color: var(--nav-listings-bg-color);	/* inherit/var(--nav-listings-bg-color) => #080808 */

	list-style-type: none;
	margin: 0;
	padding: 0;

	font-size: 1.5rem;					/* => 1rem: 10px; 1em: 11.2px => 1.5rem: 15px; */
}

.nav-listings > li
{
	margin: 0;
}

.nav-listings > li a,
.nav-listings > li span,
.nav-listings > [id^="nav-group"]
{
	display: block;
	margin: 0;
	padding: 0.5em 1em;

	text-decoration: none;
	text-align: initial;
}

.nav-listings > [id^="nav-group"]
{
	text-transform: uppercase;
	font-weight: bold;
}

/***************************************************************************************/
/* Sub-menus : hide or display *
.nav-listings .sous-menu
	{ display: none; }					/* Cache par défaut tous les sous-menus *

.nav-listings > li:hover > .sous-menu,
.nav-listings > li:hover .sous-menu
	{ display: block; }					/* Affiche le sous-menu d'un élément de menu *

/***************************************************************************************/
/* No selection */

/* => General case */
.nav-listings > li,
.nav-listings > li a,
.nav-listings > li span
{
	background-color: inherit;
	color: var(--color-1);

	box-shadow: none;
/*
	-webkit-transition: color .3s ease 0s;
	   -moz-transition: color .3s ease 0s;
	    -ms-transition: color .3s ease 0s;
	     -o-transition: color .3s ease 0s;
	        transition: color .3s ease 0s;
*/
}

/* => Special case */
.nav-listings > #nav-stock-neuf-petits-prix a
{
	color: var(--color-5);
	text-transform: uppercase;
	font-weight: bold;
}
.nav-listings > #nav-stock-neuf-petits-prix a::before
	{ content : '\27A4  '; }

.nav-listings > #nav-minauto-mag img
{
	width: initial;
	/*
	max-height: 26px;
	width: 100%;
	object-fit: none;
	object-position: -1px -11px;
	*/
}

/*
.nav-listings > #nav-listings-gw a
	{ font-weight: bold; }
.nav-listings > #nav-nouveautes-gw a::before,
.nav-listings > #nav-stock-gw a::before,
.nav-listings > #nav-paint-gw a::before
{
	content : '\25B8  ';
	color: var(--color-5);
}
*/

/***************************************************************************************/
/* Selection: hover or focus */

/* => General case */
.nav-listings > li a:hover,
.nav-listings > li a:focus,
.nav-listings > li span:hover,
.nav-listings > li span:focus
{
	color: var(--color-3);
}

/***************************************************************************************/
/* Media queries */

/***************************************************************************************/
/** DESKTOP SCREEN, default **/

/***************************************************************************************/
/** WIDE SCREEN **/
@media screen and (min-width: 1280px)
{

}

/***************************************************************************************/
/** TABLET **/
@media screen and (max-width: 768px)
{
	.l-nav-listings
	{
		/*display: none;*/
/*		position: relative;		/* pour positionnement du .button-close-nav-listings */

		/* background-color: var(--nav-listings-bg-color); */

		position: fixed;
		left: 0;
		top: 0;

		margin: 0;
		border: 0;
		padding: 0;

		z-index: 999;
	}

	.l-nav-listings > [class*="flex"]
	{
		height: 100%;
		flex-wrap: nowrap;
	}

	.l-nav-listings > [class*="flex"] > .nav-content,
	.l-nav-listings > [class*="flex"] > .nav-back
	{
		flex: 1 1 auto;
	}

	.nav-back
	{
		display: block;
	}



	.toogle-nav-listings-on .nav-content,
	.toogle-nav-listings-off .nav-content
	{
		max-width: 250px;	/* for transition */
	}

	.toogle-nav-listings-on
	{
		height: 100%;
		width: 100%;
	}

	.toogle-nav-listings-off
	{
		width: 0%;
		height: 100%;
	}

	/* TEST *
	.toogle-nav-listings-on .nav-content
	{
		max-width: 250px;
	}
	.toogle-nav-listings-off .nav-content
	{
		max-width: 0;
	}
	/* TEST */

	/* TEST *
	.toogle-nav-listings-off > .nav-listings
	{
		width: 0;
		height: 0;
		padding: 0;
		/*display: none;*
	}

	.toogle-nav-listings-off > .nav-listings > li
	{
		width: 0;
		height: 0;
		/*display: none;
	}
	/* TEST */

	/* design buttons */
	.button-open-nav-listings,
	.button-close-nav-listings
	{
		display: inline-block;			/* block */

		color: var(--color-1);
		font-size: 3rem;				/* => 1rem: 10px; 1em: 11.2px => 1.3rem: 13px; */
		line-height: 150%;				/* base.css = ul */

		/*padding: 0.2em 0.5em;			/* 0.5 1em; */
		padding: 0 0.5em;

		cursor: pointer;

		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}

	.button-open-nav-listings
	{
		/*background-color: var(--nav-listings-bg-color);*/
		/**
		border: 1px solid var(--color-9);
		-webkit-border-radius: var(--border-radius-1);
		   -moz-border-radius: var(--border-radius-1);
			 -o-border-radius: var(--border-radius-1);
				border-radius: var(--border-radius-1);
		-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
		/**/

		line-height: initial;
		/* margin: 0; */
		/* transform: scale(1.2) translateY(-0.07em); */
	}
	.button-open-nav-listings::before,
	.button-open-nav-listings::after
	{
		display: block;
		text-align:center;
		line-height: 1em;
	}
	.button-open-nav-listings::before
	{
		/* border: 1px solid yellow; */
		content: '\2630  ';		/* html: &#9776; */
		transform: scale(1.2, 1);
	}
	.button-open-nav-listings::after
	{
		/* border: 1px solid red; */
		content: attr(data-label);
		font-size: 0.3em;
	}

	.button-close-nav-listings
	{
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;

		/*padding: 0.5em 1em;	/* = .nav-listings > li a */
	}

	.button-close-nav-listings::before
	{
		content: '\00d7  ';		/* html: &times; */
	}
}

/***************************************************************************************/
/** MOBILE **/
@media screen and (max-width: 480px)
{

}