.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-center {
    text-align:center!important;
    }
*/
.text-0xl {
  font-size: .8rem;
  line-height: 1;
			}	
.text-0-5xl {
  font-size: 1.05rem;
  line-height: 1.05;
			}	
.text-0-5xl_form {
  font-size: 1rem;
  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_micro-mini {
          background-color: transparent;
          border: 2.6px solid #c2c2c2; /* Add a visible border */
          border-radius: .6rem;
          padding: 1px; /* Add some padding for spacing */
          font-weight: 400;
        }
        input.transparent-input_mob {
          background-color: transparent;
          border: 3.4px solid #c2c2c2; /* Add a visible border */
          border-radius: .6rem;
          padding: 1px; /* Add some padding for spacing */
          font-weight: 600;
        }
		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_vert_micro-mini {
          cursor: pointer;
            outline: 0;
            display: inline-block;
			font-family: "Arial-Unicode-MS";
            font-weight: 400;
            line-height: 1;
            text-align: center;
          width: 48%;
            background-color: transparent;
            border: 1px solid transparent;
            padding-top: 2px;
          margin-left: auto;
          margin-right: auto;
          font-size: 1.1rem;
            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_vert_micro-mini:hover {
            color: #fff;
            background-color: #0d6efd;
            border-color: #0d6efd;
                            }
									
		.btn_vert{
          cursor: pointer;
            outline: 0;
            display: inline-block;
			font-family: "Arial-Unicode-MS";
            font-weight: 400;
            line-height: 1.5;
            text-align: center;
          width: 54%;
            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_vert:hover {
            color: #fff;
            background-color: #0d6efd;
            border-color: #0d6efd;
                            }
  /* -------------------- forms	-----containers-----------------------------------------------------------------	*/	
  /* -------------------- container micro	--------------------	*/	                
	
  .form_div_vert_micro_temp {
		width: 60%;
		height: 88vh;
		padding-right: 0px;
    padding-left: 0px;
	padding-top: 6px;
	margin-right: auto;
    margin-left: 2px;
	background-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
	}
.form-control:focus {
  box-shadow: none;
						}
.form-control_vert_micro_up {
    background-color:  transparent;
  	width: 78%;
	  height: 2.6%;
					}
.form-control_vert_micro_up:hover {
    background-image:url(mini_up.png);
	background-size: cover; 
					}

.form-control_vert_micro_mid_up {
  background-color:  transparent;
  width: 78%;
  height: 2.2%;
        }
.form-control_vert_micro_mid_up:hover {
  background-image:url(mini_down.png);
background-size: cover; 
        }
.form-control_vert_micro_mid_down {
  background-color:  transparent;
  width: 78%;
  height: 2.2%;
        }
.form-control_vert_micro_mid_down:hover {
  background-image:url(mini_up.png);
background-size: cover; 
        }
.form-control_vert_micro_down {
  background-color:  transparent;
  width: 78%;
  height: 2.2%;
        }
.form-control_vert_micro_down:hover {
  background-image:url(mini_down.png);
background-size: cover; 
        }

.form_bottom_vert_micro {
	width: 100%;
	text-align: center;
				}
			
.div_space_vert_micro {
	margin-top: 6px;
	margin-bottom: 6px;
			}
.div_space_vert_micro_down{
	margin-top: 6px;
	margin-bottom: 8px;
			}
.btn_bottom_vert_micro {
	width: 100%;
	text-align: center;
	margin-top: 6px;
	margin-bottom: 4px;
	align-items: center;
				}
.bottom_vert_micro {
	width: 78%;
	height: 4%;
}

/* -------------------- container mini	--------------------	*/	                
	
  .form_div_vert_mini_temp {
		width: 58%;
		height: 84vh;
		padding-right: 0px;
    padding-left: 0px;
	padding-top: 6px;
	margin-right: auto;
    margin-left: 2px;
	background-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
	}
.form-control:focus {
  box-shadow: none;
						}
.form-control_vert_mini_up {
    background-color:  transparent;
  	width: 78%;
	  height: 5%;
					}
.form-control_vert_mini_up:hover {
    background-image:url(mini_up.png);
	background-size: cover; 
					}

.form-control_vert_mini_mid_up {
  background-color:  transparent;
  width: 78%;
  height: 5%;
        }
.form-control_vert_mini_mid_up:hover {
  background-image:url(mini_down.png);
background-size: cover; 
        }
.form-control_vert_mini_mid_down {
  background-color:  transparent;
  width: 78%;
  height: 5%;
        }
.form-control_vert_mini_mid_down:hover {
  background-image:url(mini_up.png);
background-size: cover; 
        }
.form-control_vert_mini_down {
  background-color:  transparent;
  width: 78%;
  height: 5%;
        }
.form-control_vert_mini_down:hover {
  background-image:url(mini_down.png);
background-size: cover; 
        }

.form_bottom_vert_mini {
	width: 100%;
	text-align: center;
	padding-top:6px;
	margin-top: 8px;
				}
			
.div_space_vert_mini {
	margin-top: 8px;
	margin-bottom: 12px;
			}
.div_space_vert_mini_down{
	margin-top: 5px;
	margin-bottom: 8px;
			}
.btn_bottom_vert_mini {
	width: 100%;
	text-align: center;
	padding-top:6px;
	margin-top: 10px;
	margin-bottom: 10px;
	align-items: center;
				}
.bottom_vert_mini {
	width: 78%;
	height: 10vh;
}
/* -------------------- container mob	--------------------	*/	

.form_div_vert_mob_temp {
  width: 52%;
  height: 90vh;
  padding-right: 2px;
  padding-left: 2px;
padding-top: 10px;
margin-right: auto;
  margin-left: auto;
background-color: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
.form-control:focus {
box-shadow: none;
          }
.form-control_vert_mob_up {
  background-color: transparent;
  width: 72%;
height: 2.6%;
        }
.form-control_vert_mob_up:hover {
  background-image:url(mob_up.png);
background-size:cover; 
        }
.form-control_vert_mob_mid_up {
  background-color: transparent;
  width: 72%;
height: 2.6%;
        }
.form-control_vert_mob_mid_up:hover {
  background-image:url(mob_down.png);
background-size:cover; 
        }
.form-control_vert_mob_mid_down {
  background-color: transparent;
  width: 72%;
height: 2.6%;
        }
.form-control_vert_mob_mid_down:hover {
  background-image:url(mob_up.png);
background-size:cover; 
        }
.form-control_vert_mob_down {
  background-color: transparent;
  width: 72%;
height: 2.6%;
        }
.form-control_vert_mob_down:hover {
  background-image:url(mob_down.png);
background-size:cover; 
        }
        
.form_bottom_vert_mob {
width: 88%;
text-align: center;
margin-left:auto;
margin-right:auto;
padding-left:4px;
      }

.div_space_vert_mob {
margin-top: 6px;
margin-bottom: 6px;
    }
.div_space_vert_mob_down{
margin-top: 5px;
margin-bottom:3px;
    }
.btn_bottom_vert_mob {
width: 100%;
text-align: center;
margin-top: 8px;
margin-bottom: 8px;
align-items: center;
      }

  /* -------------------- container sm	--------------------	*/	
	
.form_div_vert_sm_temp {
	width: 76%;
	height: 78vh;
	padding-right: 4px;
	padding-left: 8px;
	padding-top: 12px;
	margin-right: auto;
	margin-left: auto;
	background-color: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	}
.form-control:focus {
box-shadow: none;
          }
.form-control_vert_sm_up {
  background-color: transparent;
  width: 72%;
height: 2.6%;
        }
.form-control_vert_sm_up:hover {
  background-image:url(mob_up.png);
background-size:cover; 
        }
.form-control_vert_sm_mid_up {
  background-color: transparent;
  width: 72%;
height: 2.6%;
        }
.form-control_vert_sm_mid_up:hover {
  background-image:url(mob_down.png);
background-size:cover; 
        }
.form-control_vert_sm_mid_down {
  background-color: transparent;
  width: 72%;
height: 2.6%;
        }
.form-control_vert_sm_mid_down:hover {
  background-image:url(mob_up.png);
background-size:cover; 
        }
.form-control_vert_sm_down {
  background-color: transparent;
  width: 72%;
height: 2.6%;
        }
.form-control_vert_sm_down:hover {
  background-image:url(mob_down.png);
background-size:cover; 
        }
        
.form_bottom_vert_sm {
width: 88%;
text-align: center;
margin-left:auto;
margin-right:auto;
padding-left:4px;
      }

.div_space_vert_sm {
margin-top: 6px;
margin-bottom: 6px;
    }
.div_space_vert_sm_down{
margin-top: 6px;
margin-bottom:6px;
    }
.btn_bottom_vert_sm {
width: 100%;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
align-items: center;
      }

  /* -------------------- container wide	--------------------	*/	
	 
.form_div_vert_temp {
	/*width: 56%;	*/
	height: 72vh;
	padding-right: 4px;
	padding-left: 4px;
	padding-top: 12px;
	margin-right: auto;
	margin-left: auto;
	background-color: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	}
.form-control:focus {
box-shadow: none;
          }
.form-control_vert_up {
  background-color: transparent;
  width: 72%;
height: 5%;
        }
.form-control_vert_up:hover {
  background-image:url(mob_up.png);
background-size:cover; 
        }
.form-control_vert_mid_up {
  background-color: transparent;
  width: 72%;
height: 5%;
        }
.form-control_vert_mid_up:hover {
  background-image:url(mob_down.png);
background-size:cover; 
        }
.form-control_vert_mid_down {
  background-color: transparent;
  width: 72%;
height: 5%;
        }
.form-control_vert_mid_down:hover {
  background-image:url(mob_up.png);
background-size:cover; 
        }
.form-control_vert_down {
  background-color: transparent;
  width: 72%;
height: 5%;
        }
.form-control_vert_down:hover {
  background-image:url(mob_down.png);
background-size:cover; 
        }
        
.form_bottom_vert {
width: 88%;
text-align: center;
margin-left:auto;
margin-right:auto;
padding-left:4px;
      }
.div_space_vert_wide {
	padding-top: 10px;
margin-top: 10px;
margin-bottom: 6px;
    }
.div_space_vert {
margin-top: 6px;
margin-bottom: 6px;
    }
.div_space_vert_down{
margin-top: 5px;
margin-bottom:3px;
    }
.btn_bottom_vert {
width: 100%;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
align-items: center;
      }

  /*.form-div {
    margin: 50px auto 50px;
    padding: 25px 15px 10px 15px;
    border: 1px solid #60aaa6;
    border-radius: 5px;
    font-size: 1.2em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-shadow: 6px 6px 0px rgb(64, 112, 121);
    background-color: #a6dfdc;  
  }
  .form-control:focus {
    box-shadow: none;
  }
  .form-control {
      background:  transparent;
      background-image: url("../EN/form_area.png"); 
      background-color: rgba(63, 110, 141, 0.5);
  }
  */
  
  
  /*----------------------containers ----------------------------------------------------------------------------*/
  /* careful => no 'vert' in conteneur and bg-image -------------------------------------------------------------*/
  /* -------------------- container micro	--------------------	*/		

  .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_vert_micro{
    height: 88vh;
    overflow: hidden;
	width: 30%;
	padding-left: 14px;
  }
  /*.banner_vert_mob_right{
    height: 64vh;
    overflow: hidden;
  }
	*/
  /* -------------------- container mini	--------------------	*/		

  .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-640.png');
      background-size: cover;
				}
  .banner_vert_mini{
    height: 84vh;
    overflow: hidden;
	width: 34%;
	padding-left: 12px;
  }
  /*.banner_vert_mini_right{
    height: 64vh;
    overflow: hidden;
  }
	*/
  /* -------------------- container mob	--------------------	*/		


  .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_vert_mob {
    height: 90vh;
    overflow: hidden;
	padding-left: 8px;
  }
  .banner_vert_mob_right {
    height: 90vh;
    overflow: hidden;
	padding-right: 8px;
  }
  

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

  .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_vert_sm {
    height: 78vh;
    overflow: hidden;
	padding-left: 12px;
  }
  .banner_vert_sm_right {
    height: 78vh;
    overflow: hidden;
	padding-right: 12px;
  }
  

  /* -------------------- container 	--------------------	*/		

  .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_vert{
    height: 72vh;
    overflow: hidden;
	padding-left: 40px;
  }
  .banner_vert_right{
    height: 72vh;
    overflow: hidden;
	padding-right: 40px;
  }
  
  

  /*  keyframes banners    */			

  @keyframes slide_vert_micro {
    0% {
      transform: translate(0);
    }
    100% {
      transform: translate(0px, -2158px); /* The image height */
    }
  }

  @keyframes slide_vert_mini {
    0% {
      transform: translate(0);
    }
    100% {
      transform: translate(0px, -2501px); /* The image height */
    }
  }
				
@keyframes slide_vert_mob {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(0px, -2501px); /* The image height */
  }
}
@keyframes slide_vert_mob_right {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(0px, -2158px); /* The image height */
  }
}

@keyframes slide_vert_sm {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(0px,-3090px); /* The image height */
  }
}
@keyframes slide_vert_sm_right {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(0px, -2975px); /* The image height */
  }
}

