/*
	Ajouter un élément avec UNE OU PLUSIEURS classes, ex :
	<img class="actionIcon leftSpacedIcon" src="..."/>
	ou
	<i class="fas fa-close closeIcon iconOnRight rightSpacedIcon"></i>
	
	Les classes disponibles sont :
	* Actions :
		- actionIcon : bouton d'action, ex : menu / apparait en bleu - <i class="fas fa-volume-mute actionIcon leftSpacedIcon" title="Couper le son" onclick="..."></i>
		- adminIcon : bouton d'action pour administrateur, ex : menu admin / apparait en fushia - <i class="far fa-trash-alt adminIcon" title="Supprimer l'utilisateur" onclick="..."></i>
		- closeIcon : bouton de fermeture, ex pour popup / apparait en rouge - <i class="far fa-times-circle closeIcon iconOnRight rightSpacedIcon" title="Fermer la fenêtre" onclick="..."></i>
		- helpIcon : accès à l'aide / apparait en vert - <i class="far fa-question-circle helpIcon" title="Consulter l'aide en ligne" onclick="..."></i>
		- saveIcon : bouton d'enregistrement, ex valider un formulaire / apparait en vert - <i class="far fa-save saveIcon" title="Enregistrer l'opération" onclick="..."></i>
		- okIcon : bouton de confirmation, ex sur demande de confirmation / apparait en vert - <i class="far fa-check-circle okIcon" title="Confirmer la suppression" onclick="..."></i>
		- optionIcon : bouton d'option, ex montants en € vs en devise d'origine (switch, quoi) / apparait en vert - <i class="fas fa-chart-line optionIcon" title="Appliquer l'inflation aux montants du passé" onclick="..."></i>
	
	* Indicateurs d'état :
		- inactiveIcon : action indisponible, ex : option de menu désactivée / apparait en grisé
		- symbolIcon : indication d'état, ex : symbole "operation validée" dans une liste / apparait en grisé - <i class="fas fa-retweet symbolIcon smallIcon lightIcon" title="Ce rendez-vous est récurrent"></i>
		- warningIcon : indication d'alerte, ex : opération possible mais risquée / apparait en orange - <i class="fas fa-exclamation-circle warningIcon" title="Attention supprimer l'utilisateur entraînera la suppression de tous ses rendez-vous"></i>
		- errorIcon : indication d'erreur, ex : valeur saisie inacceptable / apparait en rouge - <i class="fas fa-exclamation-triangle errorIcon" title="Vous ne pouvez pas supprimer cet utilisateur tant qu'il a des rendez-vous dans le futur"></i>
	
	* Positionnement :
		- leftSpacedIcon : icône avec espace à gauche (permet de séparer les icônes)
		- rightSpacedIcon : icône avec espace à droite (permet de séparer les icônes)
		- iconOnRight : icône sur la droite de son container (ex icône fermer)
	
	* Rendu :
		- hiddenIcon : icône masquée
		- lightIcon : gris léger
		- smallIcon : icône à 80% de la taille normale (souvent utile avec symbolIcon)

		- greenIcon : force la couleur à vert
		- yellowIcon : force la couleur à jaune
		- redIcon : force la couleur à rouge
		- violetIcon : force la couleur à violet
		- pinkIcon : force la couleur à rose
		- blueIcon : force la couleur à bleu
		- turquoiseIcon : force la couleur à turquoise
*/
body {
	--icons-basic-blue : #0090C0 ;
	--icons-ok-message : #26bf26 ;
	--icons-warning-message : #f0ac30 ;
	--icons-error-message : #fd4f4f ;
	--icons-inactive-message : #909090 ;
	--icons-admin-color : #13B963 ;
	--icons-admin-color-important : #FF006E ;
	--icons-light-text : #c7c3c3 ;
}

@media (prefers-color-scheme: dark) { 
	body {
		--icons-basic-blue : #397C93 ;
		--icons-ok-message : #7dac7d ;
		/* --icons-error-message : #e66f6fa3 ; remplacé le 19/01/2025 : trop pâle dans les mapCaption */
		--icons-error-message : rgba(230, 111, 111, 0.92)	 ;
		--icons-admin-color-important : #D976A0 ;
		--icons-admin-color : #41B067 ;
	}
}

.inactiveIcon, .symbolIcon, .helpIcon, .saveIcon, .okIcon, .optionIcon, .actionIcon, .adminIcon, .warningIcon, .closeIcon, .errorIcon, .contrastIcon,
.lightIcon, .leftSpacedIcon, .rightSpacedIcon, .iconOnRight, .smallIcon, .verysmallIcon, .hiddenIcon, .whiteIcon, .greenIcon, .yellowIcon, .orangeIcon, 
.darkOrangeIcon, .yellowgreenIcon, .darkgreenIcon, .redIcon, .violetIcon, .pinkIcon, .coolblueIcon, .blueIcon, .turquoiseIcon, .blackIcon, .darkIcon, 
.greyIcon, .lightgreyIcon, .growingIcon, .loweringIcon, .growingGreyIcon, .loweringGreyIcon, .nullIcon, .lightredIcon, .darkredIcon {
	height : 1em ;
}

.bigIcon {
	font-size : 1.5em ;
}

