/* Eléments principaux de la page */

body
{
    /* background: url('images/fond_jaune.png'); */
    background-color: white;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #181818;
    margin: 0;
}

#banniere_image_titre h1 {  font-family: 'Baumans', cursive; font-size: 3em;  font-weight: bold;  color: white;  }
#banniere_image_titre h2 {  font-family: 'Handlee', cursive; font-size: 2em;  font-weight: normal;  color: white;  }


#bloc_page
{
    width: 900px;
    margin: auto;
}


/* Navigation */

nav {
  margin: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: rgb(0,0,0);
}

#menu-demo2 ,#menu-demo2 ul{
  padding:0;
  margin:0;
  list-style:none;
  text-align:center;
}

#menu-demo2 li{
  display:inline-block;
  position:relative;
  margin-top:15px;
  margin-bottom:15px;
  /* border-radius:8px 8px 0 0; */
}
#menu-demo2 ul li{
  display:inherit;
  border-radius:0;
}
#menu-demo2 ul li:hover{
  border-radius:0;
}
#menu-demo2 ul li:last-child{
  border-radius:0 0 8px 8px;
}
#menu-demo2 ul{
  position:absolute;
  z-index: 1000;
  max-height:0;
  left: 0;
  right: 0;
  overflow:hidden;
  -moz-transition: .3s all 0s;
  -webkit-transition: .3s all 0s;
  transition: .3s all 0s;
  background-color: rgb(0,0,0);
}
#menu-demo2 li:hover ul{
  max-height:35em;
}
#menu-demo2 li:hover {
  background-color: rgb(0,0,0);
}

/* background des liens sous menus */
nav li li{
  background: rgb(0,0,0);
}

aside li{  font-size: 0.8em;  color: white;  }

/* les a href */
#menu-demo2 a{
  text-decoration:none;
  display:block;
  padding:8px 10px;
  min-width:130px;
  color:rgb(255,250,10);
  font-family: 'Baumans', cursive;
  font-size: 1.1em;
}
#menu-demo2 ul a{
  padding:8px 0;
}
#menu-demo2 li:hover li a{
  color:rgb(255,250,10);
  text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
  color: rgb(255,201,14);
}






/* Bannière */

#banniere_image{
    height: 350px;
    background: rgb(0,0,0) url('images/new_road_350_horiz.jpg') no-repeat center;
	padding-top: 1px;
}


#banniere_image_titre_contenant{
    width: 800px;
    margin: auto;
}

#banniere_image_titre{
    margin-top: 230px;
    margin-right: 20px;
    text-align : right;
}

#certif{
	position: absolute;
	top: 5px;
	left: 5px;
	height: 140px;
	width: 222px;
	background: url('images/Logo_qualiopi.JPG') no-repeat;
}

#bande_stage{
	width: 500px;
	padding-left: 10px;
	padding-right: 10px;
	margin: auto;
	border-radius: 5px;
	background-color: rgb(227,233,255);
	margin-bottom: 50px;
	display: flex;
    flex-direction: row;
	justify-content: space-between;
}


.bande_texte_deroulant {
  max-width: 100%;                      /* largeur de la fenêtre */
  margin: 0 0 50px 0;
  padding-bottom: 10px;
  background: rgb(0,0,0);
  color:rgb(255,250,10);
  animation: colorblink 1s infinite;
  font-family: 'Baumans', cursive;
  overflow: hidden;                     /* masque tout ce qui dépasse */
}

.bande_texte_deroulant > :first-child {
  display: inline-block;                /* modèle de boîte en ligne */
  padding-right: 2em;                   /* un peu d'espace pour la transition */
  padding-left: 100%;                   /* placement à droite du conteneur */
  white-space: nowrap;                  /* pas de passage à la ligne */
  animation: defilement-rtl 15s infinite linear;
}

.bande_texte_deroulant_footer {
  max-width: 100%;                      /* largeur de la fenêtre */
  margin: 0 0 0 0;
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgb(0,0,0);
  color:rgb(255,250,10);
  animation: colorblink 1s infinite;
  font-family: 'Baumans', cursive;
  overflow: hidden;                     /* masque tout ce qui dépasse */
}

.bande_texte_deroulant_footer > :first-child {
  display: inline-block;                /* modèle de boîte en ligne */
  padding-right: 2em;                   /* un peu d'espace pour la transition */
  padding-left: 100%;                   /* placement à droite du conteneur */
  white-space: nowrap;                  /* pas de passage à la ligne */
  animation: defilement-rtl 15s infinite linear;
}

@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0);      /* position initiale à droite */
  }
  100% {
    transform: translate3d(-100%,0,0);  /* position finale à gauche */
  }
}


@keyframes colorblink { 
0% { }
50% { color: rgb(255,201,14); } 
}



#img_trait_25{
    height: 25px;
}


#img_certif{ margin-top: 10px; margin-left: auto;  margin-right: auto;}



