// ----------------------------------
// Vu que l'admin affiche le site les z-index doivent etre plus grands que ceux du site, soit le z-index du site max = 5
// plus grand z-index admin= 14 => titre + popup + monCompte + msgKo et ok
// ----------------------------------

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BhuTuka+Expanded+One&family=Dancing+Script&family=Hubballi&family=Kalam:wght@300&family=Monoton&family=Nothing+You+Could+Do&family=Pacifico&family=Permanent+Marker&family=Righteous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aclonica&family=Amatic+SC&family=Assistant:wght@200&family=Audiowide&family=Bungee+Inline&family=Cabin+Sketch&family=Cairo:wght@200&family=Caveat&family=Coda&family=Cormorant+Garamond:wght@300&family=Grand+Hotel&family=Handlee&family=Henny+Penny&family=Indie+Flower&family=Italianno&family=Itim&family=Lemon&family=Mali:wght@200&family=Markazi+Text&family=Merienda&family=Noto+Serif+Display:wght@100&family=Patrick+Hand&family=Petit+Formal+Script&family=Philosopher&family=Playball&family=Playfair+Display&family=Rye&family=Sansita+Swashed:wght@300&family=Satisfy&family=Shadows+Into+Light&family=Smooch+Sans:wght@100&family=Tangerine&display=swap');

// ----------------------------------
// Variables
// ----------------------------------
@import "_commonVars.scss";

// ------------------------------------------------------
// Styles generiques
// ------------------------------------------------------
* {  box-sizing: border-box; }

form {display:contents; z-index:6;}

// ------------------------------------------------------
// Body
// ------------------------------------------------------
html {
	width:99.8%;
	height:100%;
}

body	{
	overflow:visible;
	width:99.9%;
	height:100%;
	top:0;
	font-size:1rem;
	box-sizing: border-box;
	margin:0;
	font-family: Arial, sans-serif;
}

a {text-decoration:none; color:inherit;}
.form	{border:1px solid grey; height:100%; padding:3px; padding-top:3px; padding-bottom:20px; vertical-align:top; top:1px;  }

// ------------------------------------------------------
// Custo ascenseur : a priori ne passe jamais ici
// mais dans @supports (scrollbar-width: auto) de theme.css
// ------------------------------------------------------
@supports (-webkit-appearance: none) {
	::-webkit-scrollbar { width:14px; height:14px; }

	// Track
	::-webkit-scrollbar-track {width:14px; box-shadow :inset 0 0 5px lightgrey; border-radius: 3px; }

	// Handle
	::-webkit-scrollbar-thumb {	border-radius: 3px;	}
}

// ------------------------------------------------------
// jsResize
// ------------------------------------------------------
#resize, .jsResize{
	cursor:pointer;
	padding-top:5px;
	margin-left: 45px;
	margin-right: 10px;
}

// ------------------------------------------------------
// Structure des pages
// ------------------------------------------------------

/*
____________________________________________________
|			zonePageWbm								|
|													|
|		|-------------------------------|			|
|		| zoneTitreWbm	1				|			|
|		|-------------------------------|			|
|		| zoneMenuWbm 2					|			|
|		|-------------------------------|			|
|		| zoneRechercheWbm 3			|			|
|		|-------------------------------|			|
|		| zoneMsgWbm	4				|			|
|		|-------------------------------|			|
|		| zoneFormWbm 5					|			|
|		|								|			|
|		|								|			|
|		|								|			|
|		|-------------------------------|			|
|		| zoneValidateWbm 6				|			|
|		|-------------------------------|			|
|													|
|___________________________________________________|

*/

// ------------------------------------------------------
// Frames
// ------------------------------------------------------

#globalContainer{
	display:flex;
	flex-direction: row-reverse;
	top:0;
	left:0;
	align-self: flex-start;
	background:lightgrey;
}

#leftFrameAdmin {
	height: 100vh;
	//grid-column:1;
	width:250px;
	overflow-y: auto;
	position:sticky;
	top:0;
	left:0;
	background-color: lightgrey;
}

#rightFrameAdmin {
	width:100%;
	height: 100%;
	vertical-align:top;
	text-align:left;
	padding:0px;
	margin:0;
	border:0;
	top:0;
	overflow:visible;
	/*overflow-y: auto;*/
	flex: 1;
	border-top-left-radius:20px;
	background:lightgrey;
	padding:1px;
}