@keyframes slide_vert {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(0px, -2790px); /* The image height */
  }
}
@keyframes slide_vert_right {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(0px, -3021px); /* The image height */
  }
}

/*----------- micro ----------------------------*/

.scrolling-image_vert_micro {
  background: url("18_vert_tiles_88.png") repeat-y;
  height: 2158px;
  width: 88px;
  animation-name: slide_vert_micro;
  animation-duration: 44s;
  animation-iteration-count: infinite;
                                  }
.scrolling-image-conteneur_vert_micro {
  overflow: hidden;
}
/*.scrolling-image_vert_mob_right {
  background: url("18_vert_tiles_2_102.png") repeat-y;
  height: 2408px;
  width: 102px;
  animation-name: slide_vert_mob_right;
  animation-duration: 44s;
  animation-iteration-count: infinite;
                                  }
.scrolling-image-conteneur_vert_mob_right {
  overflow: hidden;
}


/*----------- mini ----------------------------*/

.scrolling-image_vert_mini {
  background: url("18_vert_tiles_102.png") repeat-y;
  height: 2501px;
  width: 102px;
  animation-name: slide_vert_mini;
  animation-duration: 44s;
  animation-iteration-count: infinite;
                                  }
.scrolling-image-conteneur_vert_mini {
  overflow: hidden;
}
/*  .scrolling-image_vert_mob_right {
  background: url("18_vert_tiles_2_102.png") repeat-y;
  height: 2408px;
  width: 102px;
  animation-name: slide_vert_mob_right;
  animation-duration: 44s;
  animation-iteration-count: infinite;
                                  }
.scrolling-image-conteneur_vert_mob_right {
  overflow: hidden;
}
*/




