:root{
    --color0: #ffffff;
    --color1: #270542;
    --color2: #714991;
    --color3: #a362b5;
    --color4: #d0b77a;
    --color5: #23043c;
    /* Couleurs des div d'avertissements et d'informations */
    --color6: #e15a5a;
    --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(225, 90, 90, 0.5);
    --color6_opa075: rgba(225, 90, 90, 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;
    /* Le site est toujours sombre (pas de thème clair) : sans ça, un navigateur comme Firefox
       devine le thème des popups natives (liste déroulante d'un <select>, etc.) à partir de la
       couleur de fond calculée au moment de l'ouverture, ce qui peut changer entre deux clics
       (ex: pendant une transition CSS) et faire clignoter la popup entre clair et sombre. */
    color-scheme: dark;
    /* Largeur plancher de tout le site : en dessous, on préfère une barre de défilement
       horizontale plutôt que de laisser le contenu s'écraser (320px = iPhone 1ère génération,
       cf. le même raisonnement sur .body plus bas). */
    min-width: 320px;
    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;
}

/* Filet de sécurité pour toute image dont la largeur (attribut ou style inline) dépasserait son
   conteneur — typiquement une <img> de contenu markdown (voir tutoriels.php) au style figé en dur
   dans le .md (ex: "width:560px") qui déborderait sur un écran étroit. "max-width" n'entre pas en
   concurrence de spécificité avec un "width" inline : les deux s'appliquent, et max-width plafonne
   la largeur effective quel que soit l'endroit où "width" est défini. "height:auto" suit alors les
   proportions plutôt que d'écraser l'image — sans effet sur les <img> qui fixent aussi leur hauteur
   en inline (avatar, etc.) puisque cette règle-ci a une spécificité plus faible pour "height". */
img {
    max-width: 100%;
    height: auto;
}

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: disc;
    /* "inside" plutôt que le "outside" par défaut : avec "outside", la puce est positionnée
       hors de la boîte de la liste et ignore donc le rétrécissement de la ligne causé par une
       image qui flotte à côté du texte (ex: l'illustration d'une news) — elle peut alors se
       retrouver coupée par l'image. Avec "inside", la puce fait partie du texte de l'item et
       contourne l'image normalement, comme le reste du texte. */
    list-style-position: inside;
    /* Un peu de marge avant la puce elle-même, pour qu'elle ne colle pas directement au bord
       (ou à l'image, une fois le texte revenu pleine largeur en dessous). */
    padding-left: 10px;
}

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 Awesome 6 Free, style "Classic Solid" (licence SIL OFL 1.1 pour la police, CC BY 4.0 pour
   les icônes — https://fontawesome.com/license/free). On garde le nom "FontAwesome" (celui utilisé
   par tous les ".fa-xxx:before" de ce fichier) : la v6 a conservé les points de code de la v4 pour
   les icônes déjà utilisées ici (vérifié un par un avant la bascule), donc rien d'autre à changer
   pour bars/times/check/hourglass-half/file-text/caret-left. Seuls les 3 nouveaux points de code
   (thumbs-up/thumbs-down/comment, pour include/pouces.php) profitent réellement de la mise à jour :
   la v4 ne les contenait pas du tout. */
@font-face {
    font-family: "FontAwesome";
    src: url("fonts/fontawesome6-solid-900.ttf?v=6.5.2") format("truetype");
}
/* Ancienne police FontAwesome 4.7, gardée uniquement pour son icône "discord" (bouton du header,
   voir .fa-discord plus bas et include/header.php) : la v6 Free ci-dessus, contrairement à la v4,
   sépare les logos de marque ("Brands") du reste ("Solid") dans deux fichiers distincts, et seule
   la Solid a été migrée (voir la note plus haut) — la v4 avait tout dans une seule police, dont ce
   fichier, déjà présent, est le reliquat. Même point de code qu'en v6 Brands ("\f392"). */
@font-face {
    font-family: "FontAwesome 4";
    src: url("fonts/fontawesome-webfont.ttf") 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);
}
.back-btn .fa-caret-left {
    margin-right: 4px;
    margin-left: 3px;
}
.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;
}
.btn.active {
    border-color: var(--color4);
    color: var(--color4);
    background-color: var(--color3_opa075);
}
/* Bouton ne contenant qu'une icône (ex: valider/refuser une image en attente) : largeur fixe
   et contenu centré, pour que plusieurs boutons de ce type côte à côte fassent tous la même
   largeur au lieu de suivre la largeur (variable) de leur glyphe. */
