a:link {
    color: #412906;
    text-decoration: none;
}

a:visited {
    color: #654e2f;
    text-decoration: none;
}

ol, ul {
    list-style: none;
}

a:link {
    color: #412906;
    text-decoration: none;
}

body {
    line-height: 1;
}

label {
    font-weight: bold;
    color: #4c4c4c;
}

#commentary {
    margin-top: 10px;
}

.emComments {
    margin-top: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
}

#emContent, .emContent {
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 11px;
}

.emAddComment, .emComment, .emShowAllComments, .emHideAllComments, .emInfoMessage {
    background-color: #ffc300;
}

#emContent a, .emContent a {
    text-decoration: none;
    color: #3B5998;
}

.emAddComment, .emComment, .emShowAllComments, .emHideAllComments, .emInfoMessage {
    background-color: #ffc300;
}

.emAddComment textarea {
    width: 560px;
    height: 35px;
    border: 0;
    overflow: hidden;
    min-height: 35px;
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 11px;
    resize: vertical;
    padding: 5px;
    margin-bottom: 5px;
    -moz-border-radius: 6px 6px;
    -webkit-border-radius: 6px 6px;
    border-radius: 6px 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
}

.emAddComment .addEmPot {
    display: none;
}

h1 {
    font: 2.1em/1em 'Lobster1.4Regular', Verdana, Arial, sans-serif;
    color: #653c04;
    text-shadow: 0px -1px 0px #f8b801;
    font-size: 27px;
}

p {
    font-family: 'Cabin', Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 25px;
}

.playerIdent, .guildIdent {
    margin-bottom: 10px;
}

.playerName h1, .guildName h1 {
    background: none;
}

.playerInfo, .guildInfo, .guildWar, .guildEmblem {
    text-align: right;
    padding: 5px;
    background: #fde666;
    background: rgba(255,255,255,0.4);
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

.playerInfoBox .guildMemo, .playerIdent .guildMemo, .guildIdent .gInfo {
    font: 1.1em/1em 'Lobster1.4Regular', Arial, sans-serif;
    float: left;
    text-align: center;
    font-size: 1.25em;
    margin-top: 10px;
    word-wrap: break-word;
    width: 305px;
    text-transform: lowercase;
}

.playerInfo > span, .guildInfo > span {
    font: 0.9em/1em Arial, sans-serif;
    display: block;
    color: #653C04;
}

.playerInfo span strong, .guildInfo span strong {
    font-weight: bold;
}

.guildEmblem {
    text-align: left;
    margin: auto auto auto auto;
    margin: 10px 0px 0px auto;
    padding: 5px;
    height: 90px;
    width: 90px;
}

.guildEmblem {
    float: left;
}

.guildEmblem img {
    display: block;
    width: 90px;
    height: 90px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.guildIdent #like_box {
    float: right;
    margin-top: 22px;
}

.guildWar {
    text-align: center;
    margin: 10px 10px;
    float: right;
    width: 179px;
    height: 104px;
    padding: 5px;
}

.guildWar div span {
    font: 1.4em/1em 'Lobster1.4Regular', Arial, sans-serif;
    color: #653c04;
    text-shadow: 0 -1px 0 #F8B801;
}

#topPlayer .guildTable {
    background: url(../images/player/body_player_page/playerTop.png) no-repeat center top;
    padding-top: 200px;
    margin-top: -75px;
}

.guildTable {
    text-align: center;
    width: 100%;
}

.pagination {
    margin: 5px;
}

.pagination li {
    display: inline;
    font: 1em/1em 'Lobster1.4Regular', Arial, sans-serif;
}

.guildTable table {
    background-color: #FBD600;
    background-color: rgba(251, 214, 0,0.5);
    width: 100%;
    border-collapse: collapse;
    border-spacing: 1px;
    table-layout: fixes;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.guildTable thead th {
    border-bottom: 1px solid #fde800;
}

.guildTable thead th span {
    font: 1em/1em Arial, sans-serif;
    color: #653C04;
    font-variant: small-caps;
    font-weight: bold;
    padding: 5px;
    display: block;
    border-bottom: 1px solid #f9b800;
    border-left: 1px solid #f9b800;
    border-right: 1px solid #fde800;
    white-space: nowrap;
}

.guildTable thead th {
    border-bottom: 1px solid #fde800;
}

.guildTable thead th:last-child {
    width: 200px;
}

#topPlayer .guildTable td {
    width: 500px;
}

.guildTable table td {
    padding: 5px;
    vertical-align: middle;
    word-wrap: break-word;
    max-width: 170px;
}

img {
    border: none;
}

.guildTable .row2 {
    background: #e8c600;
    background: rgba(0,0,0,0.075);
}

.guildTable tbody {
    font: 1em/1em Arial, sans-serif;
    color: #653c04;
}

.guildTable a {
    font: 1em/1em Arial, sans-serif;
    color: #653c04;
    text-decoration: none;
}

.fullbox_yellow_bottom {
    width: auto;
    max-width: 940px;
    padding: 10px 10px 10px 10px;
    /* background: #5e70ae url(../images/theme_site/1/fullbox_yellow_bottom_bg.png) bottom center no-repeat; */
    overflow: hidden;
    shadow: 10px 10px 10px 10px #5E70AE;
    box-shadow: -8px 2px 4px 3px #6072AC;
    box-shadow: -3px -1px 10px 5px rgba(255, 222, 0, 1);
    /* margin-top: -200px; */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,162,0,1)), color-stop(20%,rgba(255,174,0,1)), color-stop(100%,rgba(255,222,0,1)));
    margin-bottom: 25px;
    min-width: 484px;
}

.fullbox_yellow_top, .fullbox_yellow_bottom, .fullbox_yellow_wrapper, .fullbox_yellow_wrapper2, .fullbox_yellow_wrapper3 {
    /* overflow:visible; */
    border-radius: 20px;
}

.nameBar {
    width: 465px;
    height: 80px;
    /* Hauteur augmentée de 80px à 100px */
    overflow: visible;
    /* Permet aux mini-personnages de ne pas être rognés */
    background: url('') repeat-x 0 -560px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    position: relative;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
    display: flex;
    /* Utilisation de flexbox pour un meilleur contrôle */
    align-items: center;
    /* Centrage vertical des éléments */
}

.char_0 .nameBar {
    background-position: 0 -560px;
}

.char_1 .nameBar {
    background-position: 0 -670px;
}

.char_2 .nameBar {
    background-position: 0 -780px;
}

.char_3 .nameBar {
    background-position: 0 -890px;
}

.char_D .nameBar {
    background-position: 0 -1000px;
}

.nameBar .like-player {
    /* Position normale dans le flux flexbox au lieu d'absolute */
    flex-shrink: 0;
    /* Empêche la compression */
}

.nameBar .playerName {
    /* float: left; supprimé car on utilise flexbox maintenant */
    margin-left: 10px;
    margin-top: 0;
    /* Suppression du margin-top car centrage avec flexbox */
    flex-shrink: 0;
    /* Empêche la compression */
}

.nameBar .playerName h1 {
    display: inline;
    color: #fff;
    text-shadow: 0 1px 2px #555555;
}

.nameBar .playerName h1 span {
    display: block;
    font-size: 0.5em;
}

.nameBar .playerName h1 span strong {
    font-size: 2em;
}

.nameBar .EquipedHenchIcon, .nameBar .playerIcon {
    /* Suppression du float qui entre en conflit avec flexbox */
}

.nameBar .playerIcon {
    /* playerIcon reste vide mais ne prend pas de place */
    width: 0;
    height: 0;
    overflow: hidden;
    flex-shrink: 0;
}

.nameBar .EquipedHenchIcon {
    height: auto;
    /* Hauteur automatique pour s'adapter au contenu */
    line-height: normal;
    /* Suppression de line-height fixe */
    text-align: center;
    /* Centrage des mini-personnages */
    display: flex;
    align-items: center;
    /* Centrage vertical */
    justify-content: center;
    /* Centrage horizontal */
    gap: 10px;
    /* Plus d'espacement entre les mini-personnages */
    flex: 1;
    /* Prend l'espace restant pour être au centre */
    padding: 0;
    /* Suppression du padding */
    overflow: visible;
    /* Permet aux éléments de dépasser si nécessaire */
    position: relative;
    /* Pour un meilleur contrôle du positionnement */
    margin-left: 0;
    /* Suppression du margin-left négatif */
    margin-right: 0;
    /* Ajout pour équilibrer */
}

.nameBar .EquipedHenchIcon img {
    vertical-align: bottom;
    margin-left: 0;
    /* Suppression du margin négatif qui décalait les images */
}

.my_player_inconnu {
    background: url('../images/player/characters/charMiniD.png') no-repeat center;
    background-size: 64px 64px;
    /* Encore plus grand : 64px au lieu de 48px */
}

/* Style pour afficher les mini-personnages dans EquipedHenchIcon */
.mini-character {
    display: inline-block;
    width: 64px;
    /* Encore plus grand : 64px au lieu de 48px */
    height: 64px;
    /* Encore plus grand : 64px au lieu de 48px */
    margin: 5px 10px;
    /* Plus d'espacement horizontal */
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    background-size: 64px 64px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 6px;
    /* Coins arrondis proportionnels */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    /* Ombre adaptée à la taille */
}

