@import url("variables.css");

* {
	margin: 0;
	padding: 0;
}

html,
body {
	font-size: 1vw;
	min-height: 100vh;
}

html,
input,
select {
	font-family: sans-serif;
	font-size: 1vw;
}

.gBase {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow: hidden;
}

.gMarges {
	width: 90vw;
	margin: 0 5vw;
}

.gHaut {
	position: fixed;
	z-index: 999;
}

.gEntete {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: fit-content;
	background-color: var(--bgPrimaire);
}

.gEntete-Logo {
	/*height: 5vh;*/
}

.gEntete-Logo img {
	height: 100%;
	width: auto;
}

.gEntete-Titre {
	font-size: 4vh;
	font-weight: bold;
	transition: font-size 1s;
}

.gEntete-Titre a {
	color: var(--colAccent);
	text-decoration: none;
}

.gContenant {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 10vh 0 2vh 0;
}

.gAriane {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	font-size: 1.2em;
	margin: 0.5em 0 0 1vw;
}

.gAriane div:not(:last-child)::after {
	content: ">";
	margin: 0 0.5em;
}

.gAriane a {
	color: var(--colTexte);
	text-decoration: none;
}

.gAriane div:last-child {
	color: var(--colAccent);
}

.gRetour {
	margin: 2em 0 2em 1vw;
}

.gRetour a {
	color: var(--colAccent);
	font-size: 2em;
	text-decoration: none;
}

.gAnnonce {
	font-size: 3em;
	padding: 1em;
	background-color: var(--bgSecondaire);
}

.gContenu {
	padding-left: 1vw;
}

.gAccueil-Tuiles {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 1em;
	gap: 1em;
}

.gOptions {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	font-size: 1.2em;
}

.gOption-Ordre span {
	font-size: 1em;
}

.gOption-Ordre select {
	font-size: 1em;
}

/*********************************************************************************************************** Items ***/

