@font-face{font-family:'DejaVuSans';src:url('DejaVuSans.ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'AA';src:url('Ace_Attorney.ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'AA_eu';src:url('ace_attorney_eu.ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'PW';src:url('Phoenix_Wright.ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'times';src:url('times.ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'eurostile';src:url('eurostile.ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'im';src:url('im.otf') format('opentype');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'josefin';src:url('josefin.TTF') format('truetype');font-weight:normal;font-style:normal;font-display:swap;}

html{width:100%;max-width:100%;margin:0;padding:0;overflow-x:hidden;box-sizing:border-box;font-size:clamp(14px,2vw,20px);}
*,*::before,*::after{box-sizing:border-box;}

body{background-color:var(--bg);font-family:eurostile,sans-serif;font-size:inherit;text-align:justify;width:100%;max-width:1300px;margin:0 auto;padding:0 0 6px 0;overflow-x:hidden;}

img{vertical-align:middle;margin:0;text-align:center;max-width:100%;height:auto;}

p{padding:25px;background:rgba(255,255,255,0.6);width:60%;max-width:100%;border-radius:30px;text-align:justify;margin:0 auto;}

#stories{display:flex;justify-content:center;max-width:100%;}
#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%);}
#limite img{filter:grayscale(60%);}
#limite img:hover{filter:grayscale(0%);}

.global{position:fixed;padding:2%;font-size:130%;bottom:0;}
.global a{padding:10px;border-radius:60%;}
.next{right:0;}
.previous{left:0;}

.planche{max-width:100%;overflow-x:auto;margin:0 auto 8px auto;}
.planche img{display:block;margin:0 auto;max-width:none;width:auto;height:auto;}

summary{background-color:#516AAA;padding:3px 6px;display:block;text-align:center;font-size:1.2em;width:400px;max-width:100%;margin:0 auto;color:white;cursor:pointer;}
summary:hover{background-color:rgba(0,100,180,0);}
details{padding-bottom:6px;max-width:70%;margin:0 auto 10px auto;}
details p{text-align:justify;}

#jump{max-width:1075px;width:100%;background-color:white;margin:0 auto;}
video{margin:0 auto;text-align:center;}
.code{background:white;max-width:500px;width:90%;font-size:11px;font-family:AA,AA_eu,PW,serif;padding:2px;margin:0 auto;}
#texte{text-align:justify;font-size:14px;max-width:1000px;width:90%;background-color:rgba(255,255,255,0.6);padding:4px;margin:0 auto;}
#soon{color:black;font-family:DejaVuSans;font-size:2em;font-weight:bold;}
#causerie{color:black;font-size:1.1em;text-align:justify;width:70%;max-width:100%;}

#menu{padding:0;margin:0 auto;list-style:none;line-height:clamp(26px,4vw,32px);text-align:center;font-size:15px;display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;max-width:100%;overflow:visible;white-space:nowrap;}
#menu ul{padding:0;margin:0;list-style:none;line-height:30px;text-align:center;font-size:15px;}
#menu>li{flex:1 1 auto;min-width:0;position:relative;}
#menu>li>a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

#menu li ul{position:absolute;width:var(--submenu-w,433px);max-width:90vw;visibility:hidden;left:0;top:30px;z-index:1000;background:var(--accent);}
#menu li ul a{font-size:13px;width:100%;}
#menu li ul ul{margin:-22px 0 0 22px;}
#menu li:hover ul ul,#menu li.sfhover ul ul{visibility:hidden;}
#menu li:hover>ul,#menu li li:hover>ul,#menu li.sfhover>ul,#menu li li.sfhover>ul{visibility:visible;min-height:0;}
#menu a{display:block;padding:4px 6px;background:var(--accent);width:100%;max-width:100%;box-sizing:border-box;}

.logos{max-width:940px;width:100%;background-color:white;margin-left:auto;margin-right:auto;}

a:hover,#ban a:hover{color:rgb(244,255,241);}
#retour a:hover{color:white;background:var(--accent);}
#bonus a{padding:2px;}
#bonus a:hover{color:white;}
#retour a{background-color:var(--bg);color:black;padding:4px;margin-bottom:3px;margin-top:0;border-radius:30%;font-family:DejaVuSans;font-size:18px;}
a{text-decoration:none;padding:2px;font-size:90%;color:var(--bg);background:var(--accent);}
#ban a{text-transform:uppercase;color:var(--bg);border-radius:0;padding:0;}

#bonus1,#bonus2{font-size:18px;box-sizing:border-box;max-width:810px;width:100%;}
#bonus1{text-align:center;}
#bonus2{text-align:right;}

#ban,#ban2{background-color:var(--accent);}
#ban,#ban2,#menu{font-family:DejaVuSans;font-size:16px;}
#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);}

#conteneur,.conteneur{display:flex;justify-content:center;max-width:100%;}
#flex,.flex,#flex2{display:flex;justify-content:space-between;max-width:100%;}

#linear{background-image:linear-gradient(var(--accent),rgba(235,267,169,0));}
#linear_bas{background-image:linear-gradient(rgba(235,267,169,0),var(--accent));}
#linear,#linear_bas{width:100%;max-width:1300px;height:90px;}

#presentation{text-align:justify;display:flex;flex-wrap:wrap;justify-content:space-around;max-width:100%;}
#contenu1,#contenu2{padding:8px;text-align:justify;border-left:1px rgb(0,70,0) solid;border-right:1px rgb(100,77,142) solid;justify-content:space-around;background:rgba(255,255,255,0.5);box-sizing:border-box;}
#contenu1{border-radius:120px;max-width:600px;width:100%;padding-top:40px;}
#contenu2{border-radius:80%;max-width:580px;width:100%;padding-top:50px;padding-bottom:80px;}
#ressources{width:100%;max-width:1300px;background-color:white;box-sizing:border-box;}

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:block;text-align:center;margin:8px auto;color:var(--h2-color);font-family:im,eurostile;font-size:1.5em;padding:2px;background-color:var(--bg);border-radius:275px;}
h3{display:block;text-align:center;text-transform:uppercase;font-size:13px;margin:0 auto;}

#contenu2 h1{width:280px;max-width:100%;margin:0 auto;}
#contenu2 h2{width:200px;max-width:100%;margin:0 auto;}
#p{width:150px;max-width:100%;margin:0 auto;}
#lol{text-align:center;margin-bottom:14px;padding-top:20px;}
#flex1{display:flex;justify-content:space-around;max-width:100%;}
#titre{max-width:500px;width:90%;text-align:center;margin:0 auto;}
.plan{width:70%;max-width:100%;margin:0 auto;padding:8px;}

#note{text-align:justify;margin:0 auto 10px auto;max-width:560px;width:90%;background-color:rgb(211,201,228);padding:8px;border:2px rgb(56,45,95) dashed;font-size:14px;font-family:DejaVuSans;border-radius:20px;}
#flexnote{display:flex;justify-content:center;max-width:100%;}
#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);}

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

@media only screen and (min-width:900px){
    body{width:80%;max-width:none;}
}

@media only screen and (max-width:700px){
    body{width:100%;max-width:100%;font-size:inherit;}
    #menu{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;max-width:100%;overflow:visible;}
    #menu>li{flex:1 1 auto;min-width:0;}
    #menu>li>a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    #menu li ul{width:90vw;max-width:var(--submenu-w,433px);line-height:20px;}
    #menu li ul li{padding:3px 0;}
    p{max-width:100%;}
    #causerie{width:90%;max-width:100%;}
    details{max-width:95%;}
    #presentation{width:100%;max-width:100%;}
    #flex,.flex,#flex2,#flex1{max-width:100%;}
}