.mini-character:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    /* Ombre plus prononcée au hover */
}

.mini-character .character-name {
    position: absolute;
    bottom: 0px;
    /* Position à 0px au lieu de -30px */
    left: 50%;
    transform: translateX(-50%);
    font-size: 15px;
    /* Police plus grande */
    color: #fff;
    /* Même couleur que playerName h1 */
    white-space: nowrap;
    text-shadow: 0 1px 2px #555555;
    /* Même ombre que playerName h1 */
    font-weight: bold;
    font-family: inherit;
    /* Hérite de la même famille de police */
    /* Suppression du voile blanc - plus de background */
    padding: 2px 6px;
    min-width: 50px;
    text-align: center;
}

/* Styles pour les liens des mini-personnages */
.mini-character-link {
    text-decoration: none;
    color: inherit;
}

.mini-character-link:hover {
    text-decoration: none;
    color: inherit;
}

.mini-character-link .mini-character:hover {
    transform: scale(1.15);
}

.char_0 > a:hover .nameBar {
    background-position: 0 -580px;
}

.char_1 > a:hover .nameBar {
    background-position: 0 -690px;
}

.char_2 > a:hover .nameBar {
    background-position: 0 -800px;
}

.char_3 > a:hover .nameBar {
    background-position: 0 -910px;
}

.char_D > a:hover .nameBar {
    background-position: 0 -1020px;
}

#characterBox {
    padding: 10px;
    font: 1em/1em 'Lobster1.4Regular', Arial, sans-serif;
    color: #653C04;
    text-shadow: 0 0 3px rgba(0,0,0,0.3);
    background-repeat: no-repeat;
    background-position: 0 0;
    overflow: hidden;
    height: 270px;
}

.char_0 #characterBox {
    background-image: url("../images/player/characters/bigChar0.png");
}

.char_1 #characterBox {
    background-image: url("../images/player/characters/bigChar1.png");
}

.char_2 #characterBox {
    background-image: url("../images/player/characters/bigChar2.png");
}

.char_3 #characterBox {
    background-image: url("../images/player/characters/bigChar3.png");
}

.playerStatBox {
    width: 445px;
    height: 60px;
    margin: 0px auto;
    background: #fde666;
    background: rgba(255,255,255,0.6);
    font: 1.1em/1.4em 'Lobster1.4Regular', Arial, sans-serif;
    color: #653C04;
    text-align: center;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    box-shadow: 0 0px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.5);
    margin-top: 50p;
}

.playerStatBox span strong {
    font-weight: bold;
    font-size: 1.2em;
    margin-left: 5px;
}

.playerStatBox .progressBar {
    float: left;
    margin: 9px 11px;
}

/* La barre de remplissage : c'est sa LARGEUR qui porte le pourcentage.
   (Avant, un <em> servait de cache pose sur une barre pleine — mais son image
    avait disparu, et la barre paraissait donc toujours pleine.) */
.progressBar span {
    position: absolute;
    display: block;
    height: 15px;
    top: 0;
    left: 0;
    width: 0;
    border-radius: 3px 0 0 3px;
    background: linear-gradient(to bottom,
                rgba(255, 255, 255, 0.35) 0%,
                rgba(255, 255, 255, 0.10) 45%,
                rgba(0, 0, 0, 0.10) 55%,
                rgba(0, 0, 0, 0.20) 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    transition: width .35s ease;
}

.progressBar strong {
    position: absolute;
    z-index: 2;
    width: 100%;
    text-align: center;
    line-height: 15px;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}

/* Une teinte par nature de barre : le degrade ci-dessus s'y superpose. */
.statXP span,
#expBar span              { background-color: #f0a30a; }   /* experience   : orange */
#hpBar span, .statHP span { background-color: #2f7fc4; }   /* points de vie : bleu */
#mpBar span, .statMP span { background-color: #cf3b32; }   /* points de magie : rouge */
#rankBar span             { background-color: #7a4fbd; }   /* classement   : violet */

/* L'em servait de cache : il n'a plus lieu d'etre. */
.progressBar em {
    display: none;
}

.progressBar {
    position: relative;
    width: 200px;
    height: 15px;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.28);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35),
                0 1px 0 rgba(255, 255, 255, 0.15);
}

.progressBar strong {
    position: relative;
    z-index: 2;
    width: 100%;
    font: bold 14px/16px monospace;
    /* margin-top: -19px; */
    vertical-align: middle;
    display: inline-block;
    font: 0.8em/0.8em 'Lobster1.4Regular', Arial, sans-serif;
}

.playerBar, .achivmentPointsBox {
    background: #fde666;
    background: rgba(255,255,255,0.6);
    font: 1em/1em 'Lobster1.4Regular', Arial, sans-serif;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    box-shadow: 0 0px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.5);
    font-size: 1em;
    height: 55px;
    width: 75px;
    line-height: 1.3em;
    text-align: center;
    position: relative;
    color: #653C04;
    text-shadow: 0 0 3px rgba(0,0,0,0.3);
}

/**/
#characterBox .itemImgContainer {
    margin-bottom: 5px;
    margin-right: 5px;
}

.itemImg {
    margin-left: 6px;
    margin-top: 7px;
    width: 32px;
    height: 32px;
}

.itemImgContainer {
    float: left;
    text-align: left;
    height: 44px;
    width: 44px;
    background-image: url('../images/player/hench/item_border.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    margin-right: 2px;
}

#characterBox .itemImgContainer0 {
    margin-bottom: 5px;
    margin-right: 5px;
}

#characterBox .itemImgContainer1 {
    margin-bottom: 5px;
    margin-right: 5px;
}

#characterBox .itemImgContainer2 {
    margin-bottom: 5px;
    margin-right: 5px;
}

.itemImgContainer.disabled {
    background-position: 0 -88px;
}

.itemImgContainer.disabled0 {
    background-position: 0 -88px;
}

.itemImgContainer.disabled1 {
    background-position: 0 -88px;
}

.itemImgContainer.disabled2 {
    background-position: 0 -88px;
}

.leftEquipmentBox .itemImgContainer, .rightEquipmentBox .itemImgContainer {
    float: none;
}

.achivmentPointsBox {
    float: right;
}

.playerBar {
    float: left;
}

.achivmentPointsBox > span strong, .playerBar > span strong {
    display: block;
    font-size: 1.4em;   /* la taille reelle est fixee inline par PHP selon la longueur */
    line-height: 1.1;
    white-space: nowrap;
    text-align: center;
}

/* Suffixe "pts" (traduit), dans le HTML pour etre affiche a cote du nombre. */
.achivmentPointsBox > span > strong .pts-suffix {
    font-size: 0.7em;
    font-style: normal;
    margin-left: 2px;
}

/* Restrictions (restrict_type) : une ligne par bit, dans la tooltip. */
.item-restrict-line {
    font-size: 0.9em;
    line-height: 1.3;
    opacity: 0.9;
}

.playerBar .progressBar, .achivmentPointsBox .progressBar {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    width: 15px;
    position: absolute;
    bottom: 0px;
}

.playerBar .progressBar span, .achivmentPointsBox .progressBar span, .playerBar .progressBar, .achivmentPointsBox .progressBar {
    width: 75px;
    -moz-border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}

.playerBar .progressBar span, .achivmentPointsBox .progressBar span {
    margin-top: 0px;
    height: 15px;
}

.playerBar .progressBar strong, .achivmentPointsBox .progressBar strong {
    margin-top: 0px;
    display: block;
    font: 0.9em 'Lobster1.4Regular', Arial, sans-serif;
}

.nameBar .achivmentPointsBox {
    position: absolute;
    right: 10px;
    top: 12px;
}

#Player_list .nameBar .playerName {
    margin-top: 15px;
}

#player_wall, #WallSubStub, #IdentitySubStub, #HenchSubStub, #player_info, #player_hench, #player_pub {
    width: 465px;
    background: #FFA200 url("") repeat-x scroll 0 0;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    box-shadow: 0 0px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.5);
    /* margin-top: -286px; */
}

#player_info, #IdentitySubStub {
    margin-right: 10px;
    min-height: 419px;
    float: left;
    background-position: 0 -1110px;
}

#player_hench, #HenchSubStub {
    width: 445px;
    padding: 10px;
    min-height: 399px;
    float: left;
}

#player_wall, #WallSubStub {
    float: right;
    min-height: 24px;
}

#WallSubStub table {
    border: 0;
    box-shadow: 0 0 0;
}

#player_info #IdentitySubStub, #player_hench #HenchSubStub, #player_wall #WallSubStub {
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
    float: none;
    background: transparent;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    box-shadow: 0 0 0;
    -webkit-box-shadow: 0 0 0;
    -moz-box-shadow: 0 0 0;
    min-width: 460px;
}

div#characterHench {
    width: 12000px;
}

#henchSlide {
    margin-right: 10px;
    float: left;
}