.btn-icon {
    width: 33px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

/* PAGINATION */
.pagination {
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: center;
    margin-top: var(--margin-len);
}
.pagination .btn {
    min-width: 20px;
}
.pagination_ellipsis {
    display: inline-block;
    padding: 5px 4px;
    margin: 2px;
    line-height: 19px;
    color: var(--color10);
    font-weight: bold;
    font-family: blue;
}

/* 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;
}
/* Cible de "#commentaires" (voir include/commentaires.php et pouces_id($link_comments=false)
   dans include/pouces.php) : laisse la place du header fixe (64px, voir "#topmenubar") plus une
   petite marge, pour qu'atterrir ici au clic ne cale pas "Commentaires" tout en haut sous lui. */
#commentaires {
    scroll-margin-top: 80px;
}

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

/* Même habillage que ".table" (la galerie, les commentaires...) : bordure, fond, coins
   arrondis — sans reprendre sa disposition en lignes/cellules, juste l'aspect "carte". */
.selnews {
    border: calc(var(--border-len)/2) solid var(--color1);
    background-color: var(--color2);
    border-radius: var(--border-radius);
    padding: var(--padding-len);
    box-sizing: border-box;
    margin-top: var(--margin-len);
    margin-bottom: var(--margin-len);
    /* Sans ça, la carte ne contient pas l'image flottante (".selnews img") quand le texte de
       l'article est plus court qu'elle : elle déborde alors de la bordure/du fond en bas. */
    display: flow-root;
}
.selnews .wrapper_pouces { width: 110px; }
.selnews .wrapper_pouces a { padding: 0px; }
table .wrapper_pouces a { padding: 0px; }
/* .table.achats a (2 classes) est plus spécifique que la règle générale ci-dessus (1 classe +
   2 éléments) et lui vole donc son padding : on rajoute .achats ici pour regagner en spécificité
   et garder ces <a> à 0px de padding même dans un tableau "achats". */
.table.achats .wrapper_pouces a { padding: 0px; }

.selnews table {
    /* Le titre garde toute la largeur : seule l'image ci-dessous (après le titre dans le
       HTML) flotte à côté du texte de l'article, pas à côté du titre. */
    width: 100%;
}

.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,
.comment-text {
    text-align: justify;
    /* "inter-character" étire l'espace entre chaque lettre (pensé pour le CJK) : sur du texte
       français ça donne des mots trop espacés. On garde la justification par défaut (entre les
       mots) et on ajoute la coupure automatique des mots pour éviter les grands blancs en fin de
       ligne ; ça s'adapte tout seul à la largeur du conteneur donc reste responsive. */
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    overflow-wrap: break-word;
    /* Explicite plutôt que "normal" (par défaut) : sans ça, la hauteur de ligne dépend des
       métriques de la police effectivement héritée à cet endroit précis (variable d'une page à
       l'autre selon que la police "blue" s'applique ou retombe sur une police système) — d'où
       19.5px sur galerie.php contre 18px ailleurs pour un même texte, sans aucune règle
       "line-height" explicite en cause. Fixé à 18px partout, comme déjà obtenu sur les autres pages. */
    line-height: 18px;
}

.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 a { display: block; }
.pouces span {
    margin-right: 12px;
    margin-left: 4px;
}
/* Compteurs de likes/commentaires : ces span vivent dans des boîtes de largeur
   fixe (30-31px, voir include/pouces.php). La règle ".selnews span" plus haut
   force overflow-wrap: break-word sur tout le texte des news, ce qui coupe un
   nombre à 2 chiffres au milieu (ex: "10" -> "1" / "0") dès qu'il dépasse la
   boîte de quelques pixels. On empêche ce retour à la ligne ici : le nombre
   déborde visuellement de la boîte plutôt que de se couper sur deux lignes. */
.pouces span,
span.selectioncol {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}


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;
}
/* Bouton Discord du header (include/header.php) : réutilise la mise en forme de ".icon"
   (largeur/centrage) mais doit, contrairement au hamburger, rester visible à toutes les tailles
   d'écran — le "!important" l'emporte sur les règles de masquage ci-dessous, qu'elles visent
   ".icon" spécifiquement ou les <li> du menu en général (voir les media queries plus bas). */