// ------------------------------------------------------
// Page
// ------------------------------------------------------
#zonePageWbm{
	display:grid;
	grid-template-columns:auto;
	text-align:left;
	position:relative;
	top:0;
	left:0;
	z-index:12;
	overflow:visible;
	/*overflow-y: auto;*/
	border-top-left-radius:20px;
}

// ------------------------------------------------------
// Titres
// ------------------------------------------------------
#zoneTitreWbm	{
	grid-column:1 ;	grid-row: 1;
	display:flex; flex-wrap:wrap;
	white-space:nowrap;
	position: sticky;
	top:0px;
	height:59px;
	width:100%;
	margin:auto;
	vertical-align:middle;
	text-align:left;
	z-index:14;
	padding: 10px;
	overflow:visible;
	border-top-left-radius:20px;
}

#zoneTitreWbm > img{border-radius: 50%;padding:0px;background:transparent;}
#zoneTitreWbm > form>img{border-radius: 50%;padding:0px;background:transparent;}

// #menu-accordeon--> adminInclude/zoneMonCompte.php

// ------------------------------------------------------
// Menus des pages
// ------------------------------------------------------
#zoneMenuWbmContainer	{
	grid-column: 1; grid-row: 2;
	position: sticky;
	overflow:visible;
	top:59px;
	margin:auto;
	z-index:13;
	padding:3px;
	width:100%; border:0;
	//height:180px;
	background-color: #fff;
}

#zoneMenuWbm	{
	display:flex; flex-wrap:wrap;
	white-space:nowrap;
	width:95%;
	overflow:visible;
	margin:auto;
	text-align:center;
	justify-content: flex-start;
	z-index:12;
	padding:3px;
	margin-top:10px;
	margin-bottom:10px;
	border-radius:20px;
	flex: 0 0 auto;
}

// ------------------------------------------------------
// bordure droite qui ne va pas jusqu'en haut
// ------------------------------------------------------
.bordure-esp {
	position: relative;
}

.bordure-esp::after {
	content: '';
	position: absolute;
	top: 30px;          /* Marge en haut */
	bottom: 10px;       /* Marge en bas */
	right: 0;
	width: 1px;         /* Épaisseur de la bordure */
	background-color: lightgrey; /* Couleur de la bordure */
}

// ------------------------------------------------------
// sous recherche
// ------------------------------------------------------
#zoneRechercheWbm {
	grid-column: 1 ; grid-row: 3;
	display:flex; flex-wrap:wrap;
	white-space:nowrap;
	position: sticky;
	width:100%;
	max-width:100%;
	//top: 190px;
	left:0px;
	margin:auto;
	text-align:left;
	border-radius: 3px;
	align-content: flex-start;
	justify-content: flex-start;
	align-items: center;
	overflow:visible;
	z-index:12; // ne doit pas etre pplus grand que menus
	flex: 0 0 auto;
	padding:3px;
	white-space: break-spaces;
}

// ------------------------------------------------------
// Bandeau aide - info
// ------------------------------------------------------
#bandeauAideInfo{
	display:flex;
	justify-content: flex-start;
	align-items: center;
	column-gap:20px;
	position: sticky;
	white-space: break-spaces;
	hyphens: auto;
	text-align:left;
	color:black;
	z-index:10;
}

// ------------------------------------------------------
// sous Menus des pages // souvent onglets mais a ne plus utiliser pour simplifier
// ------------------------------------------------------
#sousMenuPagesWebm {
	display:flex;	flex-wrap:	wrap;
	vertical-align:middle;
	white-space:nowrap;
	text-align:center;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	width:99.9%;
	z-index:10;
	position:relative;
	top:5px;	
}

// ------------------------------------------------------
// Form
// ------------------------------------------------------
#zoneFormWbm	{
	//grid-column: 1 ;
	// grid-row: 5;
	vertical-align:top;
	text-align:left;
	margin:auto;
	margin-bottom:2px;
	margin-top: 2px;
	font-size:1rem;
	width:100%;
	//height: 30px; //pour sticky hauteur moins grande que parent
	z-index:15;
	overflow: visible;
	display:flex; flex-direction:row; flex-wrap:wrap;
	position: relative;
}

