.flex {
  display: flex;
		}
	.flex-col {
  flex-direction: column;
			}
	.flex-line {
  flex-direction: row;
	}
	.items-center {
  align-items: center;
				}
@font-face {
  font-family: "Helvetica";
  src: url("Helvetica.eot");
  src: local("☺"), url("fonts/Helvetica.woff2") format("woff2"),
    url("fonts/Helvetica.woff") format("woff"),
    url("fonts/Helvetica.ttf") format("truetype"),
    url("fonts/Helvetica.otf") format("otf"),
    url("fonts/Helvetica.svg") format("svg");
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}
.font-Helvetica {
  font-family: "Helvetica";
}
@font-face {

  font-family: "Arial-Unicode-MS";

  src: url("Arial-Unicode-MS.eot");

  src: local("☺"), url("fonts/Arial-Unicode-MS.woff2") format("woff2"),

    url("fonts/Arial-Unicode-MS.woff") format("woff"),

    url("fonts/Arial-Unicode-MS.ttf") format("truetype"),

    url("fonts/Arial-Unicode-MS.otf") format("otf"),

    url("fonts/Arial-Unicode-MS.svg") format("svg");

  font-display: swap;

  font-weight: normal;

  font-style: normal;

}

.font-Arial {

  font-family: "Arial-Unicode-MS";

}


/* css form -----------------------------------*/

	.text-center {
	text-align: center;
	}

.text-0-5xl {
  font-size: 1.05rem;
  line-height: 1.05;
			}	
.text-1-5xl_form {
  font-size: .95rem;
  line-height: 1;
			}
.text-2xl_form {
  font-size: 1.3rem;
  line-height: 1.1;
			}
.text-2xl {
  font-size: 1.45rem;
  line-height: 1.32;
			}
.text-2-5xl {
  font-size: 1.65rem;
  line-height: 1.22;
			}
.text-3xl {
  font-size: 1.8rem;
  line-height: 1.1;
			}
.text-3-5xl {
  font-size: 2rem;
  line-height: 1.1;
			}			
.text-4xl {
  font-size: 2.3rem;
  line-height: 1.1;
			}
.text-4-5xl {
  font-size: 2.8rem;
  line-height: 1.1;
			}
.text-5xl {
  font-size: 3rem;
  line-height: 1.1;
			}
.text-6xl {
  font-size: 3.5rem;
  line-height: 1;
			}
.font-bold{
	font-weight: 700;
}
.font-semibold {
  font-weight: 600;
				}
.alert {
  padding: 0.2rem; /* Set your desired padding */
  margin-bottom: 0.2rem;
  color: red;
  background-color: transparent; /* Set your desired background color */
  /*border: var(--bs-border-width) solid transparent; /* Set your desired border width and color */
  /*border-radius: var(--bs-border-radius); /* Set your desired border radius */
  position: relative;
          }
.alert a {
  color: inherit; /* Set your link color */
}

input.transparent-input {
  background-color: transparent;
  border: 4px solid #c2c2c2; /* Add a visible border */
  border-radius: .6rem;
  padding-left: 0px; /* remove leading spaces in form input */
  padding-right: 1px; /* Add some padding for spacing */
  padding-top: 1px; 
  padding-bottom: 1px; 
  font-weight: 800;
}

.btn{
	cursor: pointer;
    outline: 0;
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
	width: 38%;
    background-color: transparent;
    border: 1px solid transparent;
    padding-top: 4px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.6rem;
    border-radius: .4rem;
    transition: color .5s ease-in-out,background-color .5s ease-in-out,border-color .5s ease-in-out,box-shadow .5s ease-in-out;
    color: #0d6efd;
    border-color: #0d6efd;
     }
.btn:hover {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
                    }
					
					
/* -------------------- container micro	--------------------	*/			
	
.form_div_micro_temp {
	width: 78%;
	height: 72%;
	padding-right: 4px;
    padding-left: 4px;
	padding-top: 12px;
	margin-right: auto;
    margin-left: auto;
	border-radius: .4rem;
	/*	background-color: rgba(255, 255, 255, 0.1);			*/
	background-color: rgba(91, 143, 89, 0.1);
    -webkit-backdrop-filter: blur(3px);
   backdrop-filter: blur(3px);
   box-shadow: 6px 3px 4px rgba(91, 143, 89, 0.6);
	}
/*		.form-control:focus {
			box-shadow: none;
						}		*/
.form-control_micro {
    background-color:  transparent;
  	width: 78%;
	  height: 4vh;
					}
.form-control_micro:hover {
    background-image:url(mini_down.png);
	background-size: cover; 
					}

