/*=================================
    Gestion de l'élément permetant de basculer du mode claire au mode sombre
=================================*/

/* /!\ Supose que par défaut on est dark mode */
.icon-moon-desactive{
    display: block;
	/*border: 2px solid black;
	border-radius: 50px;
	background-color: white;*/
	padding: 0.2em 0.2em 0.2em 0.2em;
	color: black;
}

.icon-moon-active{
    display: block;
	/*border: 2px solid black;*/
	background-color: var(--color-blue);
	border-radius: 50px;
	padding: 0.3em 0.3em 0.3em 0.3em;
	color: white;
}

.icon-sun-desactive{
    display: none;
	/*border: 2px solid white;*/
	background-color: var(--color-green);
	border-radius: 50px;

	padding: 0.3em 0.3em 0.3em 0.3em;
}
.icon-sun-active{
    display: none;
	/*border: 2px solid white;
	background-color: white;
	border-radius: 50px;*/
	padding: 0.3em 0.3em 0.3em 0.3em;
	color: var(--color-yellow);
}

.icons-light{
	border: 2px solid white;
	border-radius: 50px;
	padding: 0.3em 0.3em 0.3em 0.3em;
}
.icons-dark{
	border: 2px solid black;
	border-radius: 50px;
	padding: 0.3em 0.3em 0.3em 0.3em;
}


.light-mode {
	--navbar-color: var(--color-yellow);
	--navbar-background-color: var(--color-blue);
	--navbar-underline-color: var(--color-red);
	--navbar-burger-close-color: var(--color-red);
	--navbar-burger-color: var(--color-green);
	
	--background-color: White; 

	--h1-color: var(--color-blue);
	--h1-text-shadow-color: var(--color-yellow);
	--h1-first-letter-color: var(--color-red);

	--h2-color: var(--color-blue);
	--h2-text-shadow-color: White;
	
	--h3-color: var(--color-blue);
	--h3-text-shadow-color: White;
	
	--p-first-letter-color: var(--color-green);
	
	--menu-color: var(--color-green);
	--menu-hover-color: var(--color-red);
	
	--boby-color: Black;

	--boite-border: var(--color-green);
	--boite-box-shadow: var(--color-yellow);

	--boxiconChek-color: var(--color-green);
	--boxiconX-color: var(--color-red);

	--a-color:var(--color-green);
	--a-hover-color:var(--color-blue);

	--tbody-tr-odd-background-color: white;
	--tbody-tr-odd-color: black;
	--tbody-tr-even-background-color: #CECECE;
	--tbody-tr-even-color: black;
	--tbody-border-color: black;

	--tClassement-caption-color: var(--color-blue);
	--tClassement-caption-text-shadow: 0 0 0.2em Black, 0 0 0.2em rgb(106, 197, 244), 0 0 0.2em rgb(106, 197, 244);

	--modal-background-color-opacity: rgba(0,0,0,0.8);
	--modal-caption-color: var(--color-green);
	--modal-caption-background-color: var(--color-yellow);
  }
  
.dark-mode {
	--navbar-color: var(--color-yellow);
	--navbar-background-color: var(--color-green);
	--navbar-underline-color: var(--color-red);
	--navbar-burger-close-color: var(--color-red);
	--navbar-burger-color: var(--color-blue);

	--background-color: Black; 
	--h1-color: var(--color-blue);
	--h1-text-shadow-color: var(--color-yellow);
	--h1-first-letter-color: var(--color-yellow);

	--h2-color: var(--color-green);
	--h2-text-shadow-color: Black;
	
	--h3-color: var(--color-green);
	--h3-text-shadow-color: Black;

	--p-first-letter-color: var(--color-red);
	
	--menu-color: var(--color-yellow);
	--menu-hover-color: var(--color-red);

	--boby-color: White;

	--boite-border: var(--color-yellow);
	--boite-box-shadow: var(--color-green);


	--boxiconChek-color: var(--color-yellow);
	--boxiconX-color: var(--color-red);

	--a-color:#99CC00;
	--a-hover-color:white;

	--tbody-tr-odd-background-color: #606060; /*#677179;*/
	--tbody-tr-odd-color: white;
	--tbody-tr-even-background-color: #848484;
	--tbody-tr-even-color: white;
	--tbody-border-color: white;
	--tClassement-caption-color: rgb(106, 197, 244);
	--tClassement-caption-text-shadow: 0 0 0.2em Black, 0 0 0.2em White, 0 0 0.2em White;

	--modal-background-color-opacity: rgba(255,255,255,0.8);
	--modal-caption-color: var(--color-yellow);
	--modal-caption-background-color: var(--color-green);

}