/*----------- mob ----------------------------*/

.scrolling-image_vert_mob {
  background: url("18_vert_tiles_88.png") repeat-y;
  height: 2158px;
  width: 88px;
  animation-name: slide_vert_mob;
  animation-duration: 44s;
  animation-iteration-count: infinite;
                                  }
.scrolling-image-conteneur_vert_mob {
  overflow: hidden;
}
.scrolling-image_vert_mob_right {
  background: url("18_vert_tiles_64.png") repeat-y;
  height: 1511px;
  width: 64px;
  animation-name: slide_vert_mob_right;
  animation-duration: 44s;
  animation-iteration-count: infinite;
                                  }
.scrolling-image-conteneur_vert_mob_right {
  overflow: hidden;
}

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

.scrolling-image_vert_sm {
  background: url("18_vert_tiles_126.png") repeat-y;
  height: 3090px;
  width: 126px;
  animation-name: slide_vert_sm;
  animation-duration: 48s;
  animation-iteration-count: infinite;
                                  }
.scrolling-image-conteneur_vert_sm {
  overflow: hidden;
}
.scrolling-image_vert_sm_right {
  background: url("18_vert_tiles_2_126.png") repeat-y;
  height: 2975px;
  width: 126px;
  animation-name: slide_vert_sm_right;
  animation-duration: 48s;
  animation-iteration-count: infinite;
                                  }
.scrolling-image-conteneur_sm_down {
  overflow: hidden;
}

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

.scrolling-image_vert {
  background: url("18_vert_tiles_220.png") repeat-y;
  height: 2790px;
  width: 220px;
  animation-name: slide_vert;
  animation-duration: 52s;
  animation-iteration-count: infinite;
                                  }
.scrolling-image-conteneur_vert {
  overflow: hidden;
}
.scrolling-image_vert_right {
  background: url("18_vert_tiles_2_220.png") repeat-y;
  height: 3021px;
  width: 220px;
  animation-name: slide_vert_right;
  animation-duration: 52s;
  animation-iteration-count: infinite;
                                  }
.scrolling-image-conteneur_vert_right {
  overflow: hidden;
}