#zoneValidateWbm	{
	grid-column: 1 ;
	//grid-row: 6;
	border-radius: 4px;
	margin:2px;
	padding:15px;
	text-align:center;
	vertical-align:middle;
	z-index:6;
}


// ------------------------------------------------------
// Styles du menu gauche
// ------------------------------------------------------
#tableMenuGauche {
	display:table;
	vertical-align:top;
	height:100%;
	width:100%;
	//margin:7px;
	text-align:left;
	padding:5px;
	border: 1px solid lightgrey;
	border-top-right-radius:20px;
	border-bottom-right-radius:20px;
}

#blockHaut{
	display:block;
	padding:4px;
	padding-top:1px;
	vertical-align:top;
	margin:auto;
	z-index:11;
	position:relative;
}

#siteLogo{
	text-align:center;
	display:inline;
	max-width:45%;
	border-radius:10px;
	padding:2px;
}

#siteName{
	vertical-align:top;
	font-size:1.3rem;
	line-height:1.2em;
	margin-top:0px;
	font-style:italic;
	word-wrap:normal;
	white-space:nowrap;
	overflow:visible;
	font-weight:bold;
	display:block;
}

#siteTime{
	display:flex;
	font-size:0.9rem;
	width:100%;
	margin-top:25px;
	margin-bottom:0px;
	margin-right:0px;
	margin-left:0px;
	border-radius:25px;
	text-align:center;
	background:transparent;
}
.clockContainer {
	white-space: nowrap;
	display: flex;flex-wrap: wrap;
	align-items: start;
	margin-bottom:10px;
}

.siteClockLabel,
.siteClockInput {
	display: inline-block;
	vertical-align: middle;
	font-size: 0.8rem;
	font-family: "Roboto Mono", monospace;
	background: transparent;
	border: 0;
}

.siteClockInput {
	width: auto;
	text-align: left;
}

#labelEnv{
	display:block;
	font-size:0.9rem;
	margin-top:1px;
	padding-right:0px;
	padding-left:0px;
	word-wrap:normal;
	line-height:20px;
	white-space:nowrap;
	overflow:visible;
	width:100%;
}


.menuGaucheMenusPrincipaux {
	// on a de la place et le bouton s'agrandit - il faut optimiser la largeur
	margin:auto;
	margin-top:7px;
	margin-bottom:7px;
	display:block;
	font-weight:bold;
	font-size:1rem;
	text-decoration:none;
	text-align:left;
}

.boitesSousMenuG {display:block; margin-left:4px; position:relative; padding:2px; padding-left:2px;  margin-top:2px; margin-bottom:2px;}
.menuGaucheSousMenus, .boitesSousMenuG a, {	text-decoration:none; font-size:1rem; padding-left:11px; }
.menuGaucheSousMenusActif { font-style:italic; font-weight:bold; text-decoration:none; font-size:1rem; padding-left:11px; }
.menuGaucheSousMenus:hover { text-decoration:underline;}

/* Option : effet enfoncé au clic */
.menuGaucheSousMenus:active,
.boitesSousMenuG a:active {
    transform: scale(0.98);
}

// ------------------------------------------------------
// Styles des pages
// ------------------------------------------------------
.titreWbm	{	text-align:left; font-size:1.3rem; margin:auto; width:70%;	}
.titreWbm > img {border-radius: 50%;padding:0px; background:transparent; vertical-align:middle;}
#sousSections { padding:4px; margin:4px; margin-top:0px; }
th { font-family:monospace; padding:5px; margin:5px; }


// ------------------------------------------------------
// Styles des champs
// ------------------------------------------------------
.libChampsWebmaster		{
	margin:auto;
	font-size:1rem;
	padding:5px;
	text-align:left;
	white-space:nowrap;
	vertical-align:middle;

	margin:2px;
	align-items: center;
	
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
}

.lib2ChampsWebmaster	{left:320px; width:48%;}

.inputWebmaster {
	display: inline-block;
	//padding: 3px;
	margin:2px;
	font-size: 0.9rem;
	border-radius: 4px;
	resize: vertical;
	transition: all 0.3s ease-in-out;
	max-width: 100%;
	width: fit-content;
}

.listBoxCouleur		{
	display:inline-block;
	border-radius: 4px;
	margin:2px;
	font-size:1rem;
	cursor : pointer;
}

