/*
	Ajouter un élément avec UNE OU PLUSIEURS classes, ex :
	<img class="actionIcon leftSpacedIcon" src="..."/>
	ou
	<i class="fa-solid fa-close closeIcon iconOnRight rightSpacedIcon"></i>
	
	Les classes disponibles sont :
	* Actions :
		- actionIcon : bouton d'action, ex : menu / apparait en bleu - <i class="fa-solid 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="fa-solid fa-trash-can adminIcon" title="Supprimer l'utilisateur" onclick="..."></i>
		- closeIcon : bouton de fermeture, ex pour popup / apparait en rouge - <i class="fa-solid fa-circle-xmark closeIcon iconOnRight rightSpacedIcon" title="Fermer la fenêtre" onclick="..."></i>
		- helpIcon : accès à l'aide / apparait en vert - <i class="fa-regular fa-circle-question helpIcon" title="Consulter l'aide en ligne" onclick="..."></i>
		- saveIcon : bouton d'enregistrement, ex valider un formulaire / apparait en vert - <i class="fa-solid fa-floppy-disk saveIcon" title="Enregistrer l'opération" onclick="..."></i>
		- okIcon : bouton de confirmation, ex sur demande de confirmation / apparait en vert - <i class="fa-solid fa-circle-plus 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="fa-solid 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="fa-solid 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="fa-solid 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="fa-solid 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
*/
.inactiveIcon {
	color : var(--genIndex-inactive-fg) ;
}
.symbolIcon {
	color : var(--genIndex-secondary-text) ;
}
.symbolIcon {
	/* pointer-events: none; */
	cursor : help ;
}
.helpIcon, .saveIcon, .okIcon, .optionIcon {
	color : var(--genIndex-okMsg) !important ;
}
.helpIcon {
	vertical-align: top;
	margin-top:3px ;
}
.actionIcon {
	color : var(--genIndex-action-icon) ;
}
.adminIcon {
	color : var(--genIndex-admin-color) ;
}
.warningIcon {
	color : var(--genIndex-warningMsg) ;
}
.closeIcon, .errorIcon {
	color : var(--genIndex-close-icon) !important ;
}
header .closeIcon, h2 .closeIcon, .titre .closeIcon {
	color : var(--genIndex-top-close-icon) ;
}
.ongletActif .closeIcon {
	color : var(--genIndex-white-icon) ;
}
.contrastIcon {
	color : var(--genIndex-white-icon) !important ;
}
.lightIcon {
	color : var(--genIndex-secondary-text) ;
}
.leftSpacedIcon {
	margin-left : 0.5em ;	
}
.rightSpacedIcon {
	margin-right : 0.5em ;	
}
.iconOnRight {
	float : right ;
	margin-right : 0.5em ;	
}
.mediumIcon {
	font-size : 15px ;
}
.bigIcon {
	font-size : 20px ;
}
.veryBigIcon { /* Icone simple associée à des icônes stacked sans changement de taille */
	font-size : 2em ;
	width: 1.4em;
}
.smallIcon {
	font-size : 80%;
	position : relative ;
	top : -10% ;
	/* font-weight : normal; NE JAMAIS METTRE ÇA, ÇA FLINGUE FONT AWESOME */
}
.verysmallIcon {
	font-size : 40%;
}
.actionIcon, .closeIcon, .saveIcon, .adminIcon {
	cursor : pointer ;
}
.helpIcon {
  cursor: help !important;
}
img.helpIcon, img.actionIcon, img.closeIcon, img.saveIcon, img.adminIcon {
	height : 1.3em ;
}
.hiddenIcon {
	display : none !important ;
}
.helpIcon, .actionIcon, .closeIcon, .saveIcon, .smallIcon, .symbolIcon, .optionIcon {
	transition: all .2s ease-in-out;
	transform-origin: center;
}
.adminIcon:hover, .helpIcon:hover, .actionIcon:hover, .closeIcon:hover, .saveIcon:hover, .smallIcon:hover, .symbolIcon:hover, .optionIcon:hover {
	transform: scale(1.5);
}

