/*
style.css
---------
Par Mers
*/
body
{
    text-align: center;
	background-color: #000000;
	font-family: 'Arial', sans-serif;
    color: #000000;
	overflow-x: hidden;
    overflow-y: scroll;
}
header
{
    text-align: center;
	/*background: url('bck_menu_principal.jpg') repeat-x;
	background-position: center;  Le fond sera placé au centre */
	border: 0px solid black;
	font-family: 'Arial', sans-serif;
    color: #FFFFFF;
}

header h1, em
{
    color: white;
	font-size: 30px; /* Titres de 30 pixels */
	/*text-shadow: 2px 2px 4px white; */
}

#main_area {
display: inline-block;
position: absolute;
width:  100%;
height:135%;
		left:0;
		right:0;
		margin-left:auto;
		margin-right:auto;
vertical-align: top;
top: 0;
overflow:hidden;
z-index: 1;
}

.transp {
filter:alpha(opacity=20);
opacity:0.2;
left:-1000px;
position:absolute;

}


#barre_noir
{
    background:  url('bck_menu_principal.jpg') repeat-x;
	display: inline-block; /* barre noir */
	position: absolute;
	width:  100%;
	border: none;	
	vertical-align: top;
	right: 0px;
	top: 50px;
	padding-top: 90px;
	padding-left: 0px;
}
#titre_logo
{
    display: inline-block; /* logo */
	position: relative;
	width: 160px;
	border: 0px solid black;
	vertical-align: top;
	padding-left: 0px;
	z-index: 11;
}
#titre_principal
{
    display: inline-block; /* technique de l'informatique */
	position: relative;
	width: 450px;
	border: 0px solid black;	
	vertical-align: top;
	padding-top: 40px;
	padding-left: 10px;
}
#titre_menu
{
    /*display: inline-block;  menu première version
	position: absolute;
	width: 150px;
	border: 0px solid black;
	vertical-align: top;
	right: 280px;    Position du menu rapide a droite 
    top: 5px;
	z-index: 950; */
 
    display: inline-block; /* menu deuxieme version */
	position: absolute;
	width: 150px;
	border: 0px solid black;
	vertical-align: top;
							/* right: 280px;    Position du menu rapide a droite */
    /*top: 65px;*/
	padding-top: 56px;
	padding-left: 10px;
	z-index: 999;

}
#ecran-mobile
{

	display: inline-block; /* ecran -> mobile */
	position: absolute;
	width: 200px;
	border: 0px solid black;
	vertical-align: top;
	/* left: 5px; */
	right: 5px;
    top: 145px;
	z-index: 15;
	
}
#facebook
{

	display: inline-block; /* ecran -> mobile */
	position: absolute;
	width: 300px;
	border: 0px solid black;
	vertical-align: top;
	/* right: 5px; */
	left: 5px;
    top: 145px;
	z-index: 16;
	
}

#bloc_bas
{

text-align: center;
	
}
#apropos
{

	display: inline-block; /*  */
	position: relative;
	width: 500px;
	border: 0px solid black;
	vertical-align: top;
    top: 600px;
	z-index: 400;
	
}
#coordonnee
{

	display: inline-block; /*  */
	position: relative;
	width: 500px;
	border: 0px solid black;
	vertical-align: top;
    top: 600px;
	z-index: 401;
	
}
#bas_bas
{

text-align: center;
	
}
#ligne
{
	display: inline-block; /* ecran -> mobile */
	position: absolute;
		left:0;
		right:0;
		margin-left:auto;
		margin-right:auto;
	width:800px;
	height: 75px;

    top: 248px;
	z-index: 1;
	border: 0px solid black;

}

#nav
{
font-family: 'Arial', sans-serif;
font-size: 20px;
	left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
width:790px;
height: 210px;
position:relative; 
top:119px;
color: black;
overflow:auto;
z-index: 998;
border-top:0px solid black;
border-bottom:0px solid black;
}

#nav, .nav, #nav .nav li { margin:0px; padding:0px;  }
#nav li {float:left; display:inline-block; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:none; }
#nav li ul.first {left:50%; top:100%; transform:translate(-50%,0)}  /* pour centrer le sous-menu */

