@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'); }
@font-face { font-family: 'digimon'; src: url('DigimonBasic.ttf'); }
@font-face { font-family: 'digicode'; src: url('digicode.ttf'); }


acronym { text-decoration: none; cursor: help; border-bottom: 1px dashed white; padding-bottom: 1px; }

.nbr { text-align: center; font-size: 84%; }
.tableau { width: 80%; background:rgba(255,255,255,0.5); border-radius: 30px; padding: 15px; text-align: justify; }

#listes { margin: 0 auto; width: 70%; }

.rare, .rarete { text-align:center; }
.rare { padding: 1.5px; border-radius: 100%;   }

.pr   { background: rgba(0,200,180,0.6); }  
.co   { background: rgba(225,225,225,0.7); }  
.uc   { background: rgba(200,200,180,0.9); }  
.ra   { background: rgba(250,220,20,1); }
.sr   { background: rgba(240,180,10,0.5); }
.sec  { background: rgba(230,100,0,0.6); }

.annee { background: white; color: black; font-size: 90%; padding: 2.2px; border-radius: 50%;}

.flag2 { font-size: 80%; }

/*
0 à 10 :    background-color:rgb(48,48,48); hyperbas
11 à 25 :    background:rgb(144,24,0);       tresbas
26 à 49 :   background:rgb(232,128,40);     bas
50 :        background:rgb(224,192,40);     milieu
51 à 75 :   background:rgb(136,208,24);     haut
76 à 99 :   background:rgb(64,208,0);       treshaut
100 :       background:rgb(120,160,248);    grandmax
*/

.hyperbas progress::-webkit-progress-value { background-color:rgb(48,48,48); }
.tresbas  progress::-webkit-progress-value { background-color:rgb(144,24,0); }
.bas      progress::-webkit-progress-value { background-color:rgb(232,128,40); }
.milieu   progress::-webkit-progress-value { background-color:rgb(224,192,40); }
.haut     progress::-webkit-progress-value { background-color:rgb(64,208,0); }
.treshaut progress::-webkit-progress-value { background-color:rgb(8,120,0); }
.grandmax progress::-webkit-progress-value { background-color:rgb(120,160,248); }

.hyperbas progress::-moz-progress-bar { background-color:rgb(48,48,48); }
.tresbas  progress::-moz-progress-bar { background-color:rgb(144,24,0); }
.bas      progress::-moz-progress-bar { background-color:rgb(232,128,40); }
.milieu   progress::-moz-progress-bar { background-color:rgb(224,192,40); }
.haut     progress::-moz-progress-bar { background-color:rgb(64,208,0); }
.treshaut progress::-moz-progress-bar { background-color:rgb(8,120,0); }
.grandmax progress::-moz-progress-bar { background-color:rgb(120,160,248); }

.total { display: flex; justify-content: space-between;  }
.total, .total2 { width: 760px; font-weight: bold; font-size: 18px; margin-top: 6px; margin-bottom: 6px;}
.note { font-size: 80%; }

.flag img, .flag2 img, .digi img { border: 1px black solid; width: 25px; margin: 2.8px; }
.flag, .digi { margin: 2px; }

.numero { text-align: center; }
.cartes { max-width: 400px; }

.got_it { color: rgb(77,199,35); font-weight: bold; text-shadow: 1px 1px 1px rgb(20,100,0); }

.anim, .termi, .dcg      { background-color:rgba(8,8,8,0.1); text-align: center; border: 1px solid rgba(8,8,8,0.1); }
.hc, .bs          { background-color:rgba(8,8,8,0.2); text-align: center; border: 1px solid rgba(8,8,8,0.2); } 

.so { margin: 2.2px; padding: 2.2px; }
.lvl { font-weight: bold; }
.txt { font-weight: bold; font-size: 85%; }