.menubar li.discordbtn {
    display: inline-block !important;
}
.discordbtn .fa-discord {
    transition: color 0.2s linear 0s;
}
.discordbtn:hover .fa-discord {
    color: #5865f2;
}
.menubar li.icon a {
    /* Centrage fiable (indépendant des métriques de la police d'icônes) plutôt que de compter
       sur l'alignement "baseline" par défaut d'un inline-block dans la ligne de 64px de haut du
       ".menubar li" parent. */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

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

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

/* #topmenubar est scindé en 3 <ul> (voir header.php) : le logo (".menubar-left"), les liens du
   milieu Boutique/Serveur/Media (".menubar-scroll") et la tête de profil + le hamburger
   (".menubar-right"). Seule la zone du milieu défile horizontalement (overflow-x:scroll) quand
   son contenu ne tient plus sur une ligne ; logo et tête/hamburger restent hors de cette zone,
   donc toujours visibles aux deux bords, sans jamais pouvoir passer sous le texte qui défile.
   (Avant : un seul <ul> avec logo/tête/hamburger en position:sticky à l'intérieur de la zone qui
   défile — la position "collée" ne réservait pas sa propre place dans le flux et pouvait donc se
   peindre par-dessus les liens du milieu dès qu'ils apparaissaient/s'élargissaient, par ex. au clic
   sur le hamburger. Le fond plein (var(--color1)) derrière toute la barre vient de #navfix, une
   couche séparée à part — inutile d'en remettre un ici.) */
#topmenubar {
    display: flex;
    overflow-x: visible;
}
#topmenubar .menubar-left,
#topmenubar .menubar-right {
    flex: 0 0 auto;
}
#topmenubar .menubar-scroll {
    flex: 1 1 auto;
    min-width: 0; /* indispensable pour qu'un flex item accepte de rétrécir sous la taille de son contenu et laisse ainsi son overflow-x:scroll faire le travail */
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
}
/* Menu déplié (clic sur le hamburger, ".responsive" ajoutée sur #topmenubar par
   unhide_responsive() dans header.php) : on repasse en un seul rang dans l'ordre du DOM —
   StillCraft, Boutique, Serveur, Media, tête de profil, hamburger, à la suite les uns des autres,
   exactement comme sur un écran large — au lieu des 3 zones figées/qui défilent séparément
   ci-dessus (utiles seulement replié, pour garder logo et tête/hamburger visibles pendant qu'on
   fait défiler les liens du milieu). ".menubar-scroll" redevient donc un simple élément de la
   ligne (flex: 0 0 auto, plus de défilement propre) et c'est toute la barre qui défile d'un bloc
   si le menu déplié ne tient pas sur l'écran. */
#topmenubar.responsive {
    overflow-x: scroll;
}
#topmenubar.responsive .menubar-scroll {
    flex: 0 0 auto;
    overflow-x: visible;
}

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

/* GALERIE DE MÉDIAS (galerie.php) — screenshots et vidéos des joueurs */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--margin-len);
}
.media-card {
    border-radius: var(--border-radius);
    border: calc(var(--border-len)/2) solid var(--color1);
    background-color: var(--color2);
    overflow: hidden;
}
.media-card > a {
    /* Sans ça, ce <a> (autour d'un screenshot) reste "inline" par défaut : même si l'image
       dedans est en width:100%, sa propre boîte (donc la zone cliquable) ne s'étire pas pour
       couvrir toute la largeur de la carte. */
    display: block;
}
.media-card-media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Filet de sécurité si "aspect-ratio" n'est pas respecté sur une image cassée (lien mort) :
       260px est la largeur minimale d'une carte (".media-grid"), donc la plus petite hauteur
       16:9 possible. Sans effet sur une iframe vidéo, déjà correctement dimensionnée par
       aspect-ratio. */
    min-height: 146px;
    object-fit: cover;
    /* Occupe tout l'espace prévu même si l'image ne charge pas, plutôt que de laisser voir le
       fond de la carte derrière une petite icône d'image cassée. */
    background-color: var(--color1);
    border: 0; /* iframe vidéo : pas de bordure par défaut du navigateur */
}
.media-card-body {
    padding: var(--padding-len);
}
.media-card-body .avatar {
    /* Taille fixe (le float:left vient du <a> qui l'enveloppe, comme pour la tête d'un
       commentaire de news) : le pseudo/les coordonnées/la description contournent la tête puis
       repassent pleine largeur une fois l'image dépassée. */
    width: 40px;
    height: 40px;
    margin: 0 10px 10px 0;
}

