@font-face { font-family: 'DejaVuSans'; src: url('DejaVuSans.ttf'); }

	p { padding-bottom: 20px; }

#stories { display:flex; justify-content: center; }
#limite { margin: 0 auto; max-width: 80%; }
.pad { padding-left: 6px; padding-right: 6px; }
.actuel img, #limite .actuel img, #limite .actuel img:hover {  filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%); }

#limite img {  filter: grayscale(60%);
    -webkit-filter: grayscale(60%);
    -moz-filter: grayscale(60%);
    -ms-filter: grayscale(60%);
-o-filter: grayscale(60%); }

#limite img:hover {  filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
-o-filter: grayscale(0%); }

summary {
background-color:#516AAA; padding: 3px; display: block; text-align:center; margin-bottom: 15px; font-size: 1.2em; width: 400px;
}

details { margin-bottom: 15px; }


#soon {
  color: black; font-family: DejaVuSans; font-size: 2em; font-weight: bold;
}

#causerie { color: black; font-size: 1.1em; text-align: justify; width: 70%; }

#menu, #menu ul /* Liste */     
{ padding : 0; /* pas de marge intérieure */ margin : 0 auto; /* ni extérieure */ list-style : none; /* on supprime le style par défaut de la liste */ line-height : 30px; /* on définit une hauteur pour chaque élément */ text-align : center; /* on centre le texte qui se trouve dans la liste */  font-size: 11px;}

.sousmenu li { border-top: 1px #6d472c solid; }

.menu, .menu a, .menu ul a { font-size:  9px; }

#menu a /* Contenu des listes */
{ display : block; /* on change le type d'élément, les liens deviennent des balises de type block */ padding : 0; /* aucune marge intérieure */ background : #c17f4f; /* couleur de fond */ width : 130px; /* largeur */ }

#menu li /* Éléments des listes */      
{ float : left; }

#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 130px; /* Largeur des sous-listes */
        visibility: hidden; /* Hop, on envoie loin du champ de vision */
}

#menu li ul ul 
{
        margin    : -22px 0 0 22px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */   
}

#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        visibility: hidden; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        visibility: visible; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}

h1 {
  background-color:#c17f4f; padding: 3px; margin-top: 2px; display: inline-block; text-align:center;
}

a, #ban a {
   color: #ffd700; text-decoration: none; 
}

a:hover, /*#retour a:hover,*/ #ban a:hover {color: rgb(244,255,241);}
#retour a:hover {color: black;}

#bonus a {  background-color: #E3BB80; color: #c17f4f; padding: 4px; }
#bonus a:hover { color: white; }

 #retour a {
 background-color: #FFEDA9; color: #c17f4f;
  padding: 4px; margin-bottom: 3px; margin-top: 0px;
border-radius: 30%; /*text-shadow: 0px 0px 0px white, 1px 1px 0px white, -1px -1px 0px white, 2px 2px 0px white, -2px -2px 0px white, 3px 3px 0px black, -3px -3px 0px black;*/
  /*font-weight: bold;*/ font-family: DejaVuSans; font-size: 15px;
 }

 #ban a { text-decoration: none;
text-transform: uppercase;
 color: #ffd700; }

body { font-size: 16px;
 background: #fddf67 url("fond_HP_jaune.png") repeat fixed; margin: 0 auto;
  /*background-color: #fddf67;  background: url("fond_HP_jaune.png"); background-repeat: repeat; */
}


#resume {
  background-image: url("fond.png"); background-size: cover; width: 820px; color:white; font-weight: bold; padding: 30px; margin: 0 auto;
}

#bonus1, #bonus2 {
  font-size: 18px;
}

#bonus1 {
width: 810px; text-align: center;
}
#bonus2 {
width: 810px; text-align: right;
}

body {
text-align : justify;
/*   background-repeat: repeat-y, no-repeat;
   background-position: center, top;
   background-attachment: fixed;*/
   font-family: DejaVuSans, sans-serif;
   margin: auto; 
   margin-top: 2px; 
   margin-bottom: 15px;
width:1300px; }

img { vertical-align: middle; margin: 0;}

#ban, #ban2 { background-color: #c17f4f; }
#ban { border-top-right-radius: 60px; border-top-left-radius: 60px; }
#ban2 { border-bottom-right-radius: 60px; border-bottom-left-radius: 60px; }
#bonus { background-color: rgba(235,267,169,0.5) /*#ffeda9*/;}
#conteneur {display: flex; 
justify-content: center;}
#flex { display:flex; justify-content: space-between; }

#linear {background-image: linear-gradient(#c17f4f, rgba(235,267,169,0.5));}
#linear_bas {background-image: linear-gradient(rgba(235,267,169,0.5), #c17f4f);}

#linear, #linear_bas { width: 1300px; height: 90px; }

@media only screen and (max-device-width: 991px) {
  #menu, #menu ul {
    font-size: 10px;
  }
 #bonus1, #bonus2{ font-size: 10.5px; }
}