:root {
		/* constantes wallpaper TRIANGLE */
		--brightness: 105%;  /* wallpaper triangle hover effect                         */
							/*  hsl(var(--wpH), var(--wpS), calc(var(--wpL) + ??.?%))  */
		--wpH: 0 ;           /* wallpaper triangle constante --> hue           PAS en % */
		--wpS: 0% ;          /* wallpaper triangle constante --> saturation        en % */
		--wpL: 50%;          /* wallpaper triangle constante --> Lightness         en % */
		/*def   70%       */
		/*def   10%  dark */
								/*  hsla(var(--banH), var(--banS), var(--banL), 1)        */
		--banH: 0 ;           /* wallpaper banière constante --> hue           PAS en % */
		--banS: 0% ;          /* wallpaper banière constante --> saturation        en % */
		--banL: 20%;          /* wallpaper banière constante --> Lightness         en % */  
		/*def   20% */
		/*def   10%  dark */
		}
		
		/*  -------- début de style ---------    
						triangle
			==================================    */
		.triangle_1 {
			position: fixed; 
			top: 0%; 
			left: 0%;
			height: 100%;
			transition: 200ms;
			width: 100%;
			opacity:0.4;
			background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 3%));
			clip-path: polygon(100% 0, 0 100%, 100% 100%);
			z-index: -1;
		}
		
		.triangle_2 {
			position: fixed;
			top: 0%; 
			left: 0%;
			height: 100%;
			width: 100%;
			transition: 200ms;
			opacity:0.4;
			background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 10%));
			clip-path: polygon(70% 30%, 0 100%, 0 0);
			z-index: -1;
		}
		
		.triangle_3 {
			position: fixed;
			top: 0%; 
			left: 0%;
			height: 100%;
			width: 100%;
			transition: 200ms;
			opacity:0.4;
			background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 15%));
			clip-path: polygon(70% 30%, 100% 0, 0 0);
			z-index: -1;
		}
	
.wallpaper {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -68%);
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
    opacity: 0%; /* Opacité initiale à 0 */
    z-index: -2; /* Place l'image derrière le contenu principal */
    transition: opacity 1s ease-in-out; /* Effet de fondu plus long */
}







/* début responsive */

/* Règles pour les écrans de largeur inférieure ou égale à 800px */
@media (min-width: 800px) {
.topnav a {
  padding: 14px 16px;
  font-size: 20px;
  width: 10%;
}


}
/* milieu responsive */

/* Règles pour les écrans de largeur supérieur ou égale à 800px */
@media (max-width: 800px) {
.topnav a {
  padding: 14px 0px;
  font-size: 16px;
  width: 25%;
}