/* Pour debug
				#tblPageIndex td{border:solid thin red} 
			*/
			
			/*=============== Animation bienvenue ===============*/ 
			:root {
			  /* ========== z index ========== */
			  --z-tooltip: 10;
			  --z-fixed: 100;
			}
			/* =============== BASE =============== */
			*,
			*:after,
			*:before {
			  padding: 0;
			  margin: 0;
			  box-sizing: border-box;
			}

			ul {list-style: none;}

			a {text-decoration: none;}

			.container {
			  margin:auto;
			  padding: 2rem;
			  display: grid;
			  place-items: center;
			}
			.section__container {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			}

			/*==================== ZigZag Border Animation ====================*/
			.zigzag__container {
			  --skin-color: red; /* Couleur de l'animation */
			  --dark-black-color: #292929;
			  --border-color: #928b8b;

			  position: absolute;
			  display: flex;
			}
			.zigzag__container:nth-child(2) {
			  transform: rotate(180deg);
			  z-index: -1;
			}
			.zigzag__item {
			  display: block;
			  height: 40px; /* tailee des blocks */
			  width: 40px; /* tailee des blocks */
			  position: relative;
			  overflow: hidden;
			  transform: rotate(315deg);
			}
			.zigzag__item::before {
			  content: "";
			  position: absolute;
			  
			  height: 2px;
			  border:solid 5px var(--skin-color);
			  /*background: linear-gradient(90deg, transparent, var(--skin-color));*/
			  transform: translateX(-100%);
			  animation: animateBefore 4s linear infinite;
			  animation-delay: calc(1s * var(--i));
			}
			@keyframes animateBefore {
			  0% {transform: translateX(-100%);}
			  25%,
			  100% {transform: translateX(100%);}
			}
			.zigzag__item::after {
			  content: "";
			  position: absolute;
			  right: 0;
			  width: 2px;
			  height: 100%;
			  background: linear-gradient(180deg, transparent, var(--skin-color));
			  transform: translateY(-100%);
			  animation: animateAfter 4s linear infinite;
			  animation-delay: calc(1s * var(--i));
			}
			@keyframes animateAfter {
			  0%,
			  12.5% {transform: translateY(-100%);}
			  37.5%,
			  100% {transform: translateY(100%);}
			}
			.zigzag__item span {
			  position: absolute;
			  cursor: none;
			  inset: 5px;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  background-color: #333333; /* Arrière plan cubes */
			  /*outline: 1px solid #red;*/
			  transition: 0.3s linear;
			}
			.zigzag__container:nth-child(1) .zigzag__item span:hover {
			  outline-offset: -5px;
			}
			.zigzag__item span b {
			  font-weight: normal;
			  font-size: 1.5em; /* Taille des caractères */
			  transform: rotate(45deg);
			  color:#ffffff; /* Couleur lettres */
			}

			/* --  Fin Animation bienvenue -- */
			
			/* -- Cube -- */
          .ContenerGeneral3D {position:relative;height:4em;width:4em;margin:auto}  
            .cube {  
                font-size: 2em;  
                width: 4em;
				height:4em;				
                margin: 0.5em auto;  
                animation:rotationCube 10s linear infinite;               
                transform-origin: 50% 50%;  
                transform-style:preserve-3d;  
                perspective:none;  
                perspective-origin: 0px 0px;  
                transform: rotateX(0deg) rotateY(0deg);   
            }  
  
            .cotes{  
                position: absolute;    
                width: 4em;     
                height: 4em;  
                text-align: center;  
                line-height: 2em;   
                border: solid 1px #333333;  
                backface-visibility:hidden;                   
            }  
  
            .c1 {background-image:url("../Img/Cube/Danse.jpg");background-size:cover;        transform: rotateX( 0deg)   translateZ(1em); }  
            .c2 {background-image:url("../Img/Cube/Reunions.png");background-size:cover;;   transform: rotateX(-90deg)  translateZ(1em); }  
            .c3 { background-color:rgba(154,205,133,0.5);   transform: rotateY(-90deg)  translateZ(1em); }  
            .c4 { background-image:url("../Img/Cube/Loto.png");background-size:cover;    transform: rotateY( 90deg)  translateZ(1em); }  
            .c5 { background-color:rgba(128,128,0,0.5);     transform: rotateX( 90deg)  translateZ(1em); }  
            .c6 {background-image:url("../Img/Cube/Voyage.jpg");background-size:cover;     transform: rotateY(-180deg) translateZ(1em); }  
          
            @keyframes rotationCube {  
                16%      { transform: rotateY(-90deg); }  
                33%      { transform: rotateY(-90deg) rotateZ(90deg); }   
                50%      { transform: rotateY(180deg) rotateZ(90deg); }  
                66%      { transform: rotateY(90deg) rotateX(90deg); }  
                83%      { transform: rotateX(90deg); }  
            }             
			
			
			/* ---- Postit --- */
			#postit{display:none;position:fixed;left:50px;top:50px;width:250px;z-index:999;border:solid thin black;border-radius:15px;background-color:yellow;}
			#postit .titre{text-align:center;background-color:#333333;color:white }
			#postit .lePostit{height:150px;overflow-y:scroll;border:solid thin gray;padding:10px; }
			#postit .progress{text-align:center }
			#postit .postitFermer{padding-left:10px;cursor:pointer;text-align:left;color:white;background-color:orange}

			/* Calendrier lunaire */
			#lune{position:fixed;width:650px;left:50%;top:20px;transform: translate(-50%, 0px);display:none;background-color:#333333;text-align:center;font-size:20px;border:solid thin gray}
			#lune table{width:100%}
			#lune .titre{color:#ffffff}  
			#lune .help{color:#999999}
			#lune .jour {color:#ffffff;font-size:15px;} 
			#lune .textLeJour{color:#CCCC33;font-size:15px;}  
			#lune .textJourCourant{color:#FFFFFF;font-size:10px;}
			#lune .pleineNouvelle{color:#CCCC33;font-size:10px}
			#lune #choix{font-size:12px}
			#lune #choix select{font-size:12px}