html, body {
    margin:0;
    padding:0;
}

body{
  background-color:#c8bfd7;
  font-family: sans-serif; 
  color: #594471;
}

/* Apparence des liens */
a{
  /*color: #8c5d9f;*/
  color: #518183;
  text-decoration:none;
}
  
a:hover{
  color:#d48133;
}

a img{
  border-style:none;
}

p
{margin-left:30px;margin-right:30px;margin-top:0px;text-align:left;}

h2,h3,h4{
  margin-left:30px;
  margin-top:20px;
  margin-bottom:5px;
}

li
{margin-left:30px;margin-right:30px;margin-top:10px;text-align:justify;}


#logo_hg{
  position:fixed;
  top:30px;
  left:30px;
}

/*#header{
  width:60%;
  min-width:400px;
  max-width:800px;
  margin:auto;
  padding:20px;
  
}*/

#header{
    width:100%;
    background-color:white;
    min-height:155px;
    margin:0;
    margin-bottom:80px;
    padding:0;
    padding-top:10px;
    padding-bottom:10px;
}

#header h1{
    max-width:600px;
    text-align:center;
    margin:auto;
    padding:0;
    margin-top:20px;
    margin-bottom:20px;
}

#header p{
    max-width:80%;
    margin:auto;
}

#main{
  width:800px;
  margin:auto;
  margin-top:0;
  margin-bottom:80px;
  background-color:white;
  /*padding:20px;*/
  padding-bottom:50px;
  padding-top:50px;
  border-radius:30px;
}

.mainlike{
  width:800px;
  margin:auto;
  margin-top:0;
  margin-bottom:50px;
  background-color:white;
  /*padding:20px;*/
  padding-bottom:50px;
  padding-top:50px;
  border-radius:30px;
}

#footer{
  position:relative;
  width:100%;
  height:300px;
  padding-bottom: 30px;
  background-color:#594471;
  color:#c8bfd7;
  padding-top:40px;
}

#footer a{
  color:#e1e8e0;
}

#footer a:hover{
  color:#d48133;
}

#mentionsLegales{
  position:absolute;
  right:30px;
  /*bottom:290px;*/
}


#hebergement{
  position:absolute;
  right:5px;
  bottom:10px;
  text-align:right;  
}

#logos{
  padding-bottom:30px;
  width:100%;
  text-align:center;
  background-color:white;
}

#logos img{
  height:60px;
  margin:15px;
}

.link_image{
  display:block;
  margin-left:auto;
  margin-right:auto;
  margin-top:50px;
  margin-bottom:50px;
  max-width:600px;
  border-radius:15px;
}

.centered_image,svg{
  display:block;
  margin-left:auto;
  margin-right:auto;
  margin-top:20px;
  margin-bottom:20px;
  max-width:100%;
}

.centered{
    text-align:center;
    margin:20px;
}


.centered img{
    margin:10px;
}

.right_image{
  float:right;
  margin:20px;
  margin-right:30px;
}

.right_top_image{
  float:right;
  margin-bottom:20px;
  margin-left:10px;
  margin-top:0px;
  margin-right:30px;
}

.center{
    text-align:center;
}

.legende{
    margin:auto;
    margin-top:0;
    margin-bottom:20px;
    font-size:smaller;   
    max-width:500px;
    text-align:center;
}

.actif{
  color: #518183;
  font-weight:bold;
}

em,.emphasized{
    font-style:normal;
    font-weight:bold;
}

/***************************************************/
/**** boutons, menus, etc. pour les animations *****/
/***************************************************/

#controle { /* div utilisé pour le debogage */
    position:fixed;
    width:500px;
    top:100px;
    left:400px;
    z-index:40;
}

#div_accueil{
    position:fixed;
    top:80px;
    left:0;
    z-index:45;
    background-color:white;
    width:100%;
    height:100%;
    
}

#image_accueil{
    position:fixed;
    top:80px;
    left:0;
    z-index:50;
    border:none;
    border-radius:0;
    width:100%;
}


#entete{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:80px;
    background-color:#e1e8e0;/*background-color:#c8bfd7;*/
    z-index:60;
}