.gProduits-Filtre {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.gProduits-Departement-Description {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	font-size: 2em;
	font-style: italic;
	text-align: end;
	padding: 1em 0;
}

.gProduits-Contenant {
	display: flex;
	flex-direction: row;
	min-width: 50vw;
}

/*
.gProduits-Departements.ferme .gRetractable-Entete {
	rotate: -90deg;
}
*/
.gProduits-Contenu {
	display: flex;
	flex-direction: row;
	flex-basis: 40%;
	flex-grow: 1;
}

.gProduits-Liste {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	width: 100%;
	padding: 1em;
}

.gProduits-Entete h3 {
	font-size: 2em;
}

/****************************************************************************************************** Items-Item ***/

.gProduits-Item {
	position: relative;
	flex-basis: 22%;
	width: 22%;
	aspect-ratio: 2/3;
	/*height: 50vh;*/
	margin-bottom: 4em;
	padding: 1%;
	border: solid 0.1px transparent;
	overflow: hidden;
}

.gProduits-Item > a {
	display: flex;
	flex-direction: column;
	height: 99%;
	color: var(--colLiens);
	text-decoration: none;
}

.gProduits-Item:hover {
	border-color: var(--colAccent);
}

.gProduits-Item-Contenu {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 75%;
}

.gProduits-Item-Image {
	display: flex;
	height: 100%;
	width: auto;
	overflow: hidden;
}

.gProduits-Item-Image img {
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.gProduits-Item-Bas {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	height: 25%;
	/*padding: 2em;*/
}

.gProduits-Item-Infos {
	display: flex;
	flex-direction: row;
}

.gProduits-Item-Nom {
	font-size: 1.2em;
	font-weight: bold;
	text-align: right;
}

.gProduits-Item-Prix {
	font-size: 2em;
	font-weight: bold;
}

.gProduits-Bouton-Acheter,
.gProduits-Bouton-Options {
	position: absolute;
	font-weight: bold;
	padding: 0.5em 1em;
	bottom: 1em;
	left: 1em;
	color: var(--colMenu);
	background-color: var(--bgMenu);
	cursor: pointer;
	z-index: 99;
}

.gProduits-Bouton-Options {
	background-color: var(--bgMenuEnfantHover);
}

.gProduits-Bouton-Acheter:hover,
.gProduits-Bouton-Options:hover {
	opacity: 0.7;
}

/************************************************************************************************************ Item ***/

.gProduit-Detail {
	display: flex;
	flex-direction: column;
}

.gProduit-Detail-Contenant {
	display: flex;
	flex-direction: row;
	margin: 0 5em 0 5em;
}

.gProduit-Contenant {
	flex: 1;
	display: flex;
	flex-direction: row;
	width: 100%;
}

.gProduit-Images-Swiper {
	/*flex-basis: 25vw;*/
	width: 25vw;
	/*height: auto;*/
	/*aspect-ratio: 1/1;*/
	margin-bottom: 1em;
	overflow: hidden;
}

/*
.gProduit-Images-Carousel {
	display: flex;
	flex-direction: row;
}
*/
/*
.gProduit-Image-Icone {
	flex-basis: 5vw;
	cursor: pointer;
}

.gProduit-Image-Icone img {
	width: 100%;
	height: auto;
}
*/
.gProduit-Contenu {
	flex: 1;
	padding: 0 2em;
}

.gProduit-Entete {
	margin-bottom: 2em;
}

.gProduit-Accroche {
	margin-bottom: 2em;
}

.gProduit-Options {
	display: flex;
	flex-direction: column;
	margin-bottom: 1em;
}

.gProduit-Option {
	display: flex;
	flex-direction: column;
	margin-bottom: 1em;
}

.gProduit-Option-Titre h4 {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 0.5em;
}

.gProduit-Option label {
	font-weight: bold;
	padding: 0.5em;
	color: var(--colBouton);
	background-color: var(--bgBouton);
	user-select: none;
	cursor: pointer;
}

.gProduit-Option-Liste label:has(input:disabled) {
	display: none;
	opacity: 0.3;
	cursor: default;
}

.gProduit-Option-Liste {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5em;
}

.gProduit-Option-Liste input {
	display: none;
}

.gProduit-Option-Liste label:has(input:checked) {
	color: var(--colMenu);
	background-color: var(--bgMenu);
}

.gProduit-Etiquettes {
	display: flex;
	flex-direction: column;
	margin-bottom: 1em;
}

.gProduit-Etiquettes-Liste {
	display: flex;
	flex-direction: row;
	gap: 0.4em;
}

.gProduit-Etiquette {
	color: var(--colFiltres);
	background-color: var(--bgFiltres);
	padding: 0.3em 0.5em;
	border-radius: 0.4em;
}

.gProduit-Description h3 {
	font-size: 1.4em;
	font-weight: bold;
	margin-bottom: 0.5em;
}

.gProduit-Infos {
	width: fit-content;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: fit-content;
	gap: 2em;
	padding: 1em;
	margin-bottom: 1em;
	border: solid 0.1px var(--colAccent);
}
/*
.gProduit-Infos {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: flex-end;
	width: 100%;
	margin-bottom: 2em;
}
*/
.gProduit-Infos div {
	display: flex;
	flex-direction: column;
	/*margin-bottom: 2em;*/
}

.gProduit-Infos div span {
	font-weight: bold;
}

.gProduit-Infos-Prix {
	font-weight: bold;
}

.gProduit-Infos-Prix span {
	font-size: 2em;
}

.gProduit-Infos-Code {
	margin-bottom: 1em;
}

.gProduit-Infos-Acheter {
	align-self: center;
	font-size: 1.2em;
}

.gProduit-Infos-Acheter a {
	padding: 0.5em 1em;
	color: var(--colMenu);
	background-color: var(--bgMenu);
	text-decoration: none;
	white-space: nowrap;
}
/*
.swiper {
	width: 100%;
	height: 100%;
}
*/
.swpImage {
	height: 80%;
	width: 100%;
}

.swiper-slide img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
}
/*

.swiper-slide {
	display: flex !important;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-size: cover;
	background-size: contain;
	background-position: center;
}
*/
.swpVignettes {
	height: 20%;
	padding: 10px 0;
	box-sizing: border-box;
}

.swpVignettes .swiper-slide {
	opacity: 0.4;
}

.swpVignettes .swiper-slide-thumb-active {
	opacity: 1;
}

/*
.swiper {
	width: 100%;
	height: 300px;
	margin-left: auto;
	margin-right: auto;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
*/
/**************************************************************************************************** Departements ***/

.gRetractable-Conteneur {
	position: fixed;
	font-size: 1.5em;
	width: fit-content;
	left: 0;
	top: 45vh;
	z-index: 909;
	transition: left 0.5s ease-in-out;
}

.gRetractable-Conteneur.ferme {
	left: -13vw;
}
/*
.gDepartements-Liste {
	display: flex;
	flex-direction: column;
	font-size: 1.5em;
	width: 100%;
}
*/
.gRetractable-Contenant {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	color: var(--colMenu);
	background-color: green; /* var(--bgMenu);*/
}

.gRetractable-Entete {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3vw;
	color: var(--colMenu);
	background-color: var(--bgMenu);
	margin-bottom: 0;
	cursor: pointer;
}

.gRetractable-Entete span {
	transform-origin: center;
	transform: rotate(-90deg);
}

.gRetractable-Contenu {
	flex: 1;
	width: fit-content;
	color: var(--colSecondaire);
	background-color: var(--bgSecondaire);
	padding: 0.5em;
}

.gDepartements-Groupe {
	display: flex;
	flex-direction: column;
}

.gDepartements-Groupe .gDepartements-Groupe {
	display: none;
	margin-left: 0.5em;
}

.gDepartements-Item.actif + .gDepartements-Groupe {
	display: flex;
}

.gDepartements-Item {
	display: flex;
}

.gDepartements-Item a {
	color: var(--colPrimaire);
	width: 100%;
	padding: 0.2em 1em;
	white-space: nowrap;
	text-decoration: none;
}

.gDepartements-Item.actif a {
	opacity: 0.7;
	/*color: var(--colAccent);*/
}

.gDepartements-Item.courant a {
	font-weight: bold;
	opacity: 0.7;
	/*color: var(--colAccent);*/
}

/*********************************************************************************************************** Tuile ***/

.gTuile {
	flex-basis: 30%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: var(--bgSecondaire);
	border: solid 0.063em var(--colAccent);
	box-shadow: 0 0.063em 0.25em rgb(34, 54, 84, 0.24);
	overflow: hidden;
}

.gTuile-Contenu {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 10em;
	text-decoration: none;
}

.gTuile-Entete {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1em 1.5em;
}

.gTuile-Titre {
	display: flex;
	align-items: center;
	text-align: center;
	font-size: 1.8em;
}

.gTuile-Image {
	min-width: 2.5em;
	width: 2.5em;
	margin: 0 0 1em 0;
}

.gTuile-Image img {
	width: 100%;
	height: auto;
}

.gTuile-Texte {
	flex: 1;
	padding: 2em 1.5em 1.5em 1.5em;
}

.gTuile-Bas {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 1em;
	padding: 1em 1.5em;
	background-color: var(--bgSecondaire);
}

.gTuile:hover {
	border-color: var(--colAccent);
	box-shadow: 0 0.125em 0.5em rgb(34, 54, 84, 0.24);
}

.gTuile:hover .gTuile-Bas {
	visibility: visible;
}

.gTuile-Icone {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--colAccent);
	height: 1em;
	width: 1em;
}