.listBoxCouleur	:focus, .listBoxCouleur	:hover	{ border:1px solid #0b4c5f;}

.selectWbm {
	border-radius: 4px;
	font-size: 0.9rem;
	padding:3px;
	margin:2px;
	max-height:30px;
	max-width:100%;
}

.selectWbm > option {
	padding-top: 3px;
	padding-bottom: 3px;
}

select option:hover {
	background-color: #dcdcdc; // Gris plus foncé au survol
	color: #000; // Texte en noir pour plus de contraste
}

.textAreaWbm {
	width:100%;
	white-space: pre-wrap;
	word-wrap:break-word;
	word-break: break-all;
	max-width:100%;
	border-radius: 4px;
	resize: vertical;
	transition: all 0.3s ease-in-out;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	font-family: sans-serif;
}


// ------------------------------------------------------
// Styles des messages
// ------------------------------------------------------
#zoneMsgWbm {
	grid-column: 1 ;
	grid-row: 4;
	hyphens: auto;
	word-break: break-all;
	margin: 4px;
	border-radius : 4px;
	padding: 4px;
	font-size: 1rem;
	transition: all 0.7s ease-in-out;
	border-radius: 10px;
	margin:auto;
	display:block;
	position:relative;
	overflow:visible;
	top:8px;
	z-index:10;
	resize: both;
	min-width: 200px;
	text-align: left;

}

.admMsgOk, .admMsgKo	{
	padding:7px;
	border-radius: 4px;
	margin: auto;
	margin-top:5px;
	margin-bottom:5px; 
	hyphens: auto;
	word-break: break-all;
	white-space: normal;
	resize: both;
	text-align: center;
}

.actionMessages		{ display:inline; font-size:1rem; padding:2px; margin:auto; clear:both;}
.informationsTechLib	{ font-size:1rem; }
.informationsTechValue	{ border:0px; font-size:1rem; padding:2px;}

.debugStyle {
	/*line-height: 24px;*/
	padding: 2px;
	/*font-size: 1.1rem;*/
	max-width:100%;
	white-space:break-spaces;
	word-break:break-all;
	overflow-wrap:break-word;
	// Facultatif mais utile si le conteneur est trop petit
	//overflow: hidden;
	/*min-height:40px;*/
}

span.libChampsWebmaster > input::placeholder {
	color:grey;
	font-style:italic;
}

// ------------------------------------------------------
// Les boutons
// ------------------------------------------------------

// ------------------------------------------------------
// Les boutons actions
.boutonsWebmaster {
	display:inline-block;
	text-align:center;
	align-content:center;
	margin:3px;
	padding:5px;
	font-family: system-ui;
	font-size:0.9rem;
	vertical-align:middle;
	text-decoration:none;
	cursor:pointer;
	white-space: nowrap;
	max-height:53px;
	border-radius:7px;
	//max-height : 35px;
}

// ------------------------------------------------------
// Les boutons menus de chaque pages
// ------------------------------------------------------
.boutonsMenusWbm, .boutonsMenuWbmActif {
	display: inline-block;
	font-size:1rem;
	text-align:center;
	align-content:center;
	vertical-align:middle;
	white-space:nowrap;
	text-decoration:none;
	cursor:pointer;
	list-style-type : none;
	padding:5px;
	margin:5px;
	font-size:1rem;
	height:37px;
	border-radius:12px;
}

.boutonsMenuWbmActif {
	border-radius:3px;
	border-top-left-radius:12px;
	border-top-right-radius:12px;
}

#btnAvance {
	margin:auto;
	display:block;
	border-radius:2px;
	padding-right:10px;
	padding-left:10px;
	padding-top:3px;
	padding-bottom:3px;
	font-size:1rem;
	cursor:pointer;
	text-align:center;
	margin-bottom:5px;
}


// ------------------------------------------------------
// Icônes a priori impacte seulement styles, car les autres sont tous surchargés
// ------------------------------------------------------
i ,.fas, .far, .fab ,.fad, .fab, .fa-arrow-circle-left, .fa-arrow-circle-right,.fa-database {
	@include awesomIco;
}

// ------------------------------------------------------
// Bulle ronde Numéro item
// ------------------------------------------------------
.roundedImage{
	border-radius: 50%;
	text-align:center;
	vertical-align:middle;
	text-align:center;
	height:20px;
	margin:2px;
	width:20px;
	display:block;
	box-shadow : 5px 5px lightgrey;
}