#henchList {
    width: 109px;
    float: left;
    padding: 7px;
    background: #fde666;
    background: rgba(255,255,255,0.4);
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

#henchPanes {
    position: relative;
    overflow: hidden;
    width: 280px;
    height: 390px;
    float: left;
    z-index: 1;
}

#henchWarp {
    display: block;
    width: 20000em;
    position: absolute;
    clear: both;
    padding: 0;
    float: left;
}

div#characterHench .henchCard {
    width: 248px;
    height: 388px;
    float: left;
    font: 16px/1em 'Lobster1.4Regular', Arial, sans-serif;
    padding-left: 16px;
    padding-top: 16px;
    padding: 16px 16px 0px 16px;
    color: #653C04;
    margin-right: 10px;
    background: url('../images/player/hench/card/mCardBG-Beast.png') no-repeat 0 0;
}

div#characterHench .henchCard.Beast {
    background: url('../images/player/hench/card/mCardBG-Beast.png') no-repeat 0 0;
}

div#characterHench .henchCard.Bird {
    background: url('../images/player/hench/card/mCardBG-Bird.png') no-repeat 0 0;
}

div#characterHench .henchCard.Insect {
    background: url('../images/player/hench/card/mCardBG-Bug.png') no-repeat 0 0;
}

div#characterHench .henchCard.Devil {
    background: url('../images/player/hench/card/mCardBG-Devil.png') no-repeat 0 0;
}

div#characterHench .henchCard.Dragon {
    background: url('../images/player/hench/card/mCardBG-Dragon.png') no-repeat 0 0;
}

div#characterHench .henchCard.Metal {
    background: url('../images/player/hench/card/mCardBG-Metal.png') no-repeat 0 0;
}

div#characterHench .henchCard.Mystery {
    background: url('../images/player/hench/card/mCardBG-Myst.png') no-repeat 0 0;
}

div#characterHench .henchCard.Plant {
    background: url('../images/player/hench/card/mCardBG-Plant.png') no-repeat 0 0;
}

.henchName {
    /* font-size:1.55em; */
    line-height: 1em;
    line-height: 1em;
}

.henchLevel {
    /* text-align:center; */
    /* margin:12px 2px; */
    /* float:right; */
    /* font-size:1.2em; */
    /* line-height:1em; */
}

.henchLevel strong {
    font-size: 1.3em;
    font-weight: bold;
}

.henchType {
    font-size: 1em;
}

.henchType:before {
    content: "";
    display: block;
    visibility: hidden;
}

/* ── BADGES D'ORIGINE (mixnum) ─────────────────────────────────────────────
   Meme placement que le Wiki (.hench-card-img .badges) : en haut a gauche de
   la vignette, empiles vers le bas.

   DEUX CHOSES MANQUAIENT, et il fallait les deux.

   1. .henchOrigines / .henchOrigineBadge n'avaient AUCUNE regle. Les classes
      etaient ecrites dans le PHP, jamais declarees ici : les badges se
      posaient donc dans le flux, a la suite de l'image, au lieu de se poser
      DESSUS.

   2. .henchImage img met une carte en fond et, dans le Panel, une taille de
      228x167. Cette regle attrape TOUTES les images du bloc -- badges
      compris. Un badge de 30 px se retrouvait etire au format d'une vignette,
      avec un fond de carte derriere lui.

   D'ou le selecteur en trois classes : .Beast .henchImage img pese (0,2,1),
   il faut (0,3,0) pour passer devant sans recourir a !important. */
.henchImage { position: relative; }

.henchImage .henchOrigines {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 3;
}

.henchImage .henchOrigines .henchOrigineBadge {
    width: 30px;
    height: 30px;
    margin: 0;
    background: none;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .5));
}

.henchImage {
    width: 228px;
    height: 167px;
    margin-left: 10px;
    margin-top: -10px;
}

.henchImage img {
    margin-top: -10px;
    background: url('../../../Wiki/Templates/data/formules_mix/map_bg/mapbg1.png') no-repeat 0 0;
}

.Beast .henchImage img {
    background: url('../../../Wiki/Templates/data/formules_mix/map_bg/mapbg13.png') no-repeat 0 0;
}

.Bird .henchImage img {
    background: url('../../../Wiki/Templates/data/formules_mix/map_bg/mapbg3.png') no-repeat 0 0;
}

.Devil .henchImage img {
    background: url('../../../Wiki/Templates/data/formules_mix/map_bg/mapbg9.png') no-repeat 0 0;
}

.Dragon .henchImage img {
    background: url('../../../Wiki/Templates/data/formules_mix/map_bg/mapbg19.png') no-repeat 0 0;
}

.Insect .henchImage img {
    background: url('../../../Wiki/Templates/data/formules_mix/map_bg/mapbg5.png') no-repeat 0 0;
}

.Metal .henchImage img {
    background: url('../../../Wiki/Templates/data/formules_mix/map_bg/mapbg21.png') no-repeat 0 0;
}

.Mystery .henchImage img {
    background: url('../../../Wiki/Templates/data/formules_mix/map_bg/mapbg15.png') no-repeat 0 0;
}

.Plant .henchImage img {
    background: url('../../../Wiki/Templates/data/formules_mix/map_bg/mapbg11.png') no-repeat 0 0;
}

.henchCard .henchCustomName {
    display: block;
    width: 163px;
    height: 20px;
    background: url('../images/player/hench/card/mCardName.png') no-repeat 0 0;
    margin: -10px 42px;
    text-align: center;
    line-height: 1em;
    font-size: 0.96em;
    position: relative;
    z-index: 1;
}

.henchStats,.henchPoints {
    width: 116px;
    padding-top: 15px;
    padding-left: 5px;
    float: left;
}

.henchStats div {
    width: 119px;
    height: 39px;
    padding-right: 10px;
    background: url('../images/player/hench/card/mCardStats.png') no-repeat left bottom;
    text-align: left;
    margin-top: -5px;
}

.henchStr, .henchDex, .henchAim, .henchLuck {
    font-size: 1.1em;
    text-shadow: 0 0 3px rgba(0,0,0,0.3);
    background: url('#') no-repeat 0 0;
}

.henchStats div span {
}

.henchStats div strong {
    margin-top: 10px;
    float: right;
    font-weight: bold;
}

.henchMix {
    text-align: center;
}

.henchPoints .statXP, .henchPoints .statHP, .henchPoints .statMP {
    height: 20px;
    margin: 2px 6px 10px;
}

.henchPoints .progressBar {
    width: 90px;
    height: 20px;
}

.henchPoints .progressBar strong {
    margin-left: 3px;
    line-height: 19px;
}

.henchPoints .progressBar span {
    width: 90px;
    height: 20px;
}

.henchPoints .progressBar em {
    width: 90px;
    height: 20px;
}

.henchPoints:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
}

.henchPoints .statProgress {
    display: block;
    background: none;
    position: relative;
    top: -18px;
    width: 114px;
    text-align: right;
    height: 20px;
}

.henchMix {
    float: right;
    margin: -5px 5px;
}

.henchSexe {
    display: block;
    width: 42px;
    height: 42px;
    float: left;
    margin: 3px 14px;
}

#player_links ul {
    clear: both;
    width: 920px;
    overflow: hidden;
}

#player_links ul {
    margin: 20px 0;
    position: relative;
    top: 10px;
    padding: 0;
    text-align: center;
    width: 465px;
    height: 100%;
    overflow: hidden;
    background: rgb(255,162,0);
    background: -moz-linear-gradient(left, rgba(255,162,0,1) 0%, rgba(255,174,0,1) 20%, rgba(255,222,0,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,162,0,1)), color-stop(20%,rgba(255,174,0,1)), color-stop(100%,rgba(255,222,0,1)));
    background: -webkit-linear-gradient(left, rgba(255,162,0,1) 0%,rgba(255,174,0,1) 20%,rgba(255,222,0,1) 100%);
    background: -o-linear-gradient(left, rgba(255,162,0,1) 0%,rgba(255,174,0,1) 20%,rgba(255,222,0,1) 100%);
    background: -ms-linear-gradient(left, rgba(255,162,0,1) 0%,rgba(255,174,0,1) 20%,rgba(255,222,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa200', endColorstr='#ffde00',GradientType=1);
    background: linear-gradient(left, rgba(255,162,0,1) 0%,rgba(255,174,0,1) 20%,rgba(255,222,0,1) 100%);
    -webkit-border-radius: 8px 6px 6px 8px;
    -moz-border-radius: 8px 6px 6px 8px;
    border-radius: 8px 6px 6px 8px;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.4);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.4);
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

#player_links ul li {
    display: inline-block;
    color: #FFFFFF;
    cursor: pointer;
    font: 1.5em/1em 'Lobster1.4Regular',Verdana,Arial,sans-serif;
    text-align: center;
    text-shadow: 0 1px 2px #333;
    margin: 0;
    vertical-align: middle;
}

#player_links ul li a {
    display: block;
    color: #fff;
    height: 120px;
    width: 160px;
    text-shadow: 0 1px 2px #333;
    background: url('../images/player/body_player_page/spritePlayer.png') no-repeat 0 0;
    position: relative;
    transition: top 0.3s;
    -moz-transition: top 0.3s;
    -webkit-transition: top 0.3s;
    -o-transition: top 0.3s;
}