/* Page d'un joueur (?joueur=...) : un <table class="table achats"> à la manière des
   commentaires de news, deux lignes par média (auteur/description/pouces, puis le média). La
   tête (".table td .avatar") et la structure de cellule (".row_link") réutilisent déjà le
   style des commentaires ; seul le média lui-même a besoin d'une règle dédiée. */
.media-row-photo {
    display: block;
    width: 100%;
    /* Contrairement à une carte de la file d'attente : pas de recadrage 16:9, l'image garde
       son ratio d'origine et s'affiche en entier, comme dans l'ancien site. */
    height: auto;
}
.media-row-video {
    display: block;
    width: 100%;
    /* Une vidéo n'a pas de ratio "naturel" comme une image (une iframe ne sait pas se
       dimensionner toute seule) : on fixe du 16:9, le format YouTube standard. */
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}
/* Cellule du média (image ou vidéo) dans une ligne de galerie.php : pas de surlignage au survol
   (contrairement aux autres cellules de ".table"), voir media_row(). */
.table td.media-no-hover:hover {
    background-color: var(--color2);
}
/* Le texte principal (description d'un média, texte d'un commentaire...) a sa propre ligne de
   tableau juste après celle du pseudo (voir media_row() dans galerie.php et les commentaires de
   news dans index.php) : il doit se lire comme un prolongement de cette cellule, pas comme une
   ligne à part — pas de bordure entre les deux... */
.table .table-descr-row {
    /* ".table td" (classe + élément, donc plus spécifique qu'un simple ".table-descr-row")
       fixe déjà border-top : il faut au moins autant de spécificité ici pour le remplacer. */
    border-top: 0;
}
/* Sans bordure entre pseudo et description, la croix de suppression (ligne du pseudo) perd sa
   bordure inférieure : elle venait du border-top de la ligne suivante, maintenant à 0. On la
   redessine manuellement, seulement quand une ligne description suit vraiment. */
.table tr:has(+ tr > .table-descr-row) > .delete_item {
    border-bottom: calc(var(--border-len)/2) solid var(--color1);
}
/* ...et le survol de l'une des deux cellules surligne aussi l'autre (":has()" avec un
   combinateur de fratrie : une ligne qui a une ligne suivante dont ".table-descr-row" est
   survolée, ou une ligne suivant une ligne dont la première cellule est survolée). */
.table tr:has(+ tr > .table-descr-row:hover) > td:first-child,
.table tr:has(> td:first-child:hover) + tr > .table-descr-row {
    background-color: var(--color3_opa075);
}

/* 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";
}
.fa-times:before {
    content: "\f00d";
}
.fa-check:before {
    content: "\f00c";
}
.fa-hourglass-half:before {
    content: "\f252";
}
/* Choisie à l'époque où le site n'avait que FontAwesome 4.7, qui n'a pas d'icône "receipt"
   (ajoutée seulement en v5+) : fa-file-text restait le plus proche disponible. La police a depuis
   été mise à niveau vers la v6 (voir le @font-face plus haut) mais ce choix n'a pas été revu. */
.fa-file-text:before {
    content: "\f15c";
}
.fa-caret-left:before {
    content: "\f0d9";
}
/* Pouces et commentaires (include/pouces.php). */
.fa-thumbs-up:before {
    content: "\f164";
}
.fa-thumbs-down:before {
    content: "\f165";
}
.fa-comment:before {
    content: "\f075";
}
/* États d'une suggestion (voir suggestions.php). */
.fa-lock:before {
    content: "\f023";
}
.fa-gear:before {
    content: "\f013";
}
/* Tourne doucement sur elle-même tant qu'une suggestion est "En attente" (voir suggestions.php). */
.fa-gear {
    display: inline-block;
    animation: spin-slow 3s linear infinite;
}
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* Type d'une entrée du changelog ("int" = site internet, "term" = serveur, voir changelog.php). */
.fa-earth-europe:before {
    content: "\f7a2";
}
.fa-server:before {
    content: "\f233";
}
/* Plugin suivi manuellement, sans version connue à comparer (voir plugins.php). */
.fa-circle-question:before {
    content: "\f059";
}
/* Icône Discord (bouton du header, voir include/header.php) : seule icône de marque du site, donc
   seule à piocher dans l'ancienne police v4 plutôt que la v6 Solid (voir le @font-face plus haut). */
.fa-discord {
    font-family: "FontAwesome 4";
}
.fa-discord:before {
    content: "\f392";
}
/* Pastille d'alerte de nouveau contenu (voir include/header.php et include/init.php). */
.fa-circle-exclamation:before {
    content: "\f06a";
}
/* Effet "beat" repris de l'addon Animate CSS de FontAwesome (voir circle-exclamation?an=beat) :
   légère pulsation, pour attirer l'oeil sur ces pastilles sans être aussi appuyé qu'un
   clignotement. */
