/* ---------------------------------- */
/*	Variables
/* ---------------------------------- */

/* Le>est un sélecteur d'enfant direct. Il cible un élément qui est un enfant immédiat du sélecteur parent.
Le sélecteur>s'assure que l'élément cible est un enfant direct du parent spécifié. Il ne sélectionne pas les éléments qui sont plus profonds dans la hiérarchie, même si un autre élément les contient.

L'espace dans un sélecteur CSS est un sélecteur descendant. Cela signifie qu'il cible tous les éléments a à l'intérieur de l'élément .boutonsMenusWbm, quel que soit leur niveau de profondeur.
*/

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


/* ------------------------------------------------------ */
/*	Body --- fonds
/* ------------------------------------------------------ */
body, frame, frameSet { background: $clairBkgrd; }

html, .informationsTechLib, #myArbo, .famItem, .catItem, #zoneFormWbm,  #langue, ul, li, .conteneurArticle, .conteneurArticle>div, .note-frame, .libChampArtListe, #zoneFormModales, .informationsTechValue, #zonePageWbm, #zoneRechercheWbm, #blocDroit { @include adminClair; }

.informationsTechLib, .informationsTechValue {background-color: transparent; color:black;}

// #zoneRechercheWbm {background: rgb(213,215,215); background: linear-gradient(4deg, rgba(213,215,215,1) 0%, rgba(246,246,247,0.07619747038810487) 52%, rgba(213,215,215,1) 100%);}

#zoneRechercheWbm {background: $clairFondsFrame;}

a { color: $clairColor}
a:hover { color: $clairColor; text-decoration: underline}
a:visited { color: $clairColor; }


/* ------------------------------------------------------ */
/*	Menus -- fonds different
/* ------------------------------------------------------ */
#zonePageWbm, #zoneMenuWbm, #blockHaut, #tableMenuGauche, #siteName, #siteTime, .accueil, span>accueil, .accueil>a, #tableMenuGauche, .boitesSousMenuGauche, #labelEnv, #siteClock, #zoneTitreWbm, .titreWbm { background-color: $clairBkgrd; }

menuGaucheSousMenus, .titreWbm a, .boitesSousMenuG a:visited, #zoneMenuWbm, #zoneMenuWbm a, #zoneMenuWbm a:visited { color: black; text-decoration: none;}
#bandeauAideInfo { color: black; }
#zoneSousCat { background-color: #f3eded; }


/* ------------------------------------------------------ */
/*	Modales
/* ------------------------------------------------------ */
.modaleGene, .popupGene, #zoneTitreModales, #zonePageModales, .zoneFormModales, .popupAide { @include adminClair; }

/* ------------------------------------------------------ */
/*	Ascenseurs
/* ------------------------------------------------------ */

/* firefox */
@supports (scrollbar-width: auto) {
	* {
	    scrollbar-width: auto;
	    scrollbar-color: #b7cddd transparent;
	}
}

/* ------------------------------------------------------ */
/*	Icones
/* ------------------------------------------------------ */
.fa, .fad, .fa-duotone, .fab, .fas, .thin {
	--fa-primary-color: #{$clairIcoColor};
	--fa-secondary-color: #{$clairIcoColor2};
}

.fas:hover, .far:hover, .fab:hover, .fad:hover, i:focus, i:visited, i:hover, .thin:hover {
	color: $clairIcoOver;
	--fa-primary-color: #{$clairIcoOver};
	--fa-secondary-color: #{$clairIcoOver2};
}