#player_links ul li a:active, #player_links ul li a:hover {
    top: 5px;
}

#player_links ul li span {
    display: block;
    padding-top: 65px;
    text-shadow: 0 1px 2px #333,0 0 15px rgba(255,255,255,.6), 0 0 20px rgba(255,255,255,.6);
}

#player_links ul li:hover {
    background-position: 0 -40px;
}

#player_links ul li.mailLnk {
    float: right;
    font-size: 1.1em;
    display: block;
    font-style: normal;
    margin-top: 25px;
    margin-bottom: 12px;
    margin-right: 55px;
}

#player_links ul li.galleryLnk {
    margin-left: 30px;
    center; float: left;
}

#player_links ul li.succesLnk a {
    background-position: 0 -420px;
}

#player_links ul li.guildLnk {
    margin-left: 30px;
    background: none;
    background: url('../images/player/body_player_page/shieldback.png') 50% 50% no-repeat;
    height: 140px;
    width: 200px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
    float: left;
    margin: 5px 0px 0px 5px
}

.ui-accordion .ui-accordion-header a {
    display: block;
    font-size: 1em;
    padding: .5em .5em .5em .7em;
}

.ui-accordion-icons .ui-accordion-header a {
    padding-left: 2.2em;
}

.ui-accordion .ui-accordion-header .ui-icon {
    position: absolute;
    left: .5em;
    top: 50%;
    margin-top: -8px;
}

.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
    border-top: 0;
    margin-top: -2px;
    position: relative;
    top: 1px;
    margin-bottom: 2px;
    overflow: auto;
    display: none;
    zoom:1;}

.ui-accordion .ui-accordion-content-active {
    display: block;
}

.ui-autocomplete {
    position: absolute;
    cursor: default;
}

* html .ui-autocomplete {
    width: 1px;
}

.ui-menu {
    list-style: none;
    padding: 2px;
    margin: 0;
    display: block;
    float: left;
}

.ui-menu .ui-menu {
    margin-top: -3px;
}

.ui-menu .ui-menu-item {
    margin: 0;
    padding: 0;
    zoom:1;float: left;
    clear: left;
    width: 100%;
}

.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
    padding: .2em .4em;
    line-height: 1.5;
    zoom:1;}

.ui-menu .ui-menu-item a.ui-state-hover,.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}

.ui-button {
    display: inline-block;
    position: relative;
    padding: 0;
    margin-right: .1em;
    text-decoration: none!important;
    cursor: pointer;
    text-align: center;
    zoom:1;overflow: visible;
}

.ui-button-icon-only {
    width: 2.2em;
}

button.ui-button-icon-only {
    width: 2.4em;
}

.ui-button-icons-only {
    width: 3.4em;
}

button.ui-button-icons-only {
    width: 3.7em;
}

.ui-button .ui-button-text {
    display: block;
    line-height: 1.4;
}

.ui-button-text-only .ui-button-text {
    padding: .4em 1em;
}

.ui-button-icon-only .ui-button-text,.ui-button-icons-only .ui-button-text {
    padding: .4em;
    text-indent: -9999999px;
}

.ui-button-text-icon-primary .ui-button-text,.ui-button-text-icons .ui-button-text {
    padding: .4em 1em .4em 2.1em;
}

.ui-button-text-icon-secondary .ui-button-text,.ui-button-text-icons .ui-button-text {
    padding: .4em 2.1em .4em 1em;
}

.ui-button-text-icons .ui-button-text {
    padding-left: 2.1em;
    padding-right: 2.1em;
}

input.ui-button {
    padding: .4em 1em;
}

.ui-button-icon-only .ui-icon,.ui-button-text-icon-primary .ui-icon,.ui-button-text-icon-secondary .ui-icon,.ui-button-text-icons .ui-icon,.ui-button-icons-only .ui-icon {
    position: absolute;
    top: 50%;
    margin-top: -8px;
}

.ui-button-icon-only .ui-icon {
    left: 50%;
    margin-left: -8px;
}

.ui-button-text-icon-primary .ui-button-icon-primary,.ui-button-text-icons .ui-button-icon-primary,.ui-button-icons-only .ui-button-icon-primary {
    left: .5em;
}

.ui-button-text-icon-secondary .ui-button-icon-secondary,.ui-button-text-icons .ui-button-icon-secondary,.ui-button-icons-only .ui-button-icon-secondary {
    right: .5em;
}

.ui-button-text-icons .ui-button-icon-secondary,.ui-button-icons-only .ui-button-icon-secondary {
    right: .5em;
}

.ui-buttonset {
    margin-right: 7px;
}

.ui-buttonset .ui-button {
    margin-left: 0;
    margin-right: -.3em;
}

button.ui-button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.ui-dialog {
    position: absolute;
    padding: .2em;
    width: 300px;
    overflow: hidden;
}

.ui-dialog .ui-dialog-titlebar {
    padding: .4em 1em;
    position: relative;
}

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 16px .1em 0;
}

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 19px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 18px;
}

.ui-dialog .ui-dialog-titlebar-close span {
    display: block;
    margin: 1px;
}

.ui-dialog .ui-dialog-titlebar-close:hover,.ui-dialog .ui-dialog-titlebar-close:focus {
    padding: 0;
}

.ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    padding: .5em 1em;
    background: none;
    overflow: auto;
    zoom:1;}

.ui-dialog .ui-dialog-buttonpane {
    text-align: left;
    border-width: 1px 0 0 0;
    background-image: none;
    margin: .5em 0 0 0;
    padding: .3em 1em .5em .4em;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right;
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: pointer;
}

.ui-dialog .ui-resizable-se {
    width: 14px;
    height: 14px;
    right: 3px;
    bottom: 3px;
}

.ui-draggable .ui-dialog-titlebar {
    cursor: move;
}

.ui-slider {
    position: relative;
    text-align: left;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
}

.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0;
}

.ui-slider-horizontal {
    height: .8em;
}

.ui-slider-horizontal .ui-slider-handle {
    top: -.3em;
    margin-left: -.6em;
}

.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
    left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
    right: 0;
}

.ui-slider-vertical {
    width: .8em;
    height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
    left: -.3em;
    margin-left: 0;
    margin-bottom: -.6em;
}

.ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 100%;
}

.ui-slider-vertical .ui-slider-range-min {
    bottom: 0;
}

.ui-slider-vertical .ui-slider-range-max {
    top: 0;
}

.ui-tabs {
    position: relative;
    padding: .2em;
    zoom:1;}

.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: .2em .2em 0;
}

.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
    top: 1px;
    margin: 0 .2em 1px 0;
    border-bottom: 0!important;
    padding: 0;
    white-space: nowrap;
}

.ui-tabs .ui-tabs-nav li a {
    float: left;
    padding: .5em 1em;
    text-decoration: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
    margin-bottom: 0;
    padding-bottom: 1px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,.ui-tabs .ui-tabs-nav li.ui-state-disabled a,.ui-tabs .ui-tabs-nav li.ui-state-processing a {
    cursor: text;
}

.ui-tabs .ui-tabs-nav li a,.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
    cursor: pointer;
}

.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 1em 1.4em;
    background: none;
}

.ui-tabs .ui-tabs-hide {
    display: none!important;
}

.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none;
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: .2em 0;
}

.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 2px;
    width: 1.8em;
    height: 1.8em;
}

.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover {
    top: 1px;
}

.ui-datepicker .ui-datepicker-prev {
    left: 2px;
}

.ui-datepicker .ui-datepicker-next {
    right: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
    left: 1px;
}

.ui-datepicker .ui-datepicker-next-hover {
    right: 1px;
}

.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 1em;
    margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month-year {
    width: 100%;
}

.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year {
    width: 49%;
}

.ui-datepicker table {
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
    margin: 0 0 .4em;
}

.ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: bold;
    border: 0;
}

.ui-datepicker td {
    border: 0;
    padding: 1px;
}

.ui-datepicker td span,.ui-datepicker td a {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
    margin: .7em 0 0 0;
    padding: 0 .2em;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: .5em .2em .4em;
    cursor: pointer;
    padding: .2em .6em .3em .6em;
    width: auto;
    overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: left;
}