.fa-beat {
    animation: fa-beat 1s ease-in-out infinite;
}
@keyframes fa-beat {
    0%, 90% { transform: scale(1); }
    45% { transform: scale(1.25); }
}
/* Pastille d'alerte générique (nouveau contenu ou nouveau message, voir include/header.php,
   messagerie.php) : position absolute (top/left ou top/right précisés au cas par cas via un style
   en ligne, comme ".messagerie-badge-avatar" avant elle) sur un ancêtre déjà positionné, sans
   changer la taille de cet ancêtre. */
.alert-badge {
    position: absolute;
    font-size: 14px;
    color: var(--color6);
}

/* 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;
    /* La boîte suit le curseur et peut donc se retrouver SOUS lui (surtout près d'un bord
       d'écran, où elle est repositionnée à gauche/en haut du curseur plutôt qu'à droite/en bas).
       Sans ça, un mousemove sur la boîte elle-même (plutôt que sur l'élément ".minetip" en
       dessous) la faisait disparaître (voir le "closest('.minetip')" dans include/header.php),
       puis réapparaître au mousemove suivant sur l'élément redécouvert — d'où le clignotement. */
    pointer-events: none;
    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);
}
/* Une ligne du minetip (voir parseMinecraftColors() dans include/header.php, qui enveloppe
   chaque ligne dans son propre ".minetip-line") tronque avec des points de suspension
   indépendamment des autres lignes. Fait exprès par ligne plutôt que sur ".popbox" en entier :
   chaque ligne peut avoir sa propre couleur Minecraft de fin (voir la classe "mc-color mc-X"
   ajoutée à côté par la même fonction), et un ellipsis emprunte la couleur/l'ombre de l'élément
   qui tronque lui-même, jamais celle d'un <font> imbriqué à l'intérieur.
*/
.popbox .minetip-line {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /* "width: fit-content" (pas juste "max-width: 100%") : ".popbox" lui-même n'a pas de largeur
       fixe, il se dimensionne sur sa ligne la plus large (shrink-to-fit). Un bloc en overflow
       hidden + ellipsis sans largeur propre (juste "width: auto", 100% du parent par défaut) ne
       remonte plus sa largeur naturelle vers ".popbox" pour ce calcul — dépendance circulaire qui
       faisait tronquer certaines lignes bien plus tôt que d'autres, indépendamment de leur
       longueur réelle. "fit-content" redonne à chaque ligne sa taille naturelle (comme le ferait
       un inline-block), tout en gardant "max-width: 100%" pour tronquer si ÇA dépasse la largeur
       déjà choisie pour ".popbox".
    */
    width: fit-content;
    max-width: 100%;
}

.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);
}

/* Un <input> est mono-ligne par nature (contrairement à un <textarea>, qu'on ne veut pas
   contraindre pareil : son texte réellement tapé doit pouvoir revenir à la ligne) : si son
   placeholder ou le texte saisi dépasse la largeur de la case, on tronque avec des points de
   suspension plutôt que de laisser le texte déborder sans indication. */