li, li a {color:#000; text-decoration:none; }
#nav .nav li { width:100%;  margin-right:10px; border-top:none; border-bottom:none; 
border-left:none; border-right:none; /* background:#e7e7e4 ; */ background-color:rgba(231,231,231, 0.8); text-shadow: 0px 0px 0px white;}  /* sous-menu */
#nav li a {display:block; width:inherit; height:inherit; }

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { text-shadow: 1px 1px 4px black; }
li:hover > .nav { display:block; position:absolute; width:225px; top:-2px; left:50%; z-index:1000; border:none; } 
li:hover { position:relative; z-index:2000;  } 

#menu_texte
{
		display: inline-block;
		position: relative; 
		top:270px;		/* position du haut */
		width:900px;
		border: 0px solid black;
		
		font-family: 'Arial', sans-serif;
		font-size: 20px;
		color: black;
		overflow:auto;
		z-index: 402;
}

#boutton
{
						
	display: inline-block; /* ecran -> mobile */
	position: absolute;
	width:50px;
	height:50px;
	border: 2px solid black;
	vertical-align: top;
	/* right: 5px; */
	left: 5px;
    top: 250px;
	z-index: 18;	
}

#bas_bas_fin
{

text-align: center;
	
}
#fin
{

	display: inline-block; /* ecran -> mobile */
	position: relative;
	width: 650px;
	border: 0px solid black;
	vertical-align: bottom;
	top: 650px;   /* position */
	z-index: 403;
	
}


							
							#Tablette {
								display: inline-block; /* ecran -> mobile */
								position: absolute;
								background : url('tabletten.png') no-repeat;
								top:350px;		/* position du haut */
								float:center;
									left:0;
									right:0;
									margin-left:auto;
									margin-right:auto;
								width:700px;
								height:739px;
								margin:0 auto;
								border:none;
								color:transparent;
								text-align:center; /* reset align=center */
								z-index: 405;
							} 

							
							#Textet	{
								display: inline-block; /* ecran -> mobile */
								position: absolute; 
								top:58px;		/* position du haut */
								bottom:75px;
								float:center;
								width:565px;
								height:335px;
									left:0;
									right:0;
									margin-left:auto;
									margin-right:auto;
								margin:0 auto;
								border:none;
								color:transparent;
								text-align:center; /* reset align=center */
								overflow:auto;
								z-index: 999;
							}
							
							#dockContainer{
							  display    : table;
							  margin     : 0 auto;
							  text-align : center;    /* fixes IE bug */
							  z-index: 999;
							}

							#dockContainer > div{
							  display : inline-block; /* fixes IE bug */
							}

							#dockContainer > div{
							  display : inline;       /* fixes IE bug */
							}

							#dockContainer > div{
							  display       : table-cell;
							  text-align    : left;
							  background    : url('dock-centre-40.png') repeat-x 0 64px;
							  border-bottom : 2px solid rgb(220,220,200);

							}

							#dockContainer > div > div{
							 background : url('dock-right-40.png') no-repeat right 64px;
							 
							  
							}

							#dockContainer > div > div > div{
							  background : url('dock-left-40.png') no-repeat left 64px;
							  height     :88px;   /* fpour cacher le bas */
							  overflow   : hidden;
							  padding    : 0 20px;
							
							}

							
/* début robot */


.roule {
	width: 300px; height: 235px; position: absolute; left:-150px; bottom: 0;
	/*  background: url("drone_petit.gif"); */

	-webkit-animation-name: roule2;
	-webkit-animation-duration: 14s;
	-webkit-animation-play-state: running;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: roule2;
	-moz-animation-duration: 14s;
	-moz-animation-play-state: running;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	-moz-animation-timing-function: linear;
	/*  pour explorer */
	animation-name: roule2;
	animation-duration: 14s;
	animation-play-state: running;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}


@-webkit-keyframes roule2 {
	0% {
	bottom: 91%;
	left: 65%;
	-webkit-transform: scale(0.5);
	}
	
	20% {
	bottom: 91%;
	left: 29%;
	-webkit-transform: scale(0.5);
	}
	
	50% {
	bottom: 91%;
	left: -29%;
	-webkit-transform: scale(0.5);
	}
	
	54% {
	bottom: 76%;
	left: -29%;
	-webkit-transform: scale(0.5) rotate(-90deg);
	}
	
	74% {
	bottom: 51%;
	left: -29%;
	-webkit-transform: scale(0.5) rotate(-90deg);
	}
	
	100% {
	bottom: 24%;
	left: -29%;
	-webkit-transform: scale(0.5) rotate(-90deg);
	}
	
	/*-webkit-transform: rotate(15deg);*/
}