.ui-datepicker.ui-datepicker-multi {
    width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
    float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
    width: 95%;
    margin: 0 auto .4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header {
    border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left;
}

.ui-datepicker-row-break {
    clear: both;
    width: 100%;
    font-size: 0em;
}

.ui-datepicker-rtl {
    direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
    right: 2px;
    left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
    left: 2px;
    right: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
    right: 1px;
    left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
    left: 1px;
    right: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
    clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
    float: left;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: right;
}

.ui-datepicker-rtl .ui-datepicker-group {
    float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header {
    border-right-width: 0;
    border-left-width: 1px;
}

.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
    border-right-width: 0;
    border-left-width: 1px;
}

.ui-datepicker-cover {
    display: none;
    display: block;
    position: absolute;
    z-index: -1;
    filter: mask();
    top: -4px;
    left: -4px;
    width: 200px;
    height: 200px;
}

.ui-progressbar {
    height: 2em;
    text-align: left;
}

.ui-progressbar .ui-progressbar-value {
    margin: -1px;
    height: 100%;
}

.card {
    position: relative;
    top: -118px;
}

.inline input.p_button.up {
    background-image: url(../images/theme_site/1/sprite.png);
    background-position: 0px -356px;
    left: 0px;
}

.inline input.p_button {
    background-repeat: no-repeat;
    background-color: transparent;
    cursor: pointer;
    display: inline;
    margin-top: 2px;
    height: 21px;
    width: 21px;
    top: 0px;
}

.inline input.p_button.down {
    background-image: url(../images/theme_site/1/sprite.png);
    background-position: -21px -356px;
    margin-left: -3px;
    left: 25px;
}

.inline span.result {
    display: inline;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
    line-height: 26px;
    position: absolute;
    margin-left: 4px;
}

#identity .like-product .plus_minus {
    margin: 0px auto;
}

.plus_minus {
    overflow: hidden;
    width: 72px;
    height: 76px;
    text-align: center;
    position: relative;
}

.plus_minus input.p_button.up {
    background-image: url(../images/theme_site/1/sprite.png);
    background-position: -1px -233px;
    bottom: 0px;
    left: 0px;
}

.plus_minus input.p_button {
    background-repeat: no-repeat;
    background-color: transparent;
    cursor: pointer;
    display: inline;
    height: 26px;
    width: 36px;
    padding: 0;
    position: absolute;
}

.inline input, .horizontal input, .triangle input, .plus_minus input, .like input {
    border: none;
    outline: none;
}

.plus_minus .result {
    background: url(../images/theme_site/1/sprite.png) no-repeat scroll -55px 0 transparent;
    display: block;
    color: #ffffff;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 28px;
    line-height: 61px;
    text-align: center;
}

.plus_minus input.p_button.down {
    background-image: url(../images/theme_site/1/sprite.png);
    background-position: -37px -233px;
    bottom: 0px;
    right: 0px;
}

.plus_minus input.p_button {
    background-repeat: no-repeat;
    background-color: transparent;
    cursor: pointer;
    display: inline;
    height: 26px;
    width: 36px;
    padding: 0;
    position: absolute;
}

.plus_minus input.p_button.up.voted {
    background-image: url(../images/theme_site/1/sprite.png);
    background-position: -1px -260px;
}

.plus_minus input.p_button.down.voted {
    background-image: url(../images/theme_site/1/sprite.png);
    background-position: -37px -260px;
}

.inline input, .horizontal input, .triangle input, .plus_minus input, .like input {
    border: none;
    outline: none;
}

/* Wrapper pour centrer parfaitement le contenu des pages */
.page-center-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    margin: 0 auto !important;
    text-align: center !important;
    width: 100% !important;
    max-width: none !important;
}

.page-center-wrapper #page_wrapper {
    display: inline-block !important;
    text-align: left !important;
    margin: 0 !important;
    position: relative !important;
    max-width: 970px !important;
    flex-shrink: 0 !important;
}

/* NB : le layout responsive des 2 colonnes (#player_info + #player_hench) est géré de
   façon AUTORITAIRE dans personnage.css (un seul endroit, pour éviter le conflit qui
   faisait passer le hench sous l'identité à 1200px). */

/* === RESPONSIVE FIXES pour la page GALERIE uniquement === */
/* Media query pour écrans ≤ 480px - Adaptation mobile GALERIE SEULEMENT */
@media screen and (max-width: 480px) {
    /* Container principal - Adaptation mobile POUR LA GALERIE */ .gallery-page-layout .fullbox_yellow_bottom {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        min-width: auto !important;
        padding: 8px !important;
        margin: 10px auto !important;
        box-shadow: -2px 1px 2px 1px #6072AC !important;
    }

    /* Wrapper de page - Adaptation mobile POUR LA GALERIE */
    .page-center-wrapper.gallery-page-layout {
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    .page-center-wrapper.gallery-page-layout #page_wrapper {
        max-width: calc(100% - 20px) !important;
        min-width: auto !important;
        width: 100% !important;
    }

    /* Autres containers yellow - Adaptation mobile POUR LA GALERIE */
    .gallery-page-layout .fullbox_yellow_top {
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
    }

    .gallery-page-layout .fullbox_yellow_wrapper, .gallery-page-layout .fullbox_yellow_wrapper2, .gallery-page-layout .fullbox_yellow_wrapper3 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
        padding: 5px !important;
    }
}

/* Redimensionnement dynamique et fluide du container */
@media screen and (max-width: 970px) {
    .gallery-page-layout .fullbox_yellow_bottom {
        width: calc(100% - 30px) !important;
        max-width: calc(100vw - 30px) !important;
        min-width: auto !important;
        margin: 15px auto !important;
    }

    .page-center-wrapper.gallery-page-layout #page_wrapper {
        max-width: calc(100% - 20px) !important;
        min-width: auto !important;
        width: auto !important;
    }
}

/* === Cards d'équipement stylées === */
.item-hover-card {
    position: relative !important;
}

.item-card-tooltip {
    position: absolute;
    top: -10px;
    left: 50px;
    width: 280px;
    background: linear-gradient(135deg, #FFA200 0%, #FFB81F 20%, #FFDE00 100%);
    border: 2px solid #F8B801;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1000;
    pointer-events: none;
}

.item-hover-card:hover .item-card-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLTIP "FLOTTANTE" (pilotee par personnage.js)
   Le conteneur des equipements (#characterBox, .item-hover-card...) a
   overflow:hidden / border-radius : il ROGNE la tooltip absolue. La parade JS
   SORT la tooltip dans <body> et lui met .tooltip--flottante. CES CLASSES
   ETAIENT MANQUANTES -> la tooltip etait deplacee mais SANS STYLE = invisible.
   ═══════════════════════════════════════════════════════════════════════════ */
.item-card-tooltip.tooltip--flottante {
    position: fixed !important;   /* dans <body>, plus aucun parent ne la rogne */
    top: auto;                    /* le JS pose left/top en pixels */
    left: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    z-index: 100000;              /* au-dessus de tout */
}

/* Muette : la tooltip est placee mais PAS encore revelee, et SANS transition
   (sinon elle "vole" depuis le coin haut-gauche pendant qu'on fixe top/left). */
.item-card-tooltip.tooltip--muette {
    transition: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* La fleche de la tooltip flottante : le JS choisit le cote (gauche/droite)
   et pose --fleche-y (hauteur pointant la case survolee). */
.item-card-tooltip.tooltip--flottante::before,
.item-card-tooltip.tooltip--flottante::after {
    content: "";
    position: absolute;
    top: var(--fleche-y, 20px);
    width: 0;
    height: 0;
    border: 8px solid transparent;
}
.item-card-tooltip.tooltip--fleche-gauche::after {
    left: -16px;
    border-right-color: #F8B801;   /* pointe vers la gauche (case a gauche) */
}
.item-card-tooltip.tooltip--fleche-droite::after {
    right: -16px;
    border-left-color: #F8B801;    /* pointe vers la droite (case a droite) */
}

/* ═══════════════════════════════════════════════════════════════════════════
   INFOBULLE DU ★ (droit exceptionnel) — creee dans <body> par personnage.js
   Meme principe : elle etait creee mais SANS STYLE (.henchFiche__exceptionTip
   et .tip--* manquaient) -> invisible.
   ═══════════════════════════════════════════════════════════════════════════ */
.henchFiche__exceptionTip {
    position: fixed;
    max-width: 260px;
    padding: 8px 11px;
    background: #2d1a00;
    color: #ffe9b0;
    font: 12px/1.4 Arial, sans-serif;
    border: 1px solid #F8B801;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    z-index: 100001;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.henchFiche__exceptionTip.tip--visible {
    opacity: 1;
    transform: translateY(0);
}
/* La petite pointe, positionnee horizontalement par --pointe-x (pose en JS). */
.henchFiche__exceptionTip::after {
    content: "";
    position: absolute;
    left: var(--pointe-x, 50%);
    transform: translateX(-50%);
    border: 6px solid transparent;
}
.henchFiche__exceptionTip.tip--dessus::after {
    top: 100%;
    border-top-color: #2d1a00;     /* pointe vers le bas (infobulle au-dessus) */
}
.henchFiche__exceptionTip.tip--dessous::after {
    bottom: 100%;
    border-bottom-color: #2d1a00;  /* pointe vers le haut (infobulle en dessous) */
}

.item-card-header {
    background: rgba(0, 0, 0, 0.1);
    padding: 12px 15px;
    border-bottom: 1px solid rgba(248, 184, 1, 0.3);
    border-radius: 6px 6px 0 0;
}

.item-card-header h3 {
    margin: 0;
    font: 1.4em/1.2em 'Lobster1.4Regular', Arial, sans-serif;
    color: #2d1a00;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    background: none;
}

/* Le TITRE (sous-titre traduit de l'item, cle "title" du client). */
.item-card-title {
    margin: 2px 0 0;
    font: italic 0.85em/1.25em Georgia, 'Times New Roman', serif;
    color: #7a4a10;
}

/* L'etape de synergie, affichee sous les races (— Étape X (Niv. a ~ b)). */
.synergy-etape {
    display: inline-block;
    margin-top: 2px;
    font-size: 0.9em;
    font-weight: normal;
    opacity: 0.85;
}

/* Les RACES de synergie : en gras (l'etape en dessous reste normale). */
.synergy-races {
    font-weight: bold;
}

.item-card-body {
    padding: 12px 15px;
}

/* Description de l'item, en bas de la tooltip (posee par le PHP et le JS).
   Classe utilisee mais qui avait perdu son style. */
.item-card-desc {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(248, 184, 1, 0.35);
    color: #4a2800;
    font: italic 0.85em/1.35em Arial, sans-serif;
}

/* Titre "Effets" centre, juste avant la description. */
.item-effects-title {
    margin-top: 10px;
    text-align: center;
    font: bold 0.8em/1.2em Georgia, 'Times New Roman', serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b3800;
}
/* Quand le titre Effets est present, la desc n'a plus besoin de sa bordure haute. */
.item-effects-title + .item-card-desc {
    margin-top: 4px;
    padding-top: 0;
    border-top: none;
}

.item-info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;   /* le label reste en haut si la valeur passe sur 2 lignes */
    gap: 10px;
    margin-bottom: 7px;
}

/* LABEL (nom de l'info : Niveau, Options, Synergie...) : police a empattements,
   pour le distinguer nettement des valeurs. */
.item-label {
    flex: 0 0 auto;            /* garde sa largeur, ne se comprime pas */
    color: #6b3800;
    font: bold 0.8em/1.4em Georgia, 'Times New Roman', serif;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
    padding-top: 2px;         /* aligne le label avec la 1ere ligne de la valeur */
    white-space: nowrap;
}

/* VALUE (la reponse) : police sans empattement, alignee a droite, qui passe
   proprement sur plusieurs lignes sans casser les mots. NON GRAS. */
.item-value {
    flex: 1 1 auto;
    text-align: right;
    color: #2d1a00;
    font: 0.92em/1.45em 'Segoe UI', Arial, sans-serif;
    font-weight: normal;
    background: rgba(255, 255, 255, 0.18);
    padding: 3px 9px;
    border-radius: 5px;
    border: 1px solid rgba(248, 184, 1, 0.25);
    word-break: normal;
    overflow-wrap: break-word;   /* coupe seulement si un mot est trop long */
}

.item-info-row:last-child {
    margin-bottom: 0;
}

.item-price {
    background: rgba(0, 150, 0, 0.1);
    border-color: rgba(0, 120, 0, 0.3);
    color: #1a5200;
    font-weight: bold;
}

/* Flèche de la card */
.item-card-tooltip::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 20px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #F8B801;
}

.item-card-tooltip::after {
    content: '';
    position: absolute;
    left: -6px;
    top: 21px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid #FFA200;
}

body div#page_wrapper div#content_wrapper div#player_hench div#HenchSubStub div#characterHench div#henchSlide div#henchPanes div#henchWarp {
    display: block !important;
    width: 999999px !important;
    position: absolute !important;
    left: 0px !important;
    top: 0px !important;
    clear: both !important;
    padding: 0 !important;
    margin: 0 !important;
    float: left !important;
}