.actionIcon {
	color : var(--icons-basic-blue) ;
}
.inactiveIcon, .symbolIcon {
	color : var(--icons-inactive-message) ;
}
.helpIcon, .saveIcon, .okIcon, .optionIcon {
	color : var(--icons-ok-message) !important ;
}
.adminIcon {
	color : var(--icons-admin-color) ;
}
.adminIconPlus {
	color : var(--icons-admin-color-important) ;
}
.warningIcon {
	color : var(--icons-warning-message) ;
}
.closeIcon, .errorIcon, .trashIcon {
	color : var(--icons-error-message) ;
}
.contrastIcon {
	color : white !important ;
}
.lightIcon {
	color : var(--icons-light-text) ;
}
.leftSpacedIcon {
	margin-left : 0.5em ;	
}
.rightSpacedIcon {
	margin-right : 0.5em ;	
}
.iconOnRight {
	float : right ;
	margin-right : 0.5em ;	
}
.smallIcon {
	font-size : 80%;
	position : relative ;
	top : -10% ;
	/* font-weight : normal; NE JAMAIS METTRE ÇA, ÇA FLINGUE FONT AWESOME */
}
.verysmallIcon {
	font-size : 40%;
}
.helpIcon, .actionIcon, .closeIcon, .saveIcon, .adminIcon, .adminIconPlus {
	cursor : pointer ;
}
img.helpIcon, img.actionIcon, img.closeIcon, img.saveIcon, img.adminIcon, img.adminIconPlus {
	height : 1em ;
}
.hiddenIcon {
	display : none !important ;
}
.helpIcon, .actionIcon, .closeIcon, .saveIcon, .smallIcon, .symbolIcon, .optionIcon, .adminIcon, .adminIconPlus {
	transition: all .2s ease-in-out;
	transform-origin: center;
}
.helpIcon:hover, .actionIcon:hover, .closeIcon:hover, .saveIcon:hover, .smallIcon:hover, .symbolIcon:hover, .optionIcon:hover, .adminIcon:hover, .adminIconPlus:hover {
	transform: scale(1.5);
}

.whiteIcon {
	color : #EFEFEF !important ;
}
.darkGreenIcon {
	color : #009111 !important ;
}
.greenIcon {
	color : #51b200 !important ;
}
.lightGreenIcon {
	color: #87ff26d6 !important; /* Vert semi-transparent pour ne pas trop détoner sur le fond */
}
.yellowIcon {
	color : #b4ce00 !important ;
}
.orangeIcon {
	color : #e7b904 !important ;
}
.goldIcon {
	color : #E5C516 !important ;
}
.darkGoldIcon {
	color : #D2AC47 !important ; /* #b7af4d !important */
}
.darkOrangeIcon {
	color : #957703 !important ;
}
.yellowgreenIcon {
	color : #8eb941 !important ;
}
.darkgreenIcon {
	color : #447b15 !important ;
}
.lightredIcon {
	color : #b9027a !important ;
}
.redIcon {
	color : #e74404 !important ;
}
.darkredIcon {
	color : #ac3303 !important ;
}
.violetIcon {
	color : #cb04e7 !important ;
}
.pinkIcon {
	color : #ff349d !important ;
}
.coolblueIcon {
	color : #0090C0 !important ;
}
.blueIcon {
	color : #3454ff !important ;
}
.turquoiseIcon {
	color : #02cffe !important ;
}
.blackIcon {
	color : #000 !important ;
}
.darkIcon {
	color : #303030 !important ;
}
.darkgreyIcon {
	color : #393939 !important ;
}
.greyIcon {
	color : #A0A0A0 !important ;
}
.lightgreyIcon {
	color : #DFDFDF !important ;
}
.verifiedIcon {
	color : #32BB0B !important
}
.rainbowIcon {
	color : #EFEFEF !important ;
	background : linear-gradient(90deg, rgba(255,209,0,1) 0%, rgba(252,70,107,1) 100%) ;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.revertRainbowIcon {
	color : #EFEFEF !important ;
	background: linear-gradient(90deg, rgb(58, 117, 180) 0%, rgb(253, 213, 0) 100%) ;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.growingIcon {
	color : #ff00ef ;
	background : linear-gradient(90deg, #51505090, #ff00ef) ;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.loweringIcon {
	color : #ff00ef ;
	background : linear-gradient(90deg, #ff00ef90, #515050) ;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.growingGreyIcon {
	color : #ff00ef ;
	background : linear-gradient(90deg, #c4c4c4, black) ;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.loweringGreyIcon {
	color : #ff00ef ;
	background : linear-gradient(90deg, black, #c6c6c6) ;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.iconsBar {
	width: 60%;
	text-align: center;
	margin-left: 20%;
	margin-top: 1em;
	height: 1.5em;
	background-color: #E0E0E0;
	border-radius: 0.5em;
	padding-top: 0.25em;
	box-sizing: border-box;
}

.leftSpaceIcon {
	margin-left : 0.3em ;
}

.actionIconinvisible {
	display : none ;
}

@media (prefers-color-scheme: dark) { 
	body:not([mode="clair"]) .actionIcon:not(.noDarkMode) {
		color : #CFCFCF !important ;
	}
	body:not([mode="clair"]) .darkgreyIcon:not(.noDarkMode) {
		color : #585858 !important ;
	}
	body:not([mode="clair"]) .violetIcon:not(.noDarkMode) {
		color: #cb04e7b5 !important;
	}
	body:not([mode="clair"]) .verifiedIcon {
		color : #E5C516 !important ;
	}
}

body[mode="dark"] .verifiedIcon {
	color : #E5C516 !important ;
}