// ------------------------------------------------------
// Zone aide détaillée dans agencement
// ------------------------------------------------------
.pop{
	text-align:left;
	display:inline-block;
	padding:5px;
	margin-left:25px;
	border-radius:5px;
}


// ------------------------------------------------------
// Theme
// ------------------------------------------------------
#theContainerOFCarrousse{
	display:grid;
	vertical-align:top;
	margin:auto;
	vertical-align:top;
	grid-row:3;
	width:95%;
	grid-column-gap:20px;
}

#theCarrousse{
	border:1px solid lightgrey;
	vertical-align:top;
	display:block;
	padding:1px;
	padding-bottom:30px;
	margin-bottom:5px;
	height:406px;
}


// ------------------------------------------------------
// liste des articles / tableaux
// ------------------------------------------------------
.tableaux {
	// liste de valeurs, liste des etats cde, pays, ref, ....tout tableau en liste, les %grid sont définis dans le style html
	// couleur a passer dans theemClair
	width:100%;
	text-align:left;
	background-color:#f4f6fc;
	padding:0px;
	margin:0px;
}

.ligneFlex {
	display:flex;
	width:100%;
	justify-content:space-between;
	text-align:center;
	margin-bottom:5px;
}

.libelleLV{
	width:100%;
	text-align:left;
	font-weight:bold;
	padding:5px;

	background:grey;
	color:white;
}

.celluleLV {vertical-align:middle; font-size:1rem; margin:0; margin-bottom:1px; margin-top:1px; margin-left:0px; width:100%; background-color:white; display:block; padding:6px; }

.celluleLV:hover {background:#f4f6fc; }

.numLV{
	align-content:center;
	vertical-align:middle;
	text-align:center;
	font-size:13px;
	width:100%;
	display:inline-block;
	position:relative;
	line-height:1.3em;
	white-space:nowrap;
	padding:0px;
	margin:0px;
	font-size:13px;
	vertical-align:middle;
}

.inputLV{
	width:97%;
	display:block;
	border:0px;
}

.ligneFlexBloc{
	display:flex;
	text-align:center;
	flex-direction:column;
	background-color:white;
	border-bottom:1px solid lightgreen;
	width:100%;
	padding:0px;
}

.ligneFlexLignes {
	display:flex;
	width:100%;
	justify-content:space-between;
	padding:4px;
}

.celluleFlex {
	text-align:left;
	padding:4px;
	max-width:100%;
}

.col-image { width: 150px; }
.col-nom { width: 150px; }
.col-ref { width: 145px; }
.col-categorie { width: 130px; }
.col-souscategorie { width: 170px; }
.col-gondole { width: 70px; }
.col-promo { width: 70px; }
.col-tva { width: 100px; }
.col-prix { width: 100px; }
.col-statut { width: 80px; }
.col-action { width: 50px; }

.libChampArtListe {
	text-align:center;
	font-size:0.9rem;
	vertical-align:top;
	margin-bottom:1px;
	display:none;
	text-align:center;
	display:inline;
}
.celluleFlex.col-nom input, .celluleFlex.col-ref input, {max-width:200px;}
.blocFamille {display:flex; justify-content:space-between; width:100%; vertical-align:top; flex-direction:row; flex-wrap:wrap; padding:3px; }
.boiteFam {flex-direction:column;}
.flexToColumn{display:flex; flex-wrap:wrap; }

.borderBottomToNot {border-bottom:1px solid;}
.gridToFlexCol{display:grid;}
.gridToNone{display:grid;}
.noneToInlineVisible{display:none;}

// ------------------------------------------------------
// Summer note liste police
// ------------------------------------------------------
note-editor .note-toolbar .note-dropdown-menu, .note-popover .popover-content .note-dropdown-menu {
	min-width: 380px;
	width: 100%;
}

.note-toolbar{
	display:flex;
	width:100%;
	flex-wrap:wrap;
}

.note-editable {	white-space: break-spaces; }
.note-btn { line-height:1.1 !important;}

// ------------------------------------------------------
// Contenu
// ------------------------------------------------------
#boiteRech { display:flex; padding:12px; padding-left:0px; flex-direction:row; flex-wrap:wrap; vertical-align:top; margin:0px; margin-bottom:3px; color:#0b4c5f;}

// ------------------------------------------------------
// Avancement
// ------------------------------------------------------
blink { animation: blinker 0.6s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }

.blink-one { animation: blinker-one 20s linear infinite; }
@keyframes blinker-one {	0% { opacity: 0; }	}

.blink-two { animation: blinker-two 1.4s linear infinite; }
@keyframes blinker-two { 100% { opacity: 0; } }


// ------------------------------------------------------
// Barre sous sous menus / onglets
// ------------------------------------------------------
#sousOnglets {
	display:flex;
	flex-direction:row;
	list-style-type : none;
	width:100%;
	padding:0px;
	padding-left:0px;
	min-height:55px;
	margin:auto;
	margin-top:15px;
	font-size:1rem;
	text-align:center;
	justify-content: flex-start;
	align-content: center;
	//border-bottom:1px solid lightgrey;

}