body div#page_wrapper div#content_wrapper div#player_hench div#HenchSubStub div#characterHench div#henchSlide div#henchPanes div#henchWarp div.henchCard {
    width: 290px !important;
    height: 384px !important;
    float: left !important;
    font: 16px/1em 'Lobster13Regular', Arial, sans-serif !important;
    margin: 0px !important;
    color: #653C04 !important;
    display: block !important;
    position: relative !important;
}

/* ========================================
   STYLES GALERIE ET COMMENTAIRES PERSONNAGE.PHP
   ======================================== */
/* Galerie photo - Style moderne MixMaster */
div.gallery {
    margin: 10px;
    margin-top: 57px;
    border: 2px solid #ddd;
    float: left;
    width: 200px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    overflow: hidden;
}

div.gallery:hover {
    border: 2px solid #fdca00;
    box-shadow: 0 4px 12px rgba(253, 202, 0, 0.3);
}

div.gallery img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

div.desc {
    padding: 10px;
    text-align: center;
    background: linear-gradient(135deg, #fdca00 0%, #f8b801 100%);
    color: #643c02;
    font-weight: bold;
    font-size: 12px;
}

/* Bouton de retour aux henchs - Style MixMaster */
.article_comment_btn {
    display: inline-block;
    padding: 12px 24px;
    margin: 15px 0;
    font: 1.2em/1.0em 'Lobster1.4Regular', Georgia, serif;
    color: #fff;
    text-decoration: none;
    text-shadow: 0px -1px 0px #555;
    background: linear-gradient(135deg, #fdca00 0%, #f8b801 50%, #e6a600 100%);
    border: 2px solid #d4940a;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    text-align: center;
    min-width: 200px;
}

.article_comment_btn:hover, .article_comment_btn:focus {
    background: linear-gradient(135deg, #f8b801 0%, #e6a600 50%, #cc9500 100%);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    text-decoration: none;
    color: #fff;
}

.article_comment_btn:active {
    transform: translateY(0px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ANTI-DISPARITION - Solution stable qui fonctionne */
.gallery-container * {
    pointer-events: none !important;
}

.gallery-container .gallery a, .gallery-container .gallery a *, .gallery-container .gallery img, .gallery-container .gallery .desc, .gallery-container .comment-textarea, .gallery-container .submit-comment-btn, .gallery-container .delete-comment-btn, .gallery-container .screenshot-comments *, .gallery-container .add-comment-form *, .gallery-container .comment-form * {
    pointer-events: auto !important;
}

/* Commentaires - Style MixMaster moderne */
.article_comment {
    font: 1em/1.5em Verdana, Arial, sans-serif;
    width: 100%;
    max-width: 600px;
    min-height: 70px;
    background: linear-gradient(135deg, #fdca00 0%, #fee480 100%);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
    padding: 15px;
    border: 2px solid #f8b801;
    transition: all 0.3s ease;
}

.article_comment:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.article_comment_header {
    line-height: 1.4em;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(100, 60, 2, 0.2);
}

.article_comment_name {
    font-size: 16px;
    font-weight: bold;
    color: #643c02;
    padding-left: 0;
    display: inline-block;
    margin-left: -199px;
}

.article_comment_date {
    font-size: 12px;
    font-style: italic;
    color: #8b5a00;
    float: right;
    background: rgba(255, 255, 255, 0.3);
    padding: 2px 8px;
    border-radius: 12px;
}

.article_comment_content {
    font-size: 13px;
    text-align: left;
    overflow: hidden;
    padding: 0;
    margin-top: 10px;
}

.article_comment_content span, .article_comment_comment {
    line-height: 1.6em;
    word-wrap: break-word;
    padding: 12px;
    display: block;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(248, 184, 1, 0.3);
    color: #333;
}

/* Clear fix pour les flottants */
.clear {
    clear: both;
    height: 2px;
    overflow: hidden;
}

/* Système de pagination - Style MixMaster */
.pagination-container {
    margin: 30px 0;
    text-align: center;
}

.pagination-info {
    font-size: 14px;
    color: #643c02;
    font-weight: bold;
    margin-bottom: 15px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.pagination-links {
    display: inline-block;
}

.pagination-btn {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 3px;
    font: 1em/1em 'Lobster1.4Regular', Georgia, serif;
    color: #643c02;
    text-decoration: none;
    background: linear-gradient(135deg, #fdca00 0%, #f8b801 100%);
    border: 2px solid #d4940a;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    min-width: 40px;
    text-align: center;
}

.pagination-btn:hover {
    background: linear-gradient(135deg, #f8b801 0%, #e6a600 100%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
    color: #643c02;
    text-decoration: none;
}

.pagination-btn.current {
    background: linear-gradient(135deg, #e6a600 0%, #cc9500 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    cursor: default;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.pagination-btn.current:hover {
    transform: none;
    background: linear-gradient(135deg, #e6a600 0%, #cc9500 100%);
}

.pagination-btn.first, .pagination-btn.last {
    font-size: 0.9em;
    padding: 10px 12px;
}

.pagination-btn.prev, .pagination-btn.next {
    font-size: 1.1em;
    font-weight: bold;
}

/* Système de commentaires pour les screenshots - Style MixMaster */
.screenshot-comments {
    margin-top: 20px;
    padding: 15px;
    background: linear-gradient(135deg, #fef9e6 0%, #fef5d0 100%);
    border-radius: 12px;
    border: 2px solid #e6d2a6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comments-title {
    font: 1.2em/1.2em 'Lobster1.4Regular', Georgia, serif;
    color: #643c02;
    margin-bottom: 15px;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 2px solid #fdca00;
}

.comments-list {
    margin-bottom: 20px;
}

.comment-item {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin: 12px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    position: relative;
}

.comment-item:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f3f4;
    position: relative;
    justify-content: space-between;
    padding-right: 30px;
}

.comment-author {
    font-weight: 600;
    color: #333;
    margin-right: 8px;
}

.comment-date {
    margin-left: auto;
    font-size: 12px;
    color: #6c757d;
    opacity: 0.8;
}

.comment-content {
    color: #495057;
    line-height: 1.5;
    font-size: 14px;
    word-wrap: break-word;
}

.comment-votes {
    margin-top: 8px;
    text-align: right;
}

.no-comments {
    text-align: center;
    padding: 20px;
    color: #8b5a00;
    font-style: italic;
}

/* Amélioration du style du bouton delete - Version sobre */
.delete-comment-btn {
    position: absolute;
    right: 5px;
    background: none;
    color: #999;
    border: none;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s ease;
    z-index: 10;
}

.delete-comment-btn:hover {
    color: #dc3545;
}

.add-comment-form {
    border-top: 2px solid #fdca00;
    padding-top: 15px;
}

.add-comment-form h5 {
    font: 1.1em/1.1em 'Lobster1.4Regular', Georgia, serif;
    color: #643c02;
    margin-bottom: 10px;
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comment-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    border: 2px solid #f8b801;
    border-radius: 8px;
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    background: rgba(255, 255, 255, 0.9);
    resize: vertical;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.comment-textarea:focus {
    outline: none;
    border-color: #fdca00;
    box-shadow: 0 0 8px rgba(253, 202, 0, 0.3);
    background: #fff;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.submit-comment-btn {
    padding: 10px 20px;
    font: 1em/1em 'Lobster1.4Regular', Georgia, serif;
    color: #fff;
    text-decoration: none;
    text-shadow: 0px -1px 0px #555;
    background: linear-gradient(135deg, #fdca00 0%, #f8b801 50%, #e6a600 100%);
    border: 2px solid #d4940a;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
    min-width: 150px;
}

.submit-comment-btn:hover {
    background: linear-gradient(135deg, #f8b801 0%, #e6a600 50%, #cc9500 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

.submit-comment-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.char-counter {
    font-size: 12px;
    color: #8b5a00;
    font-style: italic;
}

.login-to-comment {
    text-align: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    border: 1px dashed #f8b801;
}

.login-to-comment a {
    color: #643c02;
    font-weight: bold;
    text-decoration: none;
}

.login-to-comment a:hover {
    color: #8b5a00;
    text-decoration: underline;
}

/* ========================================
   BADGES DE RANGS SOBRES ET ÉLÉGANTS
   ======================================== */
/* Badge de base - Design épuré */
.rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    margin-left: 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px);
    transition: all 0.2s ease;
    text-transform: none;
}

.badge-icon {
    font-size: 12px;
    opacity: 0.8;
}

.badge-text {
    font-family: 'Segoe UI', sans-serif;
}

/* Effet hover subtil */
.rank-badge:hover {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 970px) {
    div.gallery {
        width: calc(100% - 20px);
        margin-top: 0 !important;
    }

    .article_comment_name {
        margin-left: 0 !important;
    }

    .article_comment_date {
        float: none !important;
        display: block !important;
        text-align: center !important;
        margin-top: 5px !important;
    }

    .pagination-btn {
        padding: 6px 10px;
        margin: 0 1px;
        font-size: 0.8em;
        min-width: 30px;
    }

    .pagination-info {
        font-size: 12px;
    }

    .screenshot-comments {
        padding: 10px;
        margin-top: 15px;
    }

    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .submit-comment-btn {
        width: 100%;
        min-width: auto;
    }

    .char-counter {
        text-align: center;
    }

    .rank-badge {
        font-size: 10px;
        padding: 2px 8px;
        gap: 3px;
    }

    .badge-icon {
        font-size: 11px;
    }
}

/* ========================================
   SYSTÈME DE VOTE POUR COMMENTAIRES
   Utilise les petits boutons du sprite.png
   ======================================== */
/* Container pour les votes de commentaires - Version badge */
.comment-votes {
    margin-top: 8px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Badge de vote pour commentaires - Style rank-badge */
.comment-vote-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    border: 1.5px solid;
    backdrop-filter: blur(2px);
    transition: all 0.2s ease;
    text-transform: none;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    border-color: #dee2e6;
}

/* Boutons de vote dans le badge */
.comment-vote-btn {
    border: none;
    background: none;
    cursor: pointer;
    outline: none;
    font-size: 12px;
    transition: all 0.2s ease;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: 0.8;
}

.comment-vote-btn:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* Bouton j'aime - Vert */
.comment-vote-btn.like-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: 1px solid #1e7e34;
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.comment-vote-btn.like-btn:hover {
    background: linear-gradient(135deg, #218838 0%, #1abc9c 100%);
}

/* Bouton j'aime pas - Rouge */
.comment-vote-btn.dislike-btn {
    background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%);
    border: 1px solid #bd2130;
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.comment-vote-btn.dislike-btn:hover {
    background: linear-gradient(135deg, #c82333 0%, #c0392b 100%);
}

/* État voté - Gris pour les deux boutons */
.comment-vote-btn.voted {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
    border: 1px solid #495057 !important;
    cursor: default;
    opacity: 0.8;
    color: white !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) !important;
}

.comment-vote-btn.voted:hover {
    transform: none !important;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
    opacity: 0.8 !important;
}

/* Compteur de votes dans le badge */
.comment-vote-count {
    font-size: 11px;
    color: #495057;
    font-weight: 600;
    min-width: 12px;
    text-align: center;
    margin: 0 2px;
}

/* Effet hover sur le badge complet */
.comment-vote-badge:hover {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* ========================================
   SYSTÈME DE VOTE POUR SCREENSHOTS
   ======================================== */
/* Container pour les votes de screenshots */
.screenshot-votes {
    margin: 15px 0;
    text-align: center;
    padding: 8px;
    background: rgba(253, 202, 0, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(253, 202, 0, 0.2);
}

/* Style similaire au vote de personnage mais adapté aux screenshots */
.screenshot-plus-minus {
    display: inline-block;
    background: linear-gradient(135deg, #fdca00 0%, #f8b801 100%);
    border: 2px solid #d4940a;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    color: #643c02;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.screenshot-plus-minus:hover {
    background: linear-gradient(135deg, #f8b801 0%, #e6a600 100%);
    box-shadow: 0 3px 8px rgba(253, 202, 0, 0.3);
    transform: translateY(-1px);
}

.screenshot-plus-minus .result {
    display: inline-block;
    margin: 0 8px;
    font-size: 14px;
    font-weight: bold;
    color: #643c02;
    min-width: 20px;
    text-align: center;
}

.screenshot-plus-minus .p_button {
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
    margin: 0 2px;
}

.screenshot-plus-minus .p_button:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.screenshot-plus-minus .p_button.up {
    background-image: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.screenshot-plus-minus .p_button.down {
    background-image: linear-gradient(135deg, #dc3545 0%, #fd7e14 100%);
    color: white;
}

.screenshot-plus-minus .p_button.voted {
    background: #6c757d;
    color: #dee2e6;
    cursor: not-allowed;
}

/* Responsive: votes à droite pour les écrans > 970px */
@media (min-width: 971px) {
    .screenshot-votes {
        text-align: right;
        margin-top: -30px;
        margin-bottom: 30px;
    }
}

.comment-vote-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.comment-vote-btn.down.voted {
    background-position: -20px -298px;
    /* Position active des petits boutons j'aime pas */
    opacity: 1;
}

/* Compteur de votes pour commentaires */
.comment-vote-count {
    font-size: 11px;
    color: #495057;
    font-weight: 500;
    min-width: 20px;
    text-align: center;
    padding: 0 3px;
}

/* Centrage des badges de vote des commentaires sur écrans <= 856px */
@media (max-width: 856px) {
    .comment-vote-badge {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.gallery-info-notice {
    font: 1em/1.5em Verdana, Arial, sans-serif;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    background: linear-gradient(135deg, #fdca00 0%, #fee480 100%);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 15px;
    border: 2px solid #f8b801;
    transition: all 0.3s ease;
    text-align: center;
}

.gallery-info-notice.owner-notice {
    background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
    border-color: #43A047;
    color: white;
    margin-bottom: 40px;
}

.gallery-info-notice.visitor-notice {
    background: linear-gradient(135deg, #2196F3 0%, #42A5F5 100%);
    border-color: #1976D2;
    color: white;
    margin-bottom: 40px;
}

.gallery-info-notice:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.notice-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(100, 60, 2, 0.2);
}

.gallery-info-notice.owner-notice .notice-header, .gallery-info-notice.visitor-notice .notice-header {
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.notice-icon {
    font-size: 1.8em;
    margin-right: 12px;
    min-width: 40px;
    text-align: center;
}

.notice-title {
    font-weight: bold;
    font-size: 1.1em;
    color: #643c02;
}

.gallery-info-notice.owner-notice .notice-title, .gallery-info-notice.visitor-notice .notice-title {
    color: white;
}

.notice-content {
    margin-top: 8px;
    text-align: center;
}

.notice-content p {
    margin: 0 0 12px 0;
    color: #643c02;
    font-size: 0.95em;
    line-height: 1.4;
    text-align: center;
}

.gallery-info-notice.owner-notice .notice-content p, .gallery-info-notice.visitor-notice .notice-content p {
    color: rgba(255, 255, 255, 0.95);
}

.notice-btn {
    display: inline-block;
    padding: 8px 16px;
    font: 1em/1.0em 'Lobster1.4Regular', Georgia, serif;
    color: #fff !important;
    text-decoration: none;
    text-shadow: 0px -1px 0px #555;
    background: linear-gradient(135deg, #e6a600 0%, #cc9500 100%);
    border: 1px solid #b8850a;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    font-size: 0.9em;
}

.gallery-info-notice.owner-notice .notice-btn {
    background: linear-gradient(135deg, #388E3C 0%, #2E7D32 100%);
    border-color: #2E7D32;
    color: #fff !important;
}

.gallery-info-notice.visitor-notice .notice-btn {
    background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
    border-color: #1565C0;
    color: #fff !important;
}

.notice-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    color: #fff !important;
}

.notice-btn:active {
    transform: translateY(0px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .gallery-info-notice {
        margin: 15px 10px;
        max-width: none;
    }

    .notice-header {
        flex-direction: column;
        text-align: center;
    }

    .notice-icon {
        margin-right: 0;
        margin-bottom: 8px;
    }
}

/* ── Classes construites dynamiquement en PHP ─────────────────────
   ('itemImgContainer' . $rarity, 'comment-' . $rang, 'my_player_' . $n)
   Elles n'apparaissent jamais telles quelles dans le code : une purge
   automatique les prend pour du code mort. NE PAS LES SUPPRIMER. */

.itemImgContainer3 {
    float: left;
    text-align: left;
    height: 44px;
    width: 44px;
    background-image: url('../images/player/hench/item_border.png');
    background-repeat: no-repeat;
    background-position: 0 -132px;
    margin-right: 2px;
}

.leftEquipmentBox .itemImgContainer3, .rightEquipmentBox .itemImgContainer3 {
    float: none;
}

.itemImgContainer4 {
    float: left;
    text-align: left;
    height: 44px;
    width: 44px;
    background-image: url('../images/player/hench/item_border.png');
    background-repeat: no-repeat;
    background-position: 0 -176px;
    margin-right: 2px;
}

/* Blocs distingués pour les rangs élevés */
.comment-admin, .comment-moderator, .comment-gm, .comment-staff, .comment-helper {
    border-left: 4px solid;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.comment-admin {
    border-left-color: #ffc107;
    background: linear-gradient(135deg, #fffdf7 0%, #fefbf3 100%);
}

.comment-gm {
    border-left-color: #fd7e14;
    background: linear-gradient(135deg, #fff8f5 0%, #fef5f0 100%);
}

.comment-helper {
    border-left-color: #28a745;
    background: linear-gradient(135deg, #f8fff9 0%, #f3fef5 100%);
}

.comment-moderator {
    border-left-color: #ffc107;
    background: linear-gradient(135deg, #fffdf7 0%, #fefbf3 100%);
}

/* Styles pour les rangs de commentaires */
.comment-rank {
    font-size: 11px;
    font-weight: bold;
    margin-left: 5px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

.comment-staff {
    border-left-color: #ffc107;
    background: linear-gradient(135deg, #fffdf7 0%, #fefbf3 100%);
}

.comment-vip {
    border-left: 3px solid #007bff;
    background: linear-gradient(135deg, #f8fcff 0%, #f3f9ff 100%);
}

/* Classes pour les mini-personnages du compte */
.my_player_0 {
    background: url('../images/player/characters/charMini0.png') no-repeat center;
    background-size: 64px 64px;
    /* Encore plus grand : 64px au lieu de 48px */
}

.my_player_1 {
    background: url('../images/player/characters/charMini1.png') no-repeat center;
    background-size: 64px 64px;
    /* Encore plus grand : 64px au lieu de 48px */
}

.my_player_2 {
    background: url('../images/player/characters/charMini2.png') no-repeat center;
    background-size: 64px 64px;
    /* Encore plus grand : 64px au lieu de 48px */
}

.my_player_3 {
    background: url('../images/player/characters/charMini3.png') no-repeat center;
    background-size: 64px 64px;
    /* Encore plus grand : 64px au lieu de 48px */
}

/* ── Restaure : supprime a tort par la purge ─────────────────────
   Ces classes SONT utilisees (badges de rang construits en PHP,
   boites d'equipement, infobulles). NE PAS LES SUPPRIMER. */

.topEquipmentBox {
    width: 100px;
    margin: 0 auto;
}

#connected_barre .avatar {
    cursor: pointer;
    vertical-align: top;
    display: inline-block;
    height: 32px;
}

#connected_barre .avatar img {
    max-height: 32px;
}

/* Badges spécialisés - Couleurs sobres */
.badge-admin {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    border-color: #ffc107;
    border-width: 1.5px;
}

.badge-developer {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    border-color: #6c757d;
    border-width: 1.5px;
}

.badge-gm {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    border-color: #fd7e14;
    border-width: 1.5px;
}

.badge-helper {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    border-color: #28a745;
    border-width: 1.5px;
}

.badge-moderator {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    border-color: #ffc107;
    border-width: 1.5px;
}

.badge-vip {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    border-color: #007bff;
    border-width: 1.5px;
}

.tooltip {
    display: none;
    width: 195px;
    color: #864710;
    text-shadow: none;
    margin-left: 6px;
    z-index: 9999;
    font: 0.7em/1em Verdana,Arial,Helvetica,sans-serif;
}

.tooltip h6 {
    margin: 0;
    padding: 0;
    padding-left: 20px;
    padding-right: 12px;
    padding-top: 12px;
    font-weight: bold;
    font-size: 10px;
    min-height: 25px;
}

.tooltip h6 {
    background: transparent url("../images/player/tooltip-header.png") no-repeat 0 0;
}

.tooltip p {
    padding: 0;
    margin: 0;
    padding-left: 20px;
    padding-right: 13px;
    padding-bottom: 3px;
    background: transparent url("../images/player/tooltip-fond.png") repeat-y 0 0;
}

.tooltip .tooltip-footer {
    height: 30px;
    background: transparent url("../images/player/tooltip-footer.png") no-repeat 0 0;
}

/* ── La page personnage : equipement et henchs ─────────────────────────────
   Ces regles avaient disparu a la purge.

   LA DISPOSITION
       .leftEquipmentBox    a GAUCHE du personnage
       .rightEquipmentBox   a DROITE
       .topEquipmentBox     au-dessus, centre

   LE CADRE D'OBJET
   item_border.png est un SPRITE vertical : une bande de 44px par rarete.
   .itemImgContainer0 montre la premiere (0 0), la 1 celle du dessous
   (0 -44px), et ainsi de suite jusqu'a la 4 (0 -176px). C'est ce qui donne
   la couleur de la bordure.

   L'icone de 32x32 se place au CENTRE du cadre de 44x44. */

.leftEquipmentBox {
    float: left;
    margin-left: -187px;
    margin-top: 59px;
}

.rightEquipmentBox {
    float: right;
    margin-right: 2px;
    margin-top: 59px;
}

.topEquipmentBox {
    margin: 0px auto;
}

/* La geometrie, commune a toutes les raretes. position:relative sert d'ancre
   a l'icone. */
.itemImgContainer,
.itemImgContainer0,
.itemImgContainer1,
.itemImgContainer2,
.itemImgContainer3,
.itemImgContainer4 {
    position: relative;
    float: left;
    height: 44px;
    width: 44px;
    background-image: url('../images/player/hench/item_border.png');
    background-repeat: no-repeat;
    margin-right: 2px;
}

/* La bande du sprite, une par rarete. */
.itemImgContainer,
.itemImgContainer0 { background-position: 0 0; }
.itemImgContainer1 { background-position: 0 -44px; }
.itemImgContainer2 { background-position: 0 -88px; }
.itemImgContainer3 { background-position: 0 -132px; }
.itemImgContainer4 { background-position: 0 -176px; }

/* Dans les colonnes laterales, les cadres s'empilent : pas de flottement. */
.leftEquipmentBox .itemImgContainer,
.leftEquipmentBox .itemImgContainer0,
.leftEquipmentBox .itemImgContainer1,
.leftEquipmentBox .itemImgContainer2,
.leftEquipmentBox .itemImgContainer3,
.leftEquipmentBox .itemImgContainer4,
.rightEquipmentBox .itemImgContainer,
.rightEquipmentBox .itemImgContainer0,
.rightEquipmentBox .itemImgContainer1,
.rightEquipmentBox .itemImgContainer2,
.rightEquipmentBox .itemImgContainer3,
.rightEquipmentBox .itemImgContainer4 {
    float: none;
    margin-bottom: 2px;
}

/* L'icone, CENTREE : le centrage par translate tient meme si la taille du
   cadre change. */
.itemImgContainer .itemImg,
.itemImgContainer0 .itemImg,
.itemImgContainer1 .itemImg,
.itemImgContainer2 .itemImg,
.itemImgContainer3 .itemImg,
.itemImgContainer4 .itemImg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    margin: 0;
}