input.input_form {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Contrairement à un <input>, un <textarea> retourne à la ligne son placeholder comme du
   texte normal : sur un petit écran, "Écrivez un commentaire..." (par ex.) passe sur deux
   lignes. On force une seule ligne, avec des points de suspension si ça ne tient pas. */
textarea.input_form::placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Un <select class="input_form"> garde sinon son chrome natif (surtout notable sur iOS), qui
   ignore le padding CSS ci-dessus et colle le texte contre le bord gauche : on l'enlève et on
   redessine une petite flèche à la place de celle, native, qu'on vient de retirer. */
select.input_form {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--padding-len) center;
    /* Un SVG sans width/height propre n'a pas de taille intrinsèque : sans background-size
       explicite, certains navigateurs le remplacent par la taille par défaut d'un élément
       remplacé (300x150), ce qui rend la flèche énorme. */
    background-size: 16px 16px;
    padding-right: calc(var(--padding-len) * 2 + 10px);
    /* Avec le padding vertical complet de .input_form (15px) dans une hauteur fixée par du HTML
       (48px), il ne reste qu'environ 15px pour le texte lui-même : trop juste pour un texte à
       15px de police avec des descendantes (g, j, p...), qui se retrouvent alors coupées par
       le rendu natif du <select> sur iOS. Ce champ n'a pas besoin d'autant de padding vertical
       que les champs de saisie : on le réduit pour laisser de la place au texte. */
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Le survol doit changer la couleur normalement quand la liste est fermée, mais pas continuer à
   clignoter une fois la liste déroulante ouverte : le survol de la boîte fermée dépend alors
   littéralement de la position du curseur, et passer la souris sur la liste (une fenêtre
   native, pas cette boîte) fait varier :hover sans rapport avec ce que fait l'utilisateur. Le
   focus, lui, reste vrai tant que la liste est ouverte quelle que soit la position du curseur :
   on l'utilise pour figer la couleur pendant ce temps-là. */
select.input_form:hover:not(:focus) {
    background-color: var(--color3_opa075);
}
select.input_form:focus {
    background-color: var(--color2);
}

.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;
    /* Explicite, comme font-family juste au-dessus — pas seulement hérité de ".content" : Firefox
       a une règle interne ("quirk.css", visible dans le panneau Computed) qui empêche font-size de
       s'hériter dans un <table>, contrairement à font-family qui passe très bien puisqu'il est fixé
       ici même. Sans ce doublon, un <table class="table"> retombe alors sur 16px (la taille par
       défaut du navigateur) au lieu des 15px de --font-size-normal — d'où le texte visiblement
       plus gros constaté sur galerie.php. */
    font-size: var(--font-size-normal);
    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,
.table .row_link {
    display: flex;
    padding: var(--padding-len);
    align-items: center;
    width: 100%;
    /* min-width:0 : cet élément est généralement lui-même un enfant flex (de ".table td", voir
       echo_avatar_line2() dans include/avatar_row.php et son usage sur galerie.php/messagerie.php/
       tutoriels.php/suggestions.php/changelog.php) — sans ça, il refuse par défaut de rétrécir
       sous la taille de son contenu, ce qui empêchait la 2e ligne "white-space:nowrap" de se faire
       tronquer en "…" plutôt que déborder. */
    min-width: 0;
    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;
    font-size: 18px;
    border-left: calc(var(--border-len)/2) solid var(--color1);
}
.table .icon_item{
    padding: 0px;
    width: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 20px;
    border-left: calc(var(--border-len)/2) solid var(--color1);
}

/* Cellule de détail d'un achat, sur deux lignes (titre + sous-titre), comme dans galerie.php.
   Padding réduit de moitié par rapport à .table a pour retrouver la même hauteur de ligne. */
.table.achats a,
.table.achats .row_link {
    height: auto;
    padding: calc(var(--padding-len)/2);
    white-space: normal;
    overflow: visible;
}
/* Contrepartie de ".row_link" : un <a> imbriqué dans une cellule (ex: la tête d'un
   commentaire qui ramène vers l'armurerie) est quand même un descendant de ".table" et
   hérite donc des styles ci-dessus (padding, width:100%, display:flex) prévus pour le lien
   qui structure toute la cellule. Cette règle l'en dispense pour qu'il ne fasse plus que la
   taille de son contenu. Placée après ".table.achats a" pour la primer à spécificité égale. */
.table .row_link a {
    display: block;
    width: auto;
    padding: 0;
}
.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));
}
/* :first-child ne veut dire "première ligne du tableau" que s'il n'y a qu'un seul tbody. Sur
   plugins.php, #updatedplugins est un second tbody caché par défaut : sa première ligne hérite
   quand même de .table tr:first-child (border-top:0 + coins arrondis), ce qui laisse un trou à
   l'endroit où le tableau visible s'arrêtait avant de le déplier. On restaure la bordure normale
   ici, comme s'il ne s'agissait pas d'un premier enfant.
*/
#updatedplugins tr:first-child td {
    border-top: calc(var(--border-len)/2) solid var(--color1);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/* Même souci que ci-dessus pour le fil de messagerie (messagerie.php), mais dans l'autre sens :
   #oldmessages est le premier tbody (les anciens messages, repliés par défaut, doivent apparaître
   au-dessus des récents une fois dépliés) et #recentmessages le second, toujours affiché. Tant que
   #oldmessages reste caché, #recentmessages est bien le haut visuel du tableau et n'a besoin
   d'aucune correction. Une fois déplié (classe "old-shown" posée sur la table par le bouton
   "Afficher les anciens messages"), on restaure la bordure/les coins carrés de #recentmessages
   (qui n'est plus le haut du tableau) et on retire le coin arrondi bas que #oldmessages garde
   sinon indûment (il n'est plus non plus le bas du tableau). */
