/*
 * @author: Mathieu MARI <contact@mathieumari.com>
 * @date:   02-03-2023 19:06:45
 * @lastModifiedBy:   Mathieu MARI <contact@mathieumari.com>
 * @lastModifiedTime: 2025-09-10 00:36:39
 */

@charset "UTF-8";

/* -------------------------------------------------------------------------------------------------------------------- Root */
/* Voir: https://developer.mozilla.org/fr/docs/Web/CSS/var() */
:root {
	/* --mm_red: #D70028; */
	--color-1: #234e70;
	--colorRed: #f81f58;
}

/* -------------------------------------------------------------------------------------------------------------------- Chargement des polices */
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* -------------------------------------------------------------------------------------------------------------------- Tools left */
.customizer-contain.left {
	top: 0px !important;
	left: -100%;
	/* width: calc(50% - 320px); */
	-webkit-box-shadow: 0 0 20px rgba(89, 102, 122, 0.1);
	box-shadow: 0 0 20px rgba(89, 102, 122, 0.1);
	transition: none !important;
	-webkit-transition: none !important;
}

.customizer-contain.left.open {
	left: 320px;
}

.customizer-contain.left .customizer-body {
	max-height: calc(100vh - 63px);
}

/* -------------------------------------------------------------------------------------------------------------------- Menu */
.sidebar-link.sidebar-title {
	cursor: pointer !important;
}

a.sidebar-link.redLink {
	background-color: #c20000;
}

div.nav.flex-column.nac-pills.active {
	background-color: #c20000 !important;
}

div.nac-pills.active a.nav-link i {
	color: white !important;
}

a.nav-link {
	cursor: pointer;
}

.customizer-contain.left.open {
	z-index: 999999;
}

/* -------------------------------------------------------------------------------------------------------------------- Popup */
[p-reflexology_threejs='addDecal_form'] .btn-close {
	display: none;
}

/* -------------------------------------------------------------------------------------------------------------------- Barre de scroll */
/* Barre de défilement */
::-webkit-scrollbar {
	width: 10px;
}

/* La poignée de la barre de défilement */
::-webkit-scrollbar-thumb {
	background-color: #b2b2b2;
	border-radius: 10px;
}

/* Couleur de fond de la barre de défilement */
::-webkit-scrollbar-track {
	background-color: #f2f2f2;
}

/* -------------------------------------------------------------------------------------------------------------------- Boutons */
.nav-link.danger {
	background: #c20000;
	color: white;
}

