:root{
    --color0: #ffffff;
    --color1: #270542;
    --color2: #714991;
    --color3: #a362b5;
    --color4: #d0b77a;
    --color5: #23043c;
    /* Couleurs des div d'avertissements et d'informations */
    --color6: #800000;
    --color7: #6dc462;
    --color8: #fe9a2e;
    --color9: #447c9d;
    --color10: #7d7d7d;
    --color1_opa025: rgba(39, 5, 66, 0.25);
    --color1_opa05: rgba(39, 5, 66, 0.5);
    --color1_opa075: rgba(39, 5, 66, 0.75);
    --color1_opa09: rgba(39, 5, 66, 0.9);
    --color2_opa05: rgba(113,73,145,0.5);
    --color3_opa05: rgba(163, 98, 181, 0.5);
    --color3_opa075: rgba(163, 98, 181, 0.75);
    --color4_opa025: rgba(208, 183, 122, 0.25);
    --color4_opa05: rgba(208, 183, 122, 0.5);
    --color4_opa075: rgba(208, 183, 122, 0.75);
    --color6_opa05: rgba(128, 0, 0, 0.5);
    --color6_opa075: rgba(128, 0, 0, 0.75);
    --color7_opa05: rgba(109, 196, 98, 0.5);
    --color7_opa075: rgba(109, 196, 98, 0.75);
    --color8_opa05: rgba(254, 154, 46, 0.5);
    --color8_opa075: rgba(254, 154, 46, 0.75);
    --color9_opa05: rgba(68, 124, 157, 0.5);
    --color9_opa075: rgba(68, 124, 157, 0.75);
    --color10_opa05: rgba(125, 125, 125, 0.5);
    --color10_opa075: rgba(125, 125, 125, 0.75);
    --margin-len: 10px;
    --padding-len: 15px;
    --border-len: 3px;
    --border-radius: 6px;
    --font-size-tiny: 10px;
    --font-size-small: 13px;
    --font-size-normal: 15px;
    --font-size-large: 17px;
    --font-size-huge: 24px;
}

html {
    --max-val: 400%;
    --min-val: 100%;
    --width-noise: 64px;
    width: 100% !important;
    min-height: 100vh;
    -webkit-text-size-adjust: 100%; /* Ces propriétés assurent que le texte n'apparaisse pas */
    text-size-adjust: 100%;         /* plus large en mode paysage sur iOS (par exemple). */
    background-color: var(--color1);
    background-image:
        radial-gradient(circle at 50% 0%, var(--color2_opa05) 0%, transparent 50%),
        radial-gradient(circle at calc(50% + 0.5 * 100vw) 50%, var(--color2_opa05) 0%, transparent 50%),
        radial-gradient(circle at calc(50% - 0.5 * 100vw) 50%, var(--color2_opa05) 0%, transparent 50%),
        radial-gradient(circle at calc(50% - 0.5 * 100vw) 0%, var(--color4) 0%, transparent 50%),
        radial-gradient(circle at 50% 100%, var(--color2_opa05) 0%, transparent 50%);
    background-size: 100%, 100%, 100%, 100%;
    background-position-x: center, center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    /* animation: background-animation 30s ease-in-out infinite; */
    /* scrollbar-color: var(--color2) var(--color1_opa05); */
    scrollbar-color: var(--color4) var(--color4_opa025);
}

/* Animation du papier peint du site (un peu trop demandeur en calcul). */
@keyframes background-animation {
    0% { background-size: var(--min-val), var(--max-val), var(--max-val), var(--min-val);}
    50% { background-size: var(--max-val), var(--min-val), var(--min-val), var(--max-val);}
    100% { background-size: var(--min-val), var(--max-val), var(--max-val), var(--min-val);}
}

@property --floor {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false /* or true depending on context */
}

body {
    /* Ces propriétés assurent le respect d'un padding plus important sur iOS (Notch). */
    --glpad: max(20px, env(safe-area-inset-left));  /* Global left padding */
    --grpad: max(20px, env(safe-area-inset-right)); /* Global right padding */
    --gbpad: max(var(--margin-len), env(safe-area-inset-right)); /* Global bottom padding */
    --gtpad: max(var(--margin-len)); /* Global top padding */
    padding-left: var(--glpad);
    padding-right: var(--grpad);
    padding-bottom: var(--gbpad);
    padding-top: var(--gtpad);
    width: calc(100% - var(--glpad) - var(--grpad));
    margin: 0px auto 0px auto;
    min-width: calc(320px - var(--glpad) - var(--grpad)); /* 320px is the screen width of the 1st iphone. */
    max-width: 1000px;
    color: white;
    font-family: vinque;
    -webkit-font-smoothing: antialiased; /* or 'subpixel-antialiased' */
}