#image_titre{
   /* position:fixed;
    top:5px;
    /*left:320px;*/
    /*left:30%;*/
    display:block;
    /*height:70px;*/
    margin:auto;
}

#canvas_principal
{
    position:absolute;
    top:80px;
    left:80px;
    z-index:-1;
    background-color:white;
}


#menu_gauche{
    position:fixed;
    top:0px;
    left:0px;
    height:100%;
    background:#779fa1;/*background:#847996;*/
    z-index:30;
    padding-top:180px;
    /*width:80px;*/
}


/****** Animations pour montrer et cacher le menu vertical de gauche *******/

	@keyframes anim_menu_in{
    from{width:80px;}
    to {width:300px;}
	}
	
	@-webkit-keyframes anim_menu_in{/* Chrome, Safari, Opera */
    from{width:80px;}
    to {width:300px;}
	}
	
    @keyframes anim_menu_out{
    0% {width:300px;}
    50% {width:300px}
    100% {width:80px;}
    }
    
    @-webkit-keyframes anim_menu_out{/* Chrome, Safari, Opera */
   from{width:300px;}
    to {width:80px;}
    }

.cache_menu{ 
  animation: anim_menu_out 1s;
  -webkit-animation: anim_menu_out 0.5s;/* Chrome, Safari, Opera */
  width:80px;
}

.menu_cache_initial{ 
  width:80px;
}

.montre_menu{
  animation: anim_menu_in 0.5s;
  width:300px;
}



.sous_menu{
  background:#e1e8e0;
  border-radius:10px;
  text-align:center;
  visibility:hidden;
  width:200px;
  position:absolute;
  right:50px;
  top:100px;
}


.sous_menu h3{
  font-weight:bold;
  background:#3a3a3a;
  color:#eeeeee;
  width:100%;
  margin-top:0;
  margin-left:0;
  padding-top:20px;
  padding-bottom:5px;
  border-radius: 10px 10px 0px 0px;
}



.paragraphe_aide{
    margin-left:15px;
    margin-right:15px;
    margin-top:150px;
    margin-bottom:15px;
}

#bouton_aide_ferme{
    position:absolute;
    cursor:pointer;
    top:10px;
    right:10px;
    /*margin-left:460px;
    margin-top:auto;
    padding-bottom:15px;*/
}

#bouton_ferme_debug{
    position:absolute;
    cursor:pointer;
    margin-left:460px;
    margin-top:10px;
    padding-bottom:15px;
}


#bouton_ferme_menu{
    visibility:hidden;
    height:30px;width:30px;
    position:absolute;
    top:95px;
    right:10px;
    cursor:pointer;
}


#bouton_reset{
    height:60px;
    width:60px;
    position:absolute;
    bottom:180px;
    right:10px;
    cursor:pointer;
    border-radius:10px;
}

	
.bouton_actif
{
  display:block;
  width:60px;
  height:60px;
  margin-left:auto;
  margin-right:auto;
  margin-top:15px;
  margin-bottom:15px;
  cursor:pointer;
  border-radius:10px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
}

.bouton_actif:active{
  box-shadow: 2px 2px 2px rgba(1, 1, 1, .5) inset;
}

.bouton_aide
{
  display:block;
  width:30px;
  height:30px;
  margin-left:auto;
  margin-right:auto;
  margin-top:15px;
  margin-bottom:15px;
  cursor:pointer;
  border-radius:5px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
}


.bouton_aide:active{
  box-shadow: 2px 2px 2px rgba(1, 1, 1, .5) inset;
}

.bouton_actif_enfonce
{
  display:block;
  width:60px;
  height:60px;
  margin-left:auto;
  margin-right:auto;
  margin-top:15px;
  margin-bottom:15px;
  cursor:pointer;
  border-radius:10px;
  box-shadow: 2px 2px 2px rgba(1, 1, 1, .5) inset;
}


.bouton_inactif{
  opacity:0.4;   
  display:block;
  width:60px;
  height:60px;
  margin-left:auto;
  margin-right:auto;
  margin-top:15px;
  margin-bottom:15px;
  cursor:default;
  border-radius:10px;
}