.greenIcon {
	color : var(--genIndex-green-icon) !important ;
}
.yellowIcon {
	color : var(--genIndex-yellow-icon) !important ;
}
.orangeIcon {
	color : var(--genIndex-orange-icon) !important ;
}
.darkOrangeIcon {
	color : var(--genIndex-darkOrange-icon) !important ;
}
.yellowgreenIcon {
	color : var(--genIndex-yellowGreen-icon) !important ;
}
.darkgreenIcon {
	color : var(--genIndex-darkgreen-icon) !important ;
}
.redIcon {
	color : var(--genIndex-red-icon) !important ;
}
.darkredIcon {
	color : var(--genIndex-darkRed-icon) !important ;
}
.violetIcon {
	color : var(--genIndex-violet-icon) !important ;
}
.pinkIcon {
	color : var(--genIndex-pink-icon) !important ;
}
.blueIcon {
	color : var(--genIndex-blue-icon) !important ;
}
.turquoiseIcon {
	color : var(--genIndex-turquoise-icon) !important ;
}
.blackIcon {
	color : var(--genIndex-black-icon) !important ;
}
.darkIcon {
	color : var(--genIndex-darkgray-icon) !important ;
}
.greyIcon {
	color : var(--genIndex-gray-icon) !important ;
}
.lightgreyIcon {
	color : var(--genIndex-lightgrey-icon) !important ;
}
.whiteIcon {
	color : var(--genIndex-white-icon) !important ;
}
.reverseIcon {
	color : var(--genIndex-reverse-icon) !important ;
}
table tbody tr:hover .reverseIcon {
	color : var(--genIndex-white-icon) !important ;
}

.alarmIcon {
    color: var(--genIndex-alarme-icon);
}

.iconMale {
    color: var(--genIndex-male-icon);
}

.iconFemale {
    color: var(--genIndex-female-icon);
}

.iconUnkown {
    color: var(--genIndex-unknown-icon);
    font-size: 80%;
}

.raindowIcon {
	color : var(--genIndex-rainbow-icon-fg) !important ;
	background : linear-gradient(90deg, var(--genIndex-rainbowStart-icon) 0%, var(--genIndex-rainbowEnd-icon) 100%) ;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.revertRaindowIcon {
	color : var(--genIndex-rainbow-icon-fg) !important ;
	background: linear-gradient(90deg, var(--genIndex-rainbowRevertStart-icon) 0%, var(--genIndex-rainbowRevertEnd-icon) 100%) ;
	-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: var(--genIndex-buttons-bar-bg);
	border-radius: 0.5em;
	padding-top: 0.25em;
	box-sizing: border-box;
}

/* Rajoute une croix rouge en travers de l'icône */
.crossedOutIcon {
	position: relative ;
}

.crossedOutIcon::after {
	position: absolute;
	left: 50%;
	top : 50% ;
	transform : translate(-50%, -50%) ;
	content: "X";
	color: red;
}

.forbiddenIcon {
	cursor : not-allowed ;
}

/* Cas des icônes en svg */
svg.actionIcon path, svg.actionIcon line, svg.actionIcon polygon, svg.actionIcon ellipse, svg.symbolIcon, svg.symbolIcon { /* les path dans un svg ou les svg de symbole ne prennent pas le clic */
	pointer-events: none;
}
svg.actionIcon, svg.symbolIcon {
	height: 1em;
	width : 1em ;
}
svg.bigIcon {
	height: 1.5em;
	width: 1.5em;
}
svg.veryBigIcon {
	height: 2em;
	width: 2em;
}
svg.inactiveIcon path.icon, svg.symbolIcon path.icon {
	fill : var(--genIndex-inactive-fg) !important ;
}
svg.inactiveIcon path.trait, svg.symbolIcon path.icon {
	fill : lightgrey !important;
}
svg.adminIcon path.icon, svg.adminIcon polygon.icon, svg.adminIcon ellipse.icon {
	fill : var(--genIndex-admin-color) !important;
}
svg.adminIcon path:not(.icon), svg.adminIcon polygon:not(.icon), svg.adminIcon ellipse:not(.icon) {
	fill : var(--genIndex-secondaryElement-admin-color) !important;
}

svg.adminIcon line.icon {
	stroke : var(--genIndex-admin-color) !important;
}

svg.adminIcon line:not(.icon) {
	stroke : var(--genIndex-secondaryElement-admin-color) !important;
}

/* Contourage du texte d'une icône admin posée sur un titre en BG bleu */
.editor .titre .adminIcon, .editor .titre .closeIcon, .ongletActif .closeIcon, th .adminIcon {
	-webkit-text-stroke: 1px var(--genIndex-inactive-fg);
}