.form_bottom_micro {
	width: 100%;
	text-align: center;
				}
			
.div_space_micro {
	margin-top: 8px;
	margin-bottom: 8px;
			}
.div_space_micro_down{
	margin-top: 5px;
	margin-bottom:3px;
			}
.btn_bottom_micro {
	width: 100%;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	align-items: center;
				}
.bottom_micro {
	width: 78%;
	height: 10vh;
}

/* ------------- container mini	------------------	*/			
	
.form_div_mini_temp {
	width: 76%;
	height: 64%;
	padding-right: 4px;
    padding-left: 4px;
	padding-top: 12px;
	margin-right: auto;
    margin-left: auto;
	margin-bottom:2px;
	border-radius: .4rem;
	/*	background-color: rgba(255, 255, 255, 0.1);			*/
	background-color: rgba(91, 143, 89, 0.1);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	box-shadow: 6px 2px 4px rgba(91, 143, 89, 0.6);
	}
	
/*		.form-control:focus {
				box-shadow: none;
						}			*/
.form-control_mini {
    background-color: transparent;
    width: 82%;
	height: 4vh;
					}
.form-control_mini:hover {
    background-image:url(mini_up.png);
	background-size:cover; 
					}
.form-control_mini_down {
    background-color: transparent;
    width: 82%;
	height: 4vh;
					}
.form-control_mini_down:hover {
    background-image:url(mini_down.png);
	background-size:cover; 
					}
					
.form_bottom_mini {
	width: 100%;
	text-align: center;
				}
			
.div_space_mini {
	margin-top: 6px;
	margin-bottom: 6px;
			}
.div_space_mini_down{
	margin-top: 5px;
	margin-bottom:3px;
			}
.btn_bottom_mini {
	width: 100%;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	align-items: center;
				}
				
/* ------------------------ container mob_mini	----------------------	*/

.form_div_mob_mini_temp {
		width: 76%;
		height: 66%;
		padding-right: 4px;
    padding-left: 4px;
	padding-top: 12px;
	margin-right: auto;
    margin-left: auto;
	margin-bottom:2px;
	border-radius: .5rem;
	/*	background-color: rgba(255, 255, 255, 0.1);			*/
	background-color: rgba(91, 143, 89, 0.1);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
	box-shadow: 6px 3px 4px rgba(91, 143, 89, 0.6);
	}
.form-control:focus {
  box-shadow: none;
						}
.form-control_mob_mini {
    background-color: transparent;
    width: 72%;
	height: 4vh;
					}
.form-control_mob_mini:hover {
    background-image:url(mob_mini.png);
	background-size:cover; 
					}

.form_bottom_mob_mini {
	width: 88%;
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	padding-left:4px;
				}
			
.div_space_mob_mini {
	margin-top: 6px;
	margin-bottom: 6px;
			}
.div_space_mob_mini_down{
	margin-top: 5px;
	margin-bottom:3px;
			}
.btn_bottom_mob_mini {
	width: 100%;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	align-items: center;
				}
				
/* ------------------------ container mob	----------------------	*/

.form_div_mob_temp {
		width: 76%;
		height: 56%;
		padding-right: 4px;
    padding-left: 4px;
	padding-top: 12px;
	margin-right: auto;
    margin-left: auto;
	border-radius: .5rem;
	/*	background-color: rgba(255, 255, 255, 0.1);			*/
	background-color: rgba(91, 143, 89, 0.1);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	box-shadow: 6px 2px 4px rgba(91, 143, 89, 0.6);
	}
.form-control:focus {
  box-shadow: none;
						}
.form-control_mob_up {
    background-color: transparent;
    width: 72%;
	height: 4vh;
					}
.form-control_mob_up:hover {
    background-image:url(mob_up.png);
	background-size:cover; 
					}
.form-control_mob_down {
    background-color: transparent;
    width: 72%;
	height: 4vh;
					}
.form-control_mob_down:hover {
    background-image:url(mob_down.png);
	background-size:cover; 
					}

.form_bottom_mob {
	width: 88%;
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	padding-left:4px;
				}

.div_space_mob {
	margin-top: 6px;
	margin-bottom: 6px;
			}
.div_space_mob_down{
	margin-top: 5px;
	margin-bottom:3px;
			}
.btn_bottom_mob {
	width: 100%;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	align-items: center;
				}
	
/* --------------------------- conteneur sm	--------------------------------	*/			
	