/*  pour explorer */

@keyframes roule2 {
	0% {
	bottom: 91%;
	left: 65%;
	transform: scale(0.5);
	}
	
	20% {
	bottom: 91%;
	left: 29%;
	transform: scale(0.5);
	}
	
	50% {
	bottom: 91%;
	left: -29%;
	transform: scale(0.5);
	}
	
	54% {
	bottom: 76%;
	left: -29%;
	transform: scale(0.5) rotate(-90deg);
	}
	
	74% {
	bottom: 51%;
	left: -29%;
	transform: scale(0.5) rotate(-90deg);
	}
	
	100% {
	bottom: 24%;
	left: -29%;
	transform: scale(0.5) rotate(-90deg);
	}
	
	/*-webkit-transform: rotate(15deg);*/
}



@-moz-keyframes roule2 {

	0% {
	bottom: 91%;
	left: 65%;
	-moz-transform: scale(0.5);
	}
	
	20% {
	bottom: 91%;
	left: 29%;
	-moz-transform: scale(0.5);
	}
	
	50% {
	bottom: 91%;
	left: -29%;
	-moz-transform: scale(0.5);
	}
	
	54% {
	bottom: 76%;
	left: -29%;
	
	-moz-transform: scale(0.5) rotate(-90deg);
	
	}
	
	74% {
	bottom: 51%;
	left: -29%;
	-moz-transform: scale(0.5) rotate(-90deg);
	}
	
	100% {
	bottom: 24%;
	left: -29%;
	-moz-transform: scale(0.5) rotate(-90deg);
	}	
}

/*  pour explorer */
@keyframes roule2 {

	0% {
	bottom: 91%;
	left: 65%;
	transform: scale(0.5);
	}
	
	20% {
	bottom: 91%;
	left: 29%;
	transform: scale(0.5);
	}
	
	50% {
	bottom: 91%;
	left: -29%;
	transform: scale(0.5);
	}
	
	54% {
	bottom: 76%;
	left: -29%;
	
	transform: scale(0.5) rotate(-90deg);
	
	}
	
	74% {
	bottom: 51%;
	left: -29%;
	transform: scale(0.5) rotate(-90deg);
	}
	
	100% {
	bottom: 24%;
	left: -29%;
	transform: scale(0.5) rotate(-90deg);
	}	
}	
	
/* fin robot */
							
/* Début nuages */

.sky {
	display: inline-block; /* ecran -> mobile */
	position: absolute;
	height: 437px;
	width:578px;
	top: 52px;
  	left:-4px;
    right:0;
    margin-left:auto;
    margin-right:auto;
	/*background: #007fd5;*/
	overflow: hidden;
	z-index: 1;
  -webkit-animation: sky_background 50s ease-out infinite;
  -moz-animation: sky_background 50s ease-out infinite;
  -o-animation: sky_background 50s ease-out infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  /*  pour explorer */
  animation: sky_background 50s ease-out infinite;
  animation: sky_background 50s ease-out infinite;
  animation: sky_background 50s ease-out infinite;
  transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
  
}

