/*
 * Blablaland.js : habillage du site, d'après blablaland.com (version 2013-2016).
 * Gabarit : barre sombre en haut, en-tête 1000 px (logo + cadre de connexion blanc translucide),
 * menu rose arrondi, page sur le décor fond_site.jpg, pied de page blanc à bandeau rose.
 * Les balises personnalisées (topbar, topsite, header_info…) sont aussi utilisées par flash.html.
 */

:root {
    --rose: #f50085;
    --rose-clair: #ff7ac2;
    --bleu: #01b4ff;
    --ciel: #65c3ff;
    --vert: #9de500;
    --texte: #666666;
    --box-vert: #95cc00;
    --box-violet: #b06de1;
    --box-rose: #f876e0;
    --box-orange: #ffa101;
    --box-bleu: #3ec3ff;
}

/* --- Remise à zéro (comme _base.css d'origine) --- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, img, small, strong, b, u, i,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tr, th, td, menu {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
ol, ul, menu, li { list-style: none; }
a { text-decoration: none; color: var(--bleu); }
a:hover { color: var(--rose); }
img { vertical-align: middle; }

topbar, topbar_cont, topbar_info, deco, topsite, header_info, header_profil, my_avatar,
profil_login_box, menu_cta, page, message, content, site_footer, footer_cut, footer_cont,
skin_badge, signup_box, bbl_box, box_tab, box_in, box_title, box_body, skin_showcase,
skin_picker, skin_colors, skin_desc, skin_grid, profil_infos, profil_layout {
    display: block;
}

/* Sous le pied de page : même blanc grisé, le bleu de body s'arrête au contenu. */
html { background: #f3f3f3; }
body {
    margin: 0;
    min-width: 1000px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: var(--texte);
    background-color: var(--ciel);
}

/* Décor : fond_site.jpg derrière l'en-tête et le haut de la page. Pour flash.html (sans <deco>),
   le fond est posé sur body. */
body:not(:has(deco)) {
    background: var(--ciel) url(img/fond_site.jpg) no-repeat center 12px;
}
deco {
    width: 100%;
    min-width: 1000px;
    padding-bottom: 30px;
    background: url(img/fond_site.jpg) no-repeat center -10px;
}

/* --- Barre du haut (N99_BAR) --- */
topbar {
    height: 22px;
    line-height: 22px;
    background-color: #3c434c;
    font-size: 11px;
    overflow: hidden;
}
topbar a {
    display: block;
    float: left;
    padding: 0 15px;
    background: #3c434c;
    color: #3edeff;
    font-size: 11px;
    text-decoration: none;
}
topbar a[href]:hover,
topbar a.active {
    background: #3edeff;
    color: #fff;
}
topbar a.active { font-weight: bold; }
topbar_info {
    float: right;
    padding-right: 8px;
    color: var(--bleu);
    font-size: 10px;
}
topbar_info strong { color: #3edeff; }
topbar_info em { font-style: normal; color: #ffde00; font-weight: bold; }

/* --- En-tête (HEADER) --- */
topsite {
    width: 1000px;
    margin: 0 auto;
}
topsite::after { content: ""; display: block; clear: both; }
topsite > img,
topsite > a.logo {
    display: block;
    float: left;
    width: 740px;
    height: 111px;
    overflow: hidden;
}
topsite > a.logo img { display: block; }

header_info {
    width: 260px;
    height: 111px;
    float: right;
    background: url(img/FFFFFF_50.png) repeat;
    background: rgba(255, 255, 255, 0.8);
}
header_profil {
    padding: 8px 2px 2px 8px;
}
header_profil::after { content: ""; display: block; clear: both; }

my_avatar {
    width: 94px;
    height: 94px;
    float: left;
    text-align: center;
}
my_avatar > img,
my_avatar > a > img {
    width: 94px;
    height: 94px;
    border-radius: 5px;
}

/* Avatar d'un joueur connecté : fourni par le serveur sous la forme <skin_badge>Skin<b>ID</b></skin_badge>.
   js/site.js y ajoute l'aperçu du skin quand il existe (classe has_preview). */
skin_badge {
    position: relative;
    width: 94px;
    height: 94px;
    border-radius: 8px;
    box-sizing: border-box;
    padding-top: 22px;
    overflow: hidden;
    background: #fff linear-gradient(to bottom, #d8f1ff, #fff 70%);
    box-shadow: inset 0 0 0 1px #b9c6cc;
    color: var(--bleu);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 10px;
    line-height: 16px;
    text-transform: uppercase;
}
skin_badge b {
    display: block;
    font-size: 24px;
    line-height: 28px;
    color: var(--rose);
}
skin_badge img {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 86px;
    height: 72px;
    object-fit: contain;
}
skin_badge.has_preview { padding-top: 0; }
skin_badge.has_preview b {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    font-size: 10px;
    line-height: 14px;
}
skin_badge.has_preview b::before { content: "n°"; }
my_avatar a:hover skin_badge { box-shadow: inset 0 0 0 2px var(--rose); }

profil_login_box {
    width: 141px;
    float: left;
    padding-left: 10px;
}
profil_login_box form { padding-top: 2px; }

/* Joueur connecté : le serveur met <h1>pseudo</h1><a>Mon profil</a><br><a>Déconnexion</a> */
profil_login_box h1 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 18px;
    line-height: 26px;
    color: var(--rose);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
profil_login_box h1 + a,
profil_login_box h1 ~ a {
    display: block;
    width: 126px;
    height: 17px;
    line-height: 17px;
    padding-left: 10px;
    margin-bottom: 4px;
    border-radius: 5px;
    background: #fff;
    color: var(--bleu);
    font-size: 11px;
    font-weight: bold;
    transition: background-color .1s ease-out, padding-left .1s ease-out, width .1s ease-out;
}
profil_login_box h1 ~ a:hover {
    background: var(--vert);
    color: #fff;
    width: 121px;
    padding-left: 15px;
}
profil_login_box h1 ~ br { display: none; }

.login_box_input {
    display: block;
    width: 139px;
    height: 27px;
    box-sizing: border-box;
    padding: 5px;
    margin: 0 0 5px;
    border: 1px solid #b9c6cc;
    border-radius: 5px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
    background: #fff;
    color: #666;
    font: 13px Arial, Helvetica, sans-serif;
    outline: none;
}
.login_box_input::placeholder { color: #bbb; }
.login_box_input:focus { box-shadow: 0 0 5px var(--bleu); }

.login_box_ok {
    float: right;
    min-width: 30px;
    height: 25px;
    padding: 0 6px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    background-color: var(--rose);
    color: #fff;
    font: 11px Arial, Helvetica, sans-serif;
    text-align: center;
    cursor: pointer;
}
.login_box_ok:hover,
.login_box_ok:focus { background-color: var(--rose-clair); }

a.login_lost {
    display: block;
    float: left;
    width: 100px;
    padding-top: 1px;
    font-size: 10px;
    line-height: 12px;
    color: var(--bleu);
}
a.login_lost:hover { color: var(--bleu); font-weight: bold; text-decoration: underline; }

/* --- Menu rose (MENU) --- */
menu {
    position: relative;
    z-index: 500;
    clear: both;
    height: 40px;
    background-color: var(--rose);
    border-radius: 0 0 10px 10px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
}
menu ul { float: left; height: 40px; }
menu li {
    float: left;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
}
menu li a {
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 5px;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
menu a:link,
menu a:visited { color: #fff; }
menu li a span {
    padding: 2px 5px;
    border-radius: 5px;
}
menu li a:hover span,
menu li a:focus span,
menu li a.menu_selected span {
    color: var(--rose);
    background-color: #fff;
    text-shadow: none;
}
menu li.menu_btn_home a {
    padding: 0 10px;
    border-radius: 0 0 0 10px;
}
menu li.menu_btn_home a:hover { background: rgba(255, 255, 255, 0.5); }
menu li.menu_btn_home svg { display: block; margin-top: 12px; }

menu li.menu_btn_jouer {
    padding: 0 5px;
    font-size: 21px;
    background-color: var(--vert);
}
menu li.menu_btn_jouer a span { padding: 2px 8px; }

menu_cta {
    float: right;
    width: 245px;
    height: 40px;
    text-align: center;
}
menu_cta a,
menu_cta a:link,
menu_cta a:visited {
    padding: 3px 10px 3px 6px;
    border-radius: 5px;
    background-color: var(--vert);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 16px;
    line-height: 40px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: padding .08s ease-out, font-size .08s ease-out, border-radius .08s ease-out;
}
menu_cta a:hover,
menu_cta a:focus {
    padding: 4px 11px 4px 7px;
    font-size: 18px;
    border-radius: 10px;
}
menu_cta svg { vertical-align: -5px; margin-right: 4px; }
/* Joueur connecté (le cadre d'en-tête contient son pseudo) : pas de bouton d'inscription. */
body:has(profil_login_box h1) menu_cta { display: none; }

/* --- Page --- */
page {
    width: 1000px;
    margin: 0 auto;
    padding-top: 20px;
    min-height: 400px;
}

/* Le jeu : 950 × 560, centré, ombré comme #DIV_TCHAT_SWF. */
#chat {
    display: block; /* flash.html : swfobject remplace le div par un <object id="chat"> */
    width: 950px;
    height: 560px;
    margin: 0 auto;
    background-color: #a3dafd;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
body:not(:has(page)) #chat { margin-top: 20px; }

page_links {
    display: block;
    width: 950px;
    margin: 12px auto 0;
    text-align: right;
}
a.rounded_alpha {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.5);
    color: var(--bleu);
    font-weight: bold;
}
a.rounded_alpha:hover { background: #fff; color: var(--rose); }

/* Messages du serveur (<message>…</message><br>) : encadré jaune (div_dailybbl). */
message {
    width: 950px;
    box-sizing: border-box;
    margin: 0 auto 10px;
    padding: 10px 14px;
    background: #fff6bb;
    border: 1px solid #ffd800;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.75);
    color: #555;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}
message + br { display: none; }
body:not(:has(page)) message { margin-top: 15px; }
/* Page d'inscription (gabarit de l'accueil sans le jeu) : JOUER n'est pas la page en cours. */
body:has(signup_box) menu li a.menu_selected span {
    color: inherit;
    background: none;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* --- Cadres de contenu (tableaux color_bg_* d'origine) --- */
content {
    width: 950px;
    margin: 0 auto;
}
bbl_box {
    margin-bottom: 15px;
    padding: 0 2px 2px;
    border-radius: 10px 10px 0 0;
    background: var(--box-vert);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
bbl_box.violet { background: var(--box-violet); }
bbl_box.rose { background: var(--box-rose); }
bbl_box.orange { background: var(--box-orange); }
bbl_box.bleu { background: var(--box-bleu); }
box_tab {
    height: 17px;
    line-height: 17px;
    padding-left: 12px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
}
box_in {
    background: #fff;
    padding: 2px;
}
box_title {
    height: 43px;
    line-height: 43px;
    padding: 0 12px;
    background: linear-gradient(to bottom, #c8ecff, #eaf8ff 60%, #fff);
    border-bottom: 1px solid #e3f3fc;
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 26px;
    text-transform: uppercase;
    color: #8f5fe0;
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff,
        0 3px 4px rgba(80, 40, 140, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
box_title::after {
    content: " \2605\2605\2605";
    font-size: 15px;
    letter-spacing: -3px;
    color: #c9a6ff;
    margin-left: 8px;
    text-shadow: none;
    vertical-align: 4px;
}
box_body {
    padding: 15px 18px 18px;
    line-height: 17px;
}
box_body p { margin-bottom: 10px; }
box_body h2 {
    margin: 14px 0 6px;
    color: var(--rose);
    font-size: 14px;
}
box_body a { color: var(--bleu); font-weight: bold; }
box_body a:hover { color: var(--rose); }

/* Bulle d'accueil (comme la page d'aide) */
.bulle {
    position: relative;
    margin: 4px 0 14px 22px;
    padding: 12px 16px;
    border: 1px solid #d7dde2;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.bulle::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 18px;
    border: 10px solid transparent;
    border-left: 0;
    border-right-color: #d7dde2;
}
.bulle::after {
    content: "";
    position: absolute;
    left: -9px;
    top: 19px;
    border: 9px solid transparent;
    border-left: 0;
    border-right-color: #fff;
}
.bulle strong.titre { display: block; margin-bottom: 6px; color: #444; font-size: 13px; }
.info_layout { display: flex; gap: 16px; align-items: flex-start; }
.info_layout > img { flex: none; }
.info_layout > div { flex: 1; }
.encart {
    padding: 10px 14px;
    border: 1px solid #ffd800;
    border-radius: 10px;
    background: #fff6bb;
}

/* Boutons */
.bbl_btn,
input.bbl_btn {
    display: inline-block;
    height: auto;
    padding: 6px 18px;
    border: none;
    border-radius: 8px;
    background: var(--rose);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
    color: #fff;
    font: bold 14px Verdana, Geneva, sans-serif;
    cursor: pointer;
    float: none;
}
.bbl_btn:hover,
input.bbl_btn:hover { background: var(--rose-clair); color: #fff; }
.bbl_btn.vert { background: var(--vert); text-shadow: 0 0 6px rgba(0, 0, 0, 0.3); }
.bbl_btn.vert:hover { background: #b4f21f; }
.bbl_btn.petit { padding: 3px 10px; font-size: 11px; }
.bbl_btn:disabled { opacity: .45; cursor: default; }

/* --- Inscription (inscription.html, insérée par le serveur dans un <message>) --- */
message:has(signup_box) {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    font-weight: normal;
    font-size: 12px;
}
message:has(signup_box) > div {
    width: auto !important;
    height: auto !important;
}
signup_box { text-align: left; }
signup_box .signup_layout {
    display: flex;
    gap: 24px;
    align-items: center;
}
signup_box .signup_perso {
    flex: none;
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background: linear-gradient(to bottom, #8fd6ff, #d9f2ff);
    display: flex;
    align-items: center;
    justify-content: center;
}
signup_box form { flex: 1; max-width: 360px; }
signup_box label {
    display: block;
    margin: 0 0 3px;
    color: var(--rose);
    font-weight: bold;
}
signup_box label small { color: #999; font-weight: normal; }
signup_box .login_box_input { width: 100%; height: 32px; margin-bottom: 12px; }
signup_box .bbl_btn { margin-top: 4px; }
signup_box p.note { margin-top: 12px; font-size: 10px; color: #999; }

/* --- Profil --- */
profil_layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
skin_showcase {
    flex: none;
    width: 220px;
    text-align: center;
}
.div_showskin {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 10px;
    background: url(img/fond_site.jpg) no-repeat 45% 100% / auto 330px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.div_showskin img.skin_preview {
    max-width: 190px;
    max-height: 190px;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3));
}
.div_showskin.missing img.skin_preview { width: 94px; height: 94px; border-radius: 5px; filter: none; }
.div_showskin .preview_note {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 2px 4px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.85);
    font-size: 10px;
    color: #888;
}
.div_showskin:not(.missing) .preview_note { display: none; }
skin_showcase .skin_name {
    margin-top: 8px;
    color: var(--rose);
    font-size: 14px;
    font-weight: bold;
}
skin_showcase .skin_num { color: var(--bleu); font-size: 11px; font-weight: bold; }
skin_showcase small { display: block; margin-top: 6px; font-size: 10px; color: #999; line-height: 13px; }

profil_infos { flex: 1; }
profil_infos h2 {
    margin: 0 0 8px;
    font-size: 22px;
    color: var(--rose);
}
profil_infos ul { columns: 2; column-gap: 12px; }
profil_infos li {
    break-inside: avoid;
    margin-bottom: 5px;
    padding: 4px 10px;
    border-radius: 5px;
    background: #eaf7ff;
    color: #555;
    font-size: 12px;
}
profil_infos li b {
    display: inline-block;
    min-width: 72px;
    color: var(--bleu);
    font-size: 11px;
}

skin_picker { flex: 1; min-width: 0; }
skin_picker .picker_bar {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
skin_picker input[type=search] {
    flex: 1;
    height: 27px;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid #b9c6cc;
    border-radius: 5px;
    font: 12px Verdana, Geneva, sans-serif;
}
skin_picker select {
    width: 100%;
    height: 27px;
    margin-bottom: 8px;
    border: 1px solid #b9c6cc;
    border-radius: 5px;
    font: 12px Verdana, Geneva, sans-serif;
    color: #555;
}
skin_picker button.fleche {
    width: 32px;
    height: 27px;
    border: none;
    border-radius: 5px;
    background: var(--rose);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}
skin_picker button.fleche:hover { background: var(--rose-clair); }
skin_picker .count { color: #999; font-size: 10px; }

/* Défilé des skins (miniatures) */
skin_grid {
    position: relative;
    height: 262px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #f9b3d9;
    border-radius: 8px;
    background: #fff0f8;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    grid-auto-rows: 62px;
    gap: 5px;
}
skin_grid button {
    position: relative;
    padding: 2px;
    border: 1px solid #f3c6df;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
}
skin_grid button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
skin_grid button span {
    position: absolute;
    right: 2px;
    bottom: 1px;
    font-size: 9px;
    color: #aaa;
}
skin_grid button.noimg { color: #bbb; font-size: 10px; }
skin_grid button:hover { border-color: var(--bleu); box-shadow: 0 0 5px var(--bleu); }
skin_grid button.selected { border: 2px solid var(--rose); background: #ffe3f2; }
skin_grid button[hidden] { display: none; }

skin_desc {
    min-height: 17px;
    max-height: 120px;
    overflow-y: auto;
    margin: 10px 0 0;
    line-height: 15px;
    font-size: 11px;
    color: #777;
    font-style: italic;
}

skin_colors {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
    margin: 8px 0;
}
skin_colors input {
    width: 100%;
    box-sizing: border-box;
    height: 27px;
    padding: 2px;
    border: 1px solid #b9c6cc;
    border-radius: 5px;
    text-align: center;
    font: 12px Verdana, Geneva, sans-serif;
    color: #555;
}
skin_colors input:focus { outline: none; box-shadow: 0 0 5px var(--bleu); }
.colors_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}
.colors_head h2 { margin: 0; }
.colors_labels {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
    text-align: center;
    font-size: 10px;
    color: #aaa;
}
.form_actions {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed #e3cfe0;
    display: flex;
    align-items: center;
    gap: 14px;
}
.form_actions small { color: #999; font-size: 10px; line-height: 13px; }

/* Section staff (staffForm() du serveur) */
#staff_box:empty { display: none; }
#form_staff h1 { display: none; }
#form_staff small { display: block; color: #999; font-size: 10px; text-align: center; }
#form_staff .login_box_ok {
    float: none;
    display: block;
    margin: 0 auto;
    height: auto;
    padding: 6px 18px;
    border-radius: 8px;
    font: bold 13px Verdana, Geneva, sans-serif;
}
table.staff {
    margin: 0 auto 8px;
    border-collapse: collapse;
    font-size: 12px;
}
table.staff th,
table.staff td {
    padding: 4px 12px;
    border-bottom: 1px solid #f0e2c6;
}
table.staff th { color: var(--box-orange); }
table.staff select { font: 12px Verdana, Geneva, sans-serif; }

/* --- Pied de page --- */
site_footer {
    min-width: 1000px;
    background: #fff linear-gradient(to bottom, #fff, #f3f3f3);
    font-size: 10px;
}
footer_cut {
    height: 20px;
    background-color: var(--rose);
    border-top: 1px solid #c0c0c0;
}
footer_cont {
    width: 1000px;
    margin: 0 auto;
    padding: 14px 0 22px;
    display: flex;
    gap: 30px;
    line-height: 15px;
}
footer_cont .footer_menu a { display: block; font-weight: bold; color: var(--bleu); font-size: 11px; }
footer_cont .footer_menu a.jouer { font-size: 18px; line-height: 22px; color: var(--rose); }
footer_cont .footer_menu a.inscrire { color: var(--rose); }
footer_cont .footer_menu a:hover { color: var(--rose-clair); }
footer_cont .footer_text { flex: 1; color: #888; }
footer_cont .footer_text strong { color: var(--rose); }

/* --- Profil public (/site/membres.php, rendu par js/membre.js) --- */
profil_public {
    display: block;
    --pp: var(--rose);
    --pp-clair: #ffe3f2;
    margin: 0 auto 20px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    font-family: Verdana, Geneva, sans-serif;
    color: var(--texte);
}
profil_public.couleur_bleu   { --pp: var(--bleu);       --pp-clair: #e0f5ff; }
profil_public.couleur_vert   { --pp: #6fb400;           --pp-clair: #eefad6; }
profil_public.couleur_violet { --pp: var(--box-violet); --pp-clair: #f3e6fc; }
profil_public.couleur_orange { --pp: var(--box-orange); --pp-clair: #fff0d6; }
profil_public.chargement, profil_public.erreur { padding: 30px; text-align: center; }
.pp_attente { font-size: 13px; }

.pp_bandeau {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 22px 26px;
    background: linear-gradient(135deg, var(--pp) 0%, var(--pp-clair) 140%);
    color: #fff;
}
.pp_vitrine {
    flex: none;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 5px solid #fff;
    background: url(/img/fond_site.jpg) no-repeat 45% 100% / auto 260px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pp_vitrine img { max-width: 130px; max-height: 130px; }
.pp_sans_apercu { font: 60px "Arial Black", Arial, sans-serif; color: rgba(255, 255, 255, 0.9); }
.pp_identite { flex: 1; min-width: 0; }
.pp_pseudo {
    font: 34px "Arial Black", Arial, Helvetica, sans-serif;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
    word-break: break-word;
}
.pp_badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.pp_statut, .pp_role {
    font: bold 11px Verdana, Geneva, sans-serif;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--texte);
}
.pp_statut::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: #aaa;
}
.pp_statut.en_ligne { color: #3a8a00; }
.pp_statut.en_ligne::before { background: #4fd000; box-shadow: 0 0 6px #4fd000; }
.pp_role.staff { background: #fff6c8; color: #b07a00; }
.pp_humeur {
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding: 9px 14px;
    border-radius: 14px;
    background: #fff;
    color: var(--texte);
    font-size: 13px;
    font-style: italic;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    word-break: break-word;
}
.pp_humeur::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 12px;
    border: 8px solid transparent;
    border-right-color: #fff;
    border-left: 0;
}
.pp_humeur.vide { opacity: .75; }
.pp_modifier { position: absolute; top: 14px; right: 16px; }

.pp_stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding: 16px 26px;
    background: var(--pp-clair);
}
.pp_stat {
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.pp_stat b {
    display: block;
    font: 20px "Arial Black", Arial, sans-serif;
    color: var(--pp);
}
.pp_stat span { font-size: 11px; }

.pp_colonnes {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 20px;
    padding: 20px 26px 26px;
}
.pp_section h2 {
    font: 15px "Arial Black", Arial, sans-serif;
    color: var(--pp);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--pp-clair);
}
.pp_texte { font-size: 13px; line-height: 19px; white-space: pre-wrap; word-break: break-word; }
.pp_texte.petit { font-size: 11px; line-height: 16px; color: #888; }
.pp_texte.vide { color: #aaa; font-style: italic; }
.pp_skin_nom { font-weight: bold; color: var(--texte); margin-bottom: 6px; }

@media (max-width: 700px) {
    .pp_bandeau { flex-direction: column; text-align: center; }
    .pp_badges { justify-content: center; }
    .pp_modifier { position: static; }
    .pp_colonnes { grid-template-columns: 1fr; }
}

/* --- Édition du profil public (Mon compte) --- */
.pp_edit label { display: block; font-weight: bold; color: var(--texte); margin: 10px 0 4px; font-size: 12px; }
.pp_edit input[type=text], .pp_edit textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font: 13px Verdana, Geneva, sans-serif;
    color: var(--texte);
}
.pp_edit textarea { min-height: 120px; resize: vertical; }
.pp_edit .pp_compteur { float: right; font-weight: normal; color: #aaa; }
.pp_couleurs { display: flex; gap: 8px; }
.pp_couleurs label { margin: 0; }
.pp_couleurs input { display: none; }
.pp_couleurs span {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #ccc;
}
.pp_couleurs input:checked + span { box-shadow: 0 0 0 3px var(--texte); }
.pp_edit_actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.pp_etat { font-size: 12px; color: #3a8a00; }
.pp_etat.erreur { color: #d40000; }
.pp_skin .pp_texte.petit { max-height: 150px; overflow-y: auto; padding-right: 4px; }

/* --- Boutique --- */
/* Page /boutique (site-web/boutique.html, rendue par js/boutique.js). Tout est gratuit. */
menu li.menu_btn_boutique a span::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 11px;
    margin-right: 5px;
    vertical-align: -1px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11'%3E%3Cpath d='M0 0h2.4l.5 2H13l-1.6 5H3.8l.3 1.2H11V9.6H3L.9 1.4H0z'/%3E%3Ccircle cx='4' cy='10.2' r='.8'/%3E%3Ccircle cx='10' cy='10.2' r='.8'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11'%3E%3Cpath d='M0 0h2.4l.5 2H13l-1.6 5H3.8l.3 1.2H11V9.6H3L.9 1.4H0z'/%3E%3Ccircle cx='4' cy='10.2' r='.8'/%3E%3Ccircle cx='10' cy='10.2' r='.8'/%3E%3C/svg%3E") no-repeat center / contain;
}

.bq_entete {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}
.bq_gratuit {
    flex: none;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: var(--vert);
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--vert), 0 3px 10px rgba(0, 0, 0, 0.25);
    color: #fff;
    text-align: center;
    font: bold 12px Verdana, Geneva, sans-serif;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transform: rotate(-10deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bq_gratuit b { font: 24px "Arial Black", Arial, sans-serif; line-height: 26px; }
.bq_intro { flex: 1; }
.bq_intro strong { display: block; color: var(--rose); font-size: 16px; margin-bottom: 4px; }
.bq_intro p { margin: 0; }
.bq_moi {
    flex: none;
    width: 270px;
    min-height: 64px;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 10px;
    background: #eaf7ff;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 11px;
    line-height: 15px;
}
.bq_moi:not(:has(.bq_moi_vignette)) { display: block; }
.bq_moi strong { display: block; color: var(--rose); font-size: 13px; }
.bq_moi p { margin: 2px 0; }
.bq_moi_vignette {
    flex: none;
    width: 58px;
    height: 58px;
    border-radius: 8px;
    background: #fff linear-gradient(to bottom, #d8f1ff, #fff 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--bleu);
    font: 24px "Arial Black", Arial, sans-serif;
}
.bq_moi_vignette img { max-width: 54px; max-height: 54px; }
.bq_moi a.bq_mes { font-size: 10px; }

/* Onglets (Accueil / Skins / Objets / Smileys) */
.bq_onglets {
    display: flex;
    gap: 4px;
    border-bottom: 3px solid var(--rose);
    margin-bottom: 14px;
}
box_body .bq_onglets a {
    padding: 7px 16px 5px;
    border-radius: 8px 8px 0 0;
    background: #f3e6f0;
    color: var(--rose);
    font-size: 13px;
    font-weight: bold;
}
box_body .bq_onglets a:hover { background: var(--rose-clair); color: #fff; }
box_body .bq_onglets a.actif { background: var(--rose); color: #fff; }
bbl_box.violet .bq_onglets { border-color: var(--box-violet); }
bbl_box.violet box_body .bq_onglets a.actif { background: var(--box-violet); }
bbl_box.orange .bq_onglets { border-color: var(--box-orange); }
bbl_box.orange box_body .bq_onglets a.actif { background: var(--box-orange); }
bbl_box.bleu .bq_onglets { border-color: var(--box-bleu); }
bbl_box.bleu box_body .bq_onglets a.actif { background: var(--box-bleu); }

.bq_message {
    margin-bottom: 12px;
    padding: 9px 14px;
    border: 1px solid #9de500;
    border-radius: 10px;
    background: #f1ffd6;
    color: #3a7000;
    font-weight: bold;
    text-align: center;
}
.bq_message.erreur { border-color: #ff9a9a; background: #ffeded; color: #c00000; }
.bq_message[hidden] { display: none; }
.bq_attente, .bq_vide { padding: 30px; text-align: center; color: #999; }
.bq_vide { grid-column: 1 / -1; }

/* Prix d'origine barré + Gratuit */
.bq_prix { line-height: 14px; }
.bq_prix s { display: block; color: #aaa; font-size: 10px; }
.bq_prix b { color: #3fae00; font-size: 13px; text-transform: uppercase; }

.bq_action { margin-top: 5px; min-height: 22px; }
.bq_action span {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
}
.bq_porte { background: #ffe3f2; color: var(--rose); }
.bq_possede { background: #eaf7ff; color: var(--bleu); margin-right: 4px; }
.bq_connecte { color: #d40000; }
.bq_reserve { background: #fff6c8; color: #b07a00; }

/* Accueil */
.bq_nouveautes h2 { text-align: center; margin-top: 0; }
.bq_nouveautes_liste {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}
box_body a.bq_nouveau {
    width: 96px;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid #f3c6df;
    background: #fff0f8;
    text-align: center;
    font-size: 10px;
    line-height: 12px;
    font-weight: normal;
    color: var(--texte);
}
a.bq_nouveau img { display: block; width: 86px; height: 72px; object-fit: contain; margin: 0 auto 3px; }
a.bq_nouveau span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
box_body a.bq_nouveau:hover { border-color: var(--rose); box-shadow: 0 0 6px var(--rose-clair); color: var(--rose); }
.bq_rayons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}
box_body a.bq_rayon {
    display: block;
    padding: 14px;
    border-radius: 12px;
    background: #fff;
    border: 2px solid var(--c);
    text-align: center;
    font-weight: normal;
    color: var(--texte);
    transition: transform .1s ease-out, box-shadow .1s ease-out;
}
box_body a.bq_rayon:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); color: var(--texte); }
a.bq_rayon strong {
    display: block;
    margin: 8px 0 6px;
    color: var(--c);
    font: 20px "Arial Black", Arial, sans-serif;
    text-transform: uppercase;
}
a.bq_rayon p { min-height: 52px; font-size: 11px; line-height: 15px; }
a.bq_rayon em {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--c);
    color: #fff;
    font-style: normal;
    font-weight: bold;
    font-size: 11px;
}
.bq_rayon_icone {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--c) no-repeat center / 36px;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.15);
}
.rayon_skins { --c: var(--box-violet); }
.rayon_objets { --c: var(--box-orange); }
.rayon_smileys { --c: var(--box-bleu); }
.rayon_skins .bq_rayon_icone { background-image: url(/data/skin/7/preview.png); background-size: 50px; }
.rayon_objets .bq_rayon_icone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 1l3 7 7 .6-5.3 4.7L18.3 21 12 17.2 5.7 21l1.6-7.7L2 8.6 9 8z'/%3E%3C/svg%3E"); }
.rayon_smileys .bq_rayon_icone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Ccircle cx='13' cy='12' r='11' fill='%23ffde00' stroke='%234a3b00' stroke-width='1.5'/%3E%3Cellipse cx='9.5' cy='9.5' rx='1.6' ry='2.2' fill='%234a3b00'/%3E%3Cellipse cx='16.5' cy='9.5' rx='1.6' ry='2.2' fill='%234a3b00'/%3E%3Cpath d='M6.5 13.5q6.5 7 13 0' fill='%23fff' stroke='%234a3b00' stroke-width='1.5'/%3E%3C/svg%3E"); background-size: 42px; }
.bq_aide { font-size: 11px; }

/* Skins : colonne de familles + grille */
.bq_skins { display: flex; gap: 16px; align-items: flex-start; }
.bq_cote {
    flex: none;
    width: 200px;
    position: sticky;
    top: 8px;
}
.bq_cote input[type=search], .bq_tri, .bq_barre input[type=search] {
    width: 100%;
    height: 27px;
    box-sizing: border-box;
    padding: 4px 8px;
    margin-bottom: 6px;
    border: 1px solid #b9c6cc;
    border-radius: 5px;
    font: 12px Verdana, Geneva, sans-serif;
    color: #555;
}
.bq_cote input[type=search]:focus, .bq_barre input:focus { outline: none; box-shadow: 0 0 5px var(--bleu); }
.bq_case { display: block; margin: 4px 0; font-size: 11px; line-height: 14px; cursor: pointer; }
.bq_cote h3 { margin: 12px 0 4px; color: var(--box-violet); font-size: 13px; }
.bq_familles { max-height: 520px; overflow-y: auto; }
box_body .bq_familles li a {
    display: block;
    padding: 3px 6px 3px 18px;
    border-radius: 5px;
    position: relative;
}
.bq_familles li a::before { content: "\2605"; position: absolute; left: 4px; color: #ffcc00; }
.bq_familles li a small { color: #aaa; font-weight: normal; }
box_body .bq_familles li a:hover { background: #f3e6fc; }
box_body .bq_familles li a.actif { background: var(--box-violet); color: #fff; }
.bq_familles li a.actif small { color: #f3e6fc; }
.bq_principal { flex: 1; min-width: 0; }
.bq_resultats { margin-bottom: 6px; color: #888; font-size: 11px; }
.bq_resultats strong { color: var(--rose); font-size: 13px; }
.bq_grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.bq_carte {
    position: relative;
    padding: 6px 6px 8px;
    border: 1px solid #ecd9f7;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.bq_carte:hover { border-color: var(--box-violet); box-shadow: 0 2px 8px rgba(120, 60, 180, 0.2); }
.bq_carte.porte { border: 2px solid var(--rose); background: #fff5fb; }
.bq_carte.possede { background: #f6fbff; }
.bq_carte.ouvert { box-shadow: 0 0 0 3px var(--box-violet); }
box_body a.bq_carte_lien { display: block; color: var(--texte); font-weight: normal; flex: 1; }
.bq_vignette {
    height: 110px;
    border-radius: 8px;
    background: linear-gradient(to bottom, #9fdcff, #e2f5ff 75%, #c9eaa0 75%, #b2dc7f);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bq_vignette img { max-width: 100%; max-height: 104px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25)); }
.bq_vignette.sans_apercu span { font-size: 10px; color: #6a8fa3; }
.bq_ruban {
    position: absolute;
    top: 10px;
    left: 10px;
    max-width: calc(100% - 20px);
    box-sizing: border-box;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(255, 246, 200, 0.95);
    color: #b07a00;
    font-size: 9px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bq_ruban.en_ligne { position: static; margin-left: 6px; }
.bq_nom {
    display: block;
    margin-top: 5px;
    color: var(--rose);
    font-weight: bold;
    font-size: 12px;
    line-height: 14px;
    min-height: 28px;
    overflow: hidden;
}
.bq_carte_lien:hover .bq_nom { text-decoration: underline; }
.bq_num { display: block; color: #999; font-size: 10px; margin-bottom: 4px; }

/* Pagination */
.bq_pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin: 10px 0; }
.bq_pages:empty { display: none; }
.bq_pages a, .bq_pages span {
    min-width: 14px;
    padding: 3px 7px;
    border-radius: 5px;
    text-align: center;
    font-size: 11px;
}
box_body .bq_pages a { background: #f3e6f0; color: var(--rose); }
box_body .bq_pages a:hover { background: var(--rose-clair); color: #fff; }
box_body .bq_pages a.actif { background: var(--rose); color: #fff; }
.bq_pages span.inactif { color: #ccc; }
.bq_pages span.trou { color: #aaa; }

/* Fiche détaillée d'un skin */
.bq_detail {
    position: relative;
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 12px;
    border: 2px solid var(--box-violet);
    background: #fbf6ff;
    scroll-margin-top: 10px;
}
box_body a.bq_fermer {
    position: absolute;
    top: 6px;
    right: 10px;
    color: var(--box-violet);
    font-size: 22px;
    line-height: 22px;
}
.bq_detail_vitrine { flex: none; width: 220px; text-align: center; }
.bq_detail_vitrine .bq_prix { margin-top: 8px; }
.bq_detail_vitrine .bq_prix b { font-size: 16px; }
.bq_detail_vitrine .bbl_btn.petit { font-size: 14px; padding: 6px 18px; }
.bq_detail_infos { flex: 1; min-width: 0; }
.bq_detail_infos h2 { margin: 0 30px 2px 0; font-size: 20px; }
.bq_meta { color: #999; font-size: 11px; }
.bq_description { white-space: pre-line; word-break: break-word; }
.bq_detail .bq_description { max-height: 260px; overflow-y: auto; padding-right: 6px; font-size: 12px; }
.bq_description.vide { color: #aaa; font-style: italic; }
.bq_liens { font-size: 11px; }
.bq_note { font-size: 10px; color: #999; line-height: 13px; }

/* Objets et smileys : lignes */
.bq_offerts {
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid #ffd800;
    border-radius: 10px;
    background: #fff6bb;
}
.bq_offerts p { margin: 4px 0 0; font-size: 11px; color: #888; }
.bq_barre { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.bq_barre input[type=search] { width: 220px; flex: none; }
.bq_genres { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; }
box_body .bq_genres a {
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--box-orange);
    color: #d48500;
    font-size: 11px;
}
box_body .bq_genres a:hover, box_body .bq_genres a.actif { background: var(--box-orange); color: #fff; }
.bq_lignes { border-top: 1px solid #f0e2c6; }
.bq_ligne {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 6px;
    border-bottom: 1px solid #f0e2c6;
}
.bq_ligne:nth-child(even) { background: #fffbf3; }
.bq_ligne.ouvert { background: #fff3d6; box-shadow: inset 4px 0 0 var(--box-orange); }
.bq_icone {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--box-orange);
    color: #fff;
    font: 22px/44px "Arial Black", Arial, sans-serif;
    text-align: center;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
}
.bq_icone.genre_1 { background: #6fb400; }
.bq_icone.genre_2 { background: var(--box-rose); }
.bq_icone.genre_3 { background: #c98b4a; }
.bq_icone.genre_4 { background: var(--box-violet); }
.bq_icone.genre_5 { background: #e2b400; }
.bq_icone.smiley { background: #ffde00; color: #4a3b00; font-size: 18px; }
.bq_ligne_texte { flex: 1; min-width: 0; }
.bq_ligne_texte strong { color: var(--rose); font-size: 13px; }
.bq_ligne_texte .bq_meta { display: block; margin-bottom: 3px; }
.bq_ligne_texte .bq_description { margin: 0 0 3px; font-size: 11px; line-height: 15px; }
.bq_description.courte {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
button.bq_plus {
    padding: 0;
    border: none;
    background: none;
    color: var(--bleu);
    font: bold 10px Verdana, Geneva, sans-serif;
    cursor: pointer;
}
button.bq_plus:hover { color: var(--rose); }
.bq_ligne_prix { flex: none; width: 150px; text-align: center; }

/* --- Mon compte : aperçu en couleurs (swf/skin-preview.swf) et sélecteur de couleurs --- */
.div_showskin .skin_live { position: absolute; inset: 0; }
.div_showskin.live_ready img.skin_preview,
.div_showskin.live_ready .preview_note { visibility: hidden; }
.color_slots { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.color_slot {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px 5px 5px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: #fff;
    font: bold 11px Verdana, Geneva, sans-serif;
    color: var(--texte);
    cursor: pointer;
}
.color_slot:hover, .color_slot.open { border-color: var(--rose); color: var(--rose); }
.color_slot .dot { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
.color_none { font-size: 11px; color: #999; font-style: italic; }
.color_palette { margin: 6px 0 10px; padding: 10px; border-radius: 10px; background: #f6f6f6; }
.color_palette p { font-size: 11px; font-weight: bold; margin-bottom: 8px; }
.palette_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(24px, 1fr)); gap: 4px; }
.palette_cell {
    height: 24px;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.palette_cell:hover { transform: scale(1.15); }
.palette_cell.selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rose); }
skin_colors[hidden], .colors_labels[hidden], .color_slots[hidden], .color_palette[hidden] { display: none !important; }

/* --- Console de modération dans la page du jeu (js/console-panel.js, staff seulement) --- */
:root { --console-width: 820px; }
console_panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
    width: var(--console-width);
    display: flex; flex-direction: column;
    background: #505080;
    box-shadow: -4px 0 16px rgba(0, 0, 0, .35);
}
console_panel[hidden] { display: flex !important; visibility: hidden; pointer-events: none; transform: translateX(100%); }
console_panel.resizing #console_panel_swf { pointer-events: none; }
console_bar {
    display: flex; align-items: center; gap: 12px;
    height: 30px; padding: 0 8px 0 14px; flex: none;
    background: linear-gradient(#7a7ab8, #5a5a96);
    color: #fff; font: bold 12px Verdana, Arial, sans-serif;
}
console_bar b { flex: 1; }
console_bar a { color: #dfe4ff; font-weight: normal; }
console_bar a:hover { color: #fff; text-decoration: underline; }
console_bar button {
    width: 24px; height: 24px; border: 0; border-radius: 4px;
    background: rgba(255, 255, 255, .15); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
console_bar button:hover { background: rgba(255, 255, 255, .3); }
console_grip {
    position: absolute; top: 0; bottom: 0; left: -4px; width: 8px; z-index: 1;
    cursor: ew-resize;
}
console_grip:hover, console_panel.resizing console_grip { background: rgba(255, 255, 255, .25); }
#console_panel_swf { flex: 1; min-height: 0; }
/* Le site se décale pour que le jeu reste visible à côté de la console. */
body.with_console { padding-right: var(--console-width); }