.form_div_sm_temp {
		width: 76%;
		height: 52%;
		padding-right: 4px;
    padding-left: 4px;
	padding-top: 12px;
	margin-right: auto;
    margin-left: auto;
	border-radius: .7rem;
	/*	background-color: rgba(255, 255, 255, 0.1);			*/
	background-color: rgba(91, 143, 89, 0.1);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	box-shadow: 8px 3px 5px rgba(91, 143, 89, 0.6);
	}
	/*  supprimmer ?
.form-control:focus {
  box-shadow: none;
						}  */
.form-control_sm_up {
    background-color:  transparent;
    width: 82%;
	height: 4vh;
					}
.form-control_sm_up:hover {
    background-image:url(sm_up.png);
	background-size:cover; 
					}
.form-control_sm_down {
    background-color:  transparent;
    width: 82%;
	height: 4vh;
					}
.form-control_sm_down:hover {
    background-image:url(sm_down.png);
	background-size:cover; 
					}					
	
.form_bottom_sm {
	width: 100%;
	text-align: center;
	margin-top: 6px;
	margin-bottom: 6px;
          }	
		  
.div_space_sm_login {
	margin-bottom:12px;
			}
		
.div_space_sm {
	margin-bottom:8px;
			}
.div_space_sm_down{
	margin-bottom: 8px;
			}	

.btn_bottom_sm {
	width: 100%;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	align-items: center;
				}	
				
/* conteneur -----------------------------------------*/
	
/* supprimmer ? 
.form-control:focus {
  box-shadow: none;
                    }	*/

.form_div_temp {
		width: 76%;
		height: 58%;
		padding-right: 4px;
    padding-left: 4px;
	padding-top: 10px;
	margin-right: auto;
    margin-left: auto;
	border-radius: .8rem;
	/*	background-color: rgba(255, 255, 255, 0.1);			*/
	background-color: rgba(91, 143, 89, 0.1);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	box-shadow: 8px 4px 5px rgba(91, 143, 89, 0.6);
				}
.login_text {
	margin-top: 10px;
	margin-bottom: 12px;
	margin-right: auto;
    margin-left: auto;
	background-color:  transparent;
    width: 38%;
}
 
.form-control {
    background-color:  transparent;
    width: 38%;
	height: 4vh;
			  }
.form-control:hover {
    background-image:url(form_area.png);
	background-size:cover; 
				  }
								  
.form_bottom {
	width: 100%;
	text-align: center;
	margin-top: 6px;
	margin-bottom: 6px;
			}		

.div_space_login {
	margin-bottom:14px;
			}						
.div_space {
	margin-bottom: 8px;
		  }
.div_space_down{
	margin-bottom:8px;
				}
.btn_bottom {
	width: 100%;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	align-items: center;
				}	
										
	/*  keyframes banners    */								

@keyframes slide_micro {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-2158px); /* The image width */
  }
                         }									
	
@keyframes slide_mini {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-2158px); /* The image width */
  }
                         }
@keyframes slide_mini_down {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-1606px); /* The image width */
  }
                            }	

@keyframes slide_mob_mini {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-1649px); /* The image width */
  }
                            }	
				
@keyframes slide_mob {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-1649px); /* The image width */
  }
                        }
									
@keyframes slide_mob_down {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-2501px); /* The image width */
  }
                                                }
												
@keyframes slide_sm {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-1979px); /* The image width */
  }
                                    }
									
@keyframes slide_sm_down {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-3090px); /* The image width */
  }
                                          }

@keyframes slide {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-2790px); /* The image width */
  }
                            }
							
@keyframes slide_down {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-3021px); /* The image width */
  }
                                      }
									  
	 /*  ---------------- micro ----------------------------------------------------*/
 
 .scrolling-image_micro {
  background: url("18_tiles_88.png") repeat-x;
  height: 88px;
  width: 2158px;
  animation-name: slide_mob;
  animation-duration: 48s;
  animation-iteration-count: infinite;
                                  }
.scrolling-image-conteneur_micro {
  overflow: hidden;
                                                        }
 
.conteneur_micro{
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
	/*display: flex;*/
    align-items: center;
    justify-content: center;
                        }
.bg-image_micro {
background-image: url('fond_caracteres_nu_320-520.png');
		background-size: cover;
                  }
.banner_micro {
	width: 80%;
              }
/*
.banner_micro_down {
	width: 76%;
                   }								  		*/

	 /*  ---------------- mini ----------------------------------------------------*/
 
 .scrolling-image_mini {
  background: url("18_tiles_88.png") repeat-x;
  height: 88px;
  width: 2158px;
  animation-name: slide_mob;
  animation-duration: 48s;
  animation-iteration-count: infinite;
                        }
.scrolling-image-conteneur_mini {
  overflow: hidden;
                              }