#messagerie-table.old-shown #recentmessages tr:first-child td {
    border-top: calc(var(--border-len)/2) solid var(--color1);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
#messagerie-table.old-shown #oldmessages tr:last-child td:first-child,
#messagerie-table.old-shown #oldmessages tr:last-child td:last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.table td:hover {
    background-color: var(--color3_opa075);
}
.table .wrapper_pouces{
    margin-left: auto;
    display: flex;
    align-items: center;
}
/* Ligne réservant sa place à l'avance pour un ".wrapper_pouces" à 2 widgets côte à côte
   (pouce_id(...,400) : pouce + lien commentaires, ~55px chacun, 110px ensemble — voir
   tutoriels.php). Sans ça, le lien de la ligne (calé sur ".table a", qui ne réserve que 55px par
   défaut) grignote la moitié de cette place et les 2 widgets se retrouvent l'un sous l'autre en
   permanence plutôt que seulement sur petit écran, comme pour les news (".selnews .wrapper_pouces").
   ".link-2-pouces" doit donc remplacer ".table a" par défaut au lieu de s'y ajouter — d'où le
   "width" répété explicitement plutôt qu'un simple calc(100% - 55px) hérité. */
.table .link-2-pouces { width: calc(100% - 110px); }
.table .wrapper-2-pouces { width: 110px; }
@media screen and (max-width: 499px) {
    /* Comme pour ".wrapper-3-pouces" (suggestions.php) : sous 500px, le lien commentaires
       (".pouce-comments") est masqué plutôt que poussé à la ligne suivante, pour gagner de la
       place — même principe homogénéisé entre les deux tailles de wrapper_pouces. */
    .wrapper-2-pouces .pouce-comments { display: none; }
    .table .link-2-pouces { width: calc(100% - 55px); }
    .table .wrapper-2-pouces { width: 55px; }
}
/* Même principe pour un ".wrapper_pouces" à 3 widgets côte à côte (pouce haut + pouce bas + lien
   commentaires, ~55px chacun, 165px ensemble — pouces_id(...,100), voir suggestions.php). 170px
   plutôt que 165px pile : sans marge, le moindre arrondi de sous-pixel du navigateur suffisait à
   faire passer le 3e widget à la ligne même avec largement la place. Pour gagner de la place sur
   petit écran, on masque des widgets plutôt que de les faire passer à la ligne : le pouce "bas"
   (".pouce-down") sous 800px, puis les commentaires (".pouce-comments") sous 500px — la largeur
   réservée est réduite d'autant à chaque palier (un widget de moins = 55px de moins). */
.table .link-3-pouces { width: calc(100% - 170px); }
.table .wrapper-3-pouces { width: 170px; }
@media screen and (max-width: 799px) {
    .wrapper-3-pouces .pouce-down { display: none; }
    .table .link-3-pouces { width: calc(100% - 110px); }
    .table .wrapper-3-pouces { width: 110px; }
}
@media screen and (max-width: 499px) {
    .wrapper-3-pouces .pouce-comments { display: none; }
    .table .link-3-pouces { width: calc(100% - 55px); }
    .table .wrapper-3-pouces { width: 55px; }
}
.table td .avatar{
    width: 40px;
    height: 40px;
    margin-right: calc(var(--padding-len)/2);
}

/* Même emplacement/gabarit que .avatar, pour un emoji à la place d'un avatar de joueur */
.table td .avatar-emoji{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 28px;
    margin-right: calc(var(--padding-len)/2);
    flex-shrink: 0;
}

/* Safari/iOS n'hérite pas de font-size (ni font-family, en principe déjà fixé ci-dessous) sur
   les champs de formulaire comme le reste des navigateurs : sans ce rappel explicite, un input
   garde la taille système par défaut au lieu de var(--font-size-normal), ce qui n'est visible
   que sur un vrai appareil (les outils développeurs, même en mode "iPhone", restent le moteur
   du navigateur de bureau et n'ont pas ce comportement). */
input, select, textarea, button {
    /* padding: var(--padding-len); */
    box-sizing: border-box;
    background: none;
    /* height: 45px; */ 
    border: 0px;
    font-family: blue;
    font-size: var(--font-size-normal);
    transition: 0.2s linear all;
    color: white;
}

input:focus {
    outline: none;
}

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

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

/* MESSAGERIE */