#sousOnglets li {
	border-radius: 12px 12px 0px 0px;
	/*display:inline-block;*/
	margin:1px;
	margin-bottom : 0px ;
	margin-top : 3px ;
	padding : 5px;
	text-align:center;
	text-decoration:none;
	display:flex;
	align-items: center;
	justify-content: center;
}
#sousOnglets li >a, #sousOnglets a {
	text-decoration: none;
}

#sousOnglets li:hover, #sousOnglets a:hover{ cursor:pointer; }

// Pour gestion couleur onglets, pas utilisé
#puceMenu2.fad {color:white;}
#puceMenu2:hover{color:white;}


// ------------------------------------------------------
// popup title
// ------------------------------------------------------

[title] {
	position: relative; // Nécessaire pour positionner la tooltip
	white-space:break-spaces;
	word-break:break-word;
	overflow-wrap:break-word;
	cursor: pointer;

}

// Création de la tooltip avec l'attribut title
[title]:after {
	content: attr(title); // Récupère le texte du title
	position: absolute;
	background: #fcfee5;
	color: #333;
	padding: 8px 12px;
	border-radius: 4px;

	// font-weight: bold;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	white-space: break-spaces;
	word-wrap:break-word;
	word-break:break-word;
	overflow-wrap:break-word;
	hyphens: auto;
	min-width:120px;
	max-width:170px;
	bottom: 100%;
	left:10%;
	//transform: translateX(-50%);
	opacity: 1;
	visibility: visible;
	transition: opacity 0.2s ease-in-out, visibility 0s 0s;
	z-index: 999;
	text-align:left;
}

// Masquer par défaut
[title]::after,
[title]::before {
	opacity: 0;
	visibility: hidden;
}


// Affichage lors du survol
[title]:hover::after,
[title]:hover::before {
	opacity: 1;
	visibility: visible;
}

//--------------------------------
/* Infobulle personnalisée */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	background: #fcfee5;
	color: #333;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 1rem;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	white-space: normal;
	word-break: break-word;
	max-width: 250px;
	min-width: 120px;
	text-align: left;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-in-out;
	pointer-events: none;
}

/* Affichage au survol */
[data-tooltip]:hover::after {
	opacity: 1;
	visibility: visible;
}

/* Position par défaut (tooltip en bas) */
.tooltip-bottom[data-tooltip]::after {
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 8px;
}

/* Position alternative (tooltip en haut) */
.tooltip-top[data-tooltip]::after {
	bottom: 100%;
	left: 5%;
	transform: translateX(20%);
	margin-bottom: 8px;
}

/* Position alternative (tooltip en left) */
.tooltip-left[data-tooltip]::after {
	right: 50%;
	transform: translateX(-50%);
	margin-bottom: 8px;
}

// ------------------------------
// Pour la popup information/aide
// ------------------------------
.popup {
	display: none;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 400px;
	background: #f8f9de;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	z-index: 18;
	text-align: left;
	padding: 15px;
	animation: fadeIn 0.3s ease-in-out;
	overflow: visible; // Laisse la popup se redimensionner naturellement

	flex-direction: column; // Permet d'aligner les éléments dans la popup
	justify-content: flex-start; // Aligne le contenu en haut
}

.popup-content {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column; // Permet d'aligner les éléments à l'intérieur
	justify-content: flex-start; // Aligne le contenu en haut
	text-wrap: wrap;
	z-index: 18;
}