a {
    color: inherit;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
}

p {
    margin-top: var(--margin-len);
    margin-bottom: var(--margin-len);
    line-height: 18px;
}

ul li {
    line-height: 18px;
}

em {
    color: var(--color4);
    font-style: normal;
}

h1 {
    font-family: vinque;
    text-align: center;
    margin: 0px;
    margin-bottom: var(--margin-len);
    line-height: 32px;
    font-size: var(--font-size-huge);
    flex: 1;
}

table {
    border-spacing: 0px;
    table-layout: fixed;
}

td {
    margin: 0;
    padding: 0;
}

hr {
    height: calc(var(--border-len)/2);
    border: 0;
    background-color: var(--color1);
    filter: drop-shadow(0px 0px 5px var(--color1));
    border-radius: calc(var(--border-radius)/2);
}

ul {
    list-style: square;
}

font{
    font-weight: normal;
}

/* Custom fonts */
@font-face {
    font-family: vinque;
    src: url("fonts/vinque.otf");
}
@font-face {
    font-family: runes;
    src: url("fonts/Highschool_Runes_.ttf");
}
@font-face {
    font-family: "FontAwesome";
    src: url("fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype");
}
@font-face {
    font-family: 'minecraftia';
    src: url('fonts/minecraftiaregular/minecraftia-webfont.eot');
    src: url('fonts/minecraftiaregular/minecraftia-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/minecraftiaregular/minecraftia-webfont.woff') format('woff'),
         url('fonts/minecraftiaregular/minecraftia-webfont.ttf') format('truetype'),
         url('fonts/minecraftiaregular/minecraftia-webfont.svg#minecraftiaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'blue';
    src: url('fonts/blue.eot?');
    src: url('fonts/blue.eot?#iefix') format('embedded-opentype'), url('fonts/blue.ttf');
}

/* CHECKBOX */
.checkbox-wrapper-4 * {
    box-sizing: border-box;
}
.checkbox-wrapper-4 .cbx {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: all 0.2s ease;
    display: block;
    margin: 2px;
}
.checkbox-wrapper-4 .cbx:hover {
    background: var(--color2_opa05);
}
.checkbox-wrapper-4 .cbx span {
    float: left;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
}
.checkbox-wrapper-4 .cbx span:first-child {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    transform: scale(1);
    border: 1px solid var(--color0);
    transition: all 0.2s ease;
}
.checkbox-wrapper-4 .cbx span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: var(--color0);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.2s ease;
    transition-delay: 0.2s;
    transform: translate3d(0, 0, 0);
}
.checkbox-wrapper-4 .cbx span:last-child {
    padding-left: 8px;
    line-height: 18px;
}
.checkbox-wrapper-4 .inp-cbx {
    position: absolute;
    visibility: hidden;
}
.checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child {
    background: var(--color1_opa05);
    border-color: var(--color1_opa05);
    animation: wave-4 0.2s ease;
}
.checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child svg {
    stroke-dashoffset: 0;
}
.checkbox-wrapper-4 .inline-svg {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    user-select: none;
}
@-moz-keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}
@-webkit-keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}
@-o-keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}
@keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}

.title-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.captcha{
    border-radius: var(--border-radius);
    border: calc(var(--border-len)/2) solid var(--color1);
    vertical-align: bottom;
    cursor: pointer;
    height: 42px;
    width: 126px;
}

/* MESSAGES */
.warning_v, .warning_b, .warning_r {
    border-radius: var(--border-radius);
    padding: var(--padding-len);
    font-weight: bold;
}

.warning_r {
    margin-bottom: var(--margin-len);
    background-color: var(--color6_opa05);
    font-size: var(--font-size-normal);
    border: calc(var(--border-len)/2) solid var(--color6);
}

.warning_v {
    margin-bottom: var(--margin-len);
    background-color: var(--color7_opa05);
    font-size: var(--font-size-normal);
    border: calc(var(--border-len)/2) solid var(--color7);
}

.warning_b {
    margin-bottom: var(--margin-len);
    background-color: var(--color9_opa05);
    font-size: var(--font-size-normal);
    border: calc(var(--border-len)/2) solid var(--color9);
}

.grayscale {
    filter: grayscale(100%);
}