/* Corps */

section{  display: flex; margin-bottom: 20px; }
#section_top      {  min-height: 100px;   }
#section_bottom   {  min-height: 190px; margin-bottom: 40px; }


article{  margin-right: 20px;  flex: 2.7;  display: flex;  flex-direction: column; }
#article_high {  min-height: 260px;   }

#div_temoignages {width: 600px; margin-left: auto;  margin-right: auto;}


  #forme_1_1{       flex: 1;                                                }

  #forme_1_12{      flex: 1;                                                }
  #forme_1_12_permis_c{      flex: 1; background-image: url("images/permis_c_round_145.jpg");  background-position: right center;  background-repeat: no-repeat;}
  #forme_1_12_permis_ce{      flex: 1; background-image: url("images/permis_ce_round_130.jpg");  background-position: right center;  background-repeat: no-repeat;}
  #forme_1_1234_permis_b{      flex: 1; background-image: url("images/permis_b_round_145.jpg");  background-position: right center;  background-repeat: no-repeat;}
  #forme_1_12_permis_d{      flex: 1; background-image: url("images/permis_d_round_135.jpg");  background-position: right center;  background-repeat: no-repeat;}
  #forme_2_12{      flex: 1;    align-self: flex-end; padding-right: 50px;  }

  #forme_2_1234{    flex: 1.6;  align-self: flex-end; padding-right: 50px;  }
  #forme_3_1234{    flex: 1;                          padding-left: 20px;   }
  #forme_4_1234{    flex: 1;    align-self: flex-end;                       }
  
  #forme_1_12345{    flex: 2;                          padding-left: 0px;    }
  #forme_2_12345{    flex: 1.6;  align-self: flex-end; padding-right: 50px;  }
  #forme_3_12345{    flex: 1;                          padding-left: 20px;   }
  #forme_4_12345{    flex: 1;    align-self: flex-end;                       }
  #forme_5_12345{    flex: 1;                          padding-left: 80px;   }
  
  #forme_2_2345{    flex: 0.7;  align-self: flex-end; padding-right: 50px;  }
  #forme_3_2345{    flex: 0.8;                        padding-left: 20px;   }
  #forme_4_2345{    flex: 0.5;    align-self: flex-end;                       }
  #forme_5_2345{    flex: 0.9;                        padding-left: 80px;   }

  #forme_3_3{       flex: 1.5;                        padding-left: 60px;   }
  
  #forme_3_34{      flex: 1;                          padding-left: 30px;   }
  #forme_4_34{      flex: 1;    align-self: flex-end;                       }

  #forme_3_345{     flex: 1.4;                        padding-left: 30px;   }
  #forme_4_345{     flex: 1;    align-self: flex-end;                       }
  #forme_5_345{     flex: 1.1;                        padding-left: 20px;   }

  #forme_3_3456{    flex: 1;                          padding-left: 20px;   }
  #forme_4_3456{    flex: 0.9;  align-self: flex-end;                       }
  #forme_5_3456{    flex: 0.7;                                              }
  #forme_6_3456{    flex: 1.1;    align-self: flex-end; padding-right: 50px;  }
  
  #forme_5_567{     flex: 1.4;                        padding-left: 30px;   }
  #forme_6_567{     flex: 1;    align-self: flex-end;                       }
  #forme_7_567{     flex: 1.1;                        padding-left: 20px;   }
  
  #forme_5_5678{   flex: 1;                          padding-left: 20px;   }
  #forme_6_5678{   flex: 0.9;  align-self: flex-end;                       }
  #forme_7_5678{   flex: 0.7;                                              }
  #forme_8_5678{   flex: 1.1;  align-self: flex-end; padding-right: 50px;  }
  

#article_titre {  justify-content: center;  align-items: center;  }

  #forme_1_titre{   flex: 1;                          padding-right: 200px; }
  #forme_2_titre{   flex: 1.3;                        padding-left: 300px;  }
  #forme_3_titre{   flex: 1.5;                        padding-right: 300px; }
  #forme_4_titre{   flex: 1;                          padding-left: 200px;  }
  #forme_5_titre{   flex: 1.1;                        padding-right: 200px;  }
  #forme_6_titre{   flex: 1.2;                        padding-left: 250px;  }
  
  
  
  #forme_1_label{   flex: 1;                          padding-left: 100px; }
  #forme_2_label{   flex: 1.3;                        padding-left: 300px;  }
  #forme_3_label{   flex: 1.5;                        padding-left: 50px; }
  #forme_4_label{   flex: 1;                          padding-left: 200px;  }
  #forme_5_label{   flex: 1.1;                        padding-left: 150px;  }
  #forme_6_label{   flex: 1.2;                        padding-left: 250px;  }