/* ------------------------------------------------------ */
/*	Images
/* ------------------------------------------------------ */
.imgFamTV, .imgCatalogue {
	@include adminClair;
	border:1px solid lightgrey;
	border-radius:5px;
}
.imgCatalogue:hover, .imgFamTV:hover	{ background-color: #086a87; cursor:pointer;}

/* ------------------------------------------------------ */
/*	Menu accordeon
/* ------------------------------------------------------ */
#menu-accordeon, #menu-accordeon>li, { background: $clairFondsFrame; color: black !important; }
#menu-accordeon, #menu-accordeon>li, #menu-accordeon>li>ul>li>a { color: black !important; }


/* ------------------------------------------------------ */
/*	Boutons menu gauche
/* ------------------------------------------------------ */
.menuGaucheMenusPrincipaux>a	 { color: $clairIcoColor; }
.menuGaucheMenusPrincipaux>i	 { color: $clairIcoColor; }
.menuGaucheMenusPrincipauxIco	 { color: $clairIcoColor; }
.menuGaucheSousMenus:hover		 { color: $clairIcoColor; }
.menuGaucheSousMenusActif		 { color: $clairLienActif; }


/* ------------------------------------------------------ */
/*	Boutons actions Webmaster
/* ------------------------------------------------------ */
.boutonsWebmaster, .boutonsWebmaster a, .boutonsWebmaster span a  {
	background: lightgrey;
	color: darkblue
}

.boutonsWebmaster i, .boutonsWebmaster span>i  {
/*	--fa-primary-color: white;
	--fa-secondary-color: white;*/
}

.boutonsWebmaster:hover, .boutonsWebmaster a:hover  {
	background: $clairBoutonMenuOverBckgrd;
	color: $clairBoutonMenuOverColor;
}


.boutonsWebmaster i:hover {
	--fa-primary-color: #{$clairBoutonIcoOver};
	--fa-secondary-color: #{$clairBoutonIcoOver2};
}

/* ------------------------------------- */
/* Les boutons menus  / onglets
/* ------------------------------------- */
.boutonsMenusWbm{
	border:1px solid $clairBoutonMenusBorder;
}

.boutonsMenusWbm, #sousOnglets li{
	/*background-color: $clairFondsFrame;*/
	color: $clairBoutonMenusColor;
}


.boutonsMenusWbm>i, .boutonsMenusWbm>span>i,  #sousOnglets li>a span#puceMenu2 {
	--fa-primary-color: #{$clairIcoColor};
	--fa-secondary-color: #{$clairIcoColor2};
}

#sousOnglets li {
	border : 1px solid $clairBoutonMenusBorder;
	background: $clairFondsFrame;
}


/* ---- hover ---- */
.boutonsMenusWbm:hover, #sousOnglets>li:hover ,  #sousOnglets li:hover  {
	background-color: #{$clairBoutonMenuOverBckgrd};
	color: #{$clairBoutonMenuOverColor};
}

#sousOnglets li:hover>a  {
	color: #{$clairBoutonMenuOverColor};
}


.boutonsMenusWbm:hover>i, .boutonsMenusWbm:hover>span>i, #sousOnglets li:hover a>span#puceMenu2,  {
	/*background-color: transparent;*/
	--fa-primary-color: yellow;
	--fa-secondary-color:  white;
}


/* ---- actifs ---- */
#sousOnglets li.sactive, #sousOnglets li.sactive a, li.sactive>a:visited {
	background-color: $clairBoutonMenuActifBackground;
	color: white!important;
	text-decoration:none;
}

.boutonsMenuWbmActif i,.boutonsMenuWbmActif span i, #sousOnglets li.sactive>a span#puceMenu2 {
	--fa-primary-color: orange;
	--fa-secondary-color: #{$clairBoutonIcoOver2};
}

/* --- actif + hover --- */
.boutonsMenuWbmActif:hover, #sousOnglets li.sactive:hover {
	color:  #{$clairBoutonMenuOverColor};
	background: #{$clairBoutonMenuActifBackground};
}

.boutonsMenuWbmActif>i:hover, .boutonsMenuWbmActif span i:hover, #sousOnglets li.sactive:hover>a span#puceMenu2{
	--fa-primary-color: yellow;
	--fa-secondary-color: white;
}


/* ------------------------------------------------------ */
/*	Bouton avancement
/* ------------------------------------------------------ */
#btnAvance {
	box-shadow : 1px 1px $clairBoxShadow;
	border: 1px solid $clairBoxShadow;
	background: transparent;
	color: black;
}

.txtAvance { color: $clairBkgrd; }