/* BOUTTONS */
.btn {
    cursor: pointer;
    display: inline-block;
    background-color: var(--color1_opa05);
    padding: 5px 8px;
    margin: 2px;
    color: var(--color0);
    font-size: var(--font-size-normal);
    line-height: 19px;
    border: calc(var(--border-len)/2) solid var(--color1);
    border-bottom-color: var(--color1);
    border-radius: var(--border-radius);
    transition: 0.2s linear all;
    text-decoration: none;
    font-family: blue;
    text-align: center;
    font-weight: bold;
}
.title-container > .btn {
    margin-bottom: var(--margin-len);
}
.btn:hover, .btn:focus, .btn:active {
    opacity: 1;
    color: var(--color0);
    background-color: var(--color5);
}
.btn:focus, .btn:active {
    border-color: var(--color4);
    color: var(--color4);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
    outline: none;
}

/* HEADER */

.menubar {
    z-index: 10;
    line-height: 64px;
    width: calc(100% - var(--glpad) - var(--grpad));
    max-width: 1000px;
    top: 0px;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    position: fixed;
    white-space: nowrap;
    user-select: none;
}

.menubar_sep {
    height: var(--border-len);
    background-color: var(--color1);
    margin: var(--margin-len) 0px var(--margin-len) 0px;
    width: calc(100%);
    filter: drop-shadow(0px 0px 5px var(--color1));
    border-radius: var(--border-radius);
}

.menubar .active {
    color: var(--color4);
}

.menubar ul {
    padding: 0px;
    margin: 0px 0px 0px 0px;
    display: flex;
    justify-content: flex-start;
}

.menubar a {
    display: block;
    text-align: center;
    padding: 0px 12px 0px 12px;
    height: 64px;
    position: relative;
    cursor: pointer;
    z-index: 1;
}

.menubar font {
    font-family: runes;
    font-size: 14px;
    z-index: 0;
    line-height: 16px;
    position: relative;
    float: right;
    top: -19px;
    left: -12px;
}

/* Dropdown menus */
.dropdown_navfix { z-index: 10; display: none; top: 64px; }
.dropdown_topmenubar{ z-index: 10; top: 64px; }
.dropdown_topmenubar ul { display: none; }

/* END OF HEADER */

.content{
    max-width: 1000px;
    padding: var(--padding-len);
    background-color: var(--color2_opa05);
    border: var(--border-len) solid var(--color1);
    filter: drop-shadow(0px 0px 5px var(--color1));
    font-family: blue;
    font-size: var(--font-size-normal);
    border-radius: var(--border-radius);
    min-width: calc(320px - 2*var(--border-len) - 2*var(--padding-len) - var(--glpad) - var(--grpad));
}

.subcontent{
    max-width: calc(176px*3);
    margin: auto;
}

.slider {
    margin: var(--margin-len) 0px var(--margin-len) 0px;
    overflow-y: hidden;
    height:auto;
    box-shadow: 0px 0px 5px var(--color1);
    border: var(--border-len) solid var(--color1);
    border-radius: var(--border-radius);
}

.serverinfo {
    font-family: vinque;
    display: flex;
    list-style: none;
    user-select: none;
    margin: 0;
    padding: 0;
}
.serverinfo li {
    padding: 0px 5px 0px 5px;
    width: calc(100%/3);
    text-align: center;
}
.headerlist {
    width: 50%;
    display: inline-block;
}

.selnews .wrapper_pouces { width: 110px; }
.selnews .wrapper_pouces a { padding: 0px; }
table .wrapper_pouces a { padding: 12px 0px 12px 0px; }

.selnews img {
    float: left;
    width: 80px;
    margin: 0px 10px 10px 0px;
}

.selnews .title{
    display: block;
    font-size: var(--font-size-large);
    font-family: vinque;
}

.selnews span {
    text-align: justify;
    text-justify: inter-character;
}

.minetip {
    cursor: pointer;
}

.selnews.minetip {
    display: inline-block;
    height: 22px;
    width: calc(100% - 80px - 10px - 22px);
}

.pouces {
    width: 55px;
    height: 24px;
    line-height: 24px;
    float: left;
    cursor: pointer;
    color: var(--color0);
    transition: 0.2s linear all;
}
.pouces.up { color: var(--color4); }
.pouces svg { fill: var(--color0); }
.pouces.up svg { fill: var(--color4); }
.pouces a { display: block; }
.pouces span {
    margin-right: 12px;
    margin-left: 4px;
}


img.author_head {
    width: 16px;
    margin: 0;
    border: 1px solid var(--color1);
}

.navfix{
    z-index: 10;
    height: 64px;
    background-color: var(--color1);
    width: 100% !important;
    max-width: 100% !important;
    margin-left: -50%;
    left: 50%;
    filter: drop-shadow(0px 0px 5px var(--color1));
}