.scrolling-image_mini_down {
  background: url("18_tiles_2_68.png") repeat-x;
  height: 68px;
  width: 1606px;
  animation-name: slide_mob_down;
  animation-duration: 48s;
  animation-iteration-count: infinite;
                                  }
.scrolling-image-conteneur_mini_down {
  overflow: hidden;
                                   }

.conteneur_mini{
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
	/*display: flex;*/
    align-items: center;
    justify-content: center;
                        }
.bg-image_mini {
background-image: url('fond_caracteres_nu_320-570.png');
		background-size: cover;
                  }
.banner_mini{
	width: 78%;
              }
.banner_mini_down {
	width: 78%;
	margin-top: 2px;
                  }
						  
		 /*  ---------------- mob_mini ----------------------------------------------------*/
		 
.scrolling-image_mob_mini {
  background: url("18_tiles_130.png") repeat-x;
  height: 130px;
  width: 1649px;
  animation-name: slide_mob_mini;
  animation-duration: 48s;
  animation-iteration-count: infinite;
                                  }
								  
.scrolling-image-conteneur_mob_mini {
  overflow: hidden;
                                      }

.conteneur_mob_mini{
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
	/*display: flex;*/
    align-items: center;
    justify-content: center;
					}
                        
.bg-image_mob_mini {
	background-image: url('fond_caracteres_nu_380-580.png'); 
	background-size: cover;
                          }	
.banner_mob_mini{
	width: 78%;
                    }

						  
		 /*  ---------------- mob ----------------------------------------------------*/
		 
.scrolling-image_mob {
  background: url("18_tiles_130.png") repeat-x;
  height: 130px;
  width: 1649px;
  animation-name: slide_mob;
  animation-duration: 48s;
  animation-iteration-count: infinite;
                                  }
.scrolling-image-conteneur_mob {
  overflow: hidden;
                                                }
.scrolling-image_mob_down {
  background: url("18_tiles_2_102.png") repeat-x;
  height: 102px;
  width: 2501px;
  animation-name: slide_mob_down;
  animation-duration: 48s;
  animation-iteration-count: infinite;
                                  }
.scrolling-image-conteneur_mob_down {
  overflow: hidden;
                                                      }

.conteneur_mob{
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
	/*display: flex;*/
    align-items: center;
    justify-content: center;
                        }
.bg-image_mob {
background-image: url('fond_caracteres_nu_320-640.png');
		background-size: cover;
                          }
.banner_mob{
	width: 78%;
             }
.banner_mob_down{
	width: 78%;
	margin-top: 2px;
                }


		 /*  ---------------- sm ----------------------------------------------------*/


.scrolling-image_sm {
  background: url("18_tiles_156.png") repeat-x;
  height: 156px;
  width: 1979px;
  animation-name: slide_sm;
  animation-duration: 48s;
  animation-iteration-count: infinite;
                                  }
.scrolling-image-conteneur_sm {
  overflow: hidden;
						}
.scrolling-image_sm_down {
  background: url("18_tiles_126.png") repeat-x;
  height: 126px;
  width: 3090px;
  animation-name: slide_sm;
  animation-duration: 48s;
  animation-iteration-count: infinite;
                                  }
.scrolling-image-conteneur_sm_down {
	overflow: hidden;
						                                            }

.conteneur_sm {
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
	display: flex;
    align-items: center;
    justify-content: center;
				            }
.bg-image_sm {
background-image: url('fond_caracteres_nu_640-1024.png');
		background-size: cover;
			                }
.banner_sm {
	width: 78%;
			        }
.banner_sm_down {
	width: 78%;
	margin-top: 3px;
			        }

		 /*  ---------------- wide ----------------------------------------------------*/


.scrolling-image {
  background: url("18_tiles.png") repeat-x;
  height: 220px;
  width: 2790px;
  animation-name: slide;
  animation-duration: 60s;
  animation-iteration-count: infinite;
                         }
.scrolling-image-conteneur {
  overflow: hidden;
                                        }
.scrolling-image_down {
  background: url("18_tiles_2.png") repeat-x;
  height: 220px;
  width: 3021px;
  animation-name: slide;
  animation-duration: 60s;
  animation-iteration-count: infinite;
                                  }
.scrolling-image-conteneur_down {
  overflow: hidden;
                                                }
.conteneur{
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
	display: flex;
    align-items: center;
    justify-content: center;
                  }
.bg-image {
background-image: url('fond_caracteres_nu_1440-900.png');
		background-size: cover;
                }
.banner{
	width: 77%;
            }
.banner_down{
	width: 77%;
	margin-top: 4px;
            }