.moon {
  background: url("moon.png");
  position: absolute;
  left: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: moon 50s linear infinite;
  -moz-animation: moon 50s linear infinite;
  -o-animation: moon 50s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
    /*  pour explorer */
  animation: moon 50s linear infinite;
  animation: moon 50s linear infinite;
  animation: moon 50s linear infinite;
  transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.clouds_one {
  background: url("cloud_one.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_one 50s linear infinite;
  -moz-animation: cloud_one 50s linear infinite;
  -o-animation: cloud_one 50s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
      /*  pour explorer */
  animation: cloud_one 50s linear infinite;
  animation: cloud_one 50s linear infinite;
  animation: cloud_one 50s linear infinite;
  transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.clouds_two {
  background: url("cloud_two.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_two 75s linear infinite;
  -moz-animation: cloud_two 75s linear infinite;
  -o-animation: cloud_two 75s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
        /*  pour explorer */
  animation: cloud_two 75s linear infinite;
  animation: cloud_two 75s linear infinite;
  animation: cloud_two 75s linear infinite;
  transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.clouds_three {
  background: url("cloud_three.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_three 100s linear infinite;
  -moz-animation: cloud_three 100s linear infinite;
  -o-animation: cloud_three 100s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
          /*  pour explorer */
  animation: cloud_three 100s linear infinite;
  animation: cloud_three 100s linear infinite;
  animation: cloud_three 100s linear infinite;
  transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
		  
}

@-webkit-keyframes sky_background {
  0% {
    background: #007fd5;
    color: #007fd5
  }
  50% {
    background: #000;
    color: #a3d9ff
  }
  100% {
    background: #007fd5;
    color: #007fd5
  }
}
         /*  pour explorer */
@keyframes sky_background {
  0% {
    background: #007fd5;
    color: #007fd5
  }
  50% {
    background: #000;
    color: #a3d9ff
  }
  100% {
    background: #007fd5;
    color: #007fd5
  }
}


@-webkit-keyframes moon {
  0% {
    opacity: 0;
    left: -200% -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1);
    left: 0% bottom: 250px;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    bottom: 500px;
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
}
         /*  pour explorer */
@keyframes moon {
  0% {
    opacity: 0;
    left: -200% -moz-transform: scale(0.5);
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1);
    left: 0% bottom: 250px;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    bottom: 500px;
    transform: scale(0.5);
    transform: scale(0.5);
  }
}

		 
@-webkit-keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
         /*  pour explorer */
@keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}		 


@-webkit-keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
         /*  pour explorer */
@keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}		 
		 
@-webkit-keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
         /*  pour explorer */
@keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}		 
		 
@-moz-keyframes sky_background {
  0% {
    background: #007fd5;
    color: #007fd5
  }
  50% {
    background: #000;
    color: #a3d9ff
  }
  100% {
    background: #007fd5;
    color: #007fd5
  }
}
         /*  pour explorer */
@keyframes sky_background {
  0% {
    background: #007fd5;
    color: #007fd5
  }
  50% {
    background: #000;
    color: #a3d9ff
  }
  100% {
    background: #007fd5;
    color: #007fd5
  }
}


@-moz-keyframes moon {
  0% {
    opacity: 0;
    left: -200% -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1);
    left: 0% bottom: 250px;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    bottom: 500px;
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
}
         /*  pour explorer */
@keyframes moon {
  0% {
    opacity: 0;
    left: -200% -moz-transform: scale(0.5);
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1);
    left: 0% bottom: 250px;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    bottom: 500px;
    transform: scale(0.5);
    transform: scale(0.5);
  }
}
@-moz-keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
         /*  pour explorer */
@keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}


@-moz-keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
         /*  pour explorer */
@keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}		 
		 
@-moz-keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
         /*  pour explorer */
@keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
/* Fin nuages */

							
p
{
	font-size: 14px; /* Paragraphes de 14 pixels */
}
a
{
	text-decoration: none;
	color: black;
	font-style: italic;

	
    
}
a:hover
{
	
	text-color: white;
    text-shadow: 1px 1px 4px black;
}
a:focus /* Quand le visiteur sélectionne le lien */
{
    text-color: red;
}
a:visited /* Quand le visiteur a déjà vu la page concernée */
{
	text-decoration: none;
	color: black;
	font-style: italic;

}
.introduction
{
    color: red;
}
.salutations
{
    color: orange;
	font-family: Verdana, Impact, "Arial Black", Arial, sans-serif;
}

.marquee-container {
	/* background-color:#818282; */
	color: black;
	width: 100%; /* Or any desired width */
	height: 60px; /* Or any desired height */
	overflow: hidden;
	white-space: nowrap; /* Prevent content from wrapping to the next line */
	position: relative;
}
  
.marquee-content {
	display: inline-block; /* Allow the content to wrap properly */
	white-space: nowrap; /* Prevent content from wrapping to the next line */
	position: absolute; /* Or relative or absolute*/
	color: black;
	top: 20px;
	left: 100%;
	padding-right: 100%; /* Initial position off-screen */
	animation: marquee 10s linear infinite; /* Adjust speed as needed */
}