.footer_text{
    margin: var(--margin-len) 0px var(--margin-len) 0px;
    max-width: 100%;
    font-family: blue;
    font-size: var(--font-size-normal);
}

.highlight {
    transition: 0.2s linear 0s;
}

.highlight:hover {
    color: var(--color4);
}

.box {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: 0.2s linear 0s;
}

.pixelated_img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.rightbox{
    margin-left: auto;
}

.box:hover{
    color: var(--color4);
    background-color:var(--color5);
}

.box_hover{
    color: var(--color4);
    background-color:var(--color5);
}

.box:hover .text-divider::before{
    background-color: var(--color4);
}

.box:hover .text-divider::after{
    background-color: var(--color4);
}

.menubar li {
    height: 64px;
    line-height: 64px;
}

.menubar li.icon {
    display:none;
    width: 46px;
}

.menubar .box {
    font-size: var(--font-size-huge);
}

.header_profil {
    display: inline-block !important;
}

.cardtitle {
    --border-len: 2px;
    float: left;
    align-items: center;
    width: calc(100% / 3 - 2 * var(--border-len));
    height: 48px;
    color: var(--color3);
    border: var(--border-len) solid var(--color3);
}
.cardtitle div{
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.cardtitle font{
    line-height: 10px;
    width: 100%;
}
.cardtitle span{
    vertical-align: sub;
}
.cardtitle a{
    font-size: var(--font-size-normal);
    line-height: var(--font-size-normal);
}

.titlerunes {
    font-family: runes;
    font-size: 14px;
    z-index: 0;
}

.cardboard {
    width: calc(100%/5 - 4*var(--margin-len)/5 - var(--border-len));
    min-width: 150px;
    height: 180px;
    border-radius: var(--border-radius);
    border: calc(var(--border-len)/2) solid var(--color1);
    background-color: var(--color2);
    transition: 0.2s linear all;
    position: relative;
}

.cardboard:focus-within {
    background-color: var(--color3_opa075);
    color: var(--color0);
    border-color: var(--color4);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
    outline: none;
}

.cardboard:hover{
    background-color: var(--color3_opa075);
}

.cardboard a {
    width: 100%;
    height: 100%;
    display: block;
    font-weight: normal;
}

.cardboard > a > p {
    height: calc(100% - 7/2*var(--padding-len));
    text-align: center;
    padding: var(--padding-len);
    padding-top: calc(5/2*var(--padding-len));
    margin: 0;
}

.cardboard > a > p > img {
    width: 95px;
}

.cardboard > .nbrCredit {
    position: absolute;
    top: calc(var(--padding-len)/2);
    right: calc(var(--padding-len)/2);
    pointer-events: none;
}

.cardboard > .nbrCreditIG {
    position: absolute;
    top: calc(var(--padding-len)/2);
    left: calc(var(--padding-len)/2);
    pointer-events: none;
}

.cardboard > .nbrCreditPV {
    position: absolute;
    top: calc(var(--padding-len)/2);
    left: calc(var(--padding-len)/2);
    pointer-events: none;
}

hr.solid {
    border-top: 2px solid rgba(0,192,255,0.75);
}

.left_card { margin: 0px var(--margin-len) var(--margin-len) 0px; }
.right_card { margin: 0px 0px var(--margin-len) 0px; }

/* Hamburger menu design */
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fa-bars:before {
    content: "\f0c9";
}

/* Text divider */
.text-divider {
    font-family: runes;
    font-size: 14px;
    display: flex;
    align-items: center;
    --text-divider-gap: 20px;
    height: 5%;
}

.text-divider::before,
.text-divider::after {
    content: '';
    height: 1px;
    background-color: rgba(0,192,255,0.75);
    flex-grow: 1;
    margin-left: var(--text-divider-gap);
    margin-right: var(--text-divider-gap);
}

/* Popbox Minecraft */
.popbox {
    display: none;
    position: absolute;
    top: 0px;
    max-width: 400px;
    line-height: 22px;
    z-index: 9; /* Just under the navbar (10) */
    background-color: rgba(29, 14, 29, 0.95);
    color: #FFF;
    text-shadow: 2px 2px 0px #3f3f3f;
    border: 2px solid #2c0962;
    margin: 0px;
    font-family: 'minecraftia';
    font-size: 16px;
    padding: 4px;
    box-shadow: -2px 0 rgba(29, 14, 29, 0.95), 0 2px rgba(29, 14, 29, 0.95), 2px 0 rgba(29, 14, 29, 0.95), 0 -2px rgba(29, 14, 29, 0.95);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: pre; /* Oblige à sauter une ligne si "\n" est présent */
}

.minetext {
    line-height: 22px;
    font-family: 'minecraftia';
    font-size: 16px;
    padding: 0px;
    margin: 0px;
}

.minetext font{
    --shadow-len: 2px !important;
}

.opacity {
    opacity: 0.6;
    transition: 0.2s linear all;
}
.opacity:hover {
    opacity: 1;
}

.playerlist {
    line-height: 0px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.playerlist li {
    display: inline;
}
.playerlist div {
    width: 38px;
    height: 38px;
    display: inline-block;
}
.playerlist a {
    display: inline-block;
}
.playerlist img {
    width: 32px;
    height: 32px;
    margin: 2px;
}

.avatar{
    border: 1px solid var(--color1);
    border-radius: calc(var(--border-radius)/2);
}

/*
form{
    max-width: calc(176px*3);
    margin: auto;
}
*/

.input_form {
    max-width: calc(176px*3);
    width: 100%;
    padding: var(--padding-len);
    border: calc(var(--border-len)/2) solid var(--color1);
    background-color: var(--color2);
    box-sizing: border-box;
    font-family: blue;
    color: var(--color0);
    border-radius: var(--border-radius);
    margin:0px;
    transition: 0.2s linear all;
}

.input_form:focus {
    border-color: var(--color4);
}

.input_form:hover {
    background-color: var(--color3_opa075);
}

.table {
    margin: auto;
    width: 100%;
    border: calc(var(--border-len)/2) solid var(--color1);
    background-color: var(--color2);
    box-sizing: border-box;
    font-family: blue;
    border-radius: var(--border-radius);
    margin-top: var(--margin-len);
    margin-bottom: var(--margin-len);
    border-collapse: separate; /* Use 'separate' to allow border-radius */
    border-spacing: 0; /* Remove spacing between cells */
}
.table td {
    border-top: calc(var(--border-len)/2) solid var(--color1);
    /* padding: var(--padding-len); */
    cursor: pointer;
    transition: 0.2s linear all;
    background-color: var(--color2);
}
.table a {
    display: flex;
    padding: var(--padding-len);
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}
.table span{
    font-weight: normal;
}
.basket span{
    margin-left: auto;
}
.table .price_item{
    width: 48px;
    line-height: 48px;
    text-align: center;
    border-left: calc(var(--border-len)/2) solid var(--color1);
}
.table .left_border{
    border-left: calc(var(--border-len)/2) solid var(--color1);
}
.table .delete_item{
    padding: 0px;
    width: 48px;
    line-height: 48px;
    text-align: center;
    font-family: vinque;
    border-left: calc(var(--border-len)/2) solid var(--color1);
}
.table tr:first-child td {
    border-top: 0px;
}
.table tr:first-child td:first-child {
    border-top-left-radius: calc(var(--border-radius) - calc(var(--border-len)/2));
}
.table tr:first-child td:last-child {
    border-top-right-radius: calc(var(--border-radius) - calc(var(--border-len)/2));
}
.table tr:last-child td:first-child {
    border-bottom-left-radius: calc(var(--border-radius) - calc(var(--border-len)/2));
}
.table tr:last-child td:last-child {
    border-bottom-right-radius: calc(var(--border-radius) - calc(var(--border-len)/2));
}
.table td:hover {
    background-color: var(--color3_opa075);
}
.table .wrapper_pouces{
    margin-left: auto;
    display: flex;
}
.table td .avatar{
    width: 40px;
    height: 40px;
    margin-right: calc(var(--padding-len)/2);
}

input {
    /* padding: var(--padding-len); */
    box-sizing: border-box;
    background: none;
    /* height: 45px; */ 
    border: 0px;
    font-family: blue;
    transition: 0.2s linear all;
    color: white;
}

input:focus {
    outline: none;
}

.table .btn {
    width: 100%;
    height: 100%;
    padding: 0;
}

.playerlist .hidden-player {
    display: none;
}

/* BOUTIQUE */
.nbrCreditIG, .nbrCreditPV, .nbrCredit, .nbrCredit_unavailable {
    background-color: var(--color7_opa05);
    border: calc(var(--border-len)/2) solid var(--color7);
    padding: calc(var(--padding-len)/4) calc(var(--padding-len)/2);
    border-radius: 20px;
    font-size: var(--font-size-small);
    cursor: pointer;
    user-select: none;
    transition: 0.2s linear all;
}
.nbrCredit_unavailable {
    background-color: var(--color10_opa05);
    border-color: var(--color10);
}
.nbrCreditIG:hover, .nbrCreditPV:hover {
    background-color: var(--color7_opa075);
}
.nbrCredit_unavailable:hover {
    background-color: var(--color10_opa075);
}
.nbrCreditIG:focus, .nbrCreditPV:focus {
    background-color: var(--color7_opa05);
}
.nbrCredit:focus {
    background-color: var(--color8_opa05)
}
.nbrCredit_unavailable:focus {
    background-color: var(--color10_opa05)
}
.nbrCredit {
    background-color: var(--color8_opa05);
    border-color: var(--color8);
}
.nbrCredit:hover {
    background-color: var(--color8_opa075);
}

.content.boutique .divAchat {
    display: none;
}

.content.popup{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: calc(64px + var(--margin-len));
    box-sizing: border-box;
    width: 500px;
    max-width: calc(100% - var(--glpad) - var(--grpad));
    min-height: calc(64px + var(--border-len)*2 + var(--padding-len)*2 + 64px + var(--margin-len)*2);
    max-height: min(600px, calc(100dvh - var(--margin-len)*2 - 64px));
    z-index: 6;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding-left: 0px;
    padding-right: 0px;
    min-width: calc(320px - var(--glpad) - var(--grpad));
}
.content.popup img{
    width: 80px;
    margin: 0px 10px 10px 0px;
}
#achatBoutique .article_header {
    height: calc(32px + var(--margin-len));
    padding-left: var(--padding-len);
    padding-right: var(--padding-len);
}
#achatBoutique .article_content {
    overflow: auto;
    min-height: 64px;
    max-height: min(calc(600px - var(--padding-len)*2 - var(--border-len)*2 - var(--margin-len)*2 - 64px), calc(100dvh - 64px - var(--margin-len)*2 - var(--padding-len)*2 - var(--border-len)*2 - var(--margin-len)*2 - 64px));
    padding-left: var(--padding-len);
    padding-right: var(--padding-len);
}
#achatBoutique .article_footer {
    height: calc(32px + var(--margin-len));
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: var(--padding-len);
    padding-right: var(--padding-len);
}
#achatBoutique .article_footer a {
    margin-top: var(--margin-len);
}
/*.btn.green {
    background-color: var(--color7_opa05);
    border: calc(var(--border-len)/2) solid var(--color7);
}*/
#background_fade {
    display: none;
    opacity: 80%;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100vh;
    opacity: .80;
    z-index: 5;
}