.popup-icon {
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
}

.popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 1.3rem;
	cursor: pointer;
	color: grey;
	border: 2px solid #06c;
	background-color: white;
	padding: 3px;
	width: 30px;	// Taille du bouton
	height: 30px; // Taille du bouton
	border-radius: 50%; // Rendre le bouton rond
	text-align: center;
	line-height: 20px; // Centrer le caractère ×
	z-index: 12;
}

.popup-close:hover {
	background-color: #ffcccc; // Effet de survol pour le bouton
	color:white;
}


@keyframes fadeIn {
	from { opacity: 0; transform: translate(-50%, -55%); }
	to { opacity: 1; transform: translate(-50%, -50%); }
}

// ------------------------------
// Agencement
// ------------------------------
#blocDroit {
	grid-column:2; grid-row:1;
	right: 0;
	overflow-y: scroll;
	z-index: 10;
	padding:0px;
	padding-top:0px;
	margin-right:5px;
	top:10px;
	position:sticky;
	/* heigh nécessaire pour sticky */
	height:900px;
}

#agencementPreview {
	overflow-y: auto;
	position: relative;
	// pour retrouver ascenceur ici mettre un height
	height: 100vh;
	grid-column:1; grid-row:1;
	width:100%; padding:0px;
	border:0px; transform:scale(1,1); padding-top:0px;
	top:10px;
	position:relative;
}

.agencementBarreInfo {
	display:flex;
	flex-direction:row;
	padding:7px;
	align-items: center;
	justify-content: flex-start;
	align-content: center;
	flex-wrap: wrap;
	font-weight:bold;
	font-size:1rem;
	border:1px solid #daeff8;
	border-radius:2px;
	top:0;
	position:sticky;
	width:100%;
	z-index:11;
	justify-content:flex-start;
	border-radius:4px;
	margin:2px; // comme libChampsWebmaster
	margin-bottom:10px;

}

// Zone map menu
.mTable {
	display:flex;
	flex-direction:row;
	padding:15px;
	width:100%;
	justify-content: flex-start;
	align-items: center;
	justify-content: flex-start;
	justify-content: space-around;
	align-content: center;
	flex-wrap: wrap;
	margin-top:2px;
	border:1px solid lightgrey;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	top:0px;
	position:sticky;
	height:150px;
    z-index: 10;
    opacity:1;
}

// Zone des boutons sousmenu
.mRow {padding:1px; margin:5px; display:flex; flex-direction:row; flex-wrap:wrap; gap:5px; justify-content: center; align-items: flex-start;}
.mCell { padding:1px; margin:1px; display:flex; flex-direction:column; flex-wrap:wrap; gap:5px; justify-content: center; align-items: flex-start; }


.itemPpal, .itemPpalDisabled, .itemEnabled , .itemDisabled {
	font-size: 0.9rem;
	margin:0px;
	padding:0px;
	cursor:pointer;
	border-radius:2px;
}

.itemPpal:hover, .itemPpalDisabled:hover, .itemEnabled:hover, .itemDisabled:hover{
	background:#f4f6fc;
}

.iconesPpauxMenuDeroulant, .iconesPpauxMenuDeroulant:hover{
	font-size:1rem;
	margin:2px;
	padding:0px;
	height:auto;
}

// ------------------------------
// Mails
// ------------------------------
.modaleMails{
	resize:both;
	overflow:scroll;
	width: 85%;
	height: 80%;
	}

.popupMails{
	width: 85%;
	height: 95%;
	resize:both;
	overflow:scroll;
}

#mailsInfo {
	position:relative;
	display:block;
	left:0;
	overflow:hidden;
	text-align:left;
	border:1px solid grey;
	border-radius: 2px;
	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
	margin-bottom:3px;
	resize:both;
	width:100%;
	height:2px;
	line-height:8px;
	float:left;
	white-space:nowrap;
	// border:1px solid red;
}

.mailsAide {
	// position:absolute;
	display:block;
	left:0;
	bottom:0;
	height:2px;
	color:#999493;
	font-size:14px;
	text-align:left;
	background-color:white;
	transition: all 1s;
	padding:5px;
	border-radius: 2px;
	opacity:0.8;
	width:100%;
	white-space:nowrap;
}