/* ------------------------------------- */
/* dans page creation
/* ------------------------------------- */

.boutonEnregistrer {
	background:#28a745 !important;
	color:white;
}

.boutonEnregistrer i  {
	--fa-primary-color: white;
	--fa-secondary-color: white;
}

.boutonEnregistrer i:hover {
	--fa-primary-color: white;
	--fa-secondary-color: green;
}


/* ------------------------------------- */
/* dans menu gauche, css, txt, contenu, agencement, mails */
/* ------------------------------------- */

.boutonPublier {
	background:grey !important;
	color:white;
}

.boutonPublier i  {
	--fa-primary-color: white;
	--fa-secondary-color: white;
}

.boutonPublier i:hover {
	--fa-primary-color: white;
}

/* ------------------------------------------------------ */
/*	Bordures
/* ------------------------------------------------------ */
.menuGaucheMenusPrincipaux { border-bottom: 1px solid $clairBordure; }



/* ------------------------------------------------------ */
/* Styles des champs
/* ------------------------------------------------------ */
.libChampsWebmaster	 { 
	color : #7d7777; //gris
	background: $clairBoutonMenusBkgrdColor; 
}

.checkBoxWbm, .selectWbm, select, checkBox {
	background: white;
	color: grey;
	border: 1px solid $clairBordure;
}

.inputWebmaster, .textAreaWbm  {
	background: white;
	color: black;
	border: 1px solid $clairBordure;
}

.selectWbm option {
	background: white;
	color: black;
}

.inputWebmaster:hover, .inputWebmaster:focus, .textAreaWbm:hover, .checkBoxWbm:hover, checkBox:hover	 {
	cursor: pointer;
	border: 0px;
}
.libChampArtListe { color: grey; }
.celluleLV	 { color : $clairLibChampsColor; background: $clairBkgrd; }
.inputLV { background: transparent}

.listBoxCouleur{background: $clairFondsFrame; border-color: $clairBordure;}

/* ------------------------------------------------------ */
/* Styles des messages
/* ------------------------------------------------------ */
.actionMessages { color: $clairActionColor; }
a:visited>.boutonsMenusWbm { color: $clairColor2; }
.pop { background: grey; color: white; }
.admMsgOk	{
	background-color: #2bc12b;
	color: white;
}

.admMsgKo {
	background-color: coral	;
	color: white;
}

.debugStyle {
	background-color: #e7ffd8;
	color: darkgreen;
}

/* ------------------------------------------------------ */
/* Contenu
/* ------------------------------------------------------ */
.contenu { background: $clairBkgrd; }


/* ------------------------------------------------------ */
/* Modales
/* ------------------------------------------------------ */
.btn_close { color: $clairIcoColor;	background-color: $clairBkgrd; border-color: $clairColor; }
.btn_close:hover { color: $clairBoutonOverColor; background-color: $clairBoutonOverBckgrd; border-color: $clairBoutonOverColor; }

/* ------------------------------------------------------ */
/* Styles
/* ------------------------------------------------------ */
.itemReglage {	color: $clairLibChampsColor; }


/* ------------------------------------------------------ */
/* Summer note
/* ------------------------------------------------------ */
.note-btn {	color: black !important; background: $clairBkgrd; }
.note-toolbar {	color: $clairLibChampsColor; background: $clairBkgrd !important; }


/* ------------------------------------------------------ */
/* popupAide
/* ------------------------------------------------------ */
.popupAide { color: $clairColor; }


/* ------------------------------------------------------ */
/* blocDroit
/* ------------------------------------------------------ */
.mTable {background: $clairFondsFrame; color:black;  font-size:1rem;}
.agencementBarreInfo {
	background: $clairFondsFrame;
	color:black;
}

/* ------------------------------------------------------ */
/* Tableaux, listes
/* ------------------------------------------------------ */
.fondColorListe {background: #7591e3}

/* ------------------------------------------------------ */
/* btnTest
/* ------------------------------------------------------ */
.layer, .layerJ, .layerL {background: $clairFondsFrame;}