/* MINECRAFT COLORS PARSER */
/*
 * Minecraft Color Parser for PHP
 * Copyright (c) 2013, Minecrell
 * MIT License: http://opensource.org/licenses/MIT
 */

/* Colors  */
.mc-color.mc-0       { /* Black */        color: rgb(  0,   0,   0); --shadow-color: rgb(0,   0,  0); text-shadow: var(--shadow-len) var(--shadow-len) 0px var(--shadow-color); }
.mc-color.mc-1       { /* Dark Blue */    color: rgb(  0,   0, 170); --shadow-color: rgb(0,   0, 42); text-shadow: var(--shadow-len) var(--shadow-len) 0px var(--shadow-color); }
.mc-color.mc-2       { /* Dark Green */   color: rgb(  0, 170,   0); --shadow-color: rgb(0,  42,  0); text-shadow: var(--shadow-len) var(--shadow-len) 0px var(--shadow-color); }
.mc-color.mc-3       { /* Dark Aqua */    color: rgb(  0, 170, 170); --shadow-color: rgb(0,  42, 42); text-shadow: var(--shadow-len) var(--shadow-len) 0px var(--shadow-color); }
.mc-color.mc-4       { /* Dark Red */     color: rgb(170,   0,   0); --shadow-color: rgb(42,  0,  0); text-shadow: var(--shadow-len) var(--shadow-len) 0px var(--shadow-color); }
.mc-color.mc-5       { /* Purple */       color: rgb(170,   0, 170); --shadow-color: rgb(42,  0, 42); text-shadow: var(--shadow-len) var(--shadow-len) 0px var(--shadow-color); }
.mc-color.mc-6       { /* Gold */         color: rgb(255, 170,   0); --shadow-color: rgb(63, 42,  0); text-shadow: var(--shadow-len) var(--shadow-len) 0px var(--shadow-color); }
.mc-color.mc-7       { /* Gray */         color: rgb(170, 170, 170); --shadow-color: rgb(42, 42, 42); text-shadow: var(--shadow-len) var(--shadow-len) 0px var(--shadow-color); }
.mc-color.mc-8       { /* Dark Gray */    color: rgb( 85,  85,  85); --shadow-color: rgb(21, 21, 21); text-shadow: var(--shadow-len) var(--shadow-len) 0px var(--shadow-color); }
.mc-color.mc-9       { /* Blue */         color: rgb( 85,  85, 255); --shadow-color: rgb(21, 21, 63); text-shadow: var(--shadow-len) var(--shadow-len) 0px var(--shadow-color); }
.mc-color.mc-a       { /* Green */        color: rgb( 85, 255,  85); --shadow-color: rgb(21, 63, 21); text-shadow: var(--shadow-len) var(--shadow-len) 0px var(--shadow-color); }
.mc-color.mc-b       { /* Aqua */         color: rgb( 85, 255, 255); --shadow-color: rgb(21, 63, 63); text-shadow: var(--shadow-len) var(--shadow-len) 0px var(--shadow-color); }
.mc-color.mc-c       { /* Red */          color: rgb(255,  85,  85); --shadow-color: rgb(63, 21, 21); text-shadow: var(--shadow-len) var(--shadow-len) 0px var(--shadow-color); }
.mc-color.mc-d       { /* Light Purple */ color: rgb(255,  85, 255); --shadow-color: rgb(63, 21, 63); text-shadow: var(--shadow-len) var(--shadow-len) 0px var(--shadow-color); }
.mc-color.mc-e       { /* Yellow */       color: rgb(255, 255,  85); --shadow-color: rgb(63, 63, 21); text-shadow: var(--shadow-len) var(--shadow-len) 0px var(--shadow-color); }
.mc-color.mc-f       { /* White */        color: rgb(255, 255, 255); --shadow-color: rgb(63, 63, 63); text-shadow: var(--shadow-len) var(--shadow-len) 0px var(--shadow-color); }
/* Colors (on light) */
.mc-color.mc-0.mc-color-light { /* Black */        --shadow-color: rgba(  0,   0,   0, 0.1); }
.mc-color.mc-1.mc-color-light { /* Dark Blue */    --shadow-color: rgba(  0,   0, 170, 0.1); }
.mc-color.mc-2.mc-color-light { /* Dark Green */   --shadow-color: rgba(  0, 170,   0, 0.1); }
.mc-color.mc-3.mc-color-light { /* Dark Aqua */    --shadow-color: rgba(  0, 170, 170, 0.1); }
.mc-color.mc-4.mc-color-light { /* Dark Red */     --shadow-color: rgba(170,   0,   0, 0.1); }
.mc-color.mc-5.mc-color-light { /* Purple */       --shadow-color: rgba(170,   0, 170, 0.1); }
.mc-color.mc-6.mc-color-light { /* Gold */         --shadow-color: rgba(255, 170,   0, 0.1); }
.mc-color.mc-7.mc-color-light { /* Gray */         --shadow-color: rgba(170, 170, 170, 0.1); }
.mc-color.mc-8.mc-color-light { /* Dark Gray */    --shadow-color: rgba( 85,  85,  85, 0.1); }
.mc-color.mc-9.mc-color-light { /* Blue */         --shadow-color: rgba( 85,  85, 255, 0.1); }
.mc-color.mc-a.mc-color-light { /* Green */        --shadow-color: rgba( 85, 255,  85, 0.1); }
.mc-color.mc-b.mc-color-light { /* Aqua */         --shadow-color: rgba( 85, 255, 255, 0.1); }
.mc-color.mc-c.mc-color-light { /* Red */          --shadow-color: rgba(255,  85,  85, 0.1); }
.mc-color.mc-d.mc-color-light { /* Light Purple */ --shadow-color: rgba(255,  85, 255, 0.1); }
.mc-color.mc-e.mc-color-light { /* Yellow */       --shadow-color: rgba(255, 255,  85, 0.1); }
.mc-color.mc-f.mc-color-light { /* White */        --shadow-color: rgba(255, 255, 255, 0.1); }
/* Formatting */
.mc-color, .mc-r {
    --shadow-len: 2px;
    color: var(--color0);
    font-family: 'minecraftia';
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color: rgb(255, 255, 255);
    --shadow-color: rgb(63, 63, 63);
    text-shadow: var(--shadow-len) var(--shadow-len) 0px var(--shadow-color); 
}
/* .mc-k { TODO } */
.mc-l { /* Bold */ font-weight: bold; }
.mc-m { /* Strikethrough */ text-decoration: line-through; }
.mc-n { /* Underline */ text-decoration: underline; }
.mc-o { /* Italic */ font-style: italic; }