#texte_175_center { width: 175px; text-align: center;                             }
#texte_200_center { width: 200px; text-align: center;                             }
#texte_225_center { width: 225px; text-align: center;                             }
#texte_250        { width: 250px;                                                 }
#texte_250_center { width: 250px; text-align: center;                             }
#texte_275        { width: 275px;                                                 }
#texte_275_center { width: 275px; text-align: center;                             }
#texte_300        { width: 300px;                                                 }
#texte_300_center { width: 300px; text-align: center;                             }
#texte_300_justify{ width: 300px; text-align: justify; text-justify: inter-word;  }
#texte_325        { width: 325px;                                                 }
#texte_325_center { width: 325px; text-align: center;                             }
#texte_350        { width: 350px;                                                 }
#texte_350_center { width: 350px; text-align: center;                             }
#texte_350_justify{ width: 350px; text-align: justify; text-justify: inter-word;  }
#texte_375        { width: 375px;                                                 }
#texte_375_justify{ width: 375px; text-align: justify; text-justify: inter-word;  }
#texte_400        { width: 400px;                                                 }
#texte_425        { width: 425px;                                                 }
#texte_475_justify{ width: 475px; text-align: justify; text-justify: inter-word;  }
#texte_400_center { width: 400px; text-align: center;                             }
#texte_400_justify{ width: 400px; text-align: justify; text-justify: inter-word;  }
#texte_475_center { width: 475px; text-align: center;                             }

aside{
    flex: 1.4;
    position: relative;
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
    max-height: 700px;
    overflow: auto;
}

#aside_lite{
	max-height: 400px;
}

#aside_entreprise{
	flex: 0.9;
}

#aside_recuperation{
	flex: 1.6;
}

#no_color{
    background-color: white;
	box-shadow: 0px 0px 0px white;
	max-height: 1200px;
}




#point_numerote {  display: flex;  flex-direction: line; align-items: stretch;}
  #numero       {  flex: 1;}
  #point        {  flex: 12;}

#point_numerote p{   margin-top: 6px; margin-bottom: 6px; }

article a, a:visited{   text-decoration: none;    color: rgb(182,61,50);}

article p {  font-size: 1em;    color: black;  margin-top: 5px;  margin-bottom: 5px; }
#p_entreprise {  font-size: 0.8em;}
aside p   {  font-size: 0.8em;  color: white;  }
#bande_stage p   {  margin-top: 10px; font-size: 0.9em;  font-family: 'Baumans', cursive;  font-weight: bold;}



/* h1  {  margin-top: 5px;   margin-bottom: 5px;   font-size: 2em;    color: rgb(182,61,50);  font-family: 'Handlee', cursive;  font-weight: bold;} */
/* body h1  {  margin-top: 5px;   margin-bottom: 5px;   font-size: 2em;    color: rgb(182,61,50);  font-family: 'Baumans', cursive;  font-weight: bold;} */
body h1  {  margin-top: 5px;   margin-bottom: 5px;   font-size: 2em;    color: rgb(182,61,50);  font-family: 'Baumans', cursive;  font-weight: bold;}
body h2  {  margin-top: 10px;  margin-bottom: 0;     font-size: 1.5em;  color: rgb(182,61,50);  font-family: 'Handlee', cursive; }
article h3  {  margin-top: 10px;  margin-bottom: 10px;  font-size: 1.1em; }
body h4  {  margin-top: 15px;  margin-bottom: 10px;  font-size: 1em;    color: white            }
body h5  {  margin-top: 0;     margin-bottom: 10px;  font-size: 1em;    color: black            }

/* aside h3 {color: rgb(53,136,204);} */
aside h3 {color: rgb(255,250,10);}


#article_titre h2 { margin-bottom: 15px; color: rgb(53,136,204); }






#iframe_google{  margin-bottom: 30px; }


#form_lig
{
    display: flex;
    flex-direction: row;
}
#form_col_1
{
    display: flex;
    flex-direction: column;
}



input, textarea {
    padding-top: 5px;
    padding-bottom: 5px;



    /* Afin de s'assurer que tous les champs textuels utilisent la même police
       Par défaut, textarea utilise une police à espacement constant */
    font: 1em sans-serif;

    /* Pour donner la même dimension à tous les champs textuels */
/*     width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box; */

    /* Pour harmoniser l'apparence des bordures des champs textuels */
    border: 1px solid #999;
}

input[type=text], input[type=email], input[type=tel] {  background-color: white;  margin-bottom: 6px; margin-right: 5px;  }
textarea {  background-color: white;}
input[type=submit] { background-color: rgb(53,136,204);  color: white; float: right; margin-top : 10px;}


.ico_categorie
{
    vertical-align: middle;
    margin-right: 8px;
}


aside img
{
    margin-right: 5px;
}


/* Footer */



footer
{
    background-color: rgb(0,46,93);
    color: white;
}

#footer_title
{
    background-color: rgb(53,136,204);
    text-align : center;
    padding-top: 1px;
    padding-bottom: 1px;
}

footer table
{
		margin: auto;
}