/* Liste des conversations : réutilise ".table.achats" (voir compte.php), juste une couleur de
   fond différente (plutôt que du gras) pour attirer l'oeil sur les lignes contenant des messages
   non lus. Spécificité (.table .messagerie-non-lu td, 3 sélecteurs) suffisante pour l'emporter sur
   le fond par défaut de ".table td" (2 sélecteurs) ; ":hover" garde la priorité au survol. */
.table .messagerie-non-lu td {
    background-color: var(--color4_opa05);
}
/* Même spécificité que ".table td:hover" (0,2,1) : sans ce rappel explicite (0,3,1), le survol
   d'une ligne non lue retomberait sur le survol normal du tableau (color3_opa075) au lieu de
   rester dans la même teinte que le fond non lu, juste plus opaque. */
.table .messagerie-non-lu td:hover {
    background-color: var(--color4_opa075);
}

/* Le fil de discussion réutilise tel quel le rendu d'un média sur sa page joueur (voir
   media_row() dans galerie.php et echo_message_row() ci-contre) : un <table class="table achats">
   par message, avec ".delete_item" et ".table-descr-row" déjà stylées plus haut — rien de
   spécifique à ajouter ici. */

/* 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) {
    /* ":not(.header_stillcraft)" (plutôt que l'ancien ":not(:nth-child(1))") : le logo n'est plus
       forcément le 1er enfant de ".menubar" depuis que #topmenubar est scindé en 3 <ul> (voir
       header.php et ".menubar-left/-scroll/-right" plus haut) — cibler sa classe reste correct
       quelle que soit la structure. */
    .menubar li:not(.header_stillcraft):not(.active):not(.default_active) {display: none;}
    .menubar li.icon { display: inline-block !important; }
    .selnews .wrapper_pouces { width: 55px; }
    /* Le bouton "Retour" ne garde que son icône, pour ne pas prendre toute la place à côté
       du titre de la page sur un petit écran. */
    .back-btn-text { display: none; }
}
@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; }
    .selnews .wrapper_pouces { width: 110px; }
}
@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; }
    /* Seul le span du pseudo doit disparaître ici (pour ne garder que l'avatar) : ":not(.avatar-wrap)"
       exclut le span qui enveloppe l'image elle-même (voir header.php), sans quoi cette règle la
       masquait aussi — c'est ce qui faisait disparaître la tête sous 800px. La pastille d'alerte
       imbriquée dedans (".alert-badge") n'a plus besoin de sa propre exception : c'est un <i>, pas
       un <span>, donc ce sélecteur ne peut de toute façon pas la cibler. */
    .header_profil span:not(.avatar-wrap) { display: none; }
}
@media screen and (min-width: 520px) and (max-width: 599px){
    /* En dessous de 600px, seul "Media" disparaît (dans le menu hamburger) ; "Serveur" reste visible. */
    .menubar li:not(.vw3_active):not(#toggle_dropdown_1) { display: none; }
    .cardtitle { width: calc(100% / 2 - 2 * var(--border-len)); }
}
@media screen and (min-width: 400px) and (max-width: 519px){
    /* En dessous de 530px, "Serveur" disparaît aussi. */
    .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;
    }
}
/* Le hamburger (une fois affiché, que ce soit par la règle ci-dessus ou par
   ".menubar-overflow" — voir check_menubar_overflow() dans header.php) doit toujours pouvoir
   tout révéler au clic, quelle que soit la largeur d'écran : ces deux règles ne sont donc pas
   limitées à une media query, contrairement à avant. */
.menubar.responsive li {
    display: inline-block !important;
    text-align: left;
}
.menubar .rightbox {
    float: none;
}
/* Filet de sécurité : affiche aussi le hamburger dès que la barre déborde réellement
   (scrollWidth > clientWidth de ".menubar-scroll", mesuré par check_menubar_overflow() dans
   header.php), même à une largeur où les seuils fixes ci-dessus ne l'auraient pas prévu (pseudo
   très long, traduction, nouvel item de menu...). */
.menubar-overflow .menubar li.icon {
    display: inline-block !important;
    margin-left: 0px;
}

/* 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;
    }
}
@media screen and (max-width: 349px) {
    .selnews .wrapper_pouces { width: 55px; }
}
/* Le nombre de têtes affichées dans .playerlist (donateurs / joueurs en ligne) n'est plus
   piloté par des paliers de largeur d'écran fixes ici, mais dynamiquement en JS (voir
   include/header.php) : autant de têtes que possible tiennent sur une seule ligne, quelle
   que soit la largeur réelle disponible. */