/* Recommend Font: http://www.dafont.com/minecraftia.font */

/* TAILLES D'ECRAN */
@media screen and (max-width: 499px) {
    .menubar li:not(:nth-child(1)):not(.active):not(.default_active) {display: none;}
    .menubar li.icon { display: inline-block !important; }
    .selnews .wrapper_pouces { width: 55px; }
}
@media screen and (max-width: 399px) {
    body {
        --glpad: 10px; /* On force le padding à 10px, même sur iOS */
        --grpad: 10px; /* On force le padding à 10px, même sur iOS */
    }
    .cardtitle { width: calc(100% - 2 * var(--border-len)); }
    .header_stillcraft font { text-indent: -9999px; line-height: 0; }
    .header_stillcraft font:after { content: "SC"; text-indent: 0; display: block; line-height: initial; }
    .header_stillcraft a { text-indent: -9999px; line-height: 0; }
    .header_stillcraft a:after { content: "SC"; text-indent: 0; display: block; line-height: 64px; }
}
@media screen and (max-width: 799px) {
    .header_profil font { text-indent: -9999px; line-height: 0; }
    .header_profil font:after { content: "szu"; text-indent: 0; display: block; line-height: initial; }
    .header_profil span { display: none; }
}
@media screen and (min-width: 400px) and  (max-width: 599px){
    .menubar li:not(.vw3_active) { display: none; }
    .cardtitle { width: calc(100% / 2 - 2 * var(--border-len)); }
}

