@font-face { font-family: 'DejaVuSans'; src: url('DejaVuSans.ttf'); }
@font-face { font-family: 'AA'; src: url('Ace_Attorney.ttf'); }
@font-face { font-family: 'AA_eu'; src: url('ace_attorney_eu.ttf'); }
@font-face { font-family: 'PW'; src: url('Phoenix_Wright.ttf'); }
@font-face { font-family: 'times'; src: url('times.ttf'); }
@font-face { font-family: 'eurostile'; src: url('eurostile.ttf'); }
@font-face { font-family: 'im'; src: url('im.otf'); }
@font-face { font-family: 'josefin'; src: url('josefin.TTF'); }

#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; padding-bottom: 6px; font-size: 1.2em; width: 400px;
}

details { padding-bottom: 6px; }


body { 
  background-color:rgba(166,147,201,1); font-family: eurostile;
}

#jump {
  width:1075px; background-color: white; margin: 0 auto;
}

video {
margin : 0 auto; text-align:center;
}

.code {
  background: white; width: 500px; text-size: 11px; font-family: AA, AA_eu, PW, serif; padding: 2px; margin: 0 auto;
}

#texte {
  text-align: justify; font-size: 14px; width: 1000px; background-color: rgba(255,255,255,0.6); padding: 4px;
}

#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: 15px;}

.sousmenu, .sousmenu li { border-top: 1px black solid; }

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

#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 : rgb(100,77,142); /* couleur de fond */ width : 433px; /* largeur */ }

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

#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 433px; /* 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 */
}

.logos {
  width: 940px; background-color: white;
}

#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 */
}


a:hover, /*#retour a:hover,*/ #ban a:hover {color: rgb(244,255,241);}
#retour a:hover {color: white; background: rgb(100,77,142);}

#bonus a {  font-weight: bold; color: rgb(100,77,142); padding: 2px; }
#bonus a:hover { color: white; }

 #retour a {
 background-color: rgb(166,147,201); color: rgb(100,77,142);
  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: 18px;
 }

a { text-decoration: none;
 color: rgb(100,77,142); }

 a:hover { background: rgb(100,77,142); border-radius: 20px; padding: 2px; }

 #ban a { text-transform: uppercase;
  color: rgb(166,147,201); border-radius: 0px; padding: 0px;}

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

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

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

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

#ban, #ban2 { background-color: rgb(100,77,142); }
#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) /*#ffeda9*/;}
#conteneur {display: flex; 
justify-content: center;}
#flex { display:flex; justify-content: space-between; }

#linear {background-image: linear-gradient(rgb(100,77,142), rgba(235,267,169,0));}
#linear_bas {background-image: linear-gradient(rgba(235,267,169,0), rgb(100,77,142));}

#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; }
}

#presentation { text-align: justify; 
display: flex; 
justify-content: space-around;}

#contenu1, #contenu2 {  padding: 8px; text-align: justify; border-left: 1px rgb(100,77,142) solid; border-right:  1px rgb(100,77,142) solid;
justify-content: space-around;  background: rgba(255,255,255,0.5);}

#contenu1 { border-radius: 120px; width: 600px; padding-top: 40px; }
#contenu2 { border-radius: 80%;  width: 580px; padding-top: 50px; padding-bottom: 80px;}

#ressources { width: 1300px; background-color: white; }

#ban, #ban2, #menu { font-family: DejaVuSans; font-size: 16px; }

h1 {
  background-color:rgb(100,77,142); padding: 4px; margin-top: 3px; text-align:center; color: white; font-family: times; font-size: 1.6em; font-weight: normal; border-radius: 50px;
}

h2 {
  display: block; text-align:center; margin: 0 auto; margin-top: 8px;
   text-align:center; color: rgb(56,45,95); font-family:  im, eurostile; font-size: 1.5em; padding: 2px;
    background-color: rgb(166,147,201); border-radius: 275px; margin-bottom: 8px;
}

h3 {
  display: block; text-align:center; text-transform: uppercase; font-size: 13px; margin: 0 auto;
}

#contenu2 h1 { width: 280px; margin: 0 auto;}
#contenu2 h2 { width: 200px; margin: 0 auto;}

#p { width: 150px; margin: 0 auto; }

#lol { text-align: center; margin-bottom: 14px; padding-top: 20px;}

#flex1 { display:flex; justify-content: space-around; }

.p1 { height: 200px; }
.p2 { height: 80px; }
.p3 { height: 80px; }
.p4 { height: 160px; }
.p5 { height: 80px; }
.p6 { height: 60px; }
.p7 { height: 120px; }
.p8 { height: 120px; }
.p9 { height: 120px; }

#titre { width: 500px; text-align: center; margin: 0 auto; }

.p1, .p2, .p3, .p4, .p5, .p6, .p7, .p8, .p9 {
  width: 90%; margin: 0 auto;
}

.plan {
  width: 70%; margin: 0 auto; padding: 8px;
}

strong { color: rgb(56,45,95);  }

#note {
margin-bottom: 10px; text-align: justify; margin: 0 auto; width: 560px; background-color: rgb(211,201,228); padding: 8px; border: 2px rgb(56,45,95) dashed; font-size: 14px; font-family: DejaVuSans; margin-bottom: 10px; border-radius: 20px;
}

#flexnote { display: flex;  justify-content: center;}

#prenote { padding-top: 15px; }

#eng { color: rgb(211,201,228); font-size: 15px; font-family: josefin; padding-top: 7px;}
#plan { padding-bottom: 25px; font-family: josefin; font-size: 20px; }

em { font-family: josefin; font-style: normal; font-weight: bold; font-size: 18px; color: rgb(56,45,95); }