.bouton_choisi{
  opacity:1;
  display:block;
  width:60px;
  height:60px;
  margin-left:auto;
  margin-right:auto;
  margin-top:15px;
  margin-bottom:15px;
  cursor:pointer;
  border-radius:10px;
  box-shadow: 2px 2px 2px rgba(1, 1, 1, .5) inset;
}

.bouton_choisi_inactif{
  opacity:0.2;
  display:block;
  width:60px;
  height:60px;
  margin-left:auto;
  margin-right:auto;
  margin-top:15px;
  margin-bottom:15px;
  cursor:pointer;
  border-radius:10px;
  box-shadow: 2px 2px 2px rgba(1, 1, 1, .5) inset;
}

.bouton_non_choisi{
  opacity:0.4;
  display:block;
  width:60px;
  height:60px;
  margin-left:auto;
  margin-right:auto;
  margin-top:15px;
  margin-bottom:15px;
  cursor:pointer;
  border-radius:10px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
}

.cliquable{
    cursor:pointer;
}


.bouton_non_choisi:hover{
    opacity:1;
}

.fenetre_aide{
    position:fixed;
    width:600px;
    top:130px;
    left:350px;
    color:#4b545c;
    background:rgb(248,211,147);/*#f8d393;*/
    border-radius:15px;
    z-index:40;
    visibility:hidden;
    padding-top:30px;
}

.fenetre_aide p,h4{
    margin-left:15px;
    margin-right:15px;
    margin-top:15px;
    margin-bottom:15px;
}



.fenetre_debug{
    position:fixed;
    width:500px;
    top:100px;
    left:100px;
    color:#4b545c;
    background:#a7cab1;
    border-radius:15px;
    z-index:60;
    visibility:hidden;
}

.fenetre_debug p{
    margin-left:15px;
    margin-right:15px;
    margin-top:30px;
    margin-bottom:15px;
}







/***************************************************/
/****         spécial page accueil             *****/
/***************************************************/

#logo_accueil{
  width:70%;
  max-width:800px;
  margin:auto;
  margin-top:0;
  margin-bottom:50px;
  display:block;
}

#logo_hg_accueil{
  position:fixed;
  top:30px;
  left:30px;
  z-index:-5;
}

#presentation_accueil{
  width:100%;
  background-color: white;
  z-index:50;
  margin:0;
  padding-top:20px;
  padding-bottom:50px;
}

#description_accueil{
  width:70%;
  max-width:800px;
  margin:auto;
}

#liste_themes{
  width:100%;
  min-height:1000px;
  margin-top:50px;
  padding:0;
}

.theme{  
  background-color: white;
  width:800px;
  margin:auto;
  margin-top:50px;
  margin-bottom:50px;
  border-radius:30px;
  padding-left:30px;
  padding-right:30px;
  padding-top:1px;
  
}

.theme h3{
  font-size:110%;
  margin-bottom:2px;
}

.theme h2{
    margin-left:20px;
}

.theme p{
  clear:both;
  margin-left:0;
}

.theme img{
  float:left; 
  margin-bottom:10px;
  margin-right:20px;
  margin-top:0px;
  vertical-align:top;
  width:100px;
}

.theme:after{
  content: ""; /* Important, sinon l'élément n'est pas généré. */
  display:table;
  clear:both;
}






/* Adaptation aux écrans smartphone */

@media (max-width:1279px) {
  
  #logo_hg_accueil, #logo_hg{
  position:fixed;
  top:25px;
  left:25px;
  }

  .theme, #main, .mainlike{
    margin-left:0;
    margin-right:0;
    position:relative;
    left:200px;
  }
 
 
}


@media (max-width:1079px) {
  

 
 #logo_hg_accueil {
    display:none;
 }
 
 #logo_hg {
 display:block;
 position:static;
 margin:auto;
 margin-top:30px;
 margin-bottom:30px;
 }
 
 .theme, #main, .mainlike{
  position:static;
  margin-left:auto;
  margin-right:auto;
  max-width:90%;
  padding-left:10px;
  padding-right:10px;
 } 
  
  
  
}