/* ACTIVATE HAMBURGER */
@media screen and (max-width: 599px) {
    .menubar li.icon {
        display: inline-block !important;
        margin-left: 0px;
    }
    .menubar.responsive li {
        display: inline-block !important;
        text-align: left;
    }
    .menubar .rightbox {
        float: none;
    }
}

/* Scaling de l'interface Minecraft */
@media screen and (max-width: 429px) {
    .gui_inv_wrapper {
        max-width: calc(176px) !important;
        max-height: calc(166px) !important;
        transform: scale(1.5);
    }
    #armory_content{
        height: calc(166px*1.5);
    }
    .popbox {
        max-width: 250px;
        line-height: 13.75px;
        text-shadow: 1.25px 1.25px 0px #3f3f3f;
        border: 1.25px solid #2c0962;
        font-size: 10px;
        padding: 2.5px;
        box-shadow: -1.25px 0 rgba(29, 14, 29, 0.95), 0 1.25px rgba(29, 14, 29, 0.95), 1.25px 0 rgba(29, 14, 29, 0.95), 0 -1.25px rgba(29, 14, 29, 0.95);
    }
    .mc-color, .mc-r {
        --shadow-len: 1.25px;
    }
}
@media screen and (min-width: 430px) and (max-width: 519px) {
    .gui_inv_wrapper {
        max-width: calc(176px) !important;
        max-height: calc(166px) !important;
        transform: scale(2.0);
    }
    #armory_content{
        height: calc(166px*2.0);
    }
    .popbox {
        max-width: 300px;
        line-height: 16.5px;
        text-shadow: 1.5px 1.5px 0px #3f3f3f;
        border: 1.5px solid #2c0962;
        font-size: 12px;
        padding: 3px;
        box-shadow: -1.5px 0 rgba(29, 14, 29, 0.95), 0 1.5px rgba(29, 14, 29, 0.95), 1.5px 0 rgba(29, 14, 29, 0.95), 0 -1.5px rgba(29, 14, 29, 0.95);
    }
    .mc-color, .mc-r {
        --shadow-len: 1.5px;
    }
}
@media screen and (min-width: 520px) and (max-width: 599px) {
    .gui_inv_wrapper {
        max-width: calc(176px) !important;
        max-height: calc(166px) !important;
        transform: scale(2.5);
    }
    #armory_content{
        height: calc(166px*2.5);
    }
    .popbox {
        max-width: 350px;
        line-height: 19.25px;
        text-shadow: 1.75px 1.75px 0px #3f3f3f;
        border: 1.75px solid #2c0962;
        font-size: 14px;
        padding: 3.5px;
        box-shadow: -1.75px 0 rgba(29, 14, 29, 0.95), 0 1.75px rgba(29, 14, 29, 0.95), 1.75px 0 rgba(29, 14, 29, 0.95), 0 -1.75px rgba(29, 14, 29, 0.95);
    }
    .mc-color, .mc-r {
        --shadow-len: 1.75px;
    }
}
/* Hiding top donators for small screen sizes */
@media screen and (max-width: 850px) {
    #top_donator_10 { display: none; }
    #top_donator_9  { display: none; }
}
@media screen and (max-width: 700px) {
    #top_donator_8  { display: none; }
    #top_donator_7 { display: none; }
}
@media screen and (max-width: 550px) {
    #top_donator_6  { display: none; }
    #top_donator_5 { display: none; }
}
@media screen and (max-width: 400px) {
    #top_donator_4  { display: none; }
}