.numero   { width: 90px;  }
.numero2  { width: 10px; }
.multi, .red, .blue, .yellow, .green, .black, .purple, .white {
  width: 80px; font-size: 90%; min-width: 80px;
}
.m-red, .m-blue, .m-yellow, .m-green, .m-black, .m-purple, .m-white, .left, .right { width: 40px; min-width: 40px; }
.multi, .red, .blue, .yellow, .green, .black, .purple, .white, .tamer, .d { text-align: center; }

.m-red   , .red      { background-color:rgb(230,0,45);}
.m-blue  , .blue     { background-color:rgb(0,151,224);}
.m-yellow, .yellow   { background-color:rgb(225,225,0);}
.m-green , .green    { background-color:rgb(0,155,107);}
.m-black , .black    { background-color:rgb(34,23,20);}
.m-purple, .purple   { background-color:rgb(100,86,163);}
.m-white , .white    { background-color:white;}
.tamer               { background-color:rgb(107,160,90);}
.d                   { background-color:rgb(107,60,90);}

.m-red, .m-blue, .m-yellow, .m-green, .m-black, .m-purple, .m-white { padding: 4px; }

.gold     { color:rgb(238,232,170); }

.left  { border-top-left-radius: 10px;     border-left: 1px black inset;    border-bottom-left-radius: 10px;    }
.right { border-top-right-radius: 10px;    border-right: 1px black inset;   border-bottom-right-radius: 10px; }
.left, .right { border-top: 1px black inset; border-bottom: 1px black inset; padding: 4px;}

.red, .blue, .yellow, .green, .black, .purple, .tamer, .white, .i, .ii, .iii, .iv, .v, .vi, .vii, .arm, .hy, .f, .d, .pb, .ffx, .checklist, .oth { border-radius: 10px; padding: 4px; border: 1px black inset; }
.i, .ii, .iii, .iv, .v, .vi, .vii, .arm, .hy, .f, .d, .pb, .ffx, .checklist, .tamer, .oth { display: inline-block; }
.m-red, .m-blue, .m-green, .m-black, .m-purple, .red, .blue, .green, .black, .purple, .tamer, .iii, .iv, .v, .vi, .vii, .hy, .ffx, .f, .d, .pb { color: white; }
.i { background: rgba(230,230,230,1); color: black; }
.ii { background: rgba(180,180,180,1); }
.iii { background-color: rgb(138,139,133); }
.iv { background-color: rgb(243,91,88); }
.v { background-color: rgb(98,129,193); }
.vi { background-color: rgb(74,71,124); }
.vii { background: rgba(10,0,60,1); }
.hy { background: rgb(65,176,121); }
.arm { background: rgb(244,215,6); }
.oth { background: rgb(220,220,255); }
.ffx { background-color: rgb(70,105,60) }
.f, .pb { background-color: rgb(0,0,0); }
.checklist { background-color: rgb(255,255,255); }
/*.v { color: white; background-color: rgb(58,87,147); }
.fx { color: black; background-color: rgb(241,232,29); }
.f { color: white; background-color: rgb(138,139,133); }
.d { color: white; background-color: rgb(138,139,133); }*/

.white acronym, .anim acronym, .alpha acronym, .dcg acronym, .hc acronym, .termi acronym, .other acronym, 
.arm acronym, .yellow acronym, .m-yellow acronym, .m-white acronym, .jd acronym, .st acronym, .mp acronym, .bo acronym, .fx acronym, .mo acronym, 
.tb acronym, .dw acronym, .dm acronym, .dp acronym, .un acronym, .cp acronym, .ii acronym, .error { border-bottom: 1px dashed black; }

.jd, .st, .mp, .bo, .fx, .mo, .tb, .dw, .dm, .dp, .un, .cp { background: rgba(0,0,0,0); }

.restrictions { background: red; color: white; font-weight: bold; padding: 2px; border-radius: 100%; border: 1px black solid; }
.rest { color: red; }

.other { text-align: center; }

meter, progress {
  width: 300px;
  height: 15px;
    /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Firefox */
  border: none;
  background: #EEE;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
}

progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;
   border: none;
}

progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

#cartes img {padding: 4px;}
#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%); }

summary:focus, audio:focus{
    outline: none;
}
summary, summary:focus { cursor: pointer; }

summary:hover {
background-color: rgba(0,100,180,1); }

summary {
background-color:rgba(0,100,180,0.5); padding: 3px; display: block; width: 750px; 
text-align:center; padding-bottom: 6px; color: white; margin : 5px; border-radius: 20%; padding: 4px;
border: rgb(41,54,88) 0px inset; font-size: 17.2px;
}

details { padding-bottom: 6px; }

.de_titre { background-color: rgba(68,71,136,0.5);
}

.de_titre:hover {  background-color:rgba(68,71,136,1); } } 



  p, .spoiler { padding: 25px; background: rgba(255,255,255,0.6); border-radius: 30px; }
  p { width: 60%; font-size: 1em; }
  .spoiler { width: 80%; font-size: 16px;  }

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


#bonus { background: rgba(255,255,255,0.5);}

body { 
background: url("wall.png") repeat fixed; margin: 0 auto; 
  background-color:rgba(146,204,229,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:rgba(68,71,136,0.8); /* couleur de fond */ width : 216px; /* largeur */ }
#menu li /* Éléments des listes */      
{ float : left; }
#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 216px; /* 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:rgba(68,71,136,0.8);}

#bonus a {  font-weight: bold; color: rgba(146,204,229,1); padding: 2px; }
#bonus a:hover { color: white; }

 #retour a {
 background-color: rgba(146,204,229,1); color: rgb(68,71,136);
  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: rgba(146,204,229,1); /* background:rgba(68,71,136,0.8) */ }


 #ban a { text-transform: uppercase;
  color: rgb(146,204,229); 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: rgba(68,71,136,0.8); }
#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(255,255,255,0.8) /*#ffeda9*/;}
#conteneur {display: flex; 
justify-content: center;}
#flex { display:flex; justify-content: space-between; }
#flex2 { display:flex; justify-content: space-around; }

#linear {background-image: linear-gradient(rgba(68,71,136,0.8), rgba(255,255,255,0.8));}
#linear_bas {background-image: linear-gradient(rgba(255,255,255,0.8), rgba(68,71,136,0.8));}

#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 {   text-align: justify; border-left: 1px rgb(0,70,0) solid; border-right:  1px rgb(100,77,142) solid;
 background: rgba(255,255,255,0.7); border-radius: 120px; width: 615px; }

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

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

h1 {
  background-color:rgb(0,70,0); 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: inline-block; text-align:center; margin: 0 auto; margin-top: 8px;
   text-align:center; color: #ffe667; font-family:  digimon, im, eurostile; font-size: 1.3em; padding: 2px;
    border-radius: 275px; margin-bottom: 8px;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffe667), to(#f1a358));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.title { background: rgb(18,52,84); display: inline-block; padding-right: 8px; padding-left: 8px; border-radius: 30px; }

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

h3, h4 { text-align: center; padding: 2px; }

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

#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, #titres, .titres { color: rgb(56,45,95); }
#titres, .titres { font-weight: bold; text-align: center; padding: 2px; }

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

.titre { font-family: digimon; font-style: normal; font-weight: bold; font-size: 22px; color: rgb(56,45,95); display: block; text-align: center; 
padding-top: 8px padding-bottom: 6px; margin-top: 10px; margin-bottom: 8px;}

#code { font-family: digicode; padding: 8px;}

.liste   { display: inline-block; column-count: 5; background: rgba(255,255,255,0.7); width: 95%; text-align: left; font-size: 15px; padding: 6px; border-radius: 30px;}
#legende { display: block; background: rgba(255,255,255,0.7); width: 95%; text-align: center; font-size: 16px; padding: 6px; border-radius: 30px;}

table { font-size: 17px; padding: 1.5px;}