#mailsInfo:hover, .mailsAide{
	height:70%;
	opacity:1;
	line-height:18px;
	padding:8px;
	cursor:pointer;
}


// ------------------------------------------------------
// LISTE DEROULANTE AVEC ICO LANGUE
// ------------------------------------------------------
.languesListeBox{
	top:0px;
	margin:5px;
	position:relative;
	width:250px;
	left:1px;
}

.dropdownCell {
	border:1px solid #bbb;
	width:140px;
	height:23px;
	cursor:pointer;
	font-size:11pt;
	max-height:23px;
	background:url('../designAdmin/arrow.gif') top right no-repeat;
	color:black;
	background-color:white;
	border-radius: 4px;
	margin:5px;
	text-align:left;
	padding-left: 8px;
	border-right: 0;
}

.dropdownCellIco {
	border:1px solid #bbb;
	width:100%;
	height:23px;
	cursor:pointer;
	font-size:11pt;
	max-height:23px;
	background:url('../designAdmin/arrow.gif') top right no-repeat;
	color:black;
	background-color:white;
	border-radius: 4px;
	margin:5px;
	text-align:left;
	padding-left: 8px;
	border-right: 0;
}

#liste {
}

.dropdownCell img{
	margin:3px 3px 3px 3px;
	vertical-align:middle;
	width:24px;
	background-color:$grisClair;
	text-align:left;
}

// partie déroulée
.dropdownPanel{
	display:flex;
	flex-wrap:wrap;
	position:relative;
	left:8px;
	border:1px solid #bbb;
	border-radius: 14px;
	width:137px;
	color:#FFFFFF;
	background-color:#161515; 
	text-align:left;
	z-index:11;
	padding:7px;
}

.dropdownPanelIco{
	display:flex;
	flex-wrap:wrap;
	position:relative;
	left:8px;
	border:1px solid #bbb;
	border-radius: 4px;
	width:100%;
	color:#FFFFFF;
	/*background-color:$grisClair;*/
	text-align:left;
	z-index:11;
	/*flex-direction: column;*/
}

.dropdownOpt{
	cursor:pointer;
	font-size:10pt;
	color:#FFFFFF;
	border-radius: 12px;
	padding:7px;
}

.dropdownOptIco{
	cursor:pointer;
	font-size:10pt;
	color:#FFFFFF;
	border-radius: 20px;
	padding:15px;
	border: 1px solid grey;
	margin:3px;
}

.dropdownOpt img{
	margin:3px 3px 3px 3px;
	vertical-align:middle;
	width:24px;
	background-color:$grisClair;
	border-radius: 2px;
}

.dropdownOpt a{
	text-decoration:none;
	width:100%;
	text-align:left;
	color:black;
}

.dropdownOptSelected, .dropdownOpt:hover {
	background-color:$blanc;
	width:100%;
	color:#0b4c5f;
	border-radius: 12px;
	text-align:left;
	color:black;
}

// ------------------------------------------------------
// Menu mon compte
// --------------------------------------------------
#menu-accordeon {
	padding:0px;
	margin:0;
	list-style:none;
	text-align: center;
	font-size:1rem;
	max-width:250px;
	display:inline-block;
	float:right;
	z-index: 11;
	position:relative;
	background:transparent;
}

#menu-accordeon ul {
	padding:0;
	line-height:25px;
	margin:0;
	list-style:none;
	text-align: center;
}

#menu-accordeon li {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	margin:7px;
	box-shadow: 1px 1px 1px grey;
	background: #F5E3C9;
}

#menu-accordeon li li {
	max-height:0;
	overflow: hidden;
	transition: all .5s;
	border-radius:0;
	background: lightgrey;
	border:none;
	margin:0;
}

#menu-accordeon a {
	display:block;
	text-decoration: none;
	color: #fff;
	padding: 5px 0;
	font-size:1rem;
	color:black;
}

#menu-accordeon ul li a {
	font-size:1em;
	background-color:#FFF;
}

 #menu-accordeon ul li a:hover  {
	background: #F5E3C9;
	border:1px solid white;
	/*background:transparent;*/

}

#menu-accordeon li li:hover {
	background: #F5E3C9;
}

#menu-accordeon ul li:last-child {
	border-radius: 0 0 6px 6px;
}

#menu-accordeon li:hover li {
	max-height: 15em;
}