.gTuile-Lien {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	margin-top: 1em;
}

.gLien-Global {
	position: absolute;
	text-decoration: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/********************************************************************************************************** Bandeau **/

.gBas {
	position: relative;
}

.gLogo {
	position: absolute;
	bottom: 1vh;
	right: 1vh;
	height: 5vh;
}

.gLogo img {
	height: 100%;
}

/*********************************************************************************************************************/
/****************************************************************************************************** media 1024 ***/
/*********************************************************************************************************************/

@media (max-width: 1024px) {
	html,
	body {
		font-size: 2vw;
	}

	.gMarges {
		width: 96vw;
		margin: 0 2vw;
	}

	.gEntete-Titre {
		position: absolute;
		top: 0;
	}

	.gContenu {
		padding-left: 4vw;
	}

	.gRetractable-Entete {
		font-size: 1.1em;
		width: 4vw;
	}

	.gProduits-Contenu {
		flex-direction: column;
	}

	.gProduits-Item {
		flex-basis: 45%;
		/*width: 45%;*/
	}

	.gProduit-Detail-Contenant {
		flex-direction: column;
	}

	.gProduit-Contenant {
		flex-direction: column;
		align-items: center;
	}

	.gProduit-Images-Swiper {
		width: 100%;
		margin-bottom: 2em;
	}
/*
	
	.swpVignettes {
		height: 10vh;
	}
*/
	.gProduit-Contenu {
		padding: 2em 0;
		order: 3;
	}

	.gProduit-Infos {
		flex-direction: row-reverse;
		font-size: 1.2em;
		gap: 1em;
		width: initial;
		order: 2;
	}
}

/*********************************************************************************************************************/
/******************************************************************************************************* media 640 ***/
/*********************************************************************************************************************/

@media (max-width: 640px) {
	html,
	body {
		font-size: 3vw;
	}

	.gTuile {
		flex-basis: 45%;
	}

	.gContenu {
		padding-left: 5vw;
	}

	.swpImage {
		/*height: inherit;*/
	}

	.gRetractable-Entete {
		width: 6vw;
	}

	.gProduits-Liste {
		padding: 0;
	}

	.gProduits-Item {
		flex-basis: 100%;
		/*width: 45%;*/
	}

	.gProduits-Bouton-Acheter,
	.gProduits-Bouton-Options {
		font-size: 1.5em;
	}

	.gProduit-Detail-Contenant {
		margin: 0 2em 0 2em;
	}

	.gProduit-Infos {
		font-size: 1em;
	}
}