/* -------------------------------------------------------------------------------------------------------------------- Blocs */
.login-card {
	background: none !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper .page-body {
	min-height: 100vh !important;
}

.page-body {
	background: white !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper .page-body {
	/* margin-top: 0px; */
	/* margin-left: 305px; */
	height: 100%; /* Assurez-vous que cet élément a une hauteur définie */
}

.page-wrapper.compact-wrapper .page-body-wrapper .page-body.pageMaestra3D {
	margin-top: 0px;
}

[p-maestra3d='container'] {
	height: 100vh;
	width: 100%;
	position: absolute;
}

/* .page-body, html{
		background: #111111;
	} */

.customizer-links {
	display: initial !important; /* On indique qu'on l'affiche toujours */
}

.submainTools3D {
	top: 160px;
	position: fixed;
	z-index: 10;
	display: none;
}

.page-wrapper.horizontal-wrapper .left-header {
	height: 50px;
}

.header-wrapper {
	height: 95px;
}

.sidebar-list.mm_active > a {
	background: rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------------------------------------------------------------------------------- SVG */
.page-wrapper.compact-wrapper .page-header .header-wrapper .toggle-sidebar svg {
	color: #111111;
}

/* -------------------------------------------------------------------------------------------------------------------- Listes */
.gallery-with-description {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-bottom: 30px;
	max-height: 500px;
	overflow-y: auto;
}

.gallery-with-description figure {
	flex: 0 0 calc(25% - 10px); /* Ajustement pour 4 éléments par ligne, soustrayez la marge si nécessaire */
	margin: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 2px solid rgba(0, 0, 0, 0.02);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	border-radius: 20px;
}

.gallery-with-description figure.active {
	transform: scale(1.05); /* Légèrement agrandi pour plus de mise en évidence */
	border: 2px solid var(--color-1);
}

.gallery-with-description img {
	max-width: 100%;
	height: auto;
}

.gallery-with-description h4 {
	text-align: center;
	width: 100%;
	margin-top: 10px;
}

.gallery-with-description .image-container {
	width: 250px; /* ou toute autre largeur */
	height: 150px; /* ou toute autre hauteur */
	background-size: 220%; /* Ajustez ce pourcentage pour contrôler le zoom */
	background-position: center; /* Ajustez cela pour centrer sur le t-shirt */
	background-repeat: no-repeat;
	border: 0px solid transparent;
}

/* -------------------------------------------------------------------------------------------------------------------- Tableaux */
.table-responsive {
	overflow-y: auto; /* Active le défilement vertical */
}

.table > :not(caption) > * > * {
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.btn-group > .btn > i.fa {
	font-size: 18px;
}

.table th {
	font-weight: 900;
}

[p-maestra3d='listImg2D'] img {
	border-radius: 20px;
	padding: 10px;
	border: 2px solid rgba(0, 0, 0, 0.02);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* -------------------------------------------------------------------------------------------------------------------- Dark mode */
body.dark-only .page-wrapper .page-body-wrapper .form-control {
	background-color: #111111;
	color: rgba(255, 255, 255, 0.5);
	border: 1px solid #3d4254;
}

body.dark-only thead,
body.dark-only tbody,
body.dark-only tfoot,
body.dark-only tr,
body.dark-only td,
body.dark-only th {
	border-color: #3d4254 !important;
}

body.dark-only .page-wrapper .page-body-wrapper .card:not(.email-body) .table th,
body.dark-only .page-wrapper .page-body-wrapper .card:not(.email-body) .table td {
	color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-only .page-wrapper .page-body-wrapper .card:not(.email-body) .card-header {
	background-color: transparent !important;
}

body.dark-only .page-wrapper .page-body-wrapper .card:not(.email-body) .card-header h1,
body.dark-only .page-wrapper .page-body-wrapper .card:not(.email-body) .card-header h2,
body.dark-only .page-wrapper .page-body-wrapper .card:not(.email-body) .card-header h3,
body.dark-only .page-wrapper .page-body-wrapper .card:not(.email-body) .card-header h4,
body.dark-only .page-wrapper .page-body-wrapper .card:not(.email-body) .card-header h5,
body.dark-only .page-wrapper .page-body-wrapper .card:not(.email-body) .card-header h6 {
	color: rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------------------------- Very Large devices (e.g., laptops around 1440px) comme pour les macbook pro */
@media (min-width: 1201px) and (max-width: 1440px) {
	/* Styles spécifiques pour les laptops avec écrans d'environ 1440px de large */
	.colCustom {
		width: 50%; /* 2 colonnes par ligne */
	}
}

/* -------------------------------------------------------------------------------------------------------------------- Réglage pour les écrans plus larges */
@media (min-width: 1201px) {
	.gallery-with-description figure {
		flex: 0 0 calc(16.666% - 10px); /* Ajustement pour 6 éléments par ligne */
	}
}

/* ---------------------------------------------------------------------------- Extra large devices (large desktops, 1200px and up) */
@media all and (max-width: 1200px) {
	/* -------------------------------------------------------------------------------- Menu sidebar (gauche) */
	.customizer-contain.left {
		width: 100%;
	}

	.customizer-contain.left.open {
		left: 0px;
	}
}

/* -------------------------------------------------------------------------------------------------------------------- Smartphones */
@media (max-width: 768px) {
	/* -------------------------------------------------------------------------------- Menu sidebar (droit) */
	.customizer-links .nav-link:before {
		background-color: initial !important;
	}

	.customizer-links .nav-link:hover i {
		color: initial !important;
	}

	.customizer-contain {
		width: 100%;
		right: 100%;
	}

	/* -------------------------------------------------------------------------------- Tooltips */
	.mm-tooltip {
		display: none;
	}
}

/* ------------------------------------------------------------------------------------- Tabulator */
.tabulator {
	border: 1px solid #d7dbda !important;
}

.tabulator .tabulator-header {
	font-weight: normal !important;
}

.tabulator-row .tabulator-cell.tabulator-editing {
	border-color: rgba(0, 0, 0, 0.2) !important;
}

/* ------------------------------------------------------------------------------------- SweetAlert2 */
.swal2-container {
	z-index: 999999 !important;
}

.circleChoiceColor {
	cursor: pointer;
	margin: 5px;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: inline-block;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

td.choiceColorLine:hover {
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.05);
	user-select: none;
}

.pcr-app {
	border-radius: 10px !important;
}

/* ------------------------------------------------------------------------------------- */
#leftSidebar {
	width: 50%;
}

@media (max-width: 768px) {
	#leftSidebar {
		width: 100% !important;
	}
}

/* ------------------------------------------------------------------------------------- */
#rightMain .nav-link.active {
	background: var(--colorRed);
	color: white;
}

/* ------------------------------------------------------------------------------------- sidebarLightFixed pour conserver le menu petit */
.sidebar-wrapper.close_icon.sidebarLightFixed,
.sidebar-wrapper.close_icon.sidebarLightFixed .sidebar-icon-only:hover {
	width: 106px !important; /* reste compacte */
	transition: none !important;
}

.sidebar-wrapper.close_icon.sidebarLightFixed .logo-wrapper,
.sidebar-wrapper.close_icon.sidebarLightFixed .sidebar-main-title,
.sidebar-wrapper.close_icon.sidebarLightFixed a span,
.sidebar-wrapper.close_icon.sidebarLightFixed .according-menu,
.sidebar-wrapper.close_icon.sidebarLightFixed .sidebar-submenu {
	display: none !important;
}

.sidebar-wrapper.close_icon.sidebarLightFixed .simplebar-content {
	padding: 0px !important;
}

.sidebar-wrapper.close_icon.sidebarLightFixed .simplebar-wrapper {
	margin: 0px !important;
}

.sidebar-wrapper.close_icon.sidebarLightFixed .menu-box {
	margin-left: 15px !important;
	margin-right: 15px !important;
}

.sidebar-wrapper.close_icon.sidebarLightFixed .simplebar-mask {
	top: 100px !important;
}

.sidebar-wrapper.close_icon.sidebarLightFixed .sidebar-main .sidebar-links {
	height: 100vh !important;
	overflow: hidden !important;
}

.sidebar-wrapper.close_icon.sidebarLightFixed .logo-icon-wrapper {
	text-align: right !important;
	display: block !important;
}

body.sidebarLight .page-wrapper.compact-wrapper .page-header {
	margin-left: 106px;
	width: calc(100% - 106px);
}

body.sidebarLight .footer-fix {
	margin-left: 106px;
	width: calc(100% - 106px);
}

body.sidebarLight .page-wrapper.compact-wrapper .page-body-wrapper .page-body {
	margin-left: 106px;
}

.mm-tooltip {
	background: #fff !important;
	color: #222 !important;
	font-weight: 500;
	padding: 6px 12px;
	font-size: 13px;
	border-radius: 6px;
	visibility: hidden;
	z-index: 99999;
	box-shadow: 0 2px 8px rgba(34, 34, 34, 0.12);
	border: 1px solid #eee;
}

.mm-tooltip > .arrow::before {
	content: '';
	transform: rotate(45deg);
	background: #fff !important;
}