:root { --bg: #050505; --panel: #0e0f12; --panel-border: #2a2d35; --gold: #d4af37; --gold-bright: #fcd55c; --text: #e0e0e0; --input-bg: #08090a; --col-force: #bca75c; --col-int: #ff4757; --col-chance: #4b7bec; --col-agi: #2ed573; --col-vita: #ff6b81; --col-sag: #a55eea; --col-pa: #facc15; --col-pm: #22c55e; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
.xb-wrapper { font-family: 'Montserrat', sans-serif; background: linear-gradient(135deg, #111 0%, #050505 100%); color: var(--text); width: 100%; max-width: 1900px; margin: 0 auto; padding: 25px; border-radius: 16px; display: flex; flex-direction: column; gap: 25px; min-height: 950px; box-sizing: border-box; box-shadow: 0 0 80px rgba(0,0,0,0.9); border: 1px solid #222; user-select: none; position: relative; }
.xb-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--panel-border); }
.xb-title { font-family: 'Cinzel', serif; font-size: 2.2rem; color: white; margin: 0; text-shadow: 0 0 25px rgba(212, 175, 55, 0.2); }
.xb-subtitle { font-size: 0.9rem; color: #666; font-weight: 600; letter-spacing: 1px; display: flex; align-items: center; gap: 10px; }
.xb-storage-badge { padding: 4px 10px; border-radius: 4px; font-weight: 900; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; border: 1px solid; }
.xb-storage-cloud { background: rgba(46, 204, 113, 0.1); color: #2ecc71; border-color: #2ecc71; }
.xb-storage-local { background: rgba(230, 126, 34, 0.1); color: #e67e22; border-color: #e67e22; }
.xb-main-nav { display: flex; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; justify-content: center; align-items: center; }
.xb-nav-btn {
background: #1a1a1a;
border: 1px solid #333;
color: #888;
padding: 12px 24px;
font-weight: 900;
font-family: 'Cinzel';
font-size: 1rem;
border-radius: 6px;
cursor: pointer;
transition: 0.3s;
text-transform: uppercase;
min-width: 120px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.xb-nav-btn:hover { color: white; border-color: #555; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.xb-nav-btn.active { background: var(--gold); color: black; border-color: var(--gold); box-shadow: 0 0 15px rgba(212,175,55,0.5); }
.xb-mode-switch { background: #1a1a1a; color: #ccc; border: 1px solid #333; padding: 10px 20px; font-weight: 800; cursor: pointer; border-radius: 6px; display: flex; align-items: center; gap: 10px; text-transform: uppercase; font-size: 0.9rem; transition: 0.2s; }
.xb-mode-switch:hover { border-color: var(--gold); background: #222; color: white; }
.xb-controls { display: flex; gap: 15px; align-items: center; }
.xb-build-id { background: #000; color: var(--gold); border: 1px solid var(--gold); padding: 10px 15px; border-radius: 4px; font-weight: 900; font-family: 'Cinzel'; font-size: 1.1rem; display: none; }
.xb-name-input { background: #111; border: 1px solid #444; color: white; padding: 10px 15px; font-family: 'Cinzel'; font-size: 1.1rem; border-radius: 4px; width: 250px; text-align: left; }
.xb-lvl-input { background: #111; border: 1px solid #444; color: var(--gold); padding: 10px 5px; font-family: 'Montserrat'; font-weight: 900; font-size: 1.1rem; border-radius: 4px; width: 80px; text-align: center; }
.xb-btn-action { background: #1a1a1a; color: #ccc; border: 1px solid #333; padding: 10px 15px; cursor: pointer; transition: 0.3s; font-family: 'Montserrat'; font-weight: 800; border-radius: 4px; text-transform: uppercase; font-size: 0.8rem; }
.xb-btn-action:hover { border-color: var(--gold); color: white; }
.xb-btn-share { background: #2980b9; color: white; border-color: #2980b9; }
.xb-btn-save { background: var(--gold); color: black; border-color: var(--gold); }
/* === SYSTÈME DE TAGS === */
.xb-tags-editor { display: flex; align-items: center; gap: 15px; padding: 15px 20px; background: rgba(0,0,0,0.3); border-top: 1px solid #333; flex-wrap: wrap; }
.xb-tags-label { font-family: 'Cinzel'; font-weight: 700; color: var(--gold); font-size: 1.1rem; }
.xb-tags-list { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.xb-tag-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; color: white; cursor: pointer; transition: 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.xb-tag-badge:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.4); }
.xb-tag-remove { font-size: 1.1rem; font-weight: 900; cursor: pointer; opacity: 0.8; transition: 0.2s; }
.xb-tag-remove:hover { opacity: 1; transform: scale(1.2); }
.xb-btn-add-tag { background: linear-gradient(135deg, #333, #1a1a1a); border: 2px dashed #666; color: #aaa; padding: 8px 16px; border-radius: 20px; font-weight: 700; cursor: pointer; transition: 0.3s; font-size: 0.9rem; }
.xb-btn-add-tag:hover { border-color: var(--gold); color: var(--gold); background: linear-gradient(135deg, #444, #2a2a2a); }
/* Modale sélection tags */
.xb-tags-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 20000; justify-content: center; align-items: center; }
.xb-tags-modal.show { display: flex; }
.xb-tags-modal-content { background: linear-gradient(145deg, #1a1a1a, #0a0a0a); border: 2px solid var(--gold); border-radius: 16px; padding: 30px; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(212,175,55,0.2); }
.xb-tags-modal-title { font-family: 'Cinzel'; font-size: 2rem; color: var(--gold); margin-bottom: 20px; text-align: center; text-shadow: 0 2px 8px rgba(212,175,55,0.4); }
.xb-tags-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 25px; }
.xb-tag-option { padding: 12px 16px; border-radius: 12px; text-align: center; font-weight: 700; cursor: pointer; transition: 0.2s; border: 2px solid transparent; position: relative; }
.xb-tag-option:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.4); }
.xb-tag-option.selected { border-color: white; box-shadow: 0 0 20px rgba(255,255,255,0.3); }
.xb-tag-option.selected::after { content: '✓'; position: absolute; top: 5px; right: 8px; font-size: 1.2rem; color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.xb-tags-modal-actions { display: flex; gap: 15px; justify-content: center; }
.xb-tags-modal-btn { padding: 12px 30px; border-radius: 8px; font-weight: 800; font-size: 1rem; cursor: pointer; transition: 0.3s; border: none; text-transform: uppercase; font-family: 'Montserrat'; }
.xb-tags-modal-btn.confirm { background: var(--gold); color: black; }
.xb-tags-modal-btn.confirm:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(212,175,55,0.4); }
.xb-tags-modal-btn.cancel { background: #333; color: white; }
.xb-tags-modal-btn.cancel:hover { background: #444; }
/* Tags dans cartes builds */
.xb-build-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.xb-build-tag { padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
/* Filtres tags dans "Mes Builds" */
.xb-tags-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 15px 20px; background: rgba(0,0,0,0.3); border-bottom: 1px solid #333; align-items: center; }
.xb-tags-filter-label { font-family: 'Cinzel'; font-weight: 700; color: var(--gold); font-size: 1rem; margin-right: 10px; }
.xb-filter-tag { padding: 6px 14px; border-radius: 16px; font-size: 0.85rem; font-weight: 700; color: #aaa; background: rgba(255,255,255,0.05); border: 2px solid #333; cursor: pointer; transition: 0.2s; }
.xb-filter-tag:hover { border-color: #666; color: white; }
.xb-filter-tag.active { color: white; border-color: white; box-shadow: 0 0 15px rgba(255,255,255,0.2); }
.xb-btn-clear-filters { padding: 6px 14px; border-radius: 16px; background: #e74c3c; color: white; border: none; font-weight: 700; font-size: 0.8rem; cursor: pointer; transition: 0.3s; }
.xb-btn-clear-filters:hover { background: #c0392b; transform: scale(1.05); }
.xb-view-container { display: none; width: 100%; height: 100%; }
.xb-view-container.active { display: block; }
.xb-workspace { display: flex; gap: 20px; flex: 1; align-items: stretch; height: 100%; }
.xb-col-bonus { width: 260px; background: rgba(255,255,255,0.03); border: 1px solid var(--gold); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; height: 100%; }
.xb-bonus-head { padding: 15px; text-align: center; font-family: 'Cinzel'; font-weight: 800; color: var(--gold-bright); border-bottom: 1px solid var(--gold); background: rgba(212, 175, 55, 0.1); font-size: 1.1rem; text-transform: uppercase; }
.xb-bonus-body { padding: 20px; overflow-y: auto; flex: 1; scrollbar-width: thin; }
.xb-pano-group { margin-bottom: 15px; border: 1px solid #333; border-radius: 6px; background: #111; overflow: hidden; }
.xb-pano-header { padding: 12px; background: rgba(255,255,255,0.05); font-weight: 900; color: var(--gold); text-transform: uppercase; font-size: 0.95rem; border-bottom: 1px solid #333; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; }
.xb-pano-header:hover { background: rgba(255,255,255,0.1); }
.xb-pano-content { padding: 15px; }
.xb-pano-group.closed .xb-pano-content { display: none; }
.xb-pano-group.closed .xb-pano-arrow { transform: rotate(-90deg); }
.xb-pano-stat { display: flex; gap: 8px; align-items: center; font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.xb-pano-icon { width: 20px; height: 20px; object-fit: contain; }
.xb-btn-set { background: #222; border: 1px solid #444; color: var(--gold); border-radius: 4px; padding: 2px 8px; cursor: pointer; margin-left: 10px; font-weight: 900; transition: 0.2s; font-size: 12px; }
.xb-col-classes { width: 110px; display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 860px; overflow-y: auto; scrollbar-width: none; }
.xb-cls-row { display: flex; gap: 6px; flex: 1; width: 100%; }
.xb-cls-icon { flex: 1; height: 100%; min-height: 60px; background: #111; border: 1px solid #333; border-radius: 6px; cursor: pointer; opacity: 0.5; display: flex; justify-content: center; align-items: center; transition: 0.2s; }
.xb-cls-icon:hover, .xb-cls-icon.active { opacity: 1; border-color: var(--gold); }
.xb-cls-icon.active { background: rgba(212, 175, 55, 0.15); box-shadow: 0 0 10px rgba(212, 175, 55, 0.2); }
.xb-cls-icon img { width: 55px; height: 55px; object-fit: contain; }
.xb-col-doll { flex: 1.8; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; padding: 20px; position: relative; transition: all 0.3s; }
.xb-hero-display { text-align: center; margin-bottom: 15px; z-index: 5; position: relative; }
.xb-hd-name { font-family: 'Cinzel', serif; font-size: 2.2rem; color: white; margin: 0; text-shadow: 0 5px 15px rgba(0,0,0,0.9); }
.xb-doll-grid { display: grid; grid-template-areas: "amulette character chapeau" "bouclier character cape" "anneau1 character anneau2" "bottes character sac" "arme character ceinture" "dofus dofus dofus"; grid-template-columns: 80px 1fr 80px; gap: 4px; height: 100%; align-content: start; margin-top: 5px; }
.xb-slot { width: 80px; height: 80px; background: #080808; border: 2px solid #333; border-radius: 8px; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; background-repeat: no-repeat; background-position: center; background-size: 65%; z-index: 10; transition: all 0.3s; overflow: visible; }
.xb-slot:hover { border-color: var(--gold); z-index: 20; box-shadow: 0 0 15px rgba(212, 175, 55, 0.2); }
.xb-slot.filled { border-color: #555; background: #111; background-image: none !important; opacity: 1; }
/* Bordures colorées par panoplie - chaque panoplie a sa couleur unique */
.xb-slot.pano-set { border-width: 3px; box-shadow: 0 0 12px var(--pano-color, rgba(212,175,55,0.5)); }
.xb-slot.pano-set::after { content: ''; position: absolute; inset: -5px; border-radius: 11px; border: 2px solid var(--pano-color, rgba(212,175,55,0.3)); opacity: 0.6; pointer-events: none; animation: pano-pulse 2s ease-in-out infinite; }
@keyframes pano-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }
.xb-slot img { width: 100%; height: 100%; object-fit: contain; padding: 1px; filter: drop-shadow(0 5px 8px rgba(0,0,0,0.9)); }
.xb-remove { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; background: #c0392b; color: white; border-radius: 50%; text-align: center; line-height: 18px; font-weight: 900; border: 2px solid #fff; display: none; z-index: 1000; font-size: 14px; cursor: pointer; }
.xb-slot.filled:hover .xb-remove { display: block; }
/* Bouton personnalisation/exo sur slot */
.xb-slot-customize { position: absolute; bottom: -8px; right: -8px; width: 22px; height: 22px; background: #9b59b6; color: white; border-radius: 50%; text-align: center; line-height: 20px; font-weight: 900; border: 2px solid #fff; display: none; z-index: 1001; font-size: 12px; cursor: pointer; transition: all 0.2s; }
.xb-slot-customize:hover { background: #8e44ad; transform: scale(1.1); }
.xb-slot.filled:hover .xb-slot-customize { display: flex; align-items: center; justify-content: center; }
#slot-amulette { grid-area: amulette; background-image: url('data:image/svg+xml;utf8,'); }
#slot-anneau1 { grid-area: anneau1; background-image: url('data:image/svg+xml;utf8,'); }
#slot-anneau2 { grid-area: anneau2; background-image: url('data:image/svg+xml;utf8,'); }
#slot-ceinture { grid-area: ceinture; background-image: url('data:image/svg+xml;utf8,'); }
#slot-bottes { grid-area: bottes; background-image: url('data:image/svg+xml;utf8,'); }
#slot-chapeau { grid-area: chapeau; background-image: url('data:image/svg+xml;utf8,'); }
#slot-cape { grid-area: cape; background-image: url('data:image/svg+xml;utf8,'); }
#slot-sac { grid-area: sac; background-image: url('data:image/svg+xml;utf8,'); }
#slot-bouclier { grid-area: bouclier; background-image: url('data:image/svg+xml;utf8,'); }
#slot-arme { grid-area: arme; opacity: 0.5; border-style: dashed; background-image: url('data:image/svg+xml;utf8,'); }
.xb-dofus-row { grid-area: dofus; display: flex; gap: 10px; justify-content: center; margin-top: 80px; flex-wrap: wrap; }
[id^=slot-dofus] { width: 48px; height: 48px; background-size: 35%; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: center; }
.xb-char-zone { grid-area: character; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 5px; position: relative; width: 100%; height: 100%; min-height: 450px; }
.xb-sprite {
width: auto !important;
height: 360px !important;
max-height: 360px !important;
object-fit: contain;
filter: drop-shadow(0 15px 30px rgba(0,0,0,0.8));
z-index: 1;
}
.xb-arrows { display: flex; gap: 80px; position: absolute; bottom: -60px; z-index: 20; }
.xb-arr-btn { width: 45px; height: 45px; background: rgba(0,0,0,0.8); border: 1px solid #555; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s; backdrop-filter: blur(5px); }
.xb-arr-btn:hover { border-color: var(--gold); background: var(--gold); }
.xb-arr-btn svg { width: 22px; fill: white; }
.xb-arr-btn:hover svg { fill: black; }
.xb-col-stats { width: 440px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.xb-stats-head { padding: 15px; border-bottom: 1px solid #333; background: rgba(0,0,0,0.2); }
.xb-reset-row { display: flex; gap: 10px; margin-top: 5px; justify-content: flex-end; align-items: center; }
.xb-btn-rst { background: #333; color: #ccc; border: 1px solid #444; padding: 10px 20px; font-weight: 800; text-transform: uppercase; font-size: 0.9rem; border-radius: 4px; cursor: pointer; transition: 0.2s; }
.xb-btn-rst:hover { background: #555; color: white; }
.xb-btn-remove-all { background: #5a0b0b; color: #ffadad; border: 1px solid #8e1c1c; padding: 10px 20px; font-weight: 800; text-transform: uppercase; font-size: 0.9rem; border-radius: 4px; cursor: pointer; transition: 0.2s; margin-right: auto; }
.xb-stats-body { padding: 0; overflow-y: auto; scrollbar-width: thin; }
.xb-grid-head { display: grid; grid-template-columns: 1fr 100px 100px 50px; gap: 5px; text-align: center; color: #888; font-weight: 900; text-transform: uppercase; font-size: 0.8rem; padding: 10px 20px; border-bottom: 1px solid #222; }
.xb-st-row { display: flex; align-items: center; padding: 10px 20px; border-bottom: 1px solid rgba(255,255,255,0.03); min-height: 42px; }
.xb-st-lbl { flex: 1; min-width: 120px; font-weight: 900; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; text-transform: uppercase; }
.xb-st-icon { width: 18px; height: 18px; }
.xb-st-tot { width: 50px; text-align: right; font-weight: 900; color: white; font-size: 1.2rem; }
.xb-input-wrap { display: flex; align-items: center; background: var(--input-bg); border: 1px solid #444; border-radius: 4px; height: 36px; margin: 0 5px; width: 110px; overflow: hidden; }
.xb-btn-pm { width: 32px; height: 100%; background: #222; border: none; color: #aaa; cursor: pointer; font-weight: 900; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; }
.xb-st-in { flex: 1; background: transparent; border: none; color: white; text-align: center; font-weight: 900; font-size: 16px; width: 100%; padding: 0; }
.xb-capital-section { text-align: center; padding: 15px; border-bottom: 1px solid #333; background: rgba(255,255,255,0.02); }
.xb-cap-row { font-size: 0.95rem; color: #aaa; text-transform: uppercase; font-weight: 900; }
.xb-cap-val { color: var(--gold-bright); font-size: 1.4rem; font-weight: 900; margin-left: 10px; }
.xb-stats-grid-2col { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #333; }
.xb-stat-group-title { background: rgba(255, 255, 255, 0.05); padding: 8px 15px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); font-weight: 900; border-top: 1px solid #222; border-bottom: 1px solid #222; margin-top: 5px; grid-column: 1 / -1; }
.xb-stat-row { display: flex; justify-content: space-between; padding: 6px 15px; font-size: 0.95rem; color: #aaa; border-bottom: 1px solid rgba(255,255,255,0.02); transition: 0.2s; border-right: 1px solid rgba(255,255,255,0.02); }
.xb-stat-row:nth-child(even) { border-right: none; }
.xb-stat-label { font-weight: 900; display: flex; align-items: center; gap: 8px; font-size: 0.95rem; text-transform: uppercase; color: #ccc; }
.xb-stat-val { font-weight: 900; color: white; font-size: 1.1rem; }
.xb-res-row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.02); font-weight: 900; color: #ccc; }
.xb-res-row span:first-child { text-align: right; padding-right: 15px; color: #aaa; }
.xb-res-row span:last-child { text-align: left; padding-left: 15px; color: #fff; }
.xb-res-icon { justify-self: center; width: 18px; height: 18px; }
.xb-col-manage { width: 340px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; height: 100%; transition: all 0.3s; }
.xb-manage-head { padding: 15px; background: #000; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; color: var(--gold); font-weight: 800; font-family: 'Cinzel'; font-size: 1.1rem; text-transform: uppercase; }
.xb-manage-head span { font-size: 0.9rem; color: #888; border: 1px solid #333; padding: 2px 8px; border-radius: 4px; }
.xb-list-container {
flex: 1;
padding: 15px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(4, 1fr); /* 4 lignes */
gap: 10px;
align-content: start;
max-height: none;
overflow: visible; /* Pas de scroll */
}
.xb-full-page-builds {
padding: 0;
}
/* === BUILD CARDS DOFUSBOOK STYLE === */
.xb-build-card {
background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
border: 2px solid #333;
border-radius: 8px;
padding: 6px;
cursor: pointer;
transition: all 0.3s;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
max-height: none;
}
.xb-build-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(212,175,55,0.05), transparent);
opacity: 0;
transition: 0.3s;
}
.xb-build-card:hover {
border-color: var(--gold);
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(212,175,55,0.3);
}
.xb-build-card:hover::before {
opacity: 1;
}
.xb-build-card.active {
border-color: var(--gold);
background: linear-gradient(145deg, #222, #1a1a1a);
box-shadow: 0 0 20px rgba(212,175,55,0.4);
}
/* Header */
.xb-build-header {
display: flex;
align-items: center;
gap: 6px;
padding-bottom: 5px;
border-bottom: 1px solid #333;
}
.xb-build-class-icon {
width: 28px;
height: 28px;
object-fit: contain;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
flex-shrink: 0;
}
.xb-build-header-info {
flex: 1;
min-width: 0;
}
.xb-build-title {
font-family: 'Cinzel', serif;
font-weight: 800;
color: white;
font-size: 0.9rem;
line-height: 1.2;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.xb-build-number {
color: var(--gold);
font-weight: 900;
font-size: 1.1rem;
margin-right: 4px;
text-shadow: 0 2px 6px rgba(212,175,55,0.6);
}
.xb-build-lvl {
background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(212,175,55,0.1));
color: var(--gold);
border: 1px solid rgba(212,175,55,0.4);
padding: 1px 6px;
border-radius: 4px;
font-size: 0.65rem;
font-weight: 700;
display: inline-block;
}
/* Tags badges en haut du build */
.xb-build-tags-top {
display: flex;
gap: 2px;
margin-top: 2px;
flex-wrap: wrap;
}
.xb-build-tag-badge {
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.65rem;
border: 2px solid rgba(255,255,255,0.2);
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
transition: 0.2s;
}
.xb-build-tag-badge:hover {
transform: scale(1.15);
box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}
/* Grille d'équipement */
.xb-build-equip-grid {
display: grid;
grid-template-columns: repeat(6, 1fr); /* 6 colonnes pour dofus */
gap: 2px;
padding: 3px 0;
}
/* Les 10 premiers slots (chapeau -> familier) sur 6 colonnes (2 par slot pour être plus grands) */
.xb-build-slot:nth-child(1), /* chapeau */
.xb-build-slot:nth-child(2) { /* cape */
grid-column: span 2;
}
.xb-build-slot:nth-child(3), /* amulette */
.xb-build-slot:nth-child(4) { /* anneau1 */
grid-column: span 2;
grid-row: 2;
}
.xb-build-slot:nth-child(5), /* anneau2 */
.xb-build-slot:nth-child(6) { /* ceinture */
grid-column: span 2;
grid-row: 3;
}
.xb-build-slot:nth-child(7), /* bottes */
.xb-build-slot:nth-child(8) { /* arme */
grid-column: span 2;
grid-row: 4;
}
.xb-build-slot:nth-child(9), /* bouclier */
.xb-build-slot:nth-child(10) { /* familier */
grid-column: span 2;
grid-row: 5;
}
/* Les 6 Dofus sur UNE SEULE ligne (row 6) */
.xb-build-slot:nth-child(11), /* dofus1 */
.xb-build-slot:nth-child(12), /* dofus2 */
.xb-build-slot:nth-child(13), /* dofus3 */
.xb-build-slot:nth-child(14), /* dofus4 */
.xb-build-slot:nth-child(15), /* dofus5 */
.xb-build-slot:nth-child(16) { /* dofus6 */
grid-column: span 1; /* 1 colonne = plus petit */
grid-row: 6;
}
.xb-build-slot {
aspect-ratio: 1;
background: linear-gradient(135deg, #0a0a0a, #050505);
border: 1px solid #333;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: 0.2s;
position: relative;
max-height: 28px;
}
.xb-build-slot.empty {
opacity: 0.3;
border-style: dashed;
}
.xb-build-slot.filled {
border-color: #555;
background: linear-gradient(135deg, #1a1a1a, #0f0f0f);
}
.xb-build-slot img {
width: 85%;
height: 85%;
object-fit: contain;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}
.xb-build-slot:hover {
border-color: var(--gold);
transform: scale(1.05);
}
/* Footer */
.xb-build-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 4px;
border-top: 1px solid #333;
}
.xb-build-stats-row {
display: flex;
gap: 4px;
}
.xb-build-stat {
display: flex;
align-items: center;
gap: 3px;
background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
border: 1px solid #333;
padding: 3px 6px;
border-radius: 5px;
font-size: 0.75rem;
font-weight: 900;
transition: 0.2s;
}
.xb-build-stat:hover {
border-color: currentColor;
transform: scale(1.05);
}
.xb-build-stat img {
width: 14px;
height: 14px;
filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
}
.xb-build-stat.pa {
color: var(--col-pa);
border-color: rgba(250, 204, 21, 0.4);
background: linear-gradient(135deg, rgba(250, 204, 21, 0.15), rgba(250, 204, 21, 0.05));
}
.xb-build-stat.pm {
color: var(--col-pm);
border-color: rgba(34, 197, 94, 0.4);
background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
}
.xb-build-stat.po {
color: var(--col-pa);
border-color: rgba(250, 204, 21, 0.3);
background: linear-gradient(135deg, rgba(250, 204, 21, 0.1), rgba(250, 204, 21, 0.03));
}
.xb-build-views {
display: flex;
align-items: center;
gap: 5px;
color: #888;
font-size: 0.85rem;
font-weight: 600;
}
.xb-build-views svg {
opacity: 0.6;
}
/* Boutons action */
.xb-build-del, .xb-build-copy {
position: absolute;
top: 6px;
width: 26px;
height: 26px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.9);
border-radius: 5px;
border: 1px solid;
z-index: 10;
transition: all 0.3s;
cursor: pointer;
opacity: 0;
pointer-events: none;
font-size: 0.75rem;
}
.xb-build-card:hover .xb-build-del,
.xb-build-card:hover .xb-build-copy {
opacity: 1;
pointer-events: auto;
}
.xb-build-del {
right: 6px;
color: #ef4444;
border-color: #ef4444;
}
.xb-build-del:hover {
background: #ef4444;
color: white;
transform: scale(1.1) rotate(90deg);
}
.xb-build-copy {
right: 38px;
color: var(--gold);
border-color: var(--gold);
}
.xb-build-copy:hover {
background: var(--gold);
color: #111;
transform: scale(1.1);
}
.xb-build-tags-btn {
position: absolute;
top: 6px;
right: 70px;
width: 26px;
height: 26px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.9);
border-radius: 5px;
border: 1px solid #3498db;
z-index: 10;
transition: all 0.3s;
cursor: pointer;
opacity: 0;
pointer-events: none;
color: #3498db;
font-size: 0.75rem;
}
.xb-build-card:hover .xb-build-tags-btn {
opacity: 1;
pointer-events: auto;
}
.xb-build-tags-btn:hover {
background: #3498db;
color: white;
transform: scale(1.1);
}
/* Empty state */
.xb-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
padding: 60px 20px;
text-align: center;
color: #666;
}
.xb-empty-state h3 {
color: var(--gold);
font-family: 'Cinzel', serif;
font-size: 1.5rem;
margin: 0;
}
.xb-empty-state p {
color: #888;
font-size: 1rem;
margin: 0;
}
@media (max-width: 1024px) { .xb-build-del { opacity: 1 !important; pointer-events: auto !important; background: rgba(239, 68, 68, 0.9); color: #fff; width: 40px; height: 40px; font-size: 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.5); } }
/* CARTES MES PERSONNAGES REFAITES */
.xb-card {
background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
padding: 15px;
border-radius: 10px;
border: 2px solid #333;
cursor: pointer;
transition: 0.3s;
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
height: 100%; /* Pour remplir la cellule */
}
.xb-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.6);
border-color: var(--gold);
}
.xb-card.active {
border-color: var(--gold);
background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
box-shadow: 0 0 15px rgba(212,175,55,0.4);
}
.xb-card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.xb-card-icon {
width: 50px;
height: 50px;
object-fit: contain;
flex-shrink: 0;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
}
.xb-card-info {
flex: 1;
overflow: hidden;
}
.xb-card-title {
font-weight: 900;
color: white;
font-size: 1.1rem;
line-height: 1.2;
margin-bottom: 4px;
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.xb-card-server {
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
padding: 3px 8px;
border-radius: 4px;
background: rgba(255,255,255,0.1);
}
.xb-card-level {
position: absolute;
top: 10px;
right: 10px;
background: var(--gold);
color: #000;
font-weight: 900;
padding: 4px 10px;
border-radius: 6px;
font-size: 0.9rem;
box-shadow: 0 2px 6px rgba(212,175,55,0.4);
}
.xb-card-stats {
display: flex;
gap: 10px;
justify-content: space-around;
padding: 8px 0;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
}
.xb-card-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
}
.xb-card-stat img {
width: 24px;
height: 24px;
object-fit: contain;
}
.xb-card-stat-value {
font-weight: 700;
color: var(--gold);
font-size: 0.9rem;
}
.xb-card-tags {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-top: 5px;
}
.xb-card-tag {
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
border: 2px solid rgba(255,255,255,0.2);
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
#xb-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 9000; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.xb-mod-box { background: #111; width: 1300px; height: 95vh; border: 1px solid #444; border-radius: 12px; display: flex; flex-direction: column; padding: 30px; box-shadow: 0 0 60px black; }
.xb-mod-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 1px solid #333; padding-bottom: 15px; }
.xb-filters-row { display: flex; gap: 10px; align-items: center; margin-bottom: 15px; flex-wrap: wrap; }
.xb-stat-filter-label { color: var(--gold); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }
.xb-stat-filter-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.xb-stat-btn { width: 38px; height: 38px; border: 2px solid #333; border-radius: 8px; background: linear-gradient(135deg, #1a1a1a, #0a0a0a); cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.3); position: relative; }
.xb-stat-btn::before { content: ''; position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent); opacity: 0; transition: 0.3s; }
.xb-stat-btn:hover { border-color: var(--gold); background: linear-gradient(135deg, #2a2a2a, #1a1a1a); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(212,175,55,0.3); }
.xb-stat-btn:hover::before { opacity: 1; }
.xb-stat-btn.active { border-color: var(--gold); background: linear-gradient(135deg, rgba(212,175,55,0.3), rgba(212,175,55,0.15)); box-shadow: 0 0 20px rgba(212,175,55,0.5), inset 0 1px 0 rgba(255,255,255,0.2); transform: scale(1.05); }
.xb-stat-btn img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
.xb-filter-btn { background: linear-gradient(135deg, #2a2a2a, #1a1a1a); border: 2px solid #444; padding: 10px 18px; border-radius: 8px; color: #aaa; cursor: pointer; font-weight: 700; text-transform: uppercase; font-size: 0.75rem; transition: all 0.3s; display: flex; align-items: center; gap: 8px; position: relative; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.xb-filter-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent); opacity: 0; transition: 0.3s; }
.xb-filter-btn svg { flex-shrink: 0; opacity: 0.7; transition: 0.3s; }
.xb-filter-btn:hover { color: white; border-color: var(--gold); background: linear-gradient(135deg, #3a3a3a, #2a2a2a); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(212,175,55,0.3); }
.xb-filter-btn:hover::before { opacity: 1; }
.xb-filter-btn:hover svg { opacity: 1; transform: scale(1.1); }
.xb-filter-btn.active { background: linear-gradient(135deg, var(--gold), #d4a533); color: #111; border-color: var(--gold); font-weight: 900; box-shadow: 0 4px 16px rgba(212,175,55,0.6), inset 0 1px 0 rgba(255,255,255,0.3); }
.xb-filter-btn.active svg { opacity: 1; fill: #111; stroke: #111; }
#xb-sort-select { background: linear-gradient(135deg, #2a2a2a, #1a1a1a); border: 2px solid #444; color: #ffffff; padding: 12px 16px; border-radius: 8px; font-weight: 700; font-size: 0.95rem; cursor: pointer; outline: none; min-width: 150px; transition: all 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.3); appearance: none; background-image: linear-gradient(135deg, #2a2a2a, #1a1a1a), url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: center, right 8px center; background-size: 100%, 20px; padding-right: 40px; }
#xb-sort-select:hover { border-color: var(--gold); background: linear-gradient(135deg, #3a3a3a, #2a2a2a); box-shadow: 0 4px 12px rgba(212,175,55,0.3); }
#xb-sort-select option { background: #2a2a2a; color: #ffffff; padding: 10px; font-weight: 600; }
.xb-reset-filters-btn { background: linear-gradient(135deg, #d32f2f, #c0392b); border: 2px solid #e74c3c; color: white; padding: 10px 18px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; display: flex; align-items: center; gap: 8px; transition: all 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.3); position: relative; overflow: hidden; }
.xb-reset-filters-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent); opacity: 0; transition: 0.3s; }
.xb-reset-filters-btn:hover { background: linear-gradient(135deg, #e74c3c, #d32f2f); transform: translateY(-2px) scale(1.05); box-shadow: 0 4px 16px rgba(231,76,60,0.5); }
.xb-reset-filters-btn:hover::before { opacity: 1; }
.xb-reset-filters-btn svg { flex-shrink: 0; transition: 0.3s; }
.xb-reset-filters-btn:hover svg { transform: rotate(-180deg); }
.xb-search { width: 100%; padding: 15px; background: #08090a; border: 1px solid #444; color: white; font-size: 1.1rem; border-radius: 8px; margin-bottom: 20px; }
.xb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; overflow-y: auto; padding-right: 5px; align-content: start; }
/* === FIX ITEM CARD + BOUTON SOUS IMAGE === */
.xb-item { background: linear-gradient(145deg, #1a1a1a, #111); border: 1px solid #333; border-radius: 8px; transition: 0.2s; position: relative; padding: 12px; cursor: pointer; display: flex; gap: 15px; min-height: 360px; align-items: stretch; overflow: visible; }
.xb-item-name { font-family: 'Cinzel'; font-weight: 800; color: white; font-size: 1.05rem; line-height: 1.3; margin-bottom: 6px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.xb-item-desc { color: #aaa; font-size: 0.9rem; line-height: 1.4; margin-bottom: 8px; }
.xb-item:hover { border-color: var(--gold); background: #222; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 5; }
.xb-item-left { display: flex; flex-direction: column; align-items: center; width: 90px; flex-shrink: 0; gap: 10px; }
.xb-item-img { width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5)); }
.xb-btn-add-set { width: 100%; text-align: center; background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(212, 175, 55, 0.15)); border: 2px solid var(--gold); color: var(--gold); padding: 10px 8px; font-size: 0.95rem; font-weight: 900; text-transform: uppercase; border-radius: 8px; cursor: pointer; transition: all 0.3s; white-space: normal; line-height: 1.3; margin-top: 8px; box-shadow: 0 2px 8px rgba(212,175,55,0.3), inset 0 1px 0 rgba(255,255,255,0.1); position: relative; overflow: hidden; }
.xb-btn-add-set::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent); opacity: 0; transition: 0.3s; }
.xb-btn-add-set:hover { background: linear-gradient(135deg, var(--gold), #d4a533); color: #111; box-shadow: 0 4px 16px rgba(212, 175, 55, 0.6), inset 0 1px 0 rgba(255,255,255,0.4); transform: translateY(-2px) scale(1.02); }
.xb-btn-add-set:hover::before { opacity: 1; }
.xb-item-right { display: flex; flex-direction: column; width: 100%; overflow: hidden; }
.xb-item-lvl-box { position: absolute; top: 10px; right: 10px; font-family: 'Cinzel', serif; font-weight: 900; font-size: 1.4rem; color: var(--gold); border: 3px solid var(--gold); padding: 4px 10px; border-radius: 8px; background: #000; line-height: 1; box-shadow: 0 0 15px rgba(212,175,55,0.4); text-shadow: 0 0 10px rgba(212,175,55,0.5); }
.xb-item-name { font-family: 'Cinzel', serif; font-weight: 800; font-size: 1.45rem; color: white; margin-bottom: 8px; margin-right: 60px; line-height: 1.2; word-wrap: break-word; text-transform: uppercase; text-shadow: 0 2px 6px rgba(0,0,0,0.8); background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(212,175,55,0.05)); padding: 8px 12px; border-radius: 8px; border-left: 3px solid var(--gold); }
.xb-item-set { font-size: 1.05rem; color: var(--gold); font-weight: 800; text-transform: uppercase; margin-bottom: 12px; letter-spacing: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,55,0.15), transparent); padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(212,175,55,0.3); text-align: center; }
.xb-item-stats { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-bottom: 10px; }
.xb-item-stat-row { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; font-weight: 600; color: #ddd; }
.xb-item-stat-row img { width: 18px; height: 18px; object-fit: contain; }
#xb-tip { display: none; position: fixed; z-index: 9999999; width: 400px; pointer-events: none; border-radius: 12px; overflow: hidden; background: rgba(12, 12, 12, 0.98); border: 2px solid var(--gold); box-shadow: 0 20px 60px rgba(0,0,0,0.95), 0 0 30px rgba(212,175,55,0.3); }
.tt-body { display: flex; flex-direction: column; }
.tt-top { display: flex; gap: 15px; padding: 20px; background: linear-gradient(180deg, rgba(212,175,55,0.1), transparent); border-bottom: 1px solid rgba(212,175,55,0.2); align-items: center; }
.tt-img-container { width: 90px; height: 90px; background: linear-gradient(135deg, #1a1a1a, #0a0a0a); border: 2px solid var(--gold); border-radius: 10px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 0 15px rgba(212,175,55,0.2); }
.tt-img { width: 90%; height: 90%; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.8)); }
.tt-info { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.tt-name { color: var(--gold); font-family: 'Cinzel'; font-size: 1.6rem; font-weight: 900; line-height: 1.1; margin-bottom: 8px; text-shadow: 0 0 20px rgba(212,175,55,0.6); text-transform: uppercase; letter-spacing: 1px; }
.tt-meta { font-size: 1rem; color: #aaa; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.tt-level { color: white; font-weight: 900; font-size: 1.2rem; }
.tt-stats-list { padding: 20px; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.2)); }
.tt-stat { display: flex; align-items: center; gap: 12px; font-weight: 700; margin-bottom: 8px; color: #eee; font-size: 1.15rem; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.tt-icon { width: 24px; height: 24px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.tt-set { text-align: center; padding: 18px; background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent); color: var(--gold); font-weight: 900; text-transform: uppercase; border-top: 2px solid rgba(212, 175, 55, 0.4); font-size: 1.1rem; letter-spacing: 2px; text-shadow: 0 2px 6px rgba(212,175,55,0.4); }
#xb-welcome-modal { display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5,5,5,0.98); z-index: 15000; justify-content: center; align-items: center; backdrop-filter: blur(15px); }
#xb-welcome-modal.hidden { display: none !important; }
.xb-wel-content { background: rgba(20,20,20,0.8); border: 1px solid #333; border-radius: 20px; padding: 60px; max-width: 1100px; width: 90%; text-align: center; box-shadow: 0 0 100px rgba(0,0,0,0.8), 0 0 30px rgba(212, 175, 55, 0.1); position: relative; animation: zoomIn 0.4s ease-out; }
@keyframes zoomIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.xb-wel-title { font-family: 'Cinzel'; font-size: 4.5rem; color: var(--gold); margin-bottom: 15px; text-shadow: 0 0 30px rgba(212,175,55,0.4); letter-spacing: 2px; }
.xb-wel-sub { color: #aaa; font-size: 1.4rem; margin-bottom: 60px; font-weight: 300; letter-spacing: 1px; max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.5; }
.xb-wel-grid { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.xb-wel-card { background: linear-gradient(145deg, #181818, #0a0a0a); border: 1px solid #333; border-radius: 16px; width: 350px; padding: 50px 30px; cursor: pointer; transition: 0.4s; display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; }
.xb-wel-card:hover { border-color: var(--gold); transform: translateY(-10px); box-shadow: 0 20px 50px rgba(0,0,0,0.6); }
.xb-wel-icon { font-size: 5rem; margin-bottom: 25px; color: #444; transition: 0.4s; }
.xb-wel-card:hover .xb-wel-icon { color: var(--gold); text-shadow: 0 0 20px rgba(212,175,55,0.6); }
.xb-wel-h3 { font-family: 'Cinzel'; font-size: 2.2rem; color: white; margin-bottom: 15px; font-weight: 900; }
.xb-wel-p { color: #888; font-size: 1.1rem; line-height: 1.6; font-weight: 500; }
#xb-wel-char-list { display: none; margin-top: 30px; max-height: 450px; overflow-y: auto; text-align: left; padding: 10px; grid-template-columns: 1fr 1fr; gap: 15px; }
.xb-wel-back { color: #666; margin-top: 30px; cursor: pointer; font-size: 1.2rem; font-weight: 700; display: none; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; padding: 10px 20px; border: 1px solid #333; border-radius: 8px; }
.mode-build .xb-col-manage { display: none !important; }
.mode-build .xb-col-doll { flex: 3; }
.mode-char .xb-col-manage { display: flex !important; }
.mode-char .xb-controls button:not(.xb-btn-save):not(.xb-btn-share) { display: none; }
.mode-char #nav-mybuilds { display: none; }
#xb-mode-flash { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.9); padding: 40px 80px; border-radius: 20px; border: 3px solid var(--gold); color: var(--gold); font-family: 'Cinzel'; font-size: 3rem; text-align: center; z-index: 20000; opacity: 0; pointer-events: none; transition: opacity 0.3s; text-shadow: 0 0 30px rgba(212,175,55,0.5); box-shadow: 0 0 100px rgba(0,0,0,0.8); }
#xb-mode-flash.show { opacity: 1; }
#xb-set-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #111; border: 2px solid var(--gold); padding: 20px 40px; border-radius: 50px; z-index: 12000; display: none; align-items: center; gap: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.8); animation: slideUp 0.3s ease-out; }
@keyframes slideUp { from { transform: translate(-50%, 100px); } to { transform: translate(-50%, 0); } }
.xb-st-text { color: white; font-weight: 800; text-transform: uppercase; font-size: 1rem; font-family: 'Cinzel'; }
.xb-st-btn { background: #222; border: 1px solid #444; color: #ccc; padding: 8px 20px; border-radius: 20px; cursor: pointer; font-weight: bold; transition: 0.2s; }
.xb-st-btn:hover { background: #333; color: white; border-color: #666; }
.xb-st-btn.yes { background: var(--gold); color: black; border-color: var(--gold); }
@keyframes toastSlideIn {
0% { transform: translateX(400px); opacity: 0; }
60% { transform: translateX(-10px); opacity: 1; }
100% { transform: translateX(0); opacity: 1; }
}
@keyframes toastSlideOut {
0% { transform: translateX(0); opacity: 1; }
100% { transform: translateX(400px); opacity: 0; }
}
@keyframes toastPulse {
0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 0 rgba(212,175,55,0.7); }
50% { box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 10px rgba(212,175,55,0); }
}
#xb-toast { position: fixed; top: 80px; right: 20px; transform: translateX(400px); background: #111; color: white; padding: 16px 26px; border-radius: 12px; border: 2px solid var(--gold); opacity: 0; z-index: 13000; font-weight: 600; font-size: 1.1rem; pointer-events: none; text-align: left; box-shadow: 0 4px 20px rgba(0,0,0,0.5); max-width: 350px; }
#xb-toast.show { animation: toastSlideIn 0.5s ease-out forwards, toastPulse 0.8s ease-out 0.5s; }
#xb-toast.hide { animation: toastSlideOut 0.4s ease-in forwards; }
#xb-toast.show { opacity: 1; }
#xb-toast.error { border-color: #e74c3c; background: #2c1515; }
/* Toast de confirmation central avec boutons */
#xb-confirm-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(15, 23, 42, 0.98); color: white; padding: 30px; border-radius: 16px; border: 2px solid var(--gold); z-index: 14000; font-size: 1rem; text-align: center; box-shadow: 0 0 40px rgba(0,0,0,0.8); min-width: 400px; display: none; }
#xb-confirm-toast.show { display: block; }
#xb-confirm-toast .xb-confirm-msg { margin-bottom: 25px; line-height: 1.6; font-size: 1.1rem; }
#xb-confirm-toast .xb-confirm-btns { display: flex; gap: 15px; justify-content: center; }
#xb-confirm-toast button { padding: 12px 30px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; font-size: 1rem; transition: 0.2s; }
#xb-confirm-toast .xb-btn-confirm { background: var(--gold); color: #111; }
#xb-confirm-toast .xb-btn-confirm:hover { background: #f1c40f; transform: scale(1.05); }
#xb-confirm-toast .xb-btn-cancel { background: #34495e; color: white; }
#xb-confirm-toast .xb-btn-cancel:hover { background: #4a5f7f; }
#xb-delete-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 15000; justify-content: center; align-items: center; backdrop-filter: blur(15px); }
#xb-delete-modal.show { display: flex !important; }
.xb-del-content { background: #111; border: 3px solid #ef4444; padding: 40px 60px; border-radius: 16px; text-align: center; box-shadow: 0 20px 80px rgba(0,0,0,0.9); animation: zoomIn 0.3s ease-out; }
.xb-del-title { font-family: 'Cinzel', serif; font-size: 2rem; color: #fff; margin-bottom: 30px; font-weight: 900; text-transform: uppercase; }
.xb-del-actions { display: flex; gap: 20px; justify-content: center; }
.xb-btn-del-yes { background: #ef4444; color: white; border: none; padding: 15px 30px; border-radius: 8px; cursor: pointer; font-weight: 900; text-transform: uppercase; font-size: 1.1rem; transition: 0.2s; }
.xb-btn-del-yes:hover { background: #dc2626; transform: scale(1.05); }
.xb-btn-del-no { background: #333; color: white; border: 1px solid #555; padding: 15px 30px; border-radius: 8px; cursor: pointer; font-weight: 900; text-transform: uppercase; font-size: 1.1rem; transition: 0.2s; }
.xb-btn-del-no:hover { background: #444; border-color: #fff; }
#xb-action-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #111; border: 3px solid var(--gold); padding: 30px 50px; border-radius: 12px; z-index: 14000; display: none; flex-direction: column; align-items: center; gap: 25px; box-shadow: 0 20px 80px rgba(0,0,0,0.9); width: 90%; max-width: 450px; text-align: center; }
#xb-action-toast.show { display: flex !important; }
#xb-action-msg { font-family: 'Cinzel'; font-size: 1.4rem; color: white; font-weight: 700; }
.xb-act-btns { display: flex; gap: 20px; width: 100%; justify-content: center; }
.xb-act-btn { flex: 1; padding: 12px; border-radius: 6px; font-weight: 900; text-transform: uppercase; cursor: pointer; border: none; font-size: 1rem; }
.xb-act-yes { background: var(--gold); color: black; }
.xb-act-yes:hover { background: #fcd55c; }
.xb-act-no { background: #333; color: white; border: 1px solid #555; }
.xb-act-no:hover { background: #444; border-color: #fff; }
.xb-empty-state { grid-column: 1 / -1; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center; padding: 40px; opacity: 0.7; }
.xb-empty-icon { font-size: 5rem; margin-bottom: 20px; animation: float 3s ease-in-out infinite; }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }
.xb-empty-title { font-family: 'Cinzel'; font-size: 2rem; color: #fff; margin-bottom: 10px; }
.xb-empty-sub { color: #888; font-size: 1.1rem; max-width: 400px; line-height: 1.6; }
@media (max-width: 1200px) {
.xb-workspace { flex-direction: column; }
.xb-col-bonus, .xb-col-stats, .xb-col-manage { width: 100%; max-width: 100%; order: 2; height: auto; min-height: 0; }
.xb-col-doll { order: 1; min-height: 600px; }
.xb-col-classes { width: 100%; flex-direction: row; min-height: 80px; overflow-x: auto; order: 0; margin-bottom:10px; }
.xb-cls-row { min-width: 120px; }
.xb-grid { grid-template-columns: repeat(2, 1fr); }
.xb-mod-box { width: 95%; height: 95%; padding: 15px; }
}
@media (max-width: 600px) {
/* === NAVIGATION MOBILE SANS SCROLL === */
.xb-nav-btn {
padding: 10px 8px !important;
font-size: 0.75rem !important;
white-space: nowrap;
min-width: auto;
}
/* === WELCOME MODAL MOBILE OPTIMISÉ === */
.xb-wel-content {
padding: 20px 15px !important;
width: 95% !important;
max-height: 85vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
.xb-wel-title {
font-size: 1.8rem !important;
margin-bottom: 10px !important;
}
.xb-wel-sub {
font-size: 0.9rem !important;
margin-bottom: 25px !important;
padding: 0 10px;
}
.xb-wel-grid {
gap: 15px !important;
flex-direction: column !important;
}
.xb-wel-card {
width: 100% !important;
padding: 25px 20px !important;
}
.xb-wel-icon {
font-size: 3rem !important;
margin-bottom: 15px !important;
}
.xb-wel-h3 {
font-size: 1.4rem !important;
}
.xb-wel-p {
font-size: 0.95rem !important;
}
#xb-wel-char-list {
grid-template-columns: 1fr !important;
max-height: 300px !important;
}
/* === CARACTÉRISTIQUES MOBILE - FIX TRONCATION === */
.xb-stat-row {
grid-template-columns: 1fr 60px 60px !important;
gap: 8px !important;
padding: 8px 5px !important;
}
.xb-stat-name {
font-size: 0.85rem !important;
min-width: 0 !important;
overflow: visible !important;
white-space: nowrap !important;
}
.xb-stat-btns {
gap: 3px !important;
}
.xb-stat-btn {
width: 26px !important;
height: 26px !important;
font-size: 1rem !important;
padding: 0 !important;
}
.xb-stat-value {
font-size: 0.9rem !important;
min-width: 35px !important;
}
/* === GENERAL MOBILE === */
.xb-title { font-size: 1.5rem !important; }
.xb-header { flex-direction: column !important; gap: 15px !important; text-align: center !important; }
.xb-controls { flex-wrap: wrap !important; justify-content: center !important; }
.xb-doll-grid { transform: scale(0.85) !important; transform-origin: top center !important; margin-top: -20px !important; }
.xb-grid { grid-template-columns: 1fr !important; }
.xb-mod-box { width: 100% !important; height: 100% !important; border-radius: 0 !important; padding: 10px !important; }
.xb-stat-filter-bar { justify-content: center !important; }
.xb-name-input { width: 100% !important; }
#xb-action-toast { width: 90% !important; }
/* === MES BUILDS MOBILE === */
.xb-full-page-builds {
padding: 10px !important;
}
.xb-build-card {
min-height: 280px !important;
}
/* === PROFILS PUBLICS MOBILE === */
.xb-profile-container, .xb-explorer-container {
padding: 15px !important;
}
.xb-profile-header, .xb-explorer-header {
flex-direction: column !important;
gap: 15px !important;
align-items: flex-start !important;
}
.xb-profile-header h2, .xb-explorer-header h2 {
font-size: 1.5rem !important;
}
.xb-profile-card {
padding: 20px !important;
}
.xb-profile-info {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
.xb-profile-avatar {
width: 80px !important;
height: 80px !important;
font-size: 2.5rem !important;
}
.xb-profile-stats {
flex-direction: column !important;
gap: 10px !important;
}
.xb-profile-actions {
flex-direction: column !important;
width: 100%;
}
.xb-profile-actions button,
.xb-profile-toggle {
width: 100% !important;
}
.xb-explorer-grid {
grid-template-columns: 1fr !important;
gap: 15px !important;
}
.xb-explorer-filters {
flex-direction: column !important;
align-items: stretch !important;
}
.xb-explorer-filters select {
width: 100% !important;
}
/* === TAGS MOBILE === */
.xb-tags-editor {
flex-direction: column !important;
gap: 10px !important;
}
.xb-tags-list {
flex-wrap: wrap !important;
}
.xb-tag-badge {
font-size: 0.8rem !important;
padding: 5px 10px !important;
}
.xb-tags-filter {
flex-wrap: wrap !important;
padding: 10px !important;
}
.xb-filter-tag {
font-size: 0.75rem !important;
padding: 5px 10px !important;
}
/* === MODALES MOBILE === */
.xb-profile-editor-content {
width: 95% !important;
padding: 25px 15px !important;
max-height: 85vh !important;
overflow-y: auto !important;
}
.xb-profile-editor-title {
font-size: 1.5rem !important;
}
.xb-profile-editor-input,
.xb-profile-editor-textarea {
font-size: 0.95rem !important;
}
.xb-profile-editor-actions {
flex-direction: column !important;
}
.xb-tags-modal-content {
width: 95% !important;
padding: 25px 15px !important;
}
.xb-tags-grid {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.xb-tag-option {
font-size: 0.85rem !important;
padding: 10px 12px !important;
}
}
/* === FIX LAYOUT DOFUSBOOK === */
.xb-build-dofusbook-layout { position: relative; width: 100%; max-width: 450px; margin: 20px auto; padding: 30px 20px; background: rgba(0, 0, 0, 0.2); border-radius: 15px; }
/* Personnage au centre - GRANDE case SPRITE */
.xb-dofus-center { position: relative; width: 160px; height: 260px; margin: 40px auto 70px auto; border: none; background: radial-gradient(circle at center, rgba(218, 165, 32, 0.15) 0%, transparent 70%); display: flex; align-items: flex-end; justify-content: center; overflow: visible; box-shadow: none; }
.xb-dofus-center img { width: auto; height: 100%; max-height: 360px; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.8)); transform: translateY(20px); }
/* Slots d'équipement - GRANDES cases 56x56 */
.xb-dofus-slot { position: absolute; width: 56px; height: 56px; border: 2px solid #555; border-radius: 10px; background: linear-gradient(135deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.9)); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: all 0.3s; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.5); }
.xb-dofus-slot:hover { transform: scale(1.05); border-color: var(--gold); }
.xb-dofus-slot.filled { border-color: var(--gold); background: linear-gradient(135deg, rgba(218, 165, 32, 0.2), rgba(184, 134, 11, 0.15)); box-shadow: 0 0 15px rgba(218, 165, 32, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.2); }
.xb-dofus-slot.empty { opacity: 0.3; border-style: dashed; }
.xb-dofus-slot img { width: 85%; height: 85%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)); }
.xb-dofus-slot[data-slot="chapeau"] { top: -15px; left: 50%; transform: translateX(-50%); }
.xb-dofus-slot[data-slot="amulette"] { top: 25px; left: -25px; }
.xb-dofus-slot[data-slot="cape"] { top: 25px; right: -25px; }
.xb-dofus-slot[data-slot="anneau1"] { top: 100px; left: -25px; }
.xb-dofus-slot[data-slot="anneau2"] { top: 100px; right: -25px; }
.xb-dofus-slot[data-slot="ceinture"] { top: 175px; left: 50%; transform: translateX(-50%); }
.xb-dofus-slot[data-slot="bottes"] { bottom: -15px; left: 50%; transform: translateX(-50%); }
.xb-dofus-slot[data-slot="arme"] { top: 175px; left: -25px; }
.xb-dofus-slot[data-slot="bouclier"] { top: 175px; right: -25px; }
.xb-dofus-row { display: flex; gap: 10px; justify-content: center; margin-top: 40px; padding-top: 25px; border-top: 2px solid rgba(255, 255, 255, 0.05); }
.xb-dofus-row .xb-dofus-slot { position: relative; top: auto; left: auto; right: auto; bottom: auto; transform: none; width: 64px; height: 64px; }
/* === PROFILS PUBLICS & EXPLORER === */
.xb-profile-container, .xb-explorer-container { padding: 30px; max-width: 1400px; margin: 0 auto; }
.xb-profile-header, .xb-explorer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid var(--gold); }
.xb-profile-header h2, .xb-explorer-header h2 { font-family: 'Cinzel'; font-size: 2rem; color: var(--gold); margin: 0; }
.xb-profile-card { background: linear-gradient(145deg, #1a1a1a, #0a0a0a); border: 2px solid var(--gold); border-radius: 16px; padding: 30px; margin-bottom: 30px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.xb-profile-info { display: flex; gap: 25px; align-items: flex-start; margin-bottom: 25px; }
.xb-profile-avatar { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), #b8860b); display: flex; align-items: center; justify-content: center; font-size: 3rem; box-shadow: 0 4px 12px rgba(212,175,55,0.4); flex-shrink: 0; }
.xb-profile-details { flex: 1; }
.xb-profile-details h3 { font-family: 'Cinzel'; font-size: 1.8rem; color: var(--gold); margin: 0 0 10px 0; }
.xb-profile-details p { color: #aaa; line-height: 1.6; margin: 0 0 15px 0; }
.xb-profile-stats { display: flex; gap: 20px; font-size: 1rem; }
.xb-profile-stats span { color: #ccc; }
.xb-profile-stats strong { color: var(--gold); font-size: 1.2rem; }
.xb-profile-actions { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; }
.xb-profile-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: rgba(255,255,255,0.05); border-radius: 8px; cursor: pointer; transition: 0.3s; }
.xb-profile-toggle:hover { background: rgba(255,255,255,0.1); }
.xb-profile-toggle input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; }
.xb-profile-toggle span { color: #ccc; font-weight: 600; }
.xb-profile-builds-header { margin-bottom: 20px; }
.xb-profile-builds-header h3 { font-family: 'Cinzel'; font-size: 1.5rem; color: var(--gold); margin: 0 0 5px 0; }
.xb-profile-builds-header p { color: #888; margin: 0; }
/* === TOGGLE SWITCH VISIBILITÉ === */
.xb-build-visibility-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 12px;
margin: 8px 0;
background: rgba(255,255,255,0.03);
border-radius: 8px;
border: 1px solid #333;
}
.xb-visibility-switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.xb-visibility-switch input {
opacity: 0;
width: 0;
height: 0;
}
.xb-visibility-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #555;
transition: 0.3s;
border-radius: 24px;
}
.xb-visibility-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
input:checked + .xb-visibility-slider {
background-color: #27ae60;
}
input:checked + .xb-visibility-slider:before {
transform: translateX(26px);
}
.xb-visibility-label {
font-size: 0.8rem;
font-weight: 700;
color: #aaa;
transition: 0.3s;
}
.xb-visibility-label.public {
color: #27ae60;
}
.xb-explorer-filters { display: flex; gap: 15px; align-items: center; }
.xb-explorer-filters select { padding: 10px 15px; background: #1a1a1a; color: white; border: 1px solid var(--gold); border-radius: 8px; font-weight: 600; cursor: pointer; }
.xb-explorer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px; }
.xb-explorer-card { background: linear-gradient(145deg, #1a1a1a, #111); border: 2px solid #333; border-radius: 12px; padding: 20px; transition: 0.3s; cursor: pointer; position: relative; overflow: hidden; }
.xb-explorer-card:hover { border-color: var(--gold); transform: translateY(-5px); box-shadow: 0 8px 20px rgba(212,175,55,0.3); }
.xb-explorer-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--gold), #b8860b); opacity: 0; transition: 0.3s; }
.xb-explorer-card:hover::before { opacity: 1; }
.xb-explorer-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), #b8860b); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin: 0 auto 15px; box-shadow: 0 4px 12px rgba(212,175,55,0.3); }
.xb-explorer-username { font-family: 'Cinzel'; font-size: 1.4rem; color: var(--gold); text-align: center; margin: 0 0 10px 0; }
.xb-explorer-bio { color: #888; text-align: center; font-size: 0.9rem; margin: 0 0 15px 0; line-height: 1.4; height: 40px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.xb-explorer-stats { display: flex; justify-content: center; gap: 20px; padding-top: 15px; border-top: 1px solid #333; }
.xb-explorer-stat { text-align: center; }
.xb-explorer-stat-value { font-size: 1.5rem; font-weight: 800; color: var(--gold); display: block; }
.xb-explorer-stat-label { font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 1px; }
.xb-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 30px 0; }
.xb-pagination-btn { padding: 10px 15px; background: #1a1a1a; border: 1px solid #333; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; transition: 0.3s; }
.xb-pagination-btn:hover:not(.disabled) { border-color: var(--gold); background: #222; }
.xb-pagination-btn.active { background: var(--gold); color: black; border-color: var(--gold); }
.xb-pagination-btn.disabled { opacity: 0.3; cursor: not-allowed; }
.xb-pagination-info { color: #888; font-size: 0.9rem; }
.xb-profile-editor-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 20000; justify-content: center; align-items: center; }
.xb-profile-editor-modal.show { display: flex; }
.xb-profile-editor-content { background: linear-gradient(145deg, #1a1a1a, #0a0a0a); border: 2px solid var(--gold); border-radius: 16px; padding: 40px; max-width: 600px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.8); }
.xb-profile-editor-title { font-family: 'Cinzel'; font-size: 2rem; color: var(--gold); margin-bottom: 30px; text-align: center; }
.xb-profile-editor-field { margin-bottom: 20px; }
.xb-profile-editor-label { display: block; color: var(--gold); font-weight: 700; margin-bottom: 8px; font-size: 1.1rem; }
.xb-profile-editor-input { width: 100%; padding: 12px; background: #1a1a1a; border: 1px solid #444; border-radius: 8px; color: white; font-size: 1rem; font-family: 'Montserrat'; }
.xb-profile-editor-input:focus { outline: none; border-color: var(--gold); }
.xb-profile-editor-textarea { min-height: 100px; resize: vertical; }
.xb-profile-editor-actions { display: flex; gap: 15px; margin-top: 30px; }
.xb-profile-editor-btn { flex: 1; padding: 15px; border-radius: 8px; font-weight: 800; font-size: 1.1rem; cursor: pointer; transition: 0.3s; border: none; font-family: 'Montserrat'; text-transform: uppercase; }
.xb-profile-editor-btn.save { background: var(--gold); color: black; }
.xb-profile-editor-btn.save:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(212,175,55,0.4); }
.xb-profile-editor-btn.cancel { background: #333; color: white; }
.xb-profile-editor-btn.cancel:hover { background: #444; }
/* === MODAL FORGEMAGIE === */
#xb-forgemage-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
z-index: 10000;
display: none;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s;
}
#xb-forgemage-modal.show {
display: flex;
opacity: 1;
}
.xb-fm-content {
background: linear-gradient(135deg, #1a1a1a, #0f0f0f);
border: 2px solid #ff6600;
border-radius: 12px;
padding: 30px;
max-width: 600px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 0 30px rgba(255, 102, 0, 0.5);
}
.xb-fm-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
padding-bottom: 15px;
border-top: 2px solid #333;
}
.xb-fm-title {
font-family: 'Cinzel';
font-size: 1.8rem;
color: #ff6600;
display: flex;
align-items: center;
gap: 10px;
}
.xb-fm-item-preview {
display: flex;
align-items: center;
gap: 15px;
padding: 15px 20px;
background: rgba(0,0,0,0.3);
border: 1px solid #333;
border-radius: 8px;
margin-bottom: 20px;
position: relative;
}
.xb-fm-item-img {
width: 70px;
height: 70px;
border: 2px solid #ff6600;
border-radius: 8px;
background: #000;
flex-shrink: 0;
}
.xb-fm-item-info {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.xb-fm-item-name {
font-size: 1.5rem;
font-weight: 700;
color: #ff6600;
text-align: center;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.xb-fm-item-level {
position: absolute;
top: 8px;
right: 12px;
color: #ffd700;
font-size: 1.1rem;
font-weight: 700;
padding: 4px 10px;
border: 2px solid #ffd700;
border-radius: 6px;
background: rgba(0,0,0,0.5);
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.xb-fm-stats-container {
background: rgba(0,0,0,0.2);
border: 1px solid #333;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
}
.xb-fm-stat-row {
display: grid;
grid-template-columns: 180px 140px 1fr;
gap: 15px;
align-items: center;
padding: 18px 15px; /* Plus grand */
background: rgba(0,0,0,0.3);
border: 1px solid #222;
border-radius: 8px;
margin-bottom: 12px;
transition: 0.2s;
}
.xb-fm-stat-row:hover {
background: rgba(255, 102, 0, 0.05);
border-color: #ff6600;
transform: translateX(3px);
}
.xb-fm-stat-row.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.xb-fm-stat-label {
font-weight: 700;
color: #ddd;
font-size: 1.2rem; /* ENCORE PLUS GRAND */
display: flex;
align-items: center;
gap: 10px;
}
.xb-fm-stat-icon {
width: 28px; /* Image icône officielle */
height: 28px;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}
.xb-fm-stat-input {
background: #000;
border: 2px solid #444;
color: #fff;
padding: 12px 16px; /* ENCORE PLUS GRAND */
border-radius: 6px;
font-size: 1.3rem; /* ENCORE PLUS GRAND */
font-weight: 700;
text-align: center;
transition: 0.2s;
}
.xb-fm-stat-input:focus {
outline: none;
border-color: #ff6600;
box-shadow: 0 0 12px rgba(255, 102, 0, 0.4);
}
.xb-fm-stat-input:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.xb-fm-stat-input.overmage {
border-color: #ff6600;
background: rgba(255, 102, 0, 0.15);
box-shadow: 0 0 8px rgba(255, 102, 0, 0.3);
}
.xb-fm-stat-input.exomage {
border-color: #3498db;
background: rgba(52, 152, 219, 0.15);
box-shadow: 0 0 8px rgba(52, 152, 219, 0.3);
}
.xb-fm-stat-info {
font-size: 1.05rem; /* PLUS GRAND */
font-weight: 600;
}
.xb-fm-stat-info.unique {
font-weight: 700;
}
.xb-fm-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
padding-top: 20px;
border-top: 2px solid #333;
}
.xb-fm-btn {
padding: 8px 16px;
border: 2px solid;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: 0.3s;
font-size: 0.85rem;
}
.xb-fm-btn-apply {
background: #ff6600;
color: white;
border-color: #ff6600;
}
.xb-fm-btn-apply:hover {
background: #ff7700;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 102, 0, 0.4);
}
.xb-fm-btn-reset {
background: transparent;
color: #e74c3c;
border-color: #e74c3c;
}
.xb-fm-btn-reset:hover {
background: rgba(231, 76, 60, 0.1);
transform: translateY(-2px);
}
.xb-fm-btn-cancel {
background: transparent;
color: #888;
border-color: #555;
}
.xb-fm-btn-cancel:hover {
background: rgba(255,255,255,0.05);
color: #fff;
}
/* Badge Forgemagie sur slot */
.xb-slot.forged {
border: 2px solid #ff6600 !important;
box-shadow: 0 0 15px rgba(255, 102, 0, 0.4);
position: relative;
}
.xb-forge-badge {
position: absolute;
top: 2px;
right: 2px;
background: #ff6600;
color: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 700;
pointer-events: none;
z-index: 10;
}
/* Tooltip Forgemagie */
.tt-forgemage {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #ff6600;
}
.tt-forgemage-title {
color: #ff6600;
font-weight: 700;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 5px;
}
.tt-forgemage-stat {
color: #ff6600;
padding: 3px 0;
display: flex;
align-items: center;
gap: 8px;
}
.tt-forgemage-diff {
font-size: 0.85rem;
font-weight: 700;
}
.tt-forgemage-diff.positive {
color: #2ecc71;
}
.tt-forgemage-diff.negative {
color: #e74c3c;
}
/* ==================== CARTES BUILDS ==================== */
.xb-builds-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
gap: 24px !important;
padding: 24px !important;
}
.xb-build-card {
background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%) !important;
border: 2px solid #4a5568 !important;
border-radius: 14px !important;
overflow: hidden !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5) !important;
position: relative !important;
}
.xb-build-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.7) !important;
border-color: #64748b !important;
}
.xb-card-active {
border-color: #3b82f6 !important;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4) !important;
}
.xb-card-header {
padding: 24px 20px !important;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)) !important;
border-bottom: 2px solid #4a5568 !important;
display: flex !important;
align-items: center !important;
gap: 16px !important;
}
.xb-card-number {
font-size: 28px !important;
font-weight: 900 !important;
color: #64748b !important;
font-family: 'Roboto', sans-serif !important;
}
.xb-card-title {
font-size: 22px !important;
font-weight: 700 !important;
color: #f1f5f9 !important;
margin: 0 0 6px 0 !important;
}
.xb-card-level {
font-size: 16px !important;
font-weight: 500 !important;
color: #94a3b8 !important;
margin: 0 !important;
}
.xb-card-body {
padding: 24px 20px !important;
}
.xb-card-class-row {
display: flex !important;
justify-content: center !important;
margin-bottom: 20px !important;
}
.xb-card-class-icon {
width: 80px !important;
height: 80px !important;
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7)) !important;
}
.xb-card-equip-layout {
display: flex !important;
gap: 20px !important;
justify-content: center !important;
margin-bottom: 20px !important;
}
.xb-card-col {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.xb-card-slot {
width: 67px !important;
height: 67px !important;
background: rgba(0, 0, 0, 0.5) !important;
border: 2px solid #4a5568 !important;
border-radius: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.xb-card-slot img {
width: 63px !important;
height: 63px !important;
}
.xb-pano-gelano, .xb-pano-gélano, .xb-pano-gelano {
border-color: #FFD700 !important;
border-width: 3px !important;
box-shadow: 0 0 12px rgba(255, 215, 0, 0.6) !important;
}
.xb-pano-tofu {
border-color: #CD853F !important;
border-width: 3px !important;
box-shadow: 0 0 12px rgba(205, 133, 63, 0.6) !important;
}
.xb-pano-bouftou {
border-color: #D2691E !important;
border-width: 3px !important;
box-shadow: 0 0 12px rgba(210, 105, 30, 0.6) !important;
}
.xb-pano-blop {
border-color: #4CAF50 !important;
border-width: 3px !important;
box-shadow: 0 0 12px rgba(76, 175, 80, 0.6) !important;
}
.xb-pano-dragoeuf, .xb-pano-dragoeuf {
border-color: #FF4500 !important;
border-width: 3px !important;
box-shadow: 0 0 12px rgba(255, 69, 0, 0.6) !important;
}
.xb-pano-vampire {
border-color: #DC143C !important;
border-width: 3px !important;
box-shadow: 0 0 12px rgba(220, 20, 60, 0.6) !important;
}
.xb-pano-royal {
border-color: #9370DB !important;
border-width: 3px !important;
box-shadow: 0 0 12px rgba(147, 112, 219, 0.6) !important;
}
.xb-pano-corbak {
border-color: #2E8B57 !important;
border-width: 3px !important;
box-shadow: 0 0 12px rgba(46, 139, 87, 0.6) !important;
}
.xb-pano-kwak {
border-color: #FF6B6B !important;
border-width: 3px !important;
box-shadow: 0 0 12px rgba(255, 107, 107, 0.6) !important;
}
.xb-card-meta {
display: flex !important;
justify-content: center !important;
gap: 24px !important;
padding: 16px 0 !important;
border-top: 1px solid #4a5568 !important;
margin-top: 16px !important;
}
.xb-card-meta-item {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 14px !important;
color: #94a3b8 !important;
}
.xb-card-footer {
padding: 20px !important;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)) !important;
border-top: 2px solid #4a5568 !important;
}
.xb-card-footer-stats {
display: flex !important;
justify-content: center !important;
gap: 20px !important;
margin-bottom: 16px !important;
}
.xb-card-footer-stat {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.xb-card-footer-stat img {
width: 22px !important;
height: 22px !important;
}
.xb-card-footer-stat span {
font-size: 18px !important;
font-weight: 700 !important;
color: #f1f5f9 !important;
}
.xb-card-tags {
display: flex !important;
justify-content: center !important;
gap: 8px !important;
margin-bottom: 16px !important;
}
.xb-card-tag {
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
font-size: 16px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.xb-card-dofus-full {
display: flex !important;
justify-content: center !important;
gap: 10px !important;
}
.xb-card-dofus-slot {
width: 48px !important;
height: 48px !important;
background: rgba(0, 0, 0, 0.5) !important;
border: 2px solid #4a5568 !important;
border-radius: 8px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.xb-card-dofus-slot img {
width: 44px !important;
height: 44px !important;
}
.xb-card-del {
position: absolute !important;
top: 16px !important;
right: 16px !important;
background: rgba(0, 0, 0, 0.8) !important;
border: 2px solid #4a5568 !important;
border-radius: 8px !important;
padding: 10px 14px !important;
color: #cbd5e0 !important;
cursor: pointer !important;
opacity: 0 !important;
transition: all 0.2s !important;
font-size: 20px !important;
z-index: 10 !important;
}
.xb-build-card:hover .xb-card-del {
opacity: 1 !important;
}
.xb-card-del:hover {
background: #dc2626 !important;
color: white !important;
}
/* STATS PRINCIPALES */
.xb-stat-main-value {
font-size: 46px !important;
font-weight: 900 !important;
color: #ffffff !important;
font-family: 'Impact', 'Arial Black', sans-serif !important;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 255, 255, 0.2) !important;
}
@media (max-width: 768px) {
.xb-builds-grid { grid-template-columns: 1fr !important; }
.xb-stat-main-value { font-size: 36px !important; }
}
/* ==================== FIN ==================== */
/* ==================== MODAL FORGEMAGIE ==================== */
.xb-fm-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 99999 !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
padding: 20px !important;
}
.xb-fm-modal[style*="display: flex"] {
display: flex !important;
}
.xb-fm-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: rgba(0, 0, 0, 0.9) !important;
}
.xb-fm-container {
background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%) !important;
border: 3px solid #4a5568 !important;
border-radius: 16px !important;
max-width: 700px !important;
width: 100% !important;
max-height: 85vh !important;
overflow-y: auto !important;
position: relative !important;
z-index: 2 !important;
box-shadow: 0 24px 72px rgba(0, 0, 0, 0.9) !important;
}
.xb-fm-header {
padding: 32px 80px !important;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4)) !important;
border-bottom: 3px solid #4a5568 !important;
position: relative !important;
text-align: center !important;
}
.xb-fm-title {
font-size: 28px !important;
font-weight: 900 !important;
color: #f1f5f9 !important;
margin: 0 !important;
padding: 0 !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
font-family: 'Roboto', sans-serif !important;
}
.xb-fm-level-badge {
position: absolute !important;
top: 28px !important;
right: 28px !important;
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
color: #1a1a2e !important;
padding: 12px 24px !important;
border-radius: 12px !important;
font-weight: 900 !important;
font-size: 18px !important;
box-shadow: 0 6px 16px rgba(255, 215, 0, 0.6) !important;
border: 3px solid #FFF8DC !important;
}
.xb-fm-close {
position: absolute !important;
top: 24px !important;
left: 24px !important;
background: rgba(0, 0, 0, 0.6) !important;
border: 2px solid #4a5568 !important;
border-radius: 50% !important;
color: #cbd5e0 !important;
font-size: 32px !important;
line-height: 1 !important;
cursor: pointer !important;
padding: 0 !important;
width: 48px !important;
height: 48px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.3s !important;
}
.xb-fm-close:hover {
background: #dc2626 !important;
border-color: #dc2626 !important;
color: white !important;
transform: rotate(90deg) scale(1.1) !important;
}
.xb-fm-body {
padding: 28px !important;
}
.xb-fm-section {
margin-bottom: 28px !important;
padding: 24px !important;
background: rgba(0, 0, 0, 0.3) !important;
border: 2px solid #4a5568 !important;
border-radius: 12px !important;
}
.xb-fm-section h3 {
font-size: 20px !important;
font-weight: 800 !important;
color: #f1f5f9 !important;
margin: 0 0 20px 0 !important;
padding: 0 !important;
font-family: 'Roboto', sans-serif !important;
}
.xb-fm-exo-section {
background: linear-gradient(135deg, rgba(255, 102, 0, 0.15), rgba(255, 69, 0, 0.1)) !important;
border-color: #FF6600 !important;
}
.xb-fm-exo-add {
display: flex !important;
gap: 12px !important;
margin-bottom: 16px !important;
}
.xb-fm-select {
flex: 1 !important;
padding: 12px 16px !important;
background: rgba(0, 0, 0, 0.6) !important;
border: 2px solid #4a5568 !important;
border-radius: 8px !important;
color: #f1f5f9 !important;
font-size: 15px !important;
font-weight: 600 !important;
}
.xb-fm-input-num {
width: 90px !important;
padding: 12px 16px !important;
background: rgba(0, 0, 0, 0.6) !important;
border: 2px solid #4a5568 !important;
border-radius: 8px !important;
color: #f1f5f9 !important;
font-weight: 700 !important;
font-size: 16px !important;
text-align: center !important;
}
.xb-fm-btn-add-exo {
padding: 8px 16px !important;
background: linear-gradient(135deg, #FF6600, #FF4500) !important;
border: none !important;
border-radius: 6px !important;
color: white !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: all 0.3s !important;
font-size: 13px !important;
}
.xb-fm-btn-add-exo:hover {
transform: translateY(-3px) !important;
box-shadow: 0 6px 16px rgba(255, 102, 0, 0.6) !important;
}
.xb-fm-exo-list {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.xb-fm-exo-item {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 12px 16px !important;
background: rgba(255, 102, 0, 0.2) !important;
border: 2px solid #FF6600 !important;
border-radius: 8px !important;
}
.xb-fm-exo-item span {
font-weight: 800 !important;
color: #FF6600 !important;
font-size: 15px !important;
}
.xb-fm-exo-item button {
padding: 6px 12px !important;
background: rgba(220, 38, 38, 0.3) !important;
border: 2px solid #dc2626 !important;
border-radius: 6px !important;
color: white !important;
cursor: pointer !important;
font-weight: 700 !important;
transition: all 0.2s !important;
}
.xb-fm-exo-item button:hover {
background: #dc2626 !important;
transform: scale(1.1) !important;
}
.xb-fm-exo-empty {
text-align: center !important;
color: #94a3b8 !important;
padding: 16px !important;
font-style: italic !important;
}
.xb-fm-stats-help {
padding: 12px 16px !important;
background: rgba(59, 130, 246, 0.1) !important;
border: 2px solid #3b82f6 !important;
border-radius: 8px !important;
margin-bottom: 20px !important;
font-size: 14px !important;
color: #cbd5e0 !important;
line-height: 1.6 !important;
}
.xb-fm-help-label {
font-weight: 800 !important;
color: #60a5fa !important;
}
.xb-fm-stat-row {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 14px !important;
background: rgba(0, 0, 0, 0.4) !important;
border: 2px solid #4a5568 !important;
border-radius: 10px !important;
margin-bottom: 12px !important;
}
.xb-fm-stat-row label {
flex: 0 0 130px !important;
font-weight: 700 !important;
color: #cbd5e0 !important;
text-transform: capitalize !important;
font-size: 15px !important;
}
.xb-fm-input {
flex: 0 0 90px !important;
padding: 10px 14px !important;
background: rgba(0, 0, 0, 0.6) !important;
border: 2px solid #4a5568 !important;
border-radius: 8px !important;
color: #f1f5f9 !important;
font-weight: 800 !important;
font-size: 16px !important;
text-align: center !important;
}
.xb-fm-input:focus {
border-color: #3b82f6 !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3) !important;
}
.xb-fm-range {
flex: 1 !important;
font-size: 13px !important;
display: flex !important;
gap: 12px !important;
}
.xb-fm-range-normal {
color: #4ade80 !important;
font-weight: 700 !important;
}
.xb-fm-range-oj {
color: #f59e0b !important;
font-weight: 700 !important;
}
.xb-fm-footer {
padding: 24px 28px !important;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4)) !important;
border-top: 3px solid #4a5568 !important;
display: flex !important;
gap: 16px !important;
}
.xb-fm-btn {
flex: 1 !important;
padding: 10px 18px !important;
border: none !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: all 0.3s !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.xb-fm-btn-primary {
background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
color: white !important;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}
.xb-fm-btn-primary:hover {
background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
transform: translateY(-3px) !important;
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.6) !important;
}
.xb-fm-btn-secondary {
background: #4a5568 !important;
color: #cbd5e0 !important;
}
.xb-fm-btn-secondary:hover {
background: #64748b !important;
color: white !important;
}
@media (max-width: 768px) {
.xb-fm-container {
max-width: 95% !important;
max-height: 92vh !important;
}
.xb-fm-header {
padding: 24px 60px 24px 20px !important;
}
.xb-fm-exo-add {
flex-direction: column !important;
}
.xb-fm-footer {
flex-direction: column !important;
}
}
/* ==================== FIN MODAL FORGEMAGIE ==================== */
/* === TOAST NOTIFICATIONS === */
.xb-toast {
position: fixed;
top: 20px;
right: 20px;
background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
color: white;
padding: 15px 25px;
border-radius: 8px;
font-weight: 700;
z-index: 30000;
transform: translateX(150%);
transition: transform 0.3s ease;
border: 1px solid var(--gold);
box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}
.xb-toast.show { transform: translateX(0); }
.xb-toast.error { border-color: #e74c3c; }
.xb-toast.info { border-color: #3498db; }
.xb-confirm-toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
border: 2px solid var(--gold);
padding: 25px 35px;
border-radius: 12px;
z-index: 30000;
box-shadow: 0 10px 50px rgba(0,0,0,0.8);
text-align: center;
opacity: 0;
transition: opacity 0.2s;
}
.xb-confirm-toast.show { opacity: 1; }
.xb-confirm-message {
color: white;
font-size: 1.1rem;
margin-bottom: 20px;
line-height: 1.6;
}
.xb-confirm-buttons {
display: flex;
gap: 15px;
justify-content: center;
}
.xb-confirm-yes, .xb-confirm-no {
padding: 10px 25px;
border-radius: 6px;
font-weight: 800;
cursor: pointer;
border: none;
font-size: 1rem;
transition: 0.3s;
}
.xb-confirm-yes {
background: var(--gold);
color: black;
}
.xb-confirm-no {
background: #333;
color: white;
}
/* === BUILDS GRID (CORRIGÉ) === */
.xb-builds-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
padding: 20px;
}
.xb-build-card {
background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
border: 1px solid #333;
border-radius: 12px;
padding: 15px;
cursor: pointer;
transition: all 0.3s;
}
.xb-build-card:hover {
border-color: var(--gold);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}
.xb-build-card.xb-card-active {
border-color: var(--gold);
background: rgba(212, 175, 55, 0.1);
}
.xb-card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.xb-card-number {
font-family: 'Cinzel';
font-weight: 900;
color: var(--gold);
font-size: 1.1rem;
}
.xb-card-title-block {
flex: 1;
}
.xb-card-title {
margin: 0;
font-size: 1.1rem;
color: white;
font-weight: 700;
}
.xb-card-meta-line {
color: #888;
font-size: 0.85rem;
margin: 3px 0 0 0;
}
.xb-card-delete {
background: transparent;
border: none;
color: #666;
font-size: 1.5rem;
cursor: pointer;
padding: 5px 10px;
transition: 0.2s;
}
.xb-card-delete:hover {
color: #e74c3c;
}
/* Équipement dans carte */
.xb-card-equip {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 10px 0;
}
.xb-card-slot {
width: 36px;
height: 36px;
background: #080808;
border: 1px solid #333;
border-radius: 4px;
}
.xb-card-slot.filled {
border-color: #555;
}
.xb-card-slot img {
width: 100%;
height: 100%;
object-fit: contain;
}
.xb-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #222;
}
.xb-card-stats {
display: flex;
gap: 15px;
color: #666;
font-size: 0.85rem;
}
/* Empty state */
.xb-empty-state {
text-align: center;
padding: 60px 20px;
color: #666;
}
.xb-empty-state h3 {
font-family: 'Cinzel';
color: var(--gold);
font-size: 1.5rem;
margin: 20px 0 10px;
}
.xb-empty-state p {
color: #888;
}
/* === SLOT FORGÉ === */
.xb-slot.forged {
border-color: #9b59b6 !important;
box-shadow: 0 0 10px rgba(155, 89, 182, 0.4);
}
.xb-forge-badge {
position: absolute;
top: -5px;
left: -5px;
font-size: 12px;
}
.xb-slot-customize {
position: absolute;
bottom: 2px;
right: 2px;
background: rgba(0,0,0,0.7);
color: var(--gold);
width: 20px;
height: 20px;
border-radius: 4px;
display: none;
align-items: center;
justify-content: center;
font-size: 12px;
cursor: pointer;
}
.xb-slot:hover .xb-slot-customize {
display: flex;
}
/* ========================================
MODAL DE BIENVENUE
======================================== */
.xb-welcome-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
backdrop-filter: blur(15px);
}
.xb-welcome-modal.hidden {
display: none !important;
}
.xb-welcome-content {
background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
border: 3px solid var(--gold);
border-radius: 24px;
padding: 60px 70px;
max-width: 900px;
width: 95%;
text-align: center;
box-shadow:
0 0 80px rgba(218, 165, 32, 0.4),
0 30px 80px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
animation: welcomeFadeIn 0.5s ease-out;
}
@keyframes welcomeFadeIn {
from {
opacity: 0;
transform: scale(0.9) translateY(-20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.xb-welcome-title {
font-family: 'Cinzel', serif;
font-size: 3.5rem;
font-weight: 900;
background: linear-gradient(135deg, #ffd700, #ffaa00, #ffd700);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 15px;
text-shadow: 0 2px 20px rgba(255, 215, 0, 0.3);
}
.xb-welcome-subtitle {
font-size: 1.6rem;
color: #aaa;
margin-bottom: 50px;
font-weight: 500;
}
.xb-welcome-options {
display: flex;
gap: 35px;
justify-content: center;
margin-bottom: 40px;
}
.xb-welcome-option {
flex: 1;
max-width: 350px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.3));
border: 2px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
padding: 40px 35px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.xb-welcome-option::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(218, 165, 32, 0.15), transparent);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.xb-welcome-option:hover {
border-color: var(--gold);
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(218, 165, 32, 0.3);
}
.xb-welcome-option:hover::before {
opacity: 1;
}
.xb-welcome-option:active {
transform: translateY(-4px);
}
.xb-welcome-icon {
font-size: 5rem;
margin-bottom: 20px;
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
pointer-events: none;
}
.xb-welcome-option-title {
font-family: 'Cinzel', serif;
font-size: 1.8rem;
font-weight: 700;
color: #fff;
margin-bottom: 15px;
pointer-events: none;
}
.xb-welcome-option-desc {
font-size: 1.15rem;
color: #bbb;
line-height: 1.6;
pointer-events: none;
}
.xb-welcome-char-count {
margin-top: 18px;
padding: 10px 20px;
background: rgba(52, 152, 219, 0.25);
border: 1px solid rgba(52, 152, 219, 0.5);
border-radius: 25px;
font-size: 1.1rem;
color: #3498db;
display: inline-block;
font-weight: 600;
pointer-events: none;
}
.xb-welcome-footer {
margin-top: 20px;
padding-top: 25px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.xb-welcome-tip {
font-size: 1.1rem;
color: #888;
}
/* Mode Flash */
#xb-mode-flash {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 30px 60px;
border-radius: 16px;
font-family: 'Cinzel', serif;
font-size: 2rem;
font-weight: 700;
color: white;
z-index: 10001;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
animation: modeFlash 1.5s ease-out forwards;
}
@keyframes modeFlash {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.8);
}
20% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.05);
}
80% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.9);
}
}
/* Responsive Modal */
@media (max-width: 768px) {
.xb-welcome-content {
padding: 40px 25px;
max-width: 95%;
}
.xb-welcome-title {
font-size: 2.5rem;
}
.xb-welcome-subtitle {
font-size: 1.3rem;
margin-bottom: 35px;
}
.xb-welcome-options {
flex-direction: column;
gap: 20px;
}
.xb-welcome-option {
max-width: 100%;
padding: 30px 25px;
}
.xb-welcome-icon {
font-size: 4rem;
}
.xb-welcome-option-title {
font-size: 1.5rem;
}
.xb-welcome-option-desc {
font-size: 1.05rem;
}
.xb-welcome-tip {
font-size: 0.95rem;
}
}
/* Cartes d'objets améliorées */
.xb-item-stat-icon {
width: 18px;
height: 18px;
object-fit: contain;
margin-right: 6px;
vertical-align: middle;
}
.xb-item-stat-more {
font-size: 0.9rem;
color: #888;
font-style: italic;
margin-top: 4px;
}
/* =====================================================
CARTES D'OBJETS AMÉLIORÉES - STYLE DOFUSBOOK
===================================================== */
.xb-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 15px;
padding: 15px;
max-height: 70vh;
overflow-y: auto;
}
.xb-item {
background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
border: 2px solid #333;
border-radius: 12px;
padding: 0;
cursor: pointer;
display: flex;
flex-direction: row;
overflow: hidden;
transition: all 0.3s ease;
min-height: auto;
position: relative;
}
.xb-item:hover {
border-color: var(--gold);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(218, 165, 32, 0.2);
}
.xb-item-left {
width: 100px;
min-height: 100px;
background: rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
flex-shrink: 0;
}
.xb-item-img {
width: 80px;
height: 80px;
object-fit: contain;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}
.xb-item-right {
flex: 1;
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
position: relative;
}
.xb-item-lvl-box {
position: absolute;
top: 8px;
right: 8px;
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: 1.1rem;
color: var(--gold);
background: rgba(0,0,0,0.8);
border: 2px solid var(--gold);
padding: 4px 10px;
border-radius: 6px;
line-height: 1;
}
.xb-item-name {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 1rem;
color: #fff;
margin-right: 50px;
line-height: 1.2;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.xb-item-set {
font-size: 0.85rem;
color: var(--gold);
font-weight: 600;
background: rgba(218, 165, 32, 0.1);
padding: 4px 8px;
border-radius: 4px;
border-left: 3px solid var(--gold);
display: inline-block;
}
.xb-item-stats {
display: flex;
flex-direction: column;
gap: 3px;
font-size: 0.9rem;
max-height: 150px;
overflow-y: auto;
}
.xb-item-stat-row {
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
padding: 2px 0;
}
.xb-item-stat-icon {
width: 16px;
height: 16px;
object-fit: contain;
flex-shrink: 0;
}
.xb-item-stat-more {
font-size: 0.8rem;
color: #666;
font-style: italic;
margin-top: 4px;
}
/* =====================================================
MES BUILDS AMÉLIORÉS
===================================================== */
.xb-builds-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 20px;
padding: 20px;
}
.xb-build-card {
background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
border: 2px solid #333;
border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.xb-build-card:hover {
border-color: var(--gold);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.4), 0 0 30px rgba(218, 165, 32, 0.1);
}
.xb-build-card.xb-card-active {
border-color: var(--gold);
box-shadow: 0 0 30px rgba(218, 165, 32, 0.3);
}
.xb-card-header {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
background: rgba(0,0,0,0.3);
border-bottom: 1px solid #333;
}
.xb-card-number {
font-family: 'Cinzel', serif;
font-size: 1.5rem;
font-weight: 900;
color: var(--gold);
background: rgba(218, 165, 32, 0.1);
padding: 8px 14px;
border-radius: 8px;
border: 2px solid var(--gold);
}
.xb-card-title-block {
flex: 1;
}
.xb-card-title {
font-family: 'Cinzel', serif;
font-size: 1.2rem;
font-weight: 700;
color: #fff;
margin: 0 0 4px 0;
}
.xb-card-meta-line {
font-size: 0.9rem;
color: #888;
margin: 0;
}
.xb-card-delete {
background: rgba(231, 76, 60, 0.2);
border: 1px solid #e74c3c;
color: #e74c3c;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 1.5rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.xb-card-delete:hover {
background: #e74c3c;
color: #fff;
}
.xb-card-equip {
display: flex;
justify-content: center;
gap: 8px;
padding: 15px;
background: rgba(0,0,0,0.2);
flex-wrap: wrap;
}
.xb-card-slot {
width: 50px;
height: 50px;
background: rgba(0,0,0,0.4);
border: 2px solid #444;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.xb-card-slot.filled {
border-color: var(--gold);
background: rgba(218, 165, 32, 0.05);
}
.xb-card-slot img {
width: 40px;
height: 40px;
object-fit: contain;
}
.xb-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
background: rgba(0,0,0,0.3);
border-top: 1px solid #333;
}
.xb-build-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.xb-build-tag {
font-size: 0.9rem;
padding: 4px 8px;
border-radius: 4px;
display: flex;
align-items: center;
gap: 4px;
}
.xb-card-stats {
display: flex;
gap: 15px;
font-size: 0.85rem;
color: #888;
}
.xb-card-views {
display: flex;
align-items: center;
gap: 4px;
}
.xb-card-date {
color: #666;
}
/* =====================================================
FORGEMAGIE
===================================================== */
#xb-forgemage-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.95);
z-index: 16000;
justify-content: center;
align-items: center;
backdrop-filter: blur(10px);
}
.xb-fm-content {
background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
border: 3px solid var(--gold);
border-radius: 20px;
width: 90%;
max-width: 800px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.xb-fm-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 25px;
background: rgba(0,0,0,0.3);
border-bottom: 1px solid var(--gold);
}
.xb-fm-title {
font-family: 'Cinzel', serif;
font-size: 1.8rem;
font-weight: 900;
color: var(--gold);
}
.xb-fm-close {
font-size: 2rem;
color: #888;
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s;
}
.xb-fm-close:hover {
color: #fff;
background: rgba(255,255,255,0.1);
}
.xb-fm-body {
padding: 25px;
overflow-y: auto;
flex: 1;
}
.xb-fm-item-info {
display: flex;
gap: 20px;
margin-bottom: 25px;
padding: 15px;
background: rgba(0,0,0,0.3);
border-radius: 12px;
}
.xb-fm-item-img {
width: 80px;
height: 80px;
object-fit: contain;
}
.xb-fm-item-details h3 {
font-family: 'Cinzel', serif;
font-size: 1.3rem;
color: #fff;
margin: 0 0 8px 0;
}
.xb-fm-stats-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.xb-fm-stat-row {
display: flex;
align-items: center;
gap: 15px;
padding: 12px 15px;
background: rgba(0,0,0,0.3);
border-radius: 8px;
border: 1px solid #333;
}
.xb-fm-stat-row:hover {
border-color: var(--gold);
}
.xb-fm-stat-icon {
width: 24px;
height: 24px;
object-fit: contain;
}
.xb-fm-stat-name {
flex: 1;
font-size: 1rem;
font-weight: 600;
}
.xb-fm-stat-base {
color: #888;
font-size: 0.9rem;
min-width: 80px;
text-align: center;
}
.xb-fm-stat-input {
width: 80px;
padding: 8px 12px;
background: #111;
border: 2px solid #444;
border-radius: 6px;
color: #fff;
font-size: 1rem;
text-align: center;
font-weight: 700;
}
.xb-fm-stat-input:focus {
border-color: var(--gold);
outline: none;
}
.xb-fm-stat-diff {
min-width: 60px;
text-align: right;
font-weight: 700;
}
.xb-fm-stat-diff.positive {
color: #2ecc71;
}
.xb-fm-stat-diff.negative {
color: #e74c3c;
}
.xb-fm-footer {
display: flex;
justify-content: flex-end;
gap: 15px;
padding: 20px 25px;
background: rgba(0,0,0,0.3);
border-top: 1px solid #333;
}
.xb-fm-btn {
padding: 12px 30px;
border-radius: 8px;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
border: none;
}
.xb-fm-btn-save {
background: linear-gradient(135deg, var(--gold), #b8860b);
color: #000;
}
.xb-fm-btn-save:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(218, 165, 32, 0.4);
}
.xb-fm-btn-cancel {
background: #333;
color: #fff;
border: 1px solid #555;
}
.xb-fm-btn-cancel:hover {
background: #444;
}
.xb-fm-btn-reset {
background: rgba(231, 76, 60, 0.2);
color: #e74c3c;
border: 1px solid #e74c3c;
}
.xb-fm-btn-reset:hover {
background: #e74c3c;
color: #fff;
}
/* Over/Exo badges */
.xb-fm-badge {
font-size: 0.7rem;
padding: 2px 6px;
border-radius: 4px;
font-weight: 700;
text-transform: uppercase;
}
.xb-fm-badge-over {
background: rgba(155, 89, 182, 0.2);
color: #9b59b6;
border: 1px solid #9b59b6;
}
.xb-fm-badge-exo {
background: rgba(231, 76, 60, 0.2);
color: #e74c3c;
border: 1px solid #e74c3c;
}
/* =====================================================
BARRE DE FILTRE PAR TAGS
===================================================== */
.xb-builds-filter-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 15px 20px;
background: rgba(0,0,0,0.3);
border-bottom: 1px solid #333;
flex-wrap: wrap;
}
.xb-filter-label {
font-weight: 600;
color: #888;
font-size: 0.9rem;
}
.xb-filter-tag {
display: flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
background: rgba(255,255,255,0.05);
border: 1px solid #444;
border-radius: 20px;
color: #888;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s;
}
.xb-filter-tag:hover {
border-color: var(--tag-color, #666);
color: #fff;
}
.xb-filter-tag.active {
background: var(--tag-color, #666);
border-color: var(--tag-color, #666);
color: #fff;
}
/* =====================================================
CARTES DE BUILDS AMÉLIORÉES
===================================================== */
.xb-card-actions {
display: flex;
gap: 6px;
}
.xb-card-btn {
width: 32px;
height: 32px;
border: 1px solid #444;
background: rgba(0,0,0,0.3);
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.xb-card-btn:hover {
background: rgba(255,255,255,0.1);
border-color: #666;
}
.xb-card-fm:hover {
background: rgba(218, 165, 32, 0.2);
border-color: var(--gold);
}
.xb-card-del:hover {
background: rgba(231, 76, 60, 0.2);
border-color: #e74c3c;
}
.xb-meta-class {
color: var(--gold);
font-weight: 600;
}
.xb-meta-sep {
color: #555;
margin: 0 5px;
}
.xb-meta-level {
color: #888;
}
.xb-build-tags {
display: flex;
gap: 8px;
padding: 10px 15px;
flex-wrap: wrap;
border-top: 1px solid rgba(255,255,255,0.05);
}
.xb-build-tag {
font-size: 0.8rem;
padding: 4px 10px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 4px;
color: #fff;
font-weight: 500;
}
.xb-build-tag-empty {
font-size: 0.8rem;
color: #555;
font-style: italic;
}
.xb-card-footer {
display: flex;
justify-content: space-around;
padding: 12px 15px;
background: rgba(0,0,0,0.3);
border-top: 1px solid #333;
}
.xb-card-stat {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
}
.xb-stat-icon {
font-size: 1rem;
}
.xb-stat-value {
color: #fff;
font-weight: 600;
}
.xb-stat-label {
color: #666;
}
/* =====================================================
CONDITIONS D'OBJETS
===================================================== */
.xb-item-conditions {
font-size: 0.75rem;
color: #e74c3c;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(231, 76, 60, 0.2);
}
/* =====================================================
FORGEMAGIE MODAL AMÉLIORÉ
===================================================== */
.xb-fm-slots {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 15px;
padding: 20px;
}
.xb-fm-slot {
background: rgba(0,0,0,0.3);
border: 2px solid #444;
border-radius: 12px;
padding: 15px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
}
.xb-fm-slot:hover {
border-color: var(--gold);
transform: translateY(-3px);
}
.xb-fm-slot img {
width: 60px;
height: 60px;
object-fit: contain;
margin-bottom: 8px;
}
.xb-fm-slot-name {
font-size: 0.85rem;
color: #fff;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.xb-fm-intro {
text-align: center;
padding: 20px;
}
.xb-fm-intro h3 {
font-family: 'Cinzel', serif;
font-size: 1.5rem;
color: var(--gold);
margin: 0 0 10px 0;
}
.xb-fm-intro p {
color: #888;
margin: 0;
}
.xb-fm-item-info {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
background: rgba(0,0,0,0.3);
border-radius: 12px;
margin-bottom: 20px;
}
.xb-fm-item-img {
width: 80px;
height: 80px;
object-fit: contain;
}
.xb-fm-item-details {
flex: 1;
}
.xb-fm-item-details h3 {
font-family: 'Cinzel', serif;
font-size: 1.3rem;
color: #fff;
margin: 0 0 5px 0;
}
.xb-fm-item-details p {
color: #888;
margin: 0 0 5px 0;
}
.xb-fm-pano {
color: var(--gold) !important;
}
.xb-fm-back {
background: rgba(255,255,255,0.1);
border: 1px solid #444;
color: #888;
padding: 8px 15px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
}
.xb-fm-back:hover {
background: rgba(255,255,255,0.2);
color: #fff;
}
.xb-fm-help {
background: rgba(218, 165, 32, 0.1);
border: 1px solid rgba(218, 165, 32, 0.3);
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
}
.xb-fm-help strong {
color: var(--gold);
display: block;
margin-bottom: 5px;
}
.xb-fm-help p {
color: #aaa;
margin: 0;
font-size: 0.9rem;
}
.xb-fm-stats-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.xb-fm-stat-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 15px;
background: rgba(0,0,0,0.3);
border-radius: 8px;
border: 1px solid #333;
}
.xb-fm-stat-row:hover {
border-color: var(--gold);
}
.xb-fm-stat-icon {
width: 22px;
height: 22px;
object-fit: contain;
}
.xb-fm-stat-name {
flex: 1;
font-size: 0.95rem;
font-weight: 600;
}
.xb-fm-stat-base {
color: #666;
font-size: 0.85rem;
min-width: 80px;
text-align: center;
}
.xb-fm-stat-input {
width: 70px;
padding: 8px 10px;
background: #111;
border: 2px solid #444;
border-radius: 6px;
color: #fff;
font-size: 1rem;
text-align: center;
font-weight: 700;
}
.xb-fm-stat-input:focus {
border-color: var(--gold);
outline: none;
}
.xb-fm-stat-diff {
min-width: 80px;
text-align: right;
font-weight: 700;
font-size: 0.85rem;
}
.xb-fm-stat-diff.positive {
color: #9b59b6;
}
.xb-fm-stat-diff.negative {
color: #e74c3c;
}
.xb-fm-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 20px 25px;
background: rgba(0,0,0,0.3);
border-top: 1px solid #333;
}
.xb-fm-btn {
padding: 10px 25px;
border-radius: 8px;
font-weight: 700;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.2s;
border: none;
}
.xb-fm-btn-save {
background: linear-gradient(135deg, var(--gold), #b8860b);
color: #000;
}
.xb-fm-btn-save:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(218, 165, 32, 0.4);
}
.xb-fm-btn-cancel {
background: #333;
color: #fff;
border: 1px solid #555;
}
.xb-fm-btn-cancel:hover {
background: #444;
}
.xb-fm-btn-reset {
background: rgba(231, 76, 60, 0.2);
color: #e74c3c;
border: 1px solid #e74c3c;
margin-right: auto;
}
.xb-fm-btn-reset:hover {
background: #e74c3c;
color: #fff;
}
/* =====================================================
GRID DES OBJETS OPTIMISÉE
===================================================== */
.xb-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 12px;
padding: 15px;
max-height: 65vh;
overflow-y: auto;
}
.xb-item {
background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%);
border: 1px solid #333;
border-radius: 10px;
padding: 0;
cursor: pointer;
display: flex;
flex-direction: row;
overflow: hidden;
transition: all 0.2s ease;
min-height: auto;
position: relative;
}
.xb-item:hover {
border-color: var(--gold);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}
.xb-item-left {
width: 90px;
min-height: 90px;
background: rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
flex-shrink: 0;
}
.xb-item-img {
width: 70px;
height: 70px;
object-fit: contain;
filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5));
}
.xb-item-right {
flex: 1;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 6px;
overflow: hidden;
position: relative;
}
.xb-item-lvl-box {
position: absolute;
top: 8px;
right: 8px;
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: 1rem;
color: var(--gold);
background: rgba(0,0,0,0.9);
border: 2px solid var(--gold);
padding: 3px 8px;
border-radius: 5px;
line-height: 1;
}
.xb-item-name {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 0.95rem;
color: #fff;
margin-right: 45px;
line-height: 1.2;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.xb-item-set {
font-size: 0.8rem;
color: var(--gold);
font-weight: 600;
background: rgba(218, 165, 32, 0.1);
padding: 3px 6px;
border-radius: 4px;
border-left: 2px solid var(--gold);
display: inline-block;
max-width: fit-content;
}
.xb-item-stats {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 0.85rem;
max-height: 180px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #444 transparent;
}
.xb-item-stats::-webkit-scrollbar {
width: 4px;
}
.xb-item-stats::-webkit-scrollbar-thumb {
background: #444;
border-radius: 2px;
}
.xb-item-stat-row {
display: flex;
align-items: center;
gap: 5px;
font-weight: 500;
padding: 1px 0;
}
.xb-item-stat-icon {
width: 14px;
height: 14px;
object-fit: contain;
flex-shrink: 0;
}
.xb-item-stat-row span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* =====================================================
RESPONSIVE MOBILE
===================================================== */
@media (max-width: 768px) {
.xb-grid {
grid-template-columns: 1fr;
}
.xb-builds-grid {
grid-template-columns: 1fr;
}
.xb-builds-filter-bar {
flex-wrap: wrap;
}
.xb-fm-slots {
grid-template-columns: repeat(3, 1fr);
}
.xb-fm-item-info {
flex-direction: column;
text-align: center;
}
.xb-fm-stat-row {
flex-wrap: wrap;
}
.xb-fm-stat-name {
width: 100%;
margin-bottom: 5px;
}
}
/* =====================================================
FIX DOUBLE CLIC - ::before bloquait le clic
===================================================== */
.xb-welcome-option::before {
pointer-events: none !important;
}
/* =====================================================
SÉLECTION DE PERSONNAGE
===================================================== */
.xb-char-select {
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.xb-char-select-title {
font-family: 'Cinzel', serif;
font-size: 1.8rem;
color: var(--gold);
margin-bottom: 25px;
}
.xb-char-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 15px;
max-height: 400px;
overflow-y: auto;
padding: 10px;
}
.xb-char-card {
display: flex;
align-items: center;
gap: 15px;
padding: 15px 20px;
background: rgba(255,255,255,0.05);
border: 2px solid #444;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.xb-char-card:hover {
border-color: var(--gold);
background: rgba(218, 165, 32, 0.1);
transform: translateX(5px);
}
.xb-char-icon {
width: 60px;
height: 60px;
object-fit: contain;
border-radius: 50%;
background: rgba(0,0,0,0.3);
padding: 5px;
}
.xb-char-info {
flex: 1;
text-align: left;
}
.xb-char-name {
font-family: 'Cinzel', serif;
font-size: 1.2rem;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
.xb-char-details {
font-size: 0.9rem;
color: #888;
}
.xb-char-empty {
grid-column: 1 / -1;
text-align: center;
padding: 40px;
color: #666;
}
.xb-char-back {
margin-top: 25px;
padding: 12px 30px;
background: rgba(255,255,255,0.1);
border: 1px solid #555;
border-radius: 8px;
color: #aaa;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
}
.xb-char-back:hover {
background: rgba(255,255,255,0.2);
color: #fff;
}
/* =====================================================
MODAL DE CONFIRMATION DE SUPPRESSION
===================================================== */
.xb-confirm-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 20000;
opacity: 0;
transition: opacity 0.3s ease;
backdrop-filter: blur(5px);
}
.xb-confirm-modal.visible {
opacity: 1;
}
.xb-confirm-content {
background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
border: 3px solid #e74c3c;
border-radius: 20px;
padding: 40px 50px;
text-align: center;
max-width: 450px;
transform: scale(0.9);
transition: transform 0.3s ease;
box-shadow: 0 0 50px rgba(231, 76, 60, 0.3);
}
.xb-confirm-modal.visible .xb-confirm-content {
transform: scale(1);
}
.xb-confirm-icon {
font-size: 4rem;
margin-bottom: 15px;
}
.xb-confirm-title {
font-family: 'Cinzel', serif;
font-size: 1.6rem;
color: #fff;
margin: 0 0 15px 0;
}
.xb-confirm-name {
font-size: 1.2rem;
color: var(--gold);
font-weight: 600;
margin: 0 0 10px 0;
}
.xb-confirm-warning {
font-size: 0.95rem;
color: #e74c3c;
margin: 0 0 25px 0;
}
.xb-confirm-actions {
display: flex;
gap: 15px;
justify-content: center;
}
.xb-confirm-btn {
padding: 12px 30px;
border-radius: 8px;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
border: none;
}
.xb-confirm-cancel {
background: #333;
color: #fff;
border: 1px solid #555;
}
.xb-confirm-cancel:hover {
background: #444;
}
.xb-confirm-delete {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: #fff;
}
.xb-confirm-delete:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(231, 76, 60, 0.4);
}
/* =====================================================
CARTES DE BUILDS AMÉLIORÉES - STYLE DOFUSBOOK
===================================================== */
.xb-builds-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 20px;
padding: 20px;
}
.xb-build-card {
background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%);
border: 2px solid #333;
border-radius: 16px;
overflow: hidden;
transition: all 0.3s ease;
position: relative;
}
.xb-build-card:hover {
border-color: var(--gold);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.4), 0 0 30px rgba(218, 165, 32, 0.15);
}
.xb-build-card.xb-card-active {
border-color: var(--gold);
box-shadow: 0 0 30px rgba(218, 165, 32, 0.3);
}
.xb-card-header {
display: flex;
align-items: center;
gap: 15px;
padding: 18px 20px;
background: rgba(0,0,0,0.4);
border-bottom: 1px solid #333;
}
.xb-card-class-icon {
width: 60px;
height: 60px;
background: rgba(0,0,0,0.5);
border-radius: 50%;
border: 3px solid var(--gold);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 20px rgba(218, 165, 32, 0.3);
}
.xb-card-class-icon img {
width: 50px;
height: 50px;
object-fit: contain;
}
.xb-card-title-block {
flex: 1;
}
.xb-card-title {
font-family: 'Cinzel', serif;
font-size: 1.3rem;
font-weight: 700;
color: #fff;
margin: 0 0 5px 0;
}
.xb-card-meta-line {
margin: 0;
}
.xb-meta-class {
color: var(--gold);
font-weight: 600;
font-size: 0.95rem;
}
.xb-card-level-badge {
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(135deg, rgba(218, 165, 32, 0.2), rgba(218, 165, 32, 0.05));
border: 3px solid var(--gold);
border-radius: 12px;
padding: 10px 18px;
box-shadow: 0 0 20px rgba(218, 165, 32, 0.2);
}
.xb-level-value {
font-family: 'Cinzel', serif;
font-size: 1.8rem;
font-weight: 900;
color: var(--gold);
line-height: 1;
text-shadow: 0 0 10px rgba(218, 165, 32, 0.5);
}
.xb-level-label {
font-size: 0.7rem;
color: #888;
text-transform: uppercase;
letter-spacing: 1px;
}
.xb-card-equip {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
padding: 15px;
background: rgba(0,0,0,0.2);
}
.xb-card-slot {
aspect-ratio: 1;
background: rgba(0,0,0,0.4);
border: 2px solid #333;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.xb-card-slot.filled {
border-color: #555;
background: rgba(255,255,255,0.05);
}
.xb-card-slot.dofus {
border-color: rgba(155, 89, 182, 0.5);
background: rgba(155, 89, 182, 0.1);
}
.xb-card-slot.dofus.filled {
border-color: #9b59b6;
box-shadow: 0 0 10px rgba(155, 89, 182, 0.3);
}
.xb-card-slot img {
width: 80%;
height: 80%;
object-fit: contain;
}
.xb-build-tags {
display: flex;
gap: 8px;
padding: 12px 15px;
flex-wrap: wrap;
background: rgba(0,0,0,0.2);
border-top: 1px solid rgba(255,255,255,0.05);
}
.xb-build-tag {
font-size: 0.8rem;
padding: 5px 12px;
border-radius: 15px;
display: flex;
align-items: center;
gap: 5px;
color: #fff;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.xb-build-tag-empty {
font-size: 0.85rem;
color: #555;
font-style: italic;
}
.xb-card-footer {
display: flex;
align-items: center;
padding: 12px 15px;
background: rgba(0,0,0,0.4);
border-top: 1px solid #333;
gap: 15px;
}
.xb-card-stat {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.9rem;
}
.xb-stat-icon {
font-size: 1rem;
}
.xb-stat-value {
color: #fff;
font-weight: 600;
}
.xb-card-actions {
display: flex;
gap: 8px;
margin-left: auto;
}
.xb-card-btn {
width: 36px;
height: 36px;
border: 1px solid #444;
background: rgba(0,0,0,0.3);
border-radius: 8px;
cursor: pointer;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.xb-card-btn:hover {
background: rgba(255,255,255,0.1);
border-color: #666;
transform: scale(1.1);
}
.xb-card-btn.xb-btn-danger:hover {
background: rgba(231, 76, 60, 0.2);
border-color: #e74c3c;
}
/* =====================================================
BARRE DE FILTRE PAR TAGS
===================================================== */
.xb-builds-filter-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 20px;
background: rgba(0,0,0,0.3);
border-bottom: 1px solid #333;
flex-wrap: wrap;
}
.xb-filter-label {
font-weight: 600;
color: #888;
font-size: 0.95rem;
}
.xb-filter-tag {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(255,255,255,0.05);
border: 2px solid #444;
border-radius: 25px;
color: #999;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.xb-filter-tag:hover {
border-color: var(--tag-color, #666);
color: #fff;
background: rgba(255,255,255,0.1);
}
.xb-filter-tag.active {
background: var(--tag-color, #666);
border-color: var(--tag-color, #666);
color: #fff;
box-shadow: 0 0 15px rgba(var(--tag-color), 0.3);
}
/* =====================================================
PAGE MON PROFIL - REFONTE COMPLÈTE
===================================================== */
.xb-profile-hero {
position: relative;
text-align: center;
padding: 60px 20px 40px;
background: linear-gradient(180deg, rgba(218, 165, 32, 0.15) 0%, transparent 100%);
border-bottom: 1px solid #333;
overflow: hidden;
}
.xb-profile-bg-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(218, 165, 32, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(155, 89, 182, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.xb-profile-avatar-wrapper {
position: relative;
display: inline-block;
margin-bottom: 20px;
}
.xb-profile-avatar-large {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #1a1a2e, #16213e);
border: 4px solid var(--gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 40px rgba(218, 165, 32, 0.3);
}
.xb-avatar-icon {
font-size: 4rem;
}
.xb-profile-edit-btn {
position: absolute;
bottom: 0;
right: 0;
width: 36px;
height: 36px;
background: var(--gold);
border: none;
border-radius: 50%;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
}
.xb-profile-edit-btn:hover {
transform: scale(1.1);
}
.xb-profile-title {
font-family: 'Cinzel', serif;
font-size: 2.2rem;
font-weight: 900;
color: #fff;
margin: 0 0 5px 0;
}
.xb-profile-subtitle {
font-size: 1.1rem;
color: var(--gold);
margin: 0;
}
.xb-profile-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 30px;
max-width: 900px;
margin: 0 auto;
}
.xb-profile-stat-card {
background: rgba(0,0,0,0.3);
border: 2px solid #333;
border-radius: 16px;
padding: 25px 20px;
text-align: center;
transition: all 0.3s;
}
.xb-profile-stat-card:hover {
border-color: var(--gold);
transform: translateY(-5px);
}
.xb-stat-card-icon {
font-size: 2rem;
margin-bottom: 10px;
}
.xb-stat-card-value {
font-family: 'Cinzel', serif;
font-size: 2.5rem;
font-weight: 900;
color: var(--gold);
line-height: 1;
margin-bottom: 5px;
}
.xb-stat-card-label {
font-size: 0.85rem;
color: #888;
text-transform: uppercase;
letter-spacing: 1px;
}
.xb-profile-sections {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
padding: 30px;
max-width: 1200px;
margin: 0 auto;
}
.xb-profile-section {
background: rgba(0,0,0,0.3);
border: 1px solid #333;
border-radius: 16px;
padding: 25px;
}
.xb-section-title {
font-family: 'Cinzel', serif;
font-size: 1.3rem;
color: #fff;
margin: 0 0 20px 0;
padding-bottom: 10px;
border-bottom: 1px solid #333;
}
.xb-classes-chart {
display: flex;
flex-direction: column;
gap: 12px;
}
.xb-class-bar-row {
display: flex;
align-items: center;
gap: 10px;
}
.xb-class-rank {
font-weight: 900;
font-size: 1.1rem;
width: 30px;
}
.xb-class-name {
font-weight: 600;
color: #fff;
width: 100px;
}
.xb-class-bar-wrapper {
flex: 1;
height: 10px;
background: rgba(255,255,255,0.1);
border-radius: 5px;
overflow: hidden;
}
.xb-class-bar {
height: 100%;
border-radius: 5px;
transition: width 0.5s ease;
}
.xb-class-count {
font-size: 0.85rem;
color: #888;
width: 70px;
text-align: right;
}
.xb-tags-cloud {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.xb-tag-cloud-item {
padding: 8px 15px;
border-radius: 20px;
color: #fff;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 6px;
}
.xb-tag-cloud-item small {
opacity: 0.7;
}
.xb-recent-activity {
display: flex;
flex-direction: column;
gap: 10px;
}
.xb-activity-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 15px;
background: rgba(255,255,255,0.03);
border-radius: 8px;
}
.xb-activity-icon {
font-size: 1.2rem;
}
.xb-activity-text {
flex: 1;
color: #fff;
font-weight: 500;
}
.xb-activity-date {
font-size: 0.85rem;
color: #666;
}
.xb-empty-text {
color: #666;
font-style: italic;
text-align: center;
padding: 20px;
}
.xb-profile-actions {
display: flex;
justify-content: center;
gap: 15px;
padding: 30px;
flex-wrap: wrap;
}
.xb-profile-action-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 15px 30px;
background: rgba(255,255,255,0.05);
border: 2px solid #444;
border-radius: 12px;
color: #fff;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.xb-profile-action-btn:hover {
border-color: var(--gold);
background: rgba(218, 165, 32, 0.1);
transform: translateY(-3px);
}
.xb-profile-action-btn.xb-action-danger {
border-color: #e74c3c;
}
.xb-profile-action-btn.xb-action-danger:hover {
background: rgba(231, 76, 60, 0.1);
}
.xb-action-icon {
font-size: 1.3rem;
}
/* Responsive */
@media (max-width: 768px) {
.xb-profile-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.xb-profile-sections {
grid-template-columns: 1fr;
}
.xb-profile-actions {
flex-direction: column;
}
.xb-class-bar-row {
flex-wrap: wrap;
}
}
/* =====================================================
XIXOU BUILDER v84 - CORRECTIONS COMPLÈTES
===================================================== */
/* === FIX MODAL DOUBLE CLIC === */
.xb-welcome-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
backdrop-filter: blur(15px);
}
.xb-welcome-option * {
pointer-events: none;
}
/* === SÉLECTION PERSONNAGES PREMIUM === */
.xb-char-select {
animation: slideIn 0.3s ease;
padding: 20px;
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.xb-char-select-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 25px;
}
.xb-char-back-btn {
background: rgba(255,255,255,0.1);
border: 1px solid #555;
color: #aaa;
padding: 10px 20px;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
}
.xb-char-back-btn:hover {
background: rgba(255,255,255,0.2);
color: #fff;
}
.xb-char-select-title {
font-family: 'Cinzel', serif;
font-size: 1.6rem;
color: var(--gold);
}
.xb-char-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 15px;
max-height: 450px;
overflow-y: auto;
padding: 5px;
}
.xb-char-card {
position: relative;
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
background: linear-gradient(145deg, rgba(30,30,50,0.9), rgba(15,15,30,0.95));
border: 2px solid #444;
border-radius: 16px;
cursor: pointer;
transition: all 0.3s ease;
overflow: hidden;
}
.xb-char-card-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(218, 165, 32, 0.1), transparent);
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
.xb-char-card:hover {
border-color: var(--gold);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(218, 165, 32, 0.2);
}
.xb-char-card:hover .xb-char-card-bg {
opacity: 1;
}
.xb-char-avatar {
width: 80px;
height: 80px;
background: rgba(0,0,0,0.5);
border-radius: 50%;
border: 3px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 0 20px rgba(218, 165, 32, 0.3);
}
.xb-char-avatar img {
width: 65px;
height: 65px;
object-fit: contain;
}
.xb-char-content {
flex: 1;
min-width: 0;
}
.xb-char-name {
font-family: 'Cinzel', serif;
font-size: 1.4rem;
font-weight: 700;
color: #fff;
margin-bottom: 5px;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.xb-char-class {
font-size: 1rem;
color: #aaa;
}
.xb-char-level {
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(135deg, rgba(218, 165, 32, 0.2), rgba(218, 165, 32, 0.05));
border: 3px solid var(--gold);
border-radius: 12px;
padding: 12px 20px;
box-shadow: 0 0 20px rgba(218, 165, 32, 0.3);
}
.xb-char-level-value {
font-family: 'Cinzel', serif;
font-size: 2rem;
font-weight: 900;
color: var(--gold);
line-height: 1;
text-shadow: 0 0 10px rgba(218, 165, 32, 0.5);
}
.xb-char-level-label {
font-size: 0.7rem;
color: #888;
text-transform: uppercase;
letter-spacing: 1px;
}
.xb-char-empty {
grid-column: 1 / -1;
text-align: center;
padding: 60px 40px;
background: rgba(0,0,0,0.3);
border-radius: 16px;
}
.xb-char-empty-icon {
font-size: 4rem;
margin-bottom: 20px;
opacity: 0.5;
}
.xb-char-empty-title {
font-family: 'Cinzel', serif;
font-size: 1.5rem;
color: #666;
margin: 0 0 10px 0;
}
.xb-char-empty-desc {
color: #555;
margin: 0;
}
/* === CARTES DE BUILDS STYLE DOFUSBOOK === */
.xb-builds-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 20px;
padding: 20px;
}
.xb-build-card {
background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%);
border: 2px solid #333;
border-radius: 16px;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
}
.xb-build-card:hover {
border-color: var(--gold);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.4), 0 0 30px rgba(218, 165, 32, 0.15);
}
.xb-build-card.xb-card-active {
border-color: var(--gold);
box-shadow: 0 0 30px rgba(218, 165, 32, 0.3);
}
.xb-card-header {
display: flex;
align-items: center;
gap: 15px;
padding: 18px 20px;
background: rgba(0,0,0,0.4);
border-bottom: 1px solid #333;
}
.xb-card-class-icon {
width: 55px;
height: 55px;
background: rgba(0,0,0,0.5);
border-radius: 50%;
border: 3px solid var(--gold);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 15px rgba(218, 165, 32, 0.3);
flex-shrink: 0;
}
.xb-card-class-icon img {
width: 45px;
height: 45px;
object-fit: contain;
}
.xb-card-title-block {
flex: 1;
min-width: 0;
}
.xb-card-title {
font-family: 'Cinzel', serif;
font-size: 1.2rem;
font-weight: 700;
color: #fff;
margin: 0 0 4px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.xb-card-meta {
font-size: 0.95rem;
color: var(--gold);
margin: 0;
}
.xb-card-level-badge {
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(135deg, rgba(218, 165, 32, 0.25), rgba(218, 165, 32, 0.1));
border: 3px solid var(--gold);
border-radius: 12px;
padding: 10px 16px;
box-shadow: 0 0 20px rgba(218, 165, 32, 0.25);
}
.xb-level-num {
font-family: 'Cinzel', serif;
font-size: 1.8rem;
font-weight: 900;
color: var(--gold);
line-height: 1;
text-shadow: 0 0 10px rgba(218, 165, 32, 0.5);
}
.xb-level-txt {
font-size: 0.65rem;
color: #888;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Grid des équipements style DofusBook */
.xb-card-equip-grid {
padding: 15px;
background: rgba(0,0,0,0.2);
display: flex;
flex-direction: column;
gap: 8px;
}
.xb-equip-row {
display: flex;
justify-content: center;
gap: 8px;
}
.xb-dofus-row {
margin-top: 5px;
padding-top: 10px;
border-top: 1px solid rgba(155, 89, 182, 0.3);
}
.xb-card-slot {
width: 48px;
height: 48px;
background: rgba(0,0,0,0.4);
border: 2px solid #444;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.xb-card-slot.filled {
border-color: #666;
background: rgba(255,255,255,0.05);
}
.xb-card-slot.filled:hover {
border-color: var(--gold);
transform: scale(1.1);
z-index: 10;
}
.xb-slot-dofus {
width: 38px;
height: 38px;
border-color: rgba(155, 89, 182, 0.5);
background: rgba(155, 89, 182, 0.1);
}
.xb-slot-dofus.filled {
border-color: #9b59b6;
box-shadow: 0 0 10px rgba(155, 89, 182, 0.3);
}
.xb-card-slot img {
width: 85%;
height: 85%;
object-fit: contain;
}
/* Tags */
.xb-build-tags {
display: flex;
gap: 8px;
padding: 12px 15px;
flex-wrap: wrap;
background: rgba(0,0,0,0.15);
}
.xb-build-tag {
font-size: 0.8rem;
padding: 5px 12px;
border-radius: 15px;
color: #fff;
font-weight: 600;
}
.xb-build-tag-none {
font-size: 0.85rem;
color: #666;
font-style: italic;
}
/* Footer */
.xb-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 15px;
background: rgba(0,0,0,0.4);
border-top: 1px solid #333;
}
.xb-card-info {
display: flex;
gap: 15px;
}
.xb-info-item {
display: flex;
align-items: center;
gap: 6px;
}
.xb-info-icon {
font-size: 0.95rem;
}
.xb-info-text {
font-size: 0.9rem;
color: #fff;
}
.xb-card-actions {
display: flex;
gap: 8px;
}
.xb-action-btn {
width: 36px;
height: 36px;
background: rgba(255,255,255,0.05);
border: 1px solid #444;
border-radius: 8px;
cursor: pointer;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.xb-action-btn:hover {
background: rgba(255,255,255,0.1);
border-color: var(--gold);
transform: scale(1.1);
}
.xb-action-btn.xb-action-danger:hover {
background: rgba(231, 76, 60, 0.2);
border-color: #e74c3c;
}
/* Tooltip pour cartes */
#xb-card-tooltip {
position: fixed;
z-index: 20000;
display: none;
transform: translate(-50%, -100%);
pointer-events: none;
}
.xb-card-tip {
background: linear-gradient(145deg, #1a1a2e, #0f0f1a);
border: 2px solid var(--gold);
border-radius: 12px;
padding: 15px;
min-width: 200px;
max-width: 300px;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.xb-tip-name {
font-family: 'Cinzel', serif;
font-size: 1.1rem;
font-weight: 700;
color: #fff;
margin-bottom: 5px;
}
.xb-tip-level {
font-size: 0.9rem;
color: var(--gold);
margin-bottom: 8px;
}
.xb-tip-pano {
font-size: 0.85rem;
color: var(--gold);
margin-bottom: 8px;
padding: 5px 8px;
background: rgba(218, 165, 32, 0.1);
border-radius: 4px;
}
.xb-tip-stats {
display: flex;
flex-direction: column;
gap: 3px;
}
.xb-tip-stat {
font-size: 0.85rem;
}
.xb-tip-more {
font-size: 0.8rem;
color: #666;
font-style: italic;
margin-top: 5px;
}
/* === EMPTY STATE === */
.xb-empty-state {
text-align: center;
padding: 60px 40px;
}
.xb-empty-icon {
font-size: 5rem;
margin-bottom: 20px;
opacity: 0.5;
}
.xb-empty-state h3 {
font-family: 'Cinzel', serif;
font-size: 1.5rem;
color: #888;
margin: 0 0 10px 0;
}
.xb-empty-state p {
color: #666;
margin: 0 0 20px 0;
}
.xb-btn-primary {
padding: 12px 30px;
background: linear-gradient(135deg, var(--gold), #b8860b);
border: none;
border-radius: 8px;
color: #000;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
.xb-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(218, 165, 32, 0.4);
}
/* === BLOQUER SCROLL ARRIÈRE-PLAN === */
body.xb-modal-open {
overflow: hidden;
}
/* === BARRE DE FILTRE PREMIUM === */
.xb-builds-filter-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 20px;
background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
border-bottom: 1px solid #333;
flex-wrap: wrap;
}
.xb-filter-label {
font-weight: 600;
color: #888;
font-size: 0.95rem;
}
.xb-filter-tag {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: rgba(255,255,255,0.05);
border: 2px solid #444;
border-radius: 25px;
color: #aaa;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.xb-filter-tag:hover {
border-color: var(--tag-color, #666);
color: #fff;
background: rgba(255,255,255,0.1);
}
.xb-filter-tag.active {
background: var(--tag-color, #666);
border-color: var(--tag-color, #666);
color: #fff;
}
/* === EXPLORER GRID === */
.xb-explorer-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
padding: 20px;
}
.xb-explorer-build-card {
background: linear-gradient(145deg, #1a1a2e, #0f0f1a);
border: 2px solid #333;
border-radius: 12px;
padding: 20px;
cursor: pointer;
transition: all 0.3s;
}
.xb-explorer-build-card:hover {
border-color: var(--gold);
transform: translateY(-3px);
}
.xb-explorer-build-header {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.xb-explorer-build-class {
width: 50px;
height: 50px;
background: rgba(0,0,0,0.5);
border-radius: 50%;
border: 2px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
}
.xb-explorer-build-class img {
width: 40px;
height: 40px;
}
.xb-explorer-build-info h4 {
margin: 0 0 5px 0;
color: #fff;
font-size: 1.1rem;
}
.xb-explorer-build-info p {
margin: 0;
color: var(--gold);
font-size: 0.9rem;
}
.xb-explorer-build-stats {
color: #888;
font-size: 0.9rem;
}
/* === MODAL ITEMS - BARRE PREMIUM === */
#xb-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.95);
z-index: 15000;
display: none;
backdrop-filter: blur(10px);
}
#xb-modal.show {
display: flex;
flex-direction: column;
}
.xb-modal-content {
flex: 1;
display: flex;
flex-direction: column;
max-height: 100vh;
overflow: hidden;
}
.xb-search-bar {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
background: linear-gradient(180deg, #1a1a2e, #0f0f1a);
border-bottom: 2px solid var(--gold);
}
#xb-search {
flex: 1;
padding: 15px 20px;
background: rgba(0,0,0,0.5);
border: 2px solid #444;
border-radius: 12px;
color: #fff;
font-size: 1.1rem;
transition: all 0.2s;
}
#xb-search:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 20px rgba(218, 165, 32, 0.2);
}
#xb-search::placeholder {
color: #666;
}
.xb-filter-row {
display: flex;
gap: 10px;
padding: 15px 20px;
background: rgba(0,0,0,0.3);
border-bottom: 1px solid #333;
flex-wrap: wrap;
}
.xb-filter-btn {
padding: 10px 18px;
background: rgba(255,255,255,0.05);
border: 2px solid #444;
border-radius: 25px;
color: #aaa;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.2s;
}
.xb-filter-btn:hover {
border-color: #666;
color: #fff;
}
.xb-filter-btn.active {
background: var(--gold);
border-color: var(--gold);
color: #000;
}
#xb-result-count {
font-size: 0.9rem;
color: #888;
margin-left: auto;
}
.xb-modal-close {
position: absolute;
top: 20px;
right: 25px;
font-size: 2.5rem;
color: #888;
cursor: pointer;
z-index: 100;
transition: all 0.2s;
}
.xb-modal-close:hover {
color: var(--gold);
transform: scale(1.1);
}
/* === NIVEAU AGRANDI DANS LES CARTES MODAL === */
.xb-item-lvl-box {
position: absolute;
top: 10px;
right: 10px;
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: 1.3rem;
color: var(--gold);
background: rgba(0,0,0,0.9);
border: 3px solid var(--gold);
padding: 6px 14px;
border-radius: 8px;
line-height: 1;
box-shadow: 0 0 15px rgba(218, 165, 32, 0.3);
}
/* =====================================================
XIXOU BUILDER v85 - CSS COMPLET
===================================================== */
/* === BOUTONS MODAL BIENVENUE - FIX CLIC === */
button.xb-welcome-option {
flex: 1;
max-width: 350px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.3));
border: 2px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
padding: 40px 35px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: inherit;
font-family: inherit;
}
button.xb-welcome-option:hover {
border-color: var(--gold);
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(218, 165, 32, 0.3);
background: linear-gradient(145deg, rgba(218, 165, 32, 0.15), rgba(0, 0, 0, 0.3));
}
button.xb-welcome-option:active {
transform: translateY(-4px);
}
button.xb-welcome-option .xb-welcome-icon {
font-size: 4rem;
margin-bottom: 15px;
}
button.xb-welcome-option .xb-welcome-option-title {
font-family: 'Cinzel', serif;
font-size: 1.6rem;
font-weight: 700;
color: #fff;
margin-bottom: 10px;
}
button.xb-welcome-option .xb-welcome-option-desc {
font-size: 1rem;
color: #aaa;
line-height: 1.5;
}
button.xb-welcome-option .xb-welcome-char-count {
margin-top: 15px;
padding: 8px 20px;
background: rgba(52, 152, 219, 0.25);
border: 1px solid rgba(52, 152, 219, 0.5);
border-radius: 20px;
font-size: 1rem;
color: #3498db;
}
/* === PERSONNAGES MODAL - BOUTONS === */
button.xb-char-card {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
background: linear-gradient(145deg, rgba(30,30,50,0.9), rgba(15,15,30,0.95));
border: 2px solid #444;
border-radius: 16px;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
text-align: left;
color: inherit;
font-family: inherit;
}
button.xb-char-card:hover {
border-color: var(--gold);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(218, 165, 32, 0.2);
}
.xb-char-avatar {
width: 70px;
height: 70px;
background: rgba(0,0,0,0.5);
border-radius: 50%;
border: 3px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 0 15px rgba(218, 165, 32, 0.3);
}
.xb-char-avatar img {
width: 55px;
height: 55px;
object-fit: contain;
}
.xb-char-content {
flex: 1;
min-width: 0;
}
.xb-char-name {
font-family: 'Cinzel', serif;
font-size: 1.3rem;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
.xb-char-class {
font-size: 0.95rem;
color: #aaa;
}
.xb-char-level {
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(135deg, rgba(218, 165, 32, 0.25), rgba(218, 165, 32, 0.1));
border: 3px solid var(--gold);
border-radius: 12px;
padding: 10px 16px;
box-shadow: 0 0 15px rgba(218, 165, 32, 0.3);
}
.xb-char-level-value {
font-family: 'Cinzel', serif;
font-size: 1.8rem;
font-weight: 900;
color: var(--gold);
line-height: 1;
text-shadow: 0 0 10px rgba(218, 165, 32, 0.5);
}
.xb-char-level-label {
font-size: 0.65rem;
color: #888;
text-transform: uppercase;
}
.xb-char-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 15px;
max-height: 400px;
overflow-y: auto;
padding: 10px;
}
/* === MES BUILDS - STYLE DOFUSBOOK === */
.xb-builds-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: linear-gradient(180deg, rgba(0,0,0,0.5), transparent);
border-bottom: 1px solid #333;
flex-wrap: wrap;
gap: 15px;
}
.xb-toolbar-title {
font-family: 'Cinzel', serif;
font-size: 1.4rem;
color: var(--gold);
}
.xb-toolbar-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.xb-tag-btn {
padding: 8px 14px;
background: rgba(255,255,255,0.05);
border: 2px solid #444;
border-radius: 20px;
color: #999;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s;
}
.xb-tag-btn:hover {
border-color: var(--tag-color);
color: #fff;
}
.xb-tag-btn.active {
background: var(--tag-color);
border-color: var(--tag-color);
color: #fff;
}
.xb-builds-list {
padding: 20px;
display: flex;
flex-direction: column;
gap: 15px;
}
.xb-build-row {
display: flex;
background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%);
border: 2px solid #333;
border-radius: 16px;
overflow: hidden;
transition: all 0.3s;
}
.xb-build-row:hover {
border-color: var(--gold);
box-shadow: 0 5px 25px rgba(0,0,0,0.3);
}
.xb-build-row.active {
border-color: var(--gold);
box-shadow: 0 0 20px rgba(218, 165, 32, 0.2);
}
.xb-build-main {
flex: 1;
cursor: pointer;
padding: 20px;
}
.xb-build-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.xb-build-class {
width: 55px;
height: 55px;
background: rgba(0,0,0,0.5);
border-radius: 50%;
border: 3px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.xb-build-class img {
width: 45px;
height: 45px;
object-fit: contain;
}
.xb-build-info {
flex: 1;
min-width: 0;
}
.xb-build-name {
font-family: 'Cinzel', serif;
font-size: 1.4rem;
font-weight: 700;
color: #fff;
margin: 0 0 6px 0;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.xb-build-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.xb-build-classname {
color: var(--gold);
font-weight: 600;
}
.xb-card-tags {
display: flex;
gap: 5px;
}
.xb-mini-tag {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
}
.xb-build-level {
text-align: center;
}
.xb-level-big {
font-family: 'Cinzel', serif;
font-size: 2.5rem;
font-weight: 900;
color: var(--gold);
text-shadow: 0 0 15px rgba(218, 165, 32, 0.5);
line-height: 1;
}
.xb-build-equips {
display: flex;
gap: 15px;
align-items: center;
}
.xb-equip-bar {
display: flex;
gap: 6px;
}
.xb-equip-slot {
width: 44px;
height: 44px;
background: rgba(0,0,0,0.4);
border: 2px solid #444;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.xb-equip-slot.filled {
border-color: #666;
background: rgba(255,255,255,0.05);
}
.xb-equip-slot.filled:hover {
border-color: var(--gold);
transform: scale(1.1);
z-index: 10;
position: relative;
}
.xb-equip-slot img {
width: 36px;
height: 36px;
object-fit: contain;
}
.xb-dofus-bar {
display: flex;
gap: 4px;
padding-left: 10px;
border-left: 2px solid rgba(155, 89, 182, 0.3);
}
.xb-dofus-slot {
width: 32px;
height: 32px;
background: rgba(155, 89, 182, 0.1);
border: 2px solid rgba(155, 89, 182, 0.4);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.xb-dofus-slot.filled {
border-color: #9b59b6;
}
.xb-dofus-slot img {
width: 26px;
height: 26px;
object-fit: contain;
}
.xb-build-sidebar {
width: 180px;
background: rgba(0,0,0,0.3);
border-left: 1px solid #333;
padding: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.xb-build-stats {
display: flex;
flex-direction: column;
gap: 8px;
}
.xb-stat-row {
display: flex;
align-items: center;
gap: 8px;
}
.xb-stat-icon {
font-size: 1rem;
}
.xb-stat-val {
font-size: 1.1rem;
font-weight: 700;
color: #fff;
}
.xb-stat-lbl {
font-size: 0.85rem;
color: #888;
}
.xb-build-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.xb-act-btn {
width: 36px;
height: 36px;
background: rgba(255,255,255,0.05);
border: 1px solid #444;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.xb-act-btn:hover {
background: rgba(255,255,255,0.1);
border-color: var(--gold);
transform: scale(1.1);
}
.xb-act-btn.xb-act-danger:hover {
background: rgba(231, 76, 60, 0.2);
border-color: #e74c3c;
}
/* === TOOLTIP BUILDS === */
#xb-build-tip {
position: fixed;
z-index: 25000;
pointer-events: none;
}
.xb-build-tooltip {
background: linear-gradient(145deg, #1a1a2e, #0f0f1a);
border: 2px solid var(--gold);
border-radius: 12px;
padding: 15px;
min-width: 220px;
max-width: 320px;
box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.xb-tip-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid #333;
}
.xb-tip-name {
font-family: 'Cinzel', serif;
font-weight: 700;
color: #fff;
font-size: 1rem;
}
.xb-tip-lvl {
font-size: 0.85rem;
color: var(--gold);
}
.xb-tip-effects {
display: flex;
flex-direction: column;
gap: 4px;
}
.xb-tip-effect {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
}
.xb-tip-icon {
width: 14px;
height: 14px;
}
/* === MODALS GÉNÉRIQUES === */
.xb-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 20000;
backdrop-filter: blur(5px);
}
.xb-modal-box {
background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
border: 2px solid var(--gold);
border-radius: 20px;
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.xb-modal-box.xb-modal-lg {
max-width: 700px;
}
.xb-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 25px;
background: rgba(0,0,0,0.3);
border-bottom: 1px solid #333;
}
.xb-modal-header h3 {
margin: 0;
font-family: 'Cinzel', serif;
font-size: 1.4rem;
color: var(--gold);
}
.xb-modal-close {
font-size: 2rem;
color: #888;
cursor: pointer;
transition: color 0.2s;
}
.xb-modal-close:hover {
color: #fff;
}
.xb-modal-body {
padding: 25px;
overflow-y: auto;
flex: 1;
}
.xb-modal-subtitle {
text-align: center;
color: #aaa;
margin-bottom: 20px;
}
.xb-modal-footer {
padding: 20px 25px;
background: rgba(0,0,0,0.3);
border-top: 1px solid #333;
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* === BOUTONS === */
.xb-btn-gold {
padding: 12px 25px;
background: linear-gradient(135deg, var(--gold), #b8860b);
border: none;
border-radius: 8px;
color: #000;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
.xb-btn-gold:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(218, 165, 32, 0.4);
}
.xb-btn-secondary {
padding: 12px 25px;
background: rgba(255,255,255,0.1);
border: 1px solid #555;
border-radius: 8px;
color: #fff;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
}
.xb-btn-secondary:hover {
background: rgba(255,255,255,0.2);
}
.xb-btn-back {
padding: 8px 15px;
background: rgba(255,255,255,0.1);
border: 1px solid #555;
border-radius: 6px;
color: #aaa;
font-size: 0.9rem;
cursor: pointer;
}
/* === TAGS MODAL === */
.xb-tags-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 10px;
}
.xb-tag-select {
padding: 12px 15px;
background: rgba(255,255,255,0.05);
border: 2px solid #444;
border-radius: 10px;
color: #aaa;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.xb-tag-select:hover {
border-color: var(--tag-color);
color: #fff;
}
.xb-tag-select.selected {
background: var(--tag-color);
border-color: var(--tag-color);
color: #fff;
}
/* === FORGEMAGIE MODAL === */
.xb-fm-slots {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.xb-fm-slot-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 15px;
background: rgba(0,0,0,0.3);
border: 2px solid #444;
border-radius: 10px;
color: #fff;
cursor: pointer;
transition: all 0.2s;
text-align: left;
}
.xb-fm-slot-btn:hover {
border-color: var(--gold);
}
.xb-fm-slot-btn img {
width: 40px;
height: 40px;
object-fit: contain;
}
.xb-fm-slot-name {
font-size: 0.9rem;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.xb-fm-item-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.xb-fm-item-header h4 {
margin: 0;
color: var(--gold);
font-family: 'Cinzel', serif;
}
.xb-fm-stats {
display: flex;
flex-direction: column;
gap: 10px;
}
.xb-fm-stat {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 15px;
background: rgba(0,0,0,0.3);
border-radius: 8px;
}
.xb-fm-stat-name {
flex: 1;
font-size: 0.95rem;
}
.xb-fm-stat-range {
font-size: 0.85rem;
color: #888;
width: 80px;
}
.xb-fm-input {
width: 70px;
padding: 8px 10px;
background: #111;
border: 2px solid #444;
border-radius: 6px;
color: #fff;
text-align: center;
font-weight: 700;
font-size: 1rem;
}
.xb-fm-input:focus {
outline: none;
border-color: var(--gold);
}
.xb-fm-diff {
width: 50px;
text-align: right;
font-weight: 700;
}
.xb-fm-diff.over {
color: #9b59b6;
}
.xb-fm-diff.under {
color: #e74c3c;
}
/* === TOAST REPOSITIONNÉ === */
#xb-toast {
position: fixed;
top: 100px !important;
left: 50%;
transform: translateX(-50%);
z-index: 30000;
}
/* === FORM === */
.xb-form-group {
margin-bottom: 20px;
}
.xb-form-group label {
display: block;
margin-bottom: 8px;
color: #aaa;
font-weight: 600;
}
.xb-form-group input,
.xb-form-group textarea {
width: 100%;
padding: 12px 15px;
background: rgba(0,0,0,0.3);
border: 2px solid #444;
border-radius: 8px;
color: #fff;
font-size: 1rem;
}
.xb-form-group input:focus,
.xb-form-group textarea:focus {
outline: none;
border-color: var(--gold);
}
/* === BODY SCROLL LOCK === */
body.xb-modal-open {
overflow: hidden !important;
}
/* === RESPONSIVE === */
@media (max-width: 768px) {
.xb-build-row {
flex-direction: column;
}
.xb-build-sidebar {
width: 100%;
flex-direction: row;
border-left: none;
border-top: 1px solid #333;
}
.xb-build-equips {
flex-direction: column;
align-items: flex-start;
}
.xb-dofus-bar {
border-left: none;
padding-left: 0;
padding-top: 10px;
border-top: 1px solid rgba(155, 89, 182, 0.3);
}
.xb-char-list {
grid-template-columns: 1fr;
}
}
/* =====================================================
MODAL ÉQUIPEMENT - BARRE DE RECHERCHE PREMIUM v85
===================================================== */
#xb-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 15000;
display: none;
backdrop-filter: blur(10px);
}
#xb-modal[style*="flex"],
#xb-modal.show {
display: flex !important;
align-items: center;
justify-content: center;
}
.xb-mod-box {
width: 95%;
max-width: 1400px;
height: 90vh;
background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%);
border: 3px solid var(--gold);
border-radius: 20px;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 0 80px rgba(218, 165, 32, 0.2);
}
.xb-mod-head {
background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.3));
padding: 20px;
border-bottom: 2px solid var(--gold);
display: flex;
flex-direction: column;
gap: 15px;
}
.xb-filters-row {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
#xb-sort-select {
padding: 10px 15px;
background: rgba(0,0,0,0.5);
border: 2px solid #444;
border-radius: 10px;
color: #fff;
font-size: 1rem;
cursor: pointer;
}
#xb-sort-select:focus {
outline: none;
border-color: var(--gold);
}
.xb-filter-btn {
padding: 10px 18px;
background: rgba(255,255,255,0.05);
border: 2px solid #444;
border-radius: 25px;
color: #888;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 8px;
}
.xb-filter-btn:hover {
border-color: #666;
color: #fff;
}
.xb-filter-btn.active {
background: var(--gold);
border-color: var(--gold);
color: #000;
font-weight: 700;
}
.xb-reset-filters-btn {
padding: 10px 20px;
background: rgba(231, 76, 60, 0.2);
border: 2px solid #e74c3c;
border-radius: 25px;
color: #e74c3c;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s;
margin-left: auto;
}
.xb-reset-filters-btn:hover {
background: rgba(231, 76, 60, 0.4);
}
.xb-stat-filter-label {
color: #888;
font-weight: 600;
font-size: 0.9rem;
}
.xb-stat-filter-bar {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.xb-stat-btn {
width: 36px;
height: 36px;
background: rgba(0,0,0,0.4);
border: 2px solid #444;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.xb-stat-btn:hover {
border-color: #666;
transform: scale(1.1);
}
.xb-stat-btn.active {
border-color: var(--gold);
background: rgba(218, 165, 32, 0.2);
box-shadow: 0 0 10px rgba(218, 165, 32, 0.3);
}
.xb-stat-btn img {
width: 24px;
height: 24px;
object-fit: contain;
}
#xb-search {
margin: 0 20px;
padding: 15px 20px;
background: rgba(0,0,0,0.5);
border: 2px solid #444;
border-radius: 12px;
color: #fff;
font-size: 1.1rem;
transition: all 0.2s;
}
#xb-search:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 20px rgba(218, 165, 32, 0.2);
}
#xb-search::placeholder {
color: #666;
}
#xb-result-count {
padding: 10px 25px !important;
color: var(--gold) !important;
font-weight: 600;
}
.xb-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
gap: 15px !important;
padding: 20px !important;
overflow-y: auto !important;
flex: 1;
}
.xb-item {
background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%) !important;
border: 2px solid #333 !important;
border-radius: 12px !important;
padding: 0 !important;
cursor: pointer;
display: flex !important;
flex-direction: row !important;
overflow: hidden;
transition: all 0.2s ease;
min-height: 120px !important;
}
.xb-item:hover {
border-color: var(--gold) !important;
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.xb-item-left {
width: 100px !important;
min-height: 100px;
background: rgba(0,0,0,0.5) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 15px !important;
flex-shrink: 0;
}
.xb-item-img {
width: 70px !important;
height: 70px !important;
object-fit: contain;
}
.xb-item-right {
flex: 1;
padding: 15px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
position: relative;
overflow: hidden;
}
.xb-item-lvl-box {
position: absolute !important;
top: 12px !important;
right: 12px !important;
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: 1.2rem !important;
color: var(--gold);
background: rgba(0,0,0,0.9);
border: 3px solid var(--gold) !important;
padding: 6px 12px !important;
border-radius: 8px !important;
line-height: 1;
box-shadow: 0 0 15px rgba(218, 165, 32, 0.3);
}
.xb-item-name {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 1.05rem !important;
color: #fff;
margin-right: 80px;
line-height: 1.3;
}
.xb-item-set {
font-size: 0.85rem;
color: var(--gold);
font-weight: 600;
}
.xb-item-stats {
max-height: 150px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 3px;
}
.xb-item-stat-row {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
}
.xb-item-stat-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.xb-item-conditions {
font-size: 0.8rem;
color: #e74c3c;
margin-top: 5px;
padding-top: 5px;
border-top: 1px solid rgba(231, 76, 60, 0.2);
}
/* === PERSONNAGES DANS LE BUILDER - FIX OVERFLOW === */
.xb-char-bar {
display: flex;
gap: 10px;
padding: 10px;
overflow-x: auto;
max-width: 100%;
}
.xb-char-item {
flex-shrink: 0;
max-width: 200px;
}
/* =====================================================
XIXOU BUILDER v86 - CSS COMPLET DOFUSBOOK STYLE
===================================================== */
:root {
--gold: #DAA520;
--gold-dark: #B8860B;
--dark-bg: #0f0f1a;
--card-bg: #1a1a2e;
}
/* === MODAL BIENVENUE - FIX DOUBLE CLIC === */
.xb-welcome-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(15px);
z-index: 20000;
display: flex;
align-items: center;
justify-content: center;
}
.xb-welcome-content {
text-align: center;
max-width: 900px;
padding: 40px;
}
.xb-welcome-title {
font-family: 'Cinzel', serif;
font-size: 3rem;
font-weight: 900;
color: var(--gold);
margin-bottom: 10px;
text-shadow: 0 0 30px rgba(218, 165, 32, 0.5);
}
.xb-welcome-subtitle {
font-size: 1.3rem;
color: #888;
margin-bottom: 50px;
}
.xb-welcome-options {
display: flex;
gap: 40px;
justify-content: center;
flex-wrap: wrap;
}
/* BOUTONS MODAL - STYLE CLIC DIRECT */
button.xb-welcome-option {
width: 320px;
padding: 45px 35px;
background: linear-gradient(145deg, rgba(30, 30, 50, 0.9), rgba(15, 15, 30, 0.95));
border: 3px solid #444;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: #fff;
font-family: inherit;
position: relative;
overflow: hidden;
}
button.xb-welcome-option::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(218, 165, 32, 0.1), transparent);
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
button.xb-welcome-option:hover {
border-color: var(--gold);
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 60px rgba(218, 165, 32, 0.3);
}
button.xb-welcome-option:hover::before {
opacity: 1;
}
button.xb-welcome-option:active {
transform: translateY(-5px) scale(1.01);
}
button.xb-welcome-option .xb-welcome-icon {
font-size: 4.5rem;
margin-bottom: 20px;
display: block;
}
button.xb-welcome-option .xb-welcome-option-title {
font-family: 'Cinzel', serif;
font-size: 1.8rem;
font-weight: 700;
color: #fff;
margin-bottom: 12px;
display: block;
}
button.xb-welcome-option .xb-welcome-option-desc {
font-size: 1rem;
color: #aaa;
line-height: 1.5;
display: block;
}
button.xb-welcome-option .xb-welcome-char-count {
margin-top: 20px;
padding: 10px 25px;
background: rgba(52, 152, 219, 0.25);
border: 2px solid rgba(52, 152, 219, 0.5);
border-radius: 25px;
font-size: 1.1rem;
color: #3498db;
display: block;
}
.xb-welcome-footer {
margin-top: 50px;
}
.xb-welcome-tip {
color: #666;
font-size: 1rem;
}
/* === SÉLECTION PERSONNAGES === */
.xb-char-select {
max-width: 700px;
margin: 0 auto;
}
.xb-char-select-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 25px;
}
.xb-char-back-btn {
padding: 12px 25px;
background: rgba(255,255,255,0.1);
border: 2px solid #555;
border-radius: 10px;
color: #aaa;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.2s;
}
.xb-char-back-btn:hover {
border-color: var(--gold);
color: #fff;
}
.xb-char-select-title {
font-family: 'Cinzel', serif;
font-size: 1.6rem;
color: var(--gold);
}
.xb-char-list {
display: flex;
flex-direction: column;
gap: 15px;
max-height: 450px;
overflow-y: auto;
padding: 10px;
}
button.xb-char-card {
display: flex;
align-items: center;
gap: 20px;
padding: 25px;
background: linear-gradient(145deg, rgba(30,30,50,0.9), rgba(15,15,30,0.95));
border: 3px solid #444;
border-radius: 18px;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
text-align: left;
color: inherit;
font-family: inherit;
}
button.xb-char-card:hover {
border-color: var(--gold);
transform: translateY(-4px);
box-shadow: 0 15px 40px rgba(218, 165, 32, 0.25);
}
.xb-char-avatar {
width: 80px;
height: 80px;
background: rgba(0,0,0,0.5);
border-radius: 50%;
border: 4px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 0 20px rgba(218, 165, 32, 0.3);
}
.xb-char-avatar img {
width: 65px;
height: 65px;
object-fit: contain;
}
.xb-char-content {
flex: 1;
min-width: 0;
}
.xb-char-name {
font-family: 'Cinzel', serif;
font-size: 1.5rem;
font-weight: 700;
color: #fff;
margin-bottom: 6px;
}
.xb-char-class {
font-size: 1.1rem;
color: #aaa;
}
.xb-char-level {
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(135deg, rgba(218, 165, 32, 0.25), rgba(218, 165, 32, 0.1));
border: 4px solid var(--gold);
border-radius: 15px;
padding: 15px 25px;
box-shadow: 0 0 25px rgba(218, 165, 32, 0.3);
}
.xb-char-level-value {
font-family: 'Cinzel', serif;
font-size: 2.5rem;
font-weight: 900;
color: var(--gold);
line-height: 1;
text-shadow: 0 0 15px rgba(218, 165, 32, 0.5);
}
.xb-char-level-label {
font-size: 0.8rem;
color: #888;
text-transform: uppercase;
margin-top: 3px;
}
/* === TOAST === */
#xb-toast {
position: fixed;
top: 130px !important;
left: 50%;
transform: translateX(-50%);
z-index: 30000;
padding: 18px 35px;
background: linear-gradient(135deg, #27ae60, #2ecc71);
border-radius: 12px;
color: #fff;
font-size: 1.15rem;
font-weight: 600;
box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
/* === MES BUILDS - CARTES STYLE DOFUSBOOK === */
.xb-builds-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px;
background: linear-gradient(180deg, rgba(0,0,0,0.6), transparent);
border-bottom: 2px solid #333;
flex-wrap: wrap;
gap: 15px;
}
.xb-toolbar-title {
font-family: 'Cinzel', serif;
font-size: 1.6rem;
color: var(--gold);
}
.xb-toolbar-tags {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.xb-tag-btn {
padding: 10px 18px;
background: rgba(255,255,255,0.05);
border: 2px solid #444;
border-radius: 25px;
color: #888;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
}
.xb-tag-btn:hover {
border-color: var(--tag-color, #666);
color: #fff;
}
.xb-tag-btn.active {
background: var(--tag-color);
border-color: var(--tag-color);
color: #fff;
font-weight: 700;
}
.xb-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 25px;
padding: 25px;
}
/* === CARTE STUFF STYLE DOFUSBOOK === */
.xb-stuff-card {
background: linear-gradient(145deg, #1e1e35, #151525);
border: 2px solid #333;
border-radius: 18px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
}
.xb-stuff-card:hover {
border-color: var(--gold);
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(0,0,0,0.5);
}
.xb-stuff-card.active {
border-color: var(--gold);
box-shadow: 0 0 30px rgba(218, 165, 32, 0.3);
}
.xb-card-top {
padding: 20px 25px;
background: rgba(0,0,0,0.3);
border-bottom: 1px solid #333;
}
.xb-card-title-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.xb-card-level {
font-family: 'Cinzel', serif;
font-size: 1.1rem;
font-weight: 700;
color: var(--gold);
}
.xb-card-name {
font-family: 'Cinzel', serif;
font-size: 1.3rem;
font-weight: 600;
color: #fff;
}
.xb-card-author {
display: flex;
align-items: center;
gap: 10px;
}
.xb-card-author-icon {
width: 22px;
height: 22px;
}
.xb-card-author-name {
font-size: 1rem;
color: var(--gold);
font-weight: 500;
}
.xb-card-content {
display: flex;
padding: 20px;
gap: 15px;
}
.xb-card-col {
display: flex;
flex-direction: column;
gap: 8px;
}
.xb-card-center {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 10px 0;
}
.xb-card-face {
width: 75px;
height: 75px;
object-fit: contain;
}
.xb-card-stats {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.xb-stat-item {
display: flex;
align-items: center;
gap: 8px;
}
.xb-stat-icon {
width: 22px;
height: 22px;
}
.xb-stat-emoji {
font-size: 1rem;
width: 22px;
text-align: center;
}
.xb-stat-item span:last-child {
font-size: 1.1rem;
color: #fff;
font-weight: 600;
}
.xb-stat-views,
.xb-stat-date {
opacity: 0.7;
}
/* Slots équipements */
.xb-slot {
background: rgba(0,0,0,0.4);
border: 2px solid #444;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.xb-slot-md {
width: 52px;
height: 52px;
}
.xb-slot-sm {
width: 36px;
height: 36px;
}
.xb-slot.filled {
border-color: #666;
background: rgba(255,255,255,0.05);
}
.xb-slot.filled:hover {
border-color: var(--gold);
transform: scale(1.15);
z-index: 10;
}
.xb-slot img {
width: 80%;
height: 80%;
object-fit: contain;
}
.xb-slot-empty {
color: #444;
font-size: 1.2rem;
}
/* Dofus */
.xb-card-dofus {
display: flex;
justify-content: center;
gap: 8px;
padding: 15px;
background: rgba(0,0,0,0.2);
border-top: 1px solid rgba(155, 89, 182, 0.2);
}
/* Footer carte */
.xb-card-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 20px;
background: rgba(0,0,0,0.3);
border-top: 1px solid #333;
}
.xb-card-footer-tags {
display: flex;
gap: 8px;
}
.xb-card-tag {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
}
.xb-card-actions {
display: flex;
gap: 8px;
}
.xb-card-btn {
width: 42px;
height: 42px;
background: rgba(255,255,255,0.08);
border: 2px solid #555;
border-radius: 10px;
cursor: pointer;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.xb-card-btn:hover {
background: rgba(255,255,255,0.15);
border-color: var(--gold);
transform: scale(1.1);
}
.xb-card-btn.xb-btn-danger:hover {
background: rgba(231, 76, 60, 0.3);
border-color: #e74c3c;
}
/* === MODAL SUPPRESSION === */
.xb-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.92);
display: flex;
align-items: center;
justify-content: center;
z-index: 25000;
backdrop-filter: blur(8px);
}
.xb-modal-box {
background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
border: 3px solid var(--gold);
border-radius: 25px;
width: 90%;
max-width: 550px;
max-height: 90vh;
overflow: hidden;
box-shadow: 0 0 80px rgba(218, 165, 32, 0.2);
}
.xb-modal-box.xb-modal-lg {
max-width: 750px;
}
.xb-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 30px;
background: rgba(0,0,0,0.4);
border-bottom: 2px solid #333;
}
.xb-modal-header h3 {
margin: 0;
font-family: 'Cinzel', serif;
font-size: 1.6rem;
color: var(--gold);
}
.xb-modal-close {
font-size: 2.5rem;
color: #888;
cursor: pointer;
transition: color 0.2s;
line-height: 1;
}
.xb-modal-close:hover {
color: #fff;
}
.xb-modal-body {
padding: 30px;
overflow-y: auto;
max-height: 60vh;
}
.xb-modal-subtitle {
text-align: center;
color: #ccc;
margin-bottom: 25px;
font-size: 1.2rem;
}
.xb-modal-text {
font-size: 1.2rem;
color: #ddd;
text-align: center;
line-height: 1.6;
}
.xb-modal-footer {
padding: 25px 30px;
background: rgba(0,0,0,0.4);
border-top: 2px solid #333;
display: flex;
justify-content: center;
gap: 20px;
}
/* === BOUTONS GÉNÉRAUX === */
.xb-btn-gold {
padding: 16px 35px;
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
border: none;
border-radius: 12px;
color: #000;
font-size: 1.15rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
.xb-btn-gold:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(218, 165, 32, 0.5);
}
.xb-btn-secondary {
padding: 16px 35px;
background: rgba(255,255,255,0.1);
border: 2px solid #666;
border-radius: 12px;
color: #fff;
font-size: 1.15rem;
cursor: pointer;
transition: all 0.2s;
}
.xb-btn-secondary:hover {
background: rgba(255,255,255,0.2);
border-color: #888;
}
.xb-btn-danger {
padding: 16px 35px;
background: rgba(231, 76, 60, 0.2);
border: 2px solid #e74c3c;
border-radius: 12px;
color: #e74c3c;
font-size: 1.15rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
.xb-btn-danger:hover {
background: rgba(231, 76, 60, 0.4);
}
/* === MODAL ÉQUIPEMENT === */
#xb-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 18000;
backdrop-filter: blur(10px);
}
.xb-mod-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 95%;
max-width: 1200px;
height: 85vh;
background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%);
border: 3px solid var(--gold);
border-radius: 20px;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 0 100px rgba(218, 165, 32, 0.2);
}
.xb-mod-head {
background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.3));
padding: 15px 20px;
border-bottom: 2px solid var(--gold);
display: flex;
flex-direction: column;
gap: 12px;
flex-shrink: 0;
}
.xb-filters-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
#xb-sort-select {
padding: 10px 15px;
background: rgba(0,0,0,0.5);
border: 2px solid #555;
border-radius: 8px;
color: #fff;
font-size: 1rem;
cursor: pointer;
}
.xb-filter-btn {
padding: 8px 16px;
background: rgba(255,255,255,0.05);
border: 2px solid #555;
border-radius: 20px;
color: #888;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s;
}
.xb-filter-btn:hover {
border-color: #888;
color: #fff;
}
.xb-filter-btn.active {
background: var(--gold);
border-color: var(--gold);
color: #000;
font-weight: 700;
}
.xb-stat-filter-label {
color: #888;
font-size: 0.9rem;
margin-right: 5px;
}
.xb-stat-filter-bar {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.xb-stat-btn {
width: 34px;
height: 34px;
background: rgba(0,0,0,0.4);
border: 2px solid #555;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.xb-stat-btn:hover {
border-color: #888;
transform: scale(1.1);
}
.xb-stat-btn.active {
border-color: var(--gold);
background: rgba(218, 165, 32, 0.2);
box-shadow: 0 0 10px rgba(218, 165, 32, 0.3);
}
.xb-stat-btn img {
width: 22px;
height: 22px;
}
#xb-search {
margin: 15px 20px;
padding: 14px 20px;
background: rgba(0,0,0,0.5);
border: 2px solid #555;
border-radius: 12px;
color: #fff;
font-size: 1.1rem;
transition: all 0.2s;
flex-shrink: 0;
}
#xb-search:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 20px rgba(218, 165, 32, 0.2);
}
#xb-result-count {
padding: 8px 25px !important;
color: var(--gold) !important;
font-weight: 600;
font-size: 1rem !important;
flex-shrink: 0;
}
.xb-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
gap: 15px !important;
padding: 20px !important;
overflow-y: auto !important;
flex: 1;
}
.xb-item {
background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%) !important;
border: 2px solid #444 !important;
border-radius: 14px !important;
padding: 0 !important;
cursor: pointer;
display: flex !important;
flex-direction: row !important;
overflow: hidden;
transition: all 0.2s ease;
min-height: 130px !important;
}
.xb-item:hover {
border-color: var(--gold) !important;
transform: translateY(-3px);
box-shadow: 0 10px 35px rgba(0,0,0,0.5);
}
.xb-item-left {
width: 110px !important;
min-height: 110px;
background: rgba(0,0,0,0.5) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 15px !important;
flex-shrink: 0;
}
.xb-item-img {
width: 75px !important;
height: 75px !important;
object-fit: contain;
}
.xb-item-right {
flex: 1;
padding: 15px 18px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
position: relative;
overflow: hidden;
}
.xb-item-lvl-box {
position: absolute !important;
top: 12px !important;
right: 12px !important;
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: 1.4rem !important;
color: var(--gold);
background: rgba(0,0,0,0.9);
border: 3px solid var(--gold) !important;
padding: 8px 15px !important;
border-radius: 10px !important;
line-height: 1;
box-shadow: 0 0 20px rgba(218, 165, 32, 0.3);
}
.xb-item-name {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 1.1rem !important;
color: #fff;
margin-right: 90px;
line-height: 1.3;
}
.xb-item-set {
font-size: 0.9rem;
color: var(--gold);
font-weight: 600;
}
.xb-item-stats {
max-height: 140px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 4px;
}
.xb-item-stat-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
}
.xb-item-stat-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* === FORGEMAGIE === */
.xb-fm-slots {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
.xb-fm-slot-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 18px;
background: rgba(0,0,0,0.4);
border: 2px solid #555;
border-radius: 12px;
color: #fff;
cursor: pointer;
transition: all 0.2s;
text-align: left;
}
.xb-fm-slot-btn:hover {
border-color: var(--gold);
transform: translateY(-2px);
}
.xb-fm-slot-btn img {
width: 45px;
height: 45px;
object-fit: contain;
}
.xb-fm-slot-name {
font-size: 1rem;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.xb-fm-item-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 25px;
}
.xb-fm-item-header h4 {
margin: 0;
color: var(--gold);
font-family: 'Cinzel', serif;
font-size: 1.3rem;
}
.xb-fm-stats {
display: flex;
flex-direction: column;
gap: 12px;
}
.xb-fm-stat {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 18px;
background: rgba(0,0,0,0.3);
border-radius: 10px;
}
.xb-fm-stat-name {
flex: 1;
font-size: 1rem;
}
.xb-fm-stat-range {
font-size: 0.9rem;
color: #888;
width: 90px;
}
.xb-fm-input {
width: 80px;
padding: 10px 12px;
background: #111;
border: 2px solid #555;
border-radius: 8px;
color: #fff;
text-align: center;
font-weight: 700;
font-size: 1.1rem;
}
.xb-fm-input:focus {
outline: none;
border-color: var(--gold);
}
.xb-fm-diff {
width: 60px;
text-align: right;
font-weight: 700;
font-size: 1.1rem;
}
.xb-fm-diff.over { color: #9b59b6; }
.xb-fm-diff.under { color: #e74c3c; }
/* === TAGS MODAL === */
.xb-tags-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
.xb-tag-select {
padding: 15px 18px;
background: rgba(255,255,255,0.05);
border: 2px solid #555;
border-radius: 12px;
color: #aaa;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.xb-tag-select:hover {
border-color: var(--tag-color, #888);
color: #fff;
}
.xb-tag-select.selected {
background: var(--tag-color);
border-color: var(--tag-color);
color: #fff;
font-weight: 700;
}
/* === SCROLL LOCK === */
body.xb-modal-open {
overflow: hidden !important;
}
/* === EMPTY STATE === */
.xb-empty-state {
text-align: center;
padding: 80px 30px;
}
.xb-empty-icon {
font-size: 5rem;
margin-bottom: 25px;
}
.xb-empty-state h3 {
font-family: 'Cinzel', serif;
font-size: 1.8rem;
color: #fff;
margin-bottom: 15px;
}
.xb-empty-state p {
color: #888;
font-size: 1.1rem;
margin-bottom: 30px;
}
/* === RESPONSIVE === */
@media (max-width: 768px) {
.xb-welcome-options {
flex-direction: column;
align-items: center;
}
button.xb-welcome-option {
width: 100%;
max-width: 350px;
}
.xb-cards-grid {
grid-template-columns: 1fr;
}
.xb-card-content {
flex-direction: column;
align-items: center;
}
.xb-card-col {
flex-direction: row;
justify-content: center;
}
.xb-stuff-card {
max-width: 400px;
margin: 0 auto;
}
}
/* === MODAL CONFIRMATION SUPPRESSION === */
#xb-confirm-delete-modal .xb-modal-text {
font-size: 1.3rem;
line-height: 1.8;
}
#xb-confirm-delete-modal .xb-btn-danger {
font-size: 1.2rem;
padding: 18px 40px;
}
#xb-confirm-delete-modal .xb-btn-secondary {
font-size: 1.2rem;
padding: 18px 40px;
}
/* === BOUTON BACK === */
.xb-btn-back {
padding: 10px 20px;
background: rgba(255,255,255,0.1);
border: 2px solid #555;
border-radius: 8px;
color: #aaa;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
}
.xb-btn-back:hover {
border-color: var(--gold);
color: #fff;
}
/* =============================================
V87 - CORRECTIONS ET AMÉLIORATIONS COMPLÈTES
============================================= */
/* === SECTION DOFUS SÉPARÉE === */
.xb-dofus-section {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
margin-top: 15px;
background: rgba(155, 89, 182, 0.08);
border-radius: 12px;
border: 1px solid rgba(155, 89, 182, 0.2);
}
.xb-dofus-label {
font-family: 'Cinzel', serif;
font-weight: 800;
color: #9b59b6;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 15px;
}
.xb-dofus-row {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-top: 0 !important;
}
.xb-slot-dofus {
width: 52px !important;
height: 52px !important;
background-size: 40% !important;
}
/* === CARTES BUILDS V87 === */
.xb-stuff-card {
background: linear-gradient(145deg, #1a1a2e, #0f0f1a);
border: 2px solid #333;
border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.xb-stuff-card:hover {
border-color: var(--gold);
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(0,0,0,0.5), 0 0 30px rgba(212, 175, 55, 0.15);
}
.xb-stuff-card.active {
border-color: var(--gold);
box-shadow: 0 0 25px rgba(212, 175, 55, 0.3);
}
/* Header avec niveau */
.xb-card-header {
display: flex;
justify-content: flex-end;
padding: 12px 15px;
background: rgba(0,0,0,0.3);
}
.xb-card-level-badge {
background: linear-gradient(135deg, var(--gold), #c9a227);
color: #000;
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: 1rem;
padding: 6px 14px;
border-radius: 20px;
box-shadow: 0 3px 10px rgba(212, 175, 55, 0.4);
}
/* Nom centré en grand */
.xb-card-title-centered {
text-align: center;
padding: 15px 20px;
background: rgba(255,255,255,0.02);
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.xb-card-name-big {
font-family: 'Cinzel', serif;
font-size: 1.5rem;
font-weight: 800;
color: #fff;
margin: 0 0 5px 0;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.xb-card-class-name {
font-size: 1rem;
color: var(--gold);
font-weight: 700;
}
/* Contenu 3 colonnes */
.xb-card-content {
display: flex;
padding: 20px;
gap: 15px;
align-items: flex-start;
}
.xb-card-col {
display: flex;
flex-direction: column;
gap: 8px;
}
.xb-card-center {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
}
.xb-card-face {
width: 80px;
height: 80px;
object-fit: contain;
filter: drop-shadow(0 5px 15px rgba(0,0,0,0.8));
}
/* Stats agrandies */
.xb-card-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
width: 100%;
max-width: 180px;
}
.xb-stat-item {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 10px;
background: rgba(0,0,0,0.4);
border-radius: 8px;
border: 1px solid #333;
}
.xb-stat-icon {
width: 22px;
height: 22px;
object-fit: contain;
}
.xb-stat-emoji {
font-size: 1.1rem;
}
.xb-stat-value {
font-weight: 800;
font-size: 1.1rem;
color: #fff;
}
/* Slots dans cartes */
.xb-slot.xb-slot-md {
width: 50px;
height: 50px;
background: rgba(0,0,0,0.5);
border: 2px solid #444;
border-radius: 8px;
}
.xb-slot.xb-slot-sm {
width: 38px;
height: 38px;
background: rgba(0,0,0,0.5);
border: 2px solid #444;
border-radius: 6px;
}
.xb-slot.filled {
border-color: #666;
}
.xb-slot.filled:hover {
border-color: var(--gold);
transform: scale(1.1);
z-index: 10;
}
.xb-slot-empty {
color: #444;
font-size: 1.2rem;
}
/* Dofus dans cartes */
.xb-card-dofus {
display: flex;
justify-content: center;
gap: 8px;
padding: 15px;
background: rgba(155, 89, 182, 0.1);
border-top: 1px solid rgba(155, 89, 182, 0.2);
}
/* Footer avec tags et actions */
.xb-card-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: rgba(0,0,0,0.4);
border-top: 1px solid #333;
gap: 15px;
}
/* Tags agrandis */
.xb-card-footer-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
flex: 1;
}
.xb-card-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 700;
color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
/* Boutons actions améliorés */
.xb-card-actions {
display: flex;
gap: 8px;
}
.xb-card-btn {
width: 44px;
height: 44px;
border-radius: 10px;
border: 2px solid #444;
background: rgba(255,255,255,0.05);
cursor: pointer;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.xb-card-btn:hover {
border-color: var(--gold);
background: rgba(212, 175, 55, 0.1);
transform: scale(1.1);
}
.xb-btn-del {
border-color: #8b0000;
background: rgba(139, 0, 0, 0.2);
}
.xb-btn-del:hover {
border-color: #e74c3c;
background: rgba(231, 76, 60, 0.3);
}
/* === TAGS TOOLBAR AMÉLIORÉS === */
.xb-tag-btn {
padding: 10px 16px;
border-radius: 20px;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
border: 2px solid transparent;
background: rgba(var(--tag-color), 0.2);
color: #ccc;
display: flex;
align-items: center;
gap: 6px;
}
.xb-tag-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.xb-tag-btn.active {
background: var(--tag-color);
color: #fff;
border-color: var(--tag-color);
}
.xb-tag-label {
font-size: 0.9rem;
}
/* === MODALES CONFIRMATION AMÉLIORÉES === */
.xb-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
z-index: 30000;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(5px);
}
.xb-modal-box {
background: linear-gradient(145deg, #1a1a2e, #0a0a15);
border: 2px solid #444;
border-radius: 20px;
max-width: 500px;
width: 90%;
box-shadow: 0 25px 80px rgba(0,0,0,0.8);
animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.xb-modal-confirm {
text-align: center;
}
.xb-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 30px;
border-bottom: 1px solid #333;
}
.xb-modal-header h3 {
font-family: 'Cinzel', serif;
font-size: 1.5rem;
color: #fff;
margin: 0;
}
.xb-modal-header-dup {
background: linear-gradient(135deg, rgba(52, 152, 219, 0.2), rgba(41, 128, 185, 0.1));
border-color: rgba(52, 152, 219, 0.3);
}
.xb-modal-header-danger {
background: linear-gradient(135deg, rgba(231, 76, 60, 0.2), rgba(192, 57, 43, 0.1));
border-color: rgba(231, 76, 60, 0.3);
}
.xb-modal-close {
font-size: 2rem;
color: #888;
cursor: pointer;
transition: all 0.2s;
line-height: 1;
}
.xb-modal-close:hover {
color: #fff;
transform: scale(1.1);
}
.xb-modal-body {
padding: 30px;
}
.xb-modal-text {
font-size: 1.2rem;
color: #ccc;
margin-bottom: 10px;
}
.xb-modal-build-name {
font-family: 'Cinzel', serif;
font-size: 1.6rem;
font-weight: 800;
color: var(--gold);
margin: 20px 0;
text-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}
.xb-modal-hint {
font-size: 1rem;
color: #888;
font-style: italic;
}
.xb-modal-warning {
font-size: 1.1rem;
color: #e74c3c;
font-weight: 700;
padding: 15px;
background: rgba(231, 76, 60, 0.1);
border-radius: 10px;
margin-top: 20px;
}
.xb-delete-warning-icon {
font-size: 4rem;
margin-bottom: 15px;
}
.xb-modal-footer {
display: flex;
gap: 15px;
justify-content: center;
padding: 25px 30px;
border-top: 1px solid #333;
background: rgba(0,0,0,0.2);
border-radius: 0 0 18px 18px;
}
.xb-btn-secondary {
padding: 14px 28px;
background: #333;
border: 2px solid #555;
border-radius: 10px;
color: #ccc;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
.xb-btn-secondary:hover {
background: #444;
color: #fff;
border-color: #666;
}
.xb-btn-danger {
padding: 14px 28px;
background: linear-gradient(135deg, #c0392b, #e74c3c);
border: 2px solid #e74c3c;
border-radius: 10px;
color: #fff;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
.xb-btn-danger:hover {
transform: scale(1.05);
box-shadow: 0 5px 20px rgba(231, 76, 60, 0.4);
}
.xb-btn-gold {
padding: 14px 28px;
background: linear-gradient(135deg, var(--gold), #c9a227);
border: 2px solid var(--gold);
border-radius: 10px;
color: #000;
font-size: 1.1rem;
font-weight: 800;
cursor: pointer;
transition: all 0.2s;
}
.xb-btn-gold:hover {
transform: scale(1.05);
box-shadow: 0 5px 20px rgba(212, 175, 55, 0.5);
}
.xb-btn-lg {
padding: 16px 35px;
font-size: 1.15rem;
}
/* === EXPLORER AMÉLIORÉ === */
.xb-explorer-header {
padding: 25px;
background: rgba(0,0,0,0.3);
border-bottom: 1px solid #333;
margin-bottom: 20px;
}
.xb-explorer-stats {
display: flex;
gap: 30px;
justify-content: center;
}
.xb-explorer-stat {
text-align: center;
}
.xb-explorer-stat-value {
display: block;
font-family: 'Cinzel', serif;
font-size: 2.5rem;
font-weight: 900;
color: var(--gold);
}
.xb-explorer-stat-label {
font-size: 0.95rem;
color: #888;
text-transform: uppercase;
letter-spacing: 1px;
}
.xb-explorer-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
padding: 0 25px 25px;
}
.xb-explorer-build-card {
background: linear-gradient(145deg, #1a1a2e, #0f0f1a);
border: 2px solid #333;
border-radius: 12px;
padding: 20px;
cursor: pointer;
transition: all 0.3s;
position: relative;
}
.xb-explorer-build-card:hover {
border-color: var(--gold);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.xb-explorer-build-card.public {
border-color: #27ae60;
}
.xb-explorer-build-badge {
position: absolute;
top: 12px;
right: 12px;
padding: 5px 10px;
border-radius: 15px;
font-size: 0.85rem;
font-weight: 700;
}
.xb-explorer-build-badge.public {
background: rgba(39, 174, 96, 0.2);
border: 1px solid #27ae60;
}
.xb-explorer-build-badge.private {
background: rgba(255,255,255,0.1);
border: 1px solid #555;
}
.xb-explorer-build-header {
display: flex;
gap: 15px;
align-items: center;
margin-bottom: 15px;
}
.xb-explorer-build-class img {
width: 50px;
height: 50px;
object-fit: contain;
}
.xb-explorer-build-info h4 {
font-size: 1.2rem;
color: #fff;
margin: 0 0 5px 0;
}
.xb-explorer-build-info p {
font-size: 0.95rem;
color: #888;
margin: 0;
}
.xb-explorer-build-stats {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 1px solid #333;
}
.xb-btn-toggle-pub {
padding: 8px 14px;
border-radius: 8px;
border: 1px solid #555;
background: rgba(255,255,255,0.05);
color: #ccc;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.xb-btn-toggle-pub:hover {
border-color: var(--gold);
color: #fff;
background: rgba(212, 175, 55, 0.1);
}
/* === MODAL ÉQUIPEMENTS AMÉLIORÉ === */
.xb-modal {
background: linear-gradient(145deg, #0a0a15, #050510);
border: 2px solid #333;
border-radius: 16px;
}
.xb-modal-hdr {
padding: 20px 25px;
background: rgba(0,0,0,0.4);
border-bottom: 1px solid #333;
}
#xb-search {
width: calc(100% - 50px);
margin: 15px 25px;
padding: 14px 20px;
background: rgba(0,0,0,0.6);
border: 2px solid #444;
border-radius: 12px;
color: #fff;
font-size: 1.1rem;
transition: all 0.2s;
}
#xb-search:focus {
border-color: var(--gold);
box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
outline: none;
}
.xb-grid {
padding: 15px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 15px;
max-height: 60vh;
overflow-y: auto;
}
.xb-it {
background: rgba(0,0,0,0.5);
border: 2px solid #333;
border-radius: 12px;
padding: 15px 10px;
cursor: pointer;
transition: all 0.2s;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.xb-it:hover {
border-color: var(--gold);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}
.xb-it img {
width: 60px;
height: 60px;
object-fit: contain;
filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6));
}
.xb-it span {
font-size: 0.85rem;
color: #ccc;
text-align: center;
margin-top: 8px;
line-height: 1.3;
}
.xb-item-lvl-box {
position: absolute !important;
top: 8px !important;
right: 8px !important;
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: 1rem !important;
color: var(--gold);
background: rgba(0,0,0,0.9);
border: 2px solid var(--gold) !important;
padding: 4px 10px !important;
border-radius: 6px !important;
line-height: 1;
box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);
}
/* === TOAST POSITIONNÉ === */
#xb-toast {
position: fixed !important;
top: 120px !important;
left: 50%;
transform: translateX(-50%);
z-index: 35000;
padding: 18px 35px;
border-radius: 12px;
color: #fff;
font-size: 1.15rem;
font-weight: 700;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
animation: toastSlide 0.3s ease;
}
@keyframes toastSlide {
from {
opacity: 0;
transform: translateX(-50%) translateY(-20px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
/* === PROFIL AMÉLIORÉ === */
.xb-profile-hero {
background: linear-gradient(135deg, #1a1a2e 0%, #0a0a15 100%);
padding: 50px 30px;
text-align: center;
border-radius: 16px;
margin-bottom: 30px;
border: 1px solid #333;
position: relative;
}
.xb-profile-avatar-large {
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold), #c9a227);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
box-shadow: 0 10px 40px rgba(212, 175, 55, 0.3);
}
.xb-avatar-icon {
font-size: 4rem;
}
.xb-profile-edit-btn {
position: absolute;
top: 20px;
right: 20px;
padding: 12px 20px;
background: rgba(255,255,255,0.1);
border: 2px solid #555;
border-radius: 10px;
color: #ccc;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.2s;
}
.xb-profile-edit-btn:hover {
border-color: var(--gold);
color: #fff;
background: rgba(212, 175, 55, 0.1);
}
.xb-profile-title {
font-family: 'Cinzel', serif;
font-size: 2rem;
color: #fff;
margin: 0 0 10px 0;
}
.xb-profile-subtitle {
font-size: 1.1rem;
color: var(--gold);
}
/* === RESPONSIVE V87 === */
@media (max-width: 768px) {
.xb-card-stats {
grid-template-columns: repeat(4, 1fr);
}
.xb-card-content {
padding: 15px;
}
.xb-card-name-big {
font-size: 1.3rem;
}
.xb-modal-box {
margin: 15px;
}
.xb-btn-lg {
padding: 14px 25px;
font-size: 1rem;
}
.xb-explorer-grid {
grid-template-columns: 1fr;
}
}
/* === V87 MODAL BIENVENUE FIX === */
#xb-welcome-modal.hidden,
.xb-welcome-modal.hidden {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
z-index: -9999 !important;
}
/* Forcer l'affichage de view-builder quand il est actif */
#view-builder.active {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* === DOLL GRID CORRIGÉ (sans dofus intégrés) === */
.xb-doll-grid {
display: grid;
grid-template-areas:
"amulette character chapeau"
"ceinture character cape"
"anneau1 character anneau2"
"bottes character sac"
"arme character bouclier";
grid-template-columns: 80px 1fr 80px;
gap: 4px;
align-content: start;
margin-top: 5px;
}
/* === COLONNE DOLL AJUSTÉE === */
.xb-col-doll {
display: flex;
flex-direction: column;
gap: 0;
}
/* === FORGEMAGIE DANS LE BUILDER V87.02 === */
.xb-fm-item-display {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
background: rgba(0,0,0,0.3);
border-radius: 12px;
margin-bottom: 25px;
}
.xb-fm-item-img {
width: 80px;
height: 80px;
object-fit: contain;
filter: drop-shadow(0 5px 15px rgba(0,0,0,0.6));
}
.xb-fm-item-details {
flex: 1;
}
.xb-fm-item-name {
font-family: 'Cinzel', serif;
font-size: 1.4rem;
font-weight: 800;
color: #fff;
margin-bottom: 5px;
}
.xb-fm-item-level {
font-size: 1rem;
color: var(--gold);
font-weight: 700;
}
.xb-fm-stats-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.xb-fm-stat {
display: flex;
align-items: center;
gap: 15px;
padding: 15px 20px;
background: rgba(0,0,0,0.4);
border-radius: 10px;
border: 1px solid #333;
}
.xb-fm-stat-name {
flex: 1;
font-weight: 700;
font-size: 1.05rem;
}
.xb-fm-stat-range {
color: #888;
font-size: 0.9rem;
min-width: 80px;
text-align: center;
}
.xb-fm-input {
width: 80px;
padding: 10px 12px;
background: #111;
border: 2px solid #555;
border-radius: 8px;
color: #fff;
text-align: center;
font-weight: 700;
font-size: 1.1rem;
transition: all 0.2s;
}
.xb-fm-input:focus {
border-color: var(--gold);
outline: none;
box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}
.xb-fm-diff {
min-width: 50px;
text-align: right;
font-weight: 800;
font-size: 1rem;
}
.xb-fm-diff.over {
color: #9b59b6;
}
.xb-fm-diff.under {
color: #e74c3c;
}
.xb-fm-no-stats {
text-align: center;
color: #888;
padding: 40px;
font-style: italic;
}
/* === SLOTS FORGEMAGIE === */
.xb-fm-slots {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
.xb-fm-slot-btn {
display: flex;
align-items: center;
gap: 15px;
padding: 15px 20px;
background: rgba(0,0,0,0.4);
border: 2px solid #444;
border-radius: 12px;
color: #fff;
cursor: pointer;
transition: all 0.2s;
text-align: left;
}
.xb-fm-slot-btn:hover {
border-color: var(--gold);
background: rgba(212, 175, 55, 0.1);
transform: translateY(-2px);
}
.xb-fm-slot-btn img {
width: 45px;
height: 45px;
object-fit: contain;
}
.xb-fm-slot-name {
font-weight: 700;
font-size: 1rem;
}
/* === MODAL LARGE === */
.xb-modal-lg {
max-width: 650px;
}
/* === RÉSISTANCES CSS === */
.xb-res-row {
display: grid;
grid-template-columns: 1fr 30px 1fr;
align-items: center;
padding: 10px 15px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.xb-res-row span:first-child {
text-align: right;
padding-right: 12px;
font-weight: 700;
font-size: 0.95rem;
}
.xb-res-row span:last-child {
text-align: left;
padding-left: 12px;
font-weight: 800;
font-size: 1.05rem;
}
.xb-res-icon {
width: 22px;
height: 22px;
justify-self: center;
}
/* === STATS SECONDAIRES === */
.xb-stat-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
border-bottom: 1px solid rgba(255,255,255,0.03);
}
.xb-stat-label {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 0.95rem;
color: #ccc;
}
.xb-stat-val {
font-weight: 800;
font-size: 1.1rem;
color: #fff;
}
/* === STAT GROUP TITLE === */
.xb-stat-group-title {
background: rgba(255, 255, 255, 0.05);
padding: 10px 15px;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--gold);
font-weight: 900;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
margin-top: 10px;
grid-column: 1 / -1;
}
/* === MODAL SÉLECTION OBJETS V87.02 === */
.xb-item-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.92);
z-index: 20000;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(8px);
}
.xb-mod-box {
background: linear-gradient(145deg, #1a1a2e, #0a0a15);
border: 2px solid #333;
border-radius: 20px;
width: 95%;
max-width: 1200px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8);
animation: modalSlideIn 0.3s ease;
}
.xb-mod-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 25px;
background: linear-gradient(135deg, rgba(155, 89, 182, 0.15), rgba(142, 68, 173, 0.08));
border-bottom: 1px solid #333;
border-radius: 18px 18px 0 0;
}
.xb-mod-title {
display: flex;
align-items: center;
gap: 15px;
}
.xb-mod-title span:first-child {
font-family: 'Cinzel', serif;
font-size: 1.4rem;
font-weight: 800;
color: #fff;
}
.xb-result-badge {
background: rgba(155, 89, 182, 0.3);
padding: 6px 14px;
border-radius: 20px;
font-size: 0.85rem;
color: #b39ddb;
font-weight: 700;
}
.xb-mod-close {
width: 45px;
height: 45px;
border: none;
background: rgba(231, 76, 60, 0.2);
border-radius: 50%;
color: #e74c3c;
font-size: 1.8rem;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.xb-mod-close:hover {
background: #e74c3c;
color: #fff;
transform: rotate(90deg);
}
.xb-mod-search-bar {
padding: 20px 25px;
border-bottom: 1px solid #222;
}
.xb-search-input {
width: 100%;
padding: 16px 25px;
background: rgba(0, 0, 0, 0.5);
border: 2px solid #444;
border-radius: 15px;
color: #fff;
font-size: 1.1rem;
transition: all 0.2s;
}
.xb-search-input::placeholder {
color: #666;
}
.xb-search-input:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}
.xb-mod-filters {
padding: 15px 25px;
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid #222;
}
.xb-filters-main {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-bottom: 15px;
}
.xb-filter-select {
padding: 10px 18px;
background: #111;
border: 2px solid #444;
border-radius: 10px;
color: #fff;
font-size: 0.95rem;
cursor: pointer;
min-width: 150px;
}
.xb-filter-select:focus {
outline: none;
border-color: var(--gold);
}
.xb-filter-toggle {
padding: 10px 18px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid #444;
border-radius: 10px;
color: #888;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.xb-filter-toggle.active {
background: linear-gradient(135deg, rgba(155, 89, 182, 0.3), rgba(142, 68, 173, 0.2));
border-color: #9b59b6;
color: #fff;
}
.xb-filter-toggle:hover {
border-color: var(--gold);
}
.xb-filter-reset {
padding: 10px 18px;
background: rgba(231, 76, 60, 0.15);
border: 2px solid #8b0000;
border-radius: 10px;
color: #e74c3c;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
margin-left: auto;
}
.xb-filter-reset:hover {
background: #e74c3c;
color: #fff;
}
.xb-filters-stats {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.xb-filters-stats-label {
color: #888;
font-size: 0.9rem;
font-weight: 600;
}
.xb-stat-filter-bar {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.xb-stat-filter-btn {
width: 36px;
height: 36px;
padding: 6px;
background: rgba(0, 0, 0, 0.4);
border: 2px solid #333;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.xb-stat-filter-btn img {
width: 22px;
height: 22px;
opacity: 0.6;
transition: opacity 0.2s;
}
.xb-stat-filter-btn:hover {
border-color: #666;
}
.xb-stat-filter-btn:hover img {
opacity: 1;
}
.xb-stat-filter-btn.active {
background: rgba(212, 175, 55, 0.2);
border-color: var(--gold);
}
.xb-stat-filter-btn.active img {
opacity: 1;
}
.xb-items-grid {
flex: 1;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Items dans la grille */
.xb-item {
display: flex;
gap: 15px;
padding: 15px;
background: rgba(0, 0, 0, 0.3);
border: 2px solid #333;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s;
}
.xb-item:hover {
background: rgba(212, 175, 55, 0.1);
border-color: var(--gold);
transform: translateX(5px);
}
.xb-item-left {
flex-shrink: 0;
}
.xb-item-img {
width: 60px;
height: 60px;
object-fit: contain;
filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5));
}
.xb-item-right {
flex: 1;
min-width: 0;
}
.xb-item-name {
font-family: 'Cinzel', serif;
font-size: 1.1rem;
font-weight: 700;
color: #fff;
margin-bottom: 5px;
}
.xb-item-lvl-box {
display: inline-block;
background: linear-gradient(135deg, var(--gold), #c9a227);
color: #000;
font-weight: 800;
padding: 4px 10px;
border-radius: 12px;
font-size: 0.85rem;
margin-right: 8px;
}
.xb-item-set {
color: #9b59b6;
font-size: 0.9rem;
font-weight: 600;
margin: 5px 0;
}
.xb-item-stats {
display: flex;
flex-wrap: wrap;
gap: 5px 15px;
margin-top: 8px;
}
.xb-item-stat-row {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.9rem;
}
.xb-item-stat-icon {
width: 16px;
height: 16px;
}
.xb-item-conditions {
color: #e74c3c;
font-size: 0.85rem;
margin-top: 5px;
font-style: italic;
}
/* Mobile */
@media (max-width: 768px) {
.xb-mod-box {
width: 100%;
height: 100%;
max-height: 100vh;
border-radius: 0;
}
.xb-mod-header {
padding: 15px;
border-radius: 0;
}
.xb-mod-title span:first-child {
font-size: 1.1rem;
}
.xb-filters-main {
gap: 8px;
}
.xb-filter-toggle {
padding: 8px 12px;
font-size: 0.8rem;
}
.xb-stat-filter-btn {
width: 32px;
height: 32px;
}
.xb-item {
padding: 12px;
}
.xb-item-img {
width: 50px;
height: 50px;
}
.xb-item-name {
font-size: 1rem;
}
}
/* === V87.03 CORRECTIONS === */
/* Animation modal - centré immédiatement, pas de glissement */
@keyframes modalSlideIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.xb-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.92);
z-index: 30000;
display: flex !important;
justify-content: center !important;
align-items: center !important;
backdrop-filter: blur(8px);
}
.xb-modal-box {
animation: modalSlideIn 0.25s ease-out !important;
transform-origin: center center !important;
}
/* Dofus section - moins d'espace avec les flèches */
.xb-dofus-section {
display: flex;
flex-direction: column;
align-items: center;
padding: 15px;
margin-top: 5px;
background: rgba(155, 89, 182, 0.08);
border-radius: 12px;
border: 1px solid rgba(155, 89, 182, 0.2);
}
.xb-char-zone {
margin-bottom: 0 !important;
}
/* Header cartes builds - Nom à gauche, niveau à droite */
.xb-card-header-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 15px 20px;
background: rgba(0,0,0,0.4);
border-radius: 16px 16px 0 0;
gap: 15px;
}
.xb-card-title-left {
flex: 1;
min-width: 0;
}
.xb-card-title-left .xb-card-name-big {
font-family: 'Cinzel', serif;
font-size: 1.3rem;
font-weight: 800;
color: #fff;
margin: 0 0 5px 0;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.xb-card-title-left .xb-card-class-name {
font-size: 0.95rem;
color: var(--gold);
font-weight: 700;
}
.xb-card-level-badge {
flex-shrink: 0;
background: linear-gradient(135deg, var(--gold), #c9a227);
color: #000;
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: 0.95rem;
padding: 8px 16px;
border-radius: 20px;
box-shadow: 0 3px 10px rgba(212, 175, 55, 0.4);
}
/* Modal Tags - textes agrandis */
.xb-tags-modal-content {
padding: 30px !important;
}
.xb-tags-modal-title {
font-size: 1.6rem !important;
font-weight: 800 !important;
margin-bottom: 25px !important;
}
.xb-tag-option {
padding: 15px 20px !important;
font-size: 1.1rem !important;
border-radius: 12px !important;
}
.xb-tag-option .xb-tag-icon {
font-size: 1.5rem !important;
}
.xb-tag-option .xb-tag-label {
font-size: 1.1rem !important;
font-weight: 700 !important;
}
.xb-tags-modal-btn {
padding: 14px 30px !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
}
/* Tooltip pour slots dans cartes */
.xb-slot-tooltip {
position: fixed;
z-index: 50000;
background: linear-gradient(145deg, #1a1a2e, #0a0a15);
border: 2px solid var(--gold);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.8);
pointer-events: none;
max-width: 300px;
display: none;
}
.xb-has-tip {
cursor: pointer;
}
/* Onglets Forgemagie/Exomagie */
.xb-fm-tabs {
display: flex;
gap: 10px;
margin: 20px 0;
border-bottom: 2px solid #333;
padding-bottom: 10px;
}
.xb-fm-tab {
flex: 1;
padding: 12px 20px;
background: rgba(255,255,255,0.05);
border: 2px solid #444;
border-radius: 10px;
color: #888;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
.xb-fm-tab.active {
background: linear-gradient(135deg, rgba(155, 89, 182, 0.3), rgba(142, 68, 173, 0.2));
border-color: #9b59b6;
color: #fff;
}
.xb-fm-tab:hover:not(.active) {
border-color: #666;
color: #ccc;
}
.xb-fm-tab-content {
display: none;
}
.xb-fm-tab-content.active {
display: block;
}
/* Section Exomagie */
.xb-exo-section {
padding: 15px;
}
.xb-exo-title {
font-family: 'Cinzel', serif;
font-size: 1.3rem;
font-weight: 800;
color: #fff;
margin-bottom: 10px;
text-align: center;
}
.xb-exo-info {
color: #888;
font-size: 0.9rem;
text-align: center;
margin-bottom: 20px;
padding: 10px;
background: rgba(0,0,0,0.3);
border-radius: 8px;
}
.xb-exo-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.xb-exo-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 20px;
background: rgba(0,0,0,0.4);
border: 2px solid #444;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s;
}
.xb-exo-btn:hover:not(.disabled) {
border-color: var(--gold);
background: rgba(212, 175, 55, 0.1);
}
.xb-exo-btn.active {
background: linear-gradient(135deg, rgba(46, 204, 113, 0.2), rgba(39, 174, 96, 0.1));
border-color: #27ae60;
}
.xb-exo-btn.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.xb-exo-icon {
width: 32px;
height: 32px;
}
.xb-exo-name {
flex: 1;
font-weight: 700;
font-size: 1.05rem;
}
.xb-exo-status {
color: #27ae60;
font-weight: 800;
font-size: 1.2rem;
}
/* Mobile pour exomagie */
@media (max-width: 480px) {
.xb-exo-grid {
grid-template-columns: 1fr;
}
.xb-fm-tabs {
flex-direction: column;
}
}
/* === V87.04 CORRECTIONS COMPLÈTES === */
/* RESET modal animation - centré immédiatement (seulement quand visible) */
.xb-modal-overlay,
.xb-item-modal[style*="display: flex"],
.xb-item-modal[style*="display:flex"],
#xb-modal[style*="display: flex"],
#xb-modal[style*="display:flex"],
#xb-slot-fm-modal,
#xb-tags-modal.show,
#xb-confirm-delete-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.92) !important;
z-index: 30000 !important;
justify-content: center !important;
align-items: center !important;
backdrop-filter: blur(8px) !important;
animation: none !important;
transform: none !important;
}
/* Ne PAS forcer display sur les modals cachés */
#xb-modal[style*="display: none"],
#xb-modal[style*="display:none"],
#xb-tags-modal:not(.show),
.xb-item-modal[style*="display: none"],
.xb-item-modal[style*="display:none"] {
display: none !important;
}
.xb-modal-box,
.xb-mod-box {
animation: modalFadeIn 0.2s ease-out !important;
transform: none !important;
position: relative !important;
}
@keyframes modalFadeIn {
from { opacity: 0; transform: scale(0.98); }
to { opacity: 1; transform: scale(1); }
}
/* Boutons vue liste/carte */
.xb-view-toggles {
display: flex;
gap: 5px;
margin-left: auto;
margin-right: 15px;
}
.xb-view-btn {
width: 36px;
height: 36px;
border: 2px solid #444;
background: rgba(255,255,255,0.05);
color: #888;
font-size: 1.2rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.xb-view-btn:hover {
border-color: #666;
color: #ccc;
}
.xb-view-btn.active {
background: linear-gradient(135deg, var(--gold), #c9a227);
border-color: var(--gold);
color: #000;
}
/* Grille vue cartes */
.xb-items-grid.xb-grid-cards {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 15px;
padding: 15px;
}
.xb-item-card {
display: flex;
flex-direction: column;
background: rgba(0,0,0,0.5);
border: 2px solid #333;
border-radius: 12px;
padding: 12px;
cursor: pointer;
transition: all 0.2s;
}
.xb-item-card:hover {
border-color: var(--gold);
background: rgba(212, 175, 55, 0.1);
transform: translateY(-3px);
}
.xb-card-img-wrap {
position: relative;
width: 80px;
height: 80px;
margin: 0 auto 10px;
}
.xb-card-item-img {
width: 100%;
height: 100%;
object-fit: contain;
}
.xb-card-item-lvl {
position: absolute;
top: -5px;
right: -5px;
background: linear-gradient(135deg, var(--gold), #c9a227);
color: #000;
font-size: 0.75rem;
font-weight: 800;
padding: 3px 6px;
border-radius: 10px;
}
.xb-card-item-name {
font-size: 0.95rem;
font-weight: 700;
color: #fff;
text-align: center;
margin-bottom: 8px;
line-height: 1.2;
}
.xb-card-item-stats {
font-size: 0.8rem;
}
.xb-item-stat-more {
color: #888;
font-size: 0.75rem;
font-style: italic;
}
/* Emoji pour Pods */
.xb-st-emoji {
font-size: 1.1rem;
margin-right: 8px;
}
/* Tooltip slots dans cartes builds - AGRANDI */
.xb-slot-tooltip {
position: fixed;
z-index: 50000;
background: linear-gradient(145deg, #1a1a2e, #0a0a15);
border: 2px solid var(--gold);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.8);
pointer-events: none;
max-width: 350px;
display: none;
padding: 15px;
}
.xb-slot-tooltip div {
font-size: 1rem !important;
line-height: 1.5 !important;
}
.xb-slot-tooltip div:first-child {
font-size: 1.2rem !important;
font-weight: 800 !important;
}
/* Exomagie stats normales */
.xb-exo-title-sm {
font-size: 1rem !important;
margin-top: 20px !important;
padding-top: 15px !important;
border-top: 1px solid #333;
}
.xb-exo-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
margin-top: 10px;
}
.xb-exo-stat-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: rgba(0,0,0,0.3);
border-radius: 8px;
border: 1px solid #333;
}
.xb-exo-stat-icon {
width: 24px;
height: 24px;
}
.xb-exo-stat-name {
flex: 1;
font-weight: 600;
font-size: 0.9rem;
}
.xb-exo-stat-input {
width: 60px;
padding: 6px 8px;
background: rgba(0,0,0,0.5);
border: 2px solid #444;
border-radius: 6px;
color: #fff;
font-size: 0.95rem;
text-align: center;
}
.xb-exo-stat-input:focus {
border-color: var(--gold);
outline: none;
}
/* Exomagie rare grid */
.xb-exo-rare {
grid-template-columns: repeat(2, 1fr);
}
/* Mobile responsive */
@media (max-width: 600px) {
.xb-exo-stats-grid {
grid-template-columns: 1fr;
}
.xb-exo-rare {
grid-template-columns: 1fr;
}
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.xb-card-img-wrap {
width: 60px;
height: 60px;
}
.xb-card-item-name {
font-size: 0.85rem;
}
}
/* === V87.06 AMÉLIORATIONS COMPLÈTES === */
/* ============================================
MODAL DE BIENVENUE - DESIGN PREMIUM
============================================ */
#xb-welcome-modal,
.xb-welcome-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: radial-gradient(ellipse at center, rgba(20, 20, 35, 0.98) 0%, rgba(5, 5, 15, 0.99) 100%) !important;
z-index: 50000 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
backdrop-filter: blur(20px) !important;
}
#xb-welcome-modal.hidden,
.xb-welcome-modal.hidden {
display: none !important;
}
#xb-welcome-modal .xb-welcome-content,
.xb-welcome-modal .xb-welcome-content {
background: linear-gradient(145deg, rgba(30, 30, 50, 0.95), rgba(15, 15, 25, 0.98)) !important;
border: 3px solid var(--gold) !important;
border-radius: 24px !important;
padding: 50px 60px !important;
max-width: 1200px !important;
width: 98% !important;
box-shadow:
0 0 80px rgba(212, 175, 55, 0.3),
0 25px 60px rgba(0, 0, 0, 0.8),
inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
animation: welcomeFadeIn 0.4s ease-out !important;
}
@keyframes welcomeFadeIn {
from {
opacity: 0;
transform: scale(0.9) translateY(-20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
#xb-welcome-modal .xb-welcome-title,
.xb-welcome-modal .xb-welcome-title {
font-family: 'Cinzel', serif !important;
font-size: 2.8rem !important;
font-weight: 900 !important;
background: linear-gradient(135deg, var(--gold), #fff8dc, var(--gold)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
text-align: center !important;
margin-bottom: 10px !important;
text-shadow: 0 4px 30px rgba(212, 175, 55, 0.5) !important;
letter-spacing: 2px !important;
}
#xb-welcome-modal .xb-welcome-subtitle,
.xb-welcome-modal .xb-welcome-subtitle {
font-size: 1.3rem !important;
color: #aaa !important;
text-align: center !important;
margin-bottom: 40px !important;
font-weight: 500 !important;
}
#xb-welcome-modal .xb-welcome-options,
.xb-welcome-modal .xb-welcome-options {
display: flex !important;
gap: 25px !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
#xb-welcome-modal .xb-welcome-option,
.xb-welcome-modal .xb-welcome-option {
flex: 1 !important;
min-width: 240px !important;
max-width: 280px !important;
padding: 35px 30px !important;
background: linear-gradient(145deg, rgba(40, 40, 60, 0.8), rgba(25, 25, 40, 0.9)) !important;
border: 2px solid #444 !important;
border-radius: 18px !important;
cursor: pointer !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
text-align: center !important;
position: relative !important;
overflow: hidden !important;
}
#xb-welcome-modal .xb-welcome-option::before,
.xb-welcome-modal .xb-welcome-option::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 4px !important;
background: linear-gradient(90deg, transparent, var(--gold), transparent) !important;
opacity: 0 !important;
transition: opacity 0.3s !important;
}
#xb-welcome-modal .xb-welcome-option:hover,
.xb-welcome-modal .xb-welcome-option:hover {
border-color: var(--gold) !important;
transform: translateY(-8px) !important;
box-shadow: 0 15px 40px rgba(212, 175, 55, 0.25) !important;
background: linear-gradient(145deg, rgba(50, 50, 70, 0.9), rgba(35, 35, 55, 0.95)) !important;
}
#xb-welcome-modal .xb-welcome-option:hover::before,
.xb-welcome-modal .xb-welcome-option:hover::before {
opacity: 1 !important;
}
#xb-welcome-modal .xb-welcome-icon,
.xb-welcome-modal .xb-welcome-icon {
display: block !important;
font-size: 4rem !important;
margin-bottom: 20px !important;
filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.5)) !important;
}
#xb-welcome-modal .xb-welcome-option-title,
.xb-welcome-modal .xb-welcome-option-title {
display: block !important;
font-family: 'Cinzel', serif !important;
font-size: 1.5rem !important;
font-weight: 800 !important;
color: #fff !important;
margin-bottom: 12px !important;
}
#xb-welcome-modal .xb-welcome-option-desc,
.xb-welcome-modal .xb-welcome-option-desc {
display: block !important;
font-size: 1.05rem !important;
color: #999 !important;
line-height: 1.5 !important;
}
#xb-welcome-modal .xb-welcome-char-count,
.xb-welcome-modal .xb-welcome-char-count {
display: inline-block !important;
margin-top: 15px !important;
padding: 8px 18px !important;
background: linear-gradient(135deg, var(--gold), #c9a227) !important;
color: #000 !important;
font-weight: 800 !important;
font-size: 1rem !important;
border-radius: 20px !important;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important;
}
#xb-welcome-modal .xb-welcome-footer,
.xb-welcome-modal .xb-welcome-footer {
margin-top: 40px !important;
text-align: center !important;
}
#xb-welcome-modal .xb-welcome-tip,
.xb-welcome-modal .xb-welcome-tip {
font-size: 1.1rem !important;
color: #777 !important;
font-style: italic !important;
}
/* Sélection de personnages */
#xb-welcome-modal .xb-char-select,
.xb-welcome-modal .xb-char-select {
margin-top: 20px !important;
}
#xb-welcome-modal .xb-char-select-title,
.xb-welcome-modal .xb-char-select-title {
font-family: 'Cinzel', serif !important;
font-size: 1.5rem !important;
color: var(--gold) !important;
margin-bottom: 20px !important;
}
#xb-welcome-modal .xb-char-card,
.xb-welcome-modal .xb-char-card {
display: flex !important;
align-items: center !important;
gap: 20px !important;
padding: 18px 25px !important;
background: rgba(0, 0, 0, 0.4) !important;
border: 2px solid #444 !important;
border-radius: 14px !important;
margin-bottom: 12px !important;
cursor: pointer !important;
transition: all 0.25s !important;
width: 100% !important;
}
#xb-welcome-modal .xb-char-card:hover,
.xb-welcome-modal .xb-char-card:hover {
border-color: var(--gold) !important;
background: rgba(212, 175, 55, 0.1) !important;
transform: translateX(8px) !important;
}
#xb-welcome-modal .xb-char-avatar img,
.xb-welcome-modal .xb-char-avatar img {
width: 60px !important;
height: 60px !important;
border-radius: 50% !important;
border: 3px solid var(--gold) !important;
}
#xb-welcome-modal .xb-char-name,
.xb-welcome-modal .xb-char-name {
font-size: 1.3rem !important;
font-weight: 700 !important;
color: #fff !important;
}
#xb-welcome-modal .xb-char-class,
.xb-welcome-modal .xb-char-class {
font-size: 1rem !important;
color: var(--gold) !important;
}
#xb-welcome-modal .xb-char-level-value,
.xb-welcome-modal .xb-char-level-value {
font-size: 1.8rem !important;
font-weight: 900 !important;
color: var(--gold) !important;
}
#xb-welcome-modal .xb-char-back-btn,
.xb-welcome-modal .xb-char-back-btn {
padding: 12px 25px !important;
font-size: 1.1rem !important;
background: rgba(255, 255, 255, 0.1) !important;
border: 2px solid #555 !important;
border-radius: 10px !important;
color: #ccc !important;
cursor: pointer !important;
margin-bottom: 20px !important;
}
#xb-welcome-modal .xb-char-back-btn:hover,
.xb-welcome-modal .xb-char-back-btn:hover {
border-color: var(--gold) !important;
color: var(--gold) !important;
}
/* ============================================
DOFUS - REMONTÉ ET INTÉGRÉ
============================================ */
.xb-dofus-section {
margin-top: 10px !important;
padding: 12px 15px !important;
}
.xb-dofus-row {
display: flex !important;
justify-content: center !important;
gap: 10px !important;
flex-wrap: wrap !important;
}
.xb-slot-dofus {
width: 48px !important;
height: 48px !important;
}
/* ============================================
TOOLTIPS AMÉLIORÉS - TOUTES STATS
============================================ */
.xb-slot-tooltip {
position: fixed !important;
z-index: 60000 !important;
background: linear-gradient(145deg, #1e1e32, #0d0d18) !important;
border: 2px solid var(--gold) !important;
border-radius: 14px !important;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(212, 175, 55, 0.2) !important;
pointer-events: none !important;
max-width: 380px !important;
max-height: 70vh !important;
overflow-y: auto !important;
display: none;
}
.xb-tip-content {
padding: 18px 20px !important;
}
.xb-tip-name {
font-family: 'Cinzel', serif !important;
font-size: 1.3rem !important;
font-weight: 800 !important;
color: #fff !important;
margin-bottom: 8px !important;
line-height: 1.3 !important;
}
.xb-tip-level {
font-size: 1.1rem !important;
color: var(--gold) !important;
font-weight: 700 !important;
margin-bottom: 15px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
}
.xb-tip-effects {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
.xb-tip-effect {
font-size: 1.05rem !important;
line-height: 1.4 !important;
padding: 4px 0 !important;
}
.xb-tip-pano {
margin-top: 15px !important;
padding-top: 12px !important;
border-top: 1px solid rgba(155, 89, 182, 0.3) !important;
font-size: 1.1rem !important;
color: #9b59b6 !important;
font-weight: 600 !important;
}
.xb-tip-cond {
margin-top: 12px !important;
padding: 10px !important;
background: rgba(231, 76, 60, 0.15) !important;
border-radius: 8px !important;
font-size: 0.95rem !important;
color: #e74c3c !important;
}
/* ============================================
MODAL SÉLECTION OBJETS - CENTRÉ
============================================ */
#xb-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.95) !important;
z-index: 40000 !important;
display: none;
justify-content: center !important;
align-items: center !important;
backdrop-filter: blur(10px) !important;
}
#xb-modal[style*="display: flex"],
#xb-modal[style*="display:flex"] {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
#xb-modal .xb-mod-box {
position: relative !important;
width: 95% !important;
max-width: 900px !important;
max-height: 90vh !important;
margin: 0 auto !important;
background: linear-gradient(145deg, #1a1a2e, #0a0a15) !important;
border: 2px solid var(--gold) !important;
border-radius: 20px !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
transform: none !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
}
/* ============================================
ICÔNE PODS (EMOJI FALLBACK)
============================================ */
.xb-st-emoji {
display: inline-block !important;
font-size: 1.2rem !important;
width: 24px !important;
height: 24px !important;
text-align: center !important;
margin-right: 8px !important;
vertical-align: middle !important;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 600px) {
#xb-welcome-modal .xb-welcome-content,
.xb-welcome-modal .xb-welcome-content {
padding: 30px 25px !important;
}
#xb-welcome-modal .xb-welcome-title,
.xb-welcome-modal .xb-welcome-title {
font-size: 2rem !important;
}
#xb-welcome-modal .xb-welcome-subtitle,
.xb-welcome-modal .xb-welcome-subtitle {
font-size: 1.1rem !important;
}
#xb-welcome-modal .xb-welcome-option,
.xb-welcome-modal .xb-welcome-option {
min-width: 100% !important;
padding: 25px 20px !important;
}
#xb-welcome-modal .xb-welcome-icon,
.xb-welcome-modal .xb-welcome-icon {
font-size: 3rem !important;
}
#xb-welcome-modal .xb-welcome-option-title,
.xb-welcome-modal .xb-welcome-option-title {
font-size: 1.3rem !important;
}
.xb-tip-name {
font-size: 1.1rem !important;
}
.xb-tip-effect {
font-size: 0.95rem !important;
}
}
/* Icône pods fallback avec data URI SVG */
img[src*="pods.webp"] {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M12 16 L12 52 Q12 56 16 56 L48 56 Q52 56 52 52 L52 16 Q52 12 48 12 L16 12 Q12 12 12 16 Z' fill='%23c9a227' stroke='%238B4513' stroke-width='2'/%3E%3Crect x='18' y='8' width='28' height='8' rx='2' fill='%238B7355'/%3E%3Cpath d='M20 24 L20 44 L44 44 L44 24 Z' fill='rgba(0,0,0,0.3)'/%3E%3Ccircle cx='32' cy='34' r='6' fill='%23d4af37'/%3E%3C/svg%3E");
}
/* Alternative: remplacer par emoji si image échoue */
img[src*="pods.webp"][onerror] {
display: none;
}
/* FORCE MODAL CENTRAGE - PRIORITÉ MAXIMALE */
body #xb-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
display: none;
justify-content: center !important;
align-items: center !important;
z-index: 45000 !important;
}
body #xb-modal[style*="flex"] {
display: flex !important;
}
body #xb-modal > .xb-mod-box {
position: relative !important;
margin: 0 auto !important;
transform: none !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
}
/* ================================================================
V87.07 - CORRECTIONS FINALES - PRIORITÉ MAXIMALE
================================================================ */
/* MODAL SÉLECTION OBJETS - CENTRAGE FORCÉ */
html body div#xb-modal.xb-item-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
background: rgba(0, 0, 0, 0.95) !important;
backdrop-filter: blur(10px) !important;
z-index: 99999 !important;
display: none;
justify-content: center !important;
align-items: center !important;
overflow: hidden !important;
}
html body div#xb-modal.xb-item-modal[style*="flex"] {
display: flex !important;
}
html body div#xb-modal.xb-item-modal > .xb-mod-box {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
width: 95vw !important;
max-width: 1200px !important;
height: 90vh !important;
max-height: 90vh !important;
background: linear-gradient(145deg, #1a1a2e, #0a0a15) !important;
border: 3px solid var(--gold) !important;
border-radius: 20px !important;
box-shadow: 0 0 100px rgba(0,0,0,0.9), 0 0 50px rgba(212,175,55,0.2) !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
animation: modalPopIn 0.25s ease-out !important;
}
@keyframes modalPopIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
/* MODAL DE BIENVENUE - DESIGN PREMIUM AMÉLIORÉ */
html body div#xb-welcome-modal.xb-welcome-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: radial-gradient(ellipse at center, rgba(25, 25, 45, 0.98) 0%, rgba(5, 5, 15, 0.99) 100%) !important;
z-index: 999999 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
backdrop-filter: blur(25px) !important;
}
html body div#xb-welcome-modal.xb-welcome-modal.hidden {
display: none !important;
}
html body div#xb-welcome-modal .xb-welcome-content {
background: linear-gradient(145deg, rgba(35, 35, 60, 0.95), rgba(15, 15, 30, 0.98)) !important;
border: 3px solid var(--gold) !important;
border-radius: 30px !important;
padding: 60px 70px !important;
max-width: 1200px !important;
width: 98% !important;
box-shadow:
0 0 120px rgba(212, 175, 55, 0.35),
0 30px 80px rgba(0, 0, 0, 0.85),
inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
animation: welcomeBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes welcomeBounceIn {
0% { opacity: 0; transform: scale(0.8) translateY(-30px); }
60% { transform: scale(1.02) translateY(5px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
html body div#xb-welcome-modal .xb-welcome-title {
font-family: 'Cinzel', serif !important;
font-size: 3.2rem !important;
font-weight: 900 !important;
background: linear-gradient(135deg, #ffd700, #fff8dc, #ffd700, #daa520) !important;
background-size: 200% auto !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
text-align: center !important;
margin-bottom: 15px !important;
letter-spacing: 3px !important;
animation: shimmer 3s linear infinite !important;
}
@keyframes shimmer {
to { background-position: 200% center; }
}
html body div#xb-welcome-modal .xb-welcome-subtitle {
font-size: 1.5rem !important;
color: #bbb !important;
text-align: center !important;
margin-bottom: 50px !important;
font-weight: 500 !important;
letter-spacing: 1px !important;
}
html body div#xb-welcome-modal .xb-welcome-options {
display: flex !important;
gap: 30px !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
html body div#xb-welcome-modal .xb-welcome-option {
flex: 1 !important;
min-width: 260px !important;
max-width: 300px !important;
padding: 40px 35px !important;
background: linear-gradient(145deg, rgba(50, 50, 75, 0.8), rgba(30, 30, 50, 0.9)) !important;
border: 2px solid #555 !important;
border-radius: 22px !important;
cursor: pointer !important;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
text-align: center !important;
position: relative !important;
overflow: hidden !important;
}
html body div#xb-welcome-modal .xb-welcome-option::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 5px !important;
background: linear-gradient(90deg, transparent, var(--gold), transparent) !important;
opacity: 0 !important;
transition: opacity 0.35s !important;
}
html body div#xb-welcome-modal .xb-welcome-option:hover {
border-color: var(--gold) !important;
transform: translateY(-12px) scale(1.02) !important;
box-shadow: 0 20px 50px rgba(212, 175, 55, 0.3), 0 0 30px rgba(212, 175, 55, 0.15) !important;
background: linear-gradient(145deg, rgba(60, 60, 85, 0.9), rgba(40, 40, 65, 0.95)) !important;
}
html body div#xb-welcome-modal .xb-welcome-option:hover::before {
opacity: 1 !important;
}
html body div#xb-welcome-modal .xb-welcome-icon {
display: block !important;
font-size: 5rem !important;
margin-bottom: 25px !important;
filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6)) !important;
}
html body div#xb-welcome-modal .xb-welcome-option-title {
display: block !important;
font-family: 'Cinzel', serif !important;
font-size: 1.7rem !important;
font-weight: 800 !important;
color: #fff !important;
margin-bottom: 15px !important;
letter-spacing: 1px !important;
}
html body div#xb-welcome-modal .xb-welcome-option-desc {
display: block !important;
font-size: 1.15rem !important;
color: #aaa !important;
line-height: 1.6 !important;
}
html body div#xb-welcome-modal .xb-welcome-char-count {
display: inline-block !important;
margin-top: 20px !important;
padding: 10px 22px !important;
background: linear-gradient(135deg, var(--gold), #c9a227) !important;
color: #000 !important;
font-weight: 900 !important;
font-size: 1.1rem !important;
border-radius: 25px !important;
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5) !important;
}
html body div#xb-welcome-modal .xb-welcome-footer {
margin-top: 50px !important;
text-align: center !important;
}
html body div#xb-welcome-modal .xb-welcome-tip {
font-size: 1.2rem !important;
color: #888 !important;
font-style: italic !important;
}
/* DOFUS - REMONTÉ ET COMPACT */
.xb-dofus-section {
margin-top: 8px !important;
padding: 10px 12px !important;
background: rgba(155, 89, 182, 0.1) !important;
border-radius: 10px !important;
border: 1px solid rgba(155, 89, 182, 0.25) !important;
}
.xb-dofus-label {
font-size: 0.85rem !important;
color: var(--gold) !important;
font-weight: 800 !important;
margin-bottom: 8px !important;
text-align: center !important;
letter-spacing: 2px !important;
}
.xb-dofus-row {
display: flex !important;
justify-content: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.xb-slot-dofus {
width: 44px !important;
height: 44px !important;
}
/* TOOLTIPS - TOUTES LES STATS, TEXTES AGRANDIS */
.xb-slot-tooltip {
position: fixed !important;
z-index: 9999999 !important;
background: linear-gradient(145deg, #1e1e35, #0d0d1a) !important;
border: 3px solid var(--gold) !important;
border-radius: 16px !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 40px rgba(212, 175, 55, 0.25) !important;
pointer-events: none !important;
max-width: 420px !important;
min-width: 280px !important;
max-height: 75vh !important;
overflow-y: auto !important;
display: none;
}
.xb-tip-content {
padding: 20px 24px !important;
}
.xb-tip-name {
font-family: 'Cinzel', serif !important;
font-size: 1.5rem !important;
font-weight: 900 !important;
color: #fff !important;
margin-bottom: 10px !important;
line-height: 1.3 !important;
text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}
.xb-tip-level {
font-size: 1.25rem !important;
color: var(--gold) !important;
font-weight: 800 !important;
margin-bottom: 18px !important;
padding-bottom: 15px !important;
border-bottom: 2px solid rgba(212, 175, 55, 0.4) !important;
}
.xb-tip-effects {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.xb-tip-effect {
font-size: 1.15rem !important;
line-height: 1.45 !important;
padding: 5px 0 !important;
font-weight: 600 !important;
}
.xb-tip-pano {
margin-top: 18px !important;
padding-top: 15px !important;
border-top: 2px solid rgba(155, 89, 182, 0.4) !important;
font-size: 1.2rem !important;
color: #9b59b6 !important;
font-weight: 700 !important;
}
.xb-tip-cond {
margin-top: 15px !important;
padding: 12px 15px !important;
background: rgba(231, 76, 60, 0.2) !important;
border: 1px solid rgba(231, 76, 60, 0.4) !important;
border-radius: 10px !important;
font-size: 1.05rem !important;
color: #e74c3c !important;
font-weight: 600 !important;
}
/* PODS - EMOJI STYLE */
.xb-st-emoji {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.3rem !important;
width: 26px !important;
height: 26px !important;
margin-right: 10px !important;
vertical-align: middle !important;
}
/* RESPONSIVE MODAL BIENVENUE */
@media (max-width: 700px) {
html body div#xb-welcome-modal .xb-welcome-content {
padding: 40px 30px !important;
}
html body div#xb-welcome-modal .xb-welcome-title {
font-size: 2.2rem !important;
}
html body div#xb-welcome-modal .xb-welcome-subtitle {
font-size: 1.2rem !important;
margin-bottom: 35px !important;
}
html body div#xb-welcome-modal .xb-welcome-option {
min-width: 100% !important;
padding: 30px 25px !important;
}
html body div#xb-welcome-modal .xb-welcome-icon {
font-size: 3.5rem !important;
}
html body div#xb-welcome-modal .xb-welcome-option-title {
font-size: 1.4rem !important;
}
html body div#xb-welcome-modal .xb-welcome-option-desc {
font-size: 1rem !important;
}
}
@media (max-width: 500px) {
html body div#xb-modal.xb-item-modal > .xb-mod-box {
width: 100vw !important;
height: 100vh !important;
max-height: 100vh !important;
border-radius: 0 !important;
}
}
/* ================================================================
V87.08 - CORRECTIONS FINALES
================================================================ */
/* ============================================
CARTES OBJETS - NOUVEAU DESIGN COMPACT
============================================ */
.xb-items-grid.xb-grid-cards {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
gap: 12px !important;
padding: 15px !important;
align-content: start !important;
}
.xb-crd {
background: linear-gradient(145deg, #1a1a2a, #0f0f18) !important;
border: 2px solid #333 !important;
border-radius: 14px !important;
padding: 12px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
min-height: 200px !important;
}
.xb-crd:hover {
border-color: var(--gold) !important;
background: linear-gradient(145deg, #252535, #1a1a28) !important;
transform: translateY(-4px) !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(212,175,55,0.15) !important;
}
.xb-crd-top {
position: relative !important;
width: 70px !important;
height: 70px !important;
margin-bottom: 10px !important;
}
.xb-crd-img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6)) !important;
}
.xb-crd-lvl {
position: absolute !important;
top: -6px !important;
right: -8px !important;
background: linear-gradient(135deg, var(--gold), #c9a227) !important;
color: #000 !important;
font-size: 0.7rem !important;
font-weight: 900 !important;
padding: 3px 7px !important;
border-radius: 10px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}
.xb-crd-name {
font-family: 'Cinzel', serif !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
color: #fff !important;
line-height: 1.25 !important;
margin-bottom: 6px !important;
max-height: 2.5em !important;
overflow: hidden !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
}
.xb-crd-pano {
font-size: 0.7rem !important;
color: #9b59b6 !important;
font-weight: 600 !important;
margin-bottom: 6px !important;
padding: 2px 8px !important;
background: rgba(155, 89, 182, 0.15) !important;
border-radius: 8px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
.xb-crd-stats {
font-size: 0.75rem !important;
line-height: 1.4 !important;
width: 100% !important;
}
.xb-crd-stat {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 1px 0 !important;
}
/* ============================================
MODAL BIENVENUE - PREMIUM REDESIGN
============================================ */
html body #xb-welcome-modal {
position: fixed !important;
inset: 0 !important;
background: radial-gradient(ellipse at 50% 30%, rgba(40, 35, 60, 0.98) 0%, rgba(10, 8, 20, 0.99) 70%) !important;
z-index: 999999 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
backdrop-filter: blur(30px) !important;
}
html body #xb-welcome-modal.hidden {
display: none !important;
}
html body #xb-welcome-modal .xb-welcome-content {
background: linear-gradient(160deg, rgba(45, 40, 70, 0.95) 0%, rgba(20, 18, 35, 0.98) 100%) !important;
border: 4px solid transparent !important;
border-image: linear-gradient(135deg, #ffd700, #b8860b, #ffd700) 1 !important;
border-radius: 28px !important;
padding: 55px 65px !important;
max-width: 1200px !important;
width: 98% !important;
box-shadow:
0 0 0 1px rgba(255,215,0,0.3),
0 0 100px rgba(212, 175, 55, 0.4),
0 40px 100px rgba(0, 0, 0, 0.9),
inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
animation: welcomeAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
position: relative !important;
overflow: hidden !important;
}
html body #xb-welcome-modal .xb-welcome-content::before {
content: '' !important;
position: absolute !important;
top: -50% !important;
left: -50% !important;
width: 200% !important;
height: 200% !important;
background: radial-gradient(circle, rgba(255,215,0,0.03) 0%, transparent 50%) !important;
animation: rotateGlow 20s linear infinite !important;
pointer-events: none !important;
}
@keyframes rotateGlow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes welcomeAppear {
0% { opacity: 0; transform: scale(0.85) translateY(-40px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
html body #xb-welcome-modal .xb-welcome-title {
font-family: 'Cinzel', serif !important;
font-size: 3.5rem !important;
font-weight: 900 !important;
background: linear-gradient(135deg, #ffd700 0%, #fff8dc 25%, #ffd700 50%, #daa520 75%, #ffd700 100%) !important;
background-size: 300% auto !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
text-align: center !important;
margin-bottom: 12px !important;
letter-spacing: 4px !important;
text-shadow: 0 0 60px rgba(255,215,0,0.5) !important;
animation: goldShimmer 4s ease-in-out infinite !important;
position: relative !important;
z-index: 1 !important;
}
@keyframes goldShimmer {
0%, 100% { background-position: 0% center; }
50% { background-position: 100% center; }
}
html body #xb-welcome-modal .xb-welcome-subtitle {
font-size: 1.6rem !important;
color: #c0b8d0 !important;
text-align: center !important;
margin-bottom: 45px !important;
font-weight: 400 !important;
letter-spacing: 2px !important;
position: relative !important;
z-index: 1 !important;
}
html body #xb-welcome-modal .xb-welcome-options {
display: flex !important;
gap: 25px !important;
justify-content: center !important;
flex-wrap: wrap !important;
position: relative !important;
z-index: 1 !important;
}
html body #xb-welcome-modal .xb-welcome-option {
flex: 1 !important;
min-width: 280px !important;
max-width: 320px !important;
padding: 40px 30px !important;
background: linear-gradient(160deg, rgba(60, 55, 90, 0.7) 0%, rgba(35, 30, 55, 0.85) 100%) !important;
border: 2px solid rgba(255,215,0,0.2) !important;
border-radius: 20px !important;
cursor: pointer !important;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
text-align: center !important;
position: relative !important;
overflow: hidden !important;
}
html body #xb-welcome-modal .xb-welcome-option::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(135deg, transparent 0%, rgba(255,215,0,0.05) 50%, transparent 100%) !important;
opacity: 0 !important;
transition: opacity 0.35s !important;
}
html body #xb-welcome-modal .xb-welcome-option::after {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 4px !important;
background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%) !important;
opacity: 0 !important;
transition: opacity 0.35s !important;
}
html body #xb-welcome-modal .xb-welcome-option:hover {
border-color: var(--gold) !important;
transform: translateY(-10px) scale(1.02) !important;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.6),
0 0 40px rgba(212, 175, 55, 0.25) !important;
background: linear-gradient(160deg, rgba(75, 70, 110, 0.8) 0%, rgba(45, 40, 70, 0.9) 100%) !important;
}
html body #xb-welcome-modal .xb-welcome-option:hover::before,
html body #xb-welcome-modal .xb-welcome-option:hover::after {
opacity: 1 !important;
}
html body #xb-welcome-modal .xb-welcome-icon {
display: block !important;
font-size: 5.5rem !important;
margin-bottom: 20px !important;
filter: drop-shadow(0 8px 25px rgba(0, 0, 0, 0.7)) !important;
transition: transform 0.35s !important;
}
html body #xb-welcome-modal .xb-welcome-option:hover .xb-welcome-icon {
transform: scale(1.15) !important;
}
html body #xb-welcome-modal .xb-welcome-option-title {
display: block !important;
font-family: 'Cinzel', serif !important;
font-size: 1.9rem !important;
font-weight: 800 !important;
color: #fff !important;
margin-bottom: 12px !important;
letter-spacing: 1px !important;
text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}
html body #xb-welcome-modal .xb-welcome-option-desc {
display: block !important;
font-size: 1.2rem !important;
color: #a0a0b0 !important;
line-height: 1.6 !important;
}
html body #xb-welcome-modal .xb-welcome-char-count {
display: inline-block !important;
margin-top: 18px !important;
padding: 10px 24px !important;
background: linear-gradient(135deg, #ffd700, #daa520) !important;
color: #1a1520 !important;
font-weight: 900 !important;
font-size: 1.15rem !important;
border-radius: 25px !important;
box-shadow: 0 6px 25px rgba(212, 175, 55, 0.5), inset 0 1px 0 rgba(255,255,255,0.3) !important;
letter-spacing: 0.5px !important;
}
html body #xb-welcome-modal .xb-welcome-footer {
margin-top: 45px !important;
text-align: center !important;
position: relative !important;
z-index: 1 !important;
}
html body #xb-welcome-modal .xb-welcome-tip {
font-size: 1.25rem !important;
color: #7a7590 !important;
font-style: italic !important;
}
/* ============================================
DOFUS SECTION - REMONTÉ
============================================ */
.xb-dofus-section {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 8px 10px !important;
background: linear-gradient(135deg, rgba(155, 89, 182, 0.12), rgba(142, 68, 173, 0.08)) !important;
border-radius: 10px !important;
border: 1px solid rgba(155, 89, 182, 0.25) !important;
}
.xb-char-zone {
margin-bottom: 5px !important;
}
.xb-dofus-label {
font-size: 0.75rem !important;
color: var(--gold) !important;
font-weight: 800 !important;
margin-bottom: 6px !important;
text-align: center !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
}
.xb-dofus-row {
display: flex !important;
justify-content: center !important;
gap: 6px !important;
flex-wrap: wrap !important;
}
.xb-slot-dofus {
width: 40px !important;
height: 40px !important;
}
/* ============================================
MODAL OBJETS - APPARITION RAPIDE
============================================ */
html body #xb-modal {
position: fixed !important;
inset: 0 !important;
background: rgba(0, 0, 0, 0.95) !important;
z-index: 99999 !important;
display: none;
justify-content: center !important;
align-items: center !important;
backdrop-filter: blur(8px) !important;
}
html body #xb-modal[style*="flex"] {
display: flex !important;
}
html body #xb-modal > .xb-mod-box {
position: relative !important;
width: 95vw !important;
max-width: 1100px !important;
height: 88vh !important;
max-height: 88vh !important;
margin: 0 !important;
background: linear-gradient(150deg, #1a1a2e 0%, #0a0a15 100%) !important;
border: 3px solid var(--gold) !important;
border-radius: 20px !important;
box-shadow: 0 0 80px rgba(0,0,0,0.9), 0 0 40px rgba(212,175,55,0.15) !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
animation: modalFastIn 0.15s ease-out !important;
}
@keyframes modalFastIn {
from { opacity: 0; transform: scale(0.97); }
to { opacity: 1; transform: scale(1); }
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 700px) {
html body #xb-welcome-modal .xb-welcome-content {
padding: 35px 25px !important;
}
html body #xb-welcome-modal .xb-welcome-title {
font-size: 2.2rem !important;
letter-spacing: 2px !important;
}
html body #xb-welcome-modal .xb-welcome-subtitle {
font-size: 1.2rem !important;
margin-bottom: 30px !important;
}
html body #xb-welcome-modal .xb-welcome-option {
min-width: 100% !important;
padding: 30px 25px !important;
}
html body #xb-welcome-modal .xb-welcome-icon {
font-size: 4rem !important;
}
html body #xb-welcome-modal .xb-welcome-option-title {
font-size: 1.5rem !important;
}
html body #xb-welcome-modal .xb-welcome-option-desc {
font-size: 1rem !important;
}
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
gap: 8px !important;
}
.xb-crd {
min-height: 170px !important;
padding: 10px !important;
}
.xb-crd-top {
width: 55px !important;
height: 55px !important;
}
.xb-crd-name {
font-size: 0.75rem !important;
}
}
@media (max-width: 500px) {
html body #xb-modal > .xb-mod-box {
width: 100vw !important;
height: 100vh !important;
max-height: 100vh !important;
border-radius: 0 !important;
}
}
/* ================================================================
V87.09 - CORRECTIONS CRITIQUES
================================================================ */
/* ============================================
MODAL BIENVENUE - DESIGN ÉPIQUE
============================================ */
html body #xb-welcome-modal.xb-welcome-modal {
position: fixed !important;
inset: 0 !important;
background: linear-gradient(180deg,
rgba(15, 10, 30, 0.99) 0%,
rgba(5, 5, 15, 0.99) 100%) !important;
z-index: 999999 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
html body #xb-welcome-modal.xb-welcome-modal.hidden {
display: none !important;
}
html body #xb-welcome-modal .xb-welcome-content {
background: linear-gradient(145deg,
rgba(50, 40, 80, 0.95) 0%,
rgba(25, 20, 45, 0.98) 100%) !important;
border: 4px solid #ffd700 !important;
border-radius: 30px !important;
padding: 60px 70px !important;
max-width: 800px !important;
width: 95% !important;
box-shadow:
0 0 100px rgba(255, 215, 0, 0.4),
0 0 200px rgba(255, 215, 0, 0.2),
inset 0 0 100px rgba(255, 215, 0, 0.05) !important;
position: relative !important;
}
/* Étoiles décoratives */
html body #xb-welcome-modal .xb-welcome-content::before {
content: '✦ ✦ ✦' !important;
position: absolute !important;
top: 20px !important;
left: 50% !important;
transform: translateX(-50%) !important;
font-size: 1.5rem !important;
color: #ffd700 !important;
letter-spacing: 20px !important;
opacity: 0.7 !important;
}
html body #xb-welcome-modal .xb-welcome-title {
font-family: 'Cinzel', serif !important;
font-size: 4rem !important;
font-weight: 900 !important;
color: #ffd700 !important;
text-align: center !important;
margin-bottom: 15px !important;
margin-top: 20px !important;
text-shadow:
0 0 20px rgba(255, 215, 0, 0.8),
0 0 40px rgba(255, 215, 0, 0.5),
0 4px 0 #b8860b !important;
letter-spacing: 5px !important;
}
html body #xb-welcome-modal .xb-welcome-subtitle {
font-size: 1.8rem !important;
color: #e0d0ff !important;
text-align: center !important;
margin-bottom: 50px !important;
font-weight: 500 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
}
html body #xb-welcome-modal .xb-welcome-options {
display: flex !important;
gap: 30px !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
html body #xb-welcome-modal .xb-welcome-option {
flex: 1 !important;
min-width: 300px !important;
max-width: 350px !important;
padding: 45px 35px !important;
background: linear-gradient(145deg,
rgba(80, 60, 120, 0.6) 0%,
rgba(40, 30, 70, 0.8) 100%) !important;
border: 3px solid rgba(255, 215, 0, 0.3) !important;
border-radius: 25px !important;
cursor: pointer !important;
text-align: center !important;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
}
html body #xb-welcome-modal .xb-welcome-option:hover {
border-color: #ffd700 !important;
box-shadow:
0 0 40px rgba(255, 215, 0, 0.4),
inset 0 0 30px rgba(255, 215, 0, 0.1) !important;
transform: translateY(-5px) scale(1.02) !important;
}
html body #xb-welcome-modal .xb-welcome-icon {
display: block !important;
font-size: 6rem !important;
margin-bottom: 25px !important;
}
html body #xb-welcome-modal .xb-welcome-option-title {
display: block !important;
font-family: 'Cinzel', serif !important;
font-size: 2.2rem !important;
font-weight: 800 !important;
color: #ffd700 !important;
margin-bottom: 15px !important;
text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}
html body #xb-welcome-modal .xb-welcome-option-desc {
display: block !important;
font-size: 1.3rem !important;
color: #c0b0d0 !important;
line-height: 1.6 !important;
}
html body #xb-welcome-modal .xb-welcome-char-count {
display: inline-block !important;
margin-top: 20px !important;
padding: 12px 28px !important;
background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%) !important;
color: #1a1020 !important;
font-weight: 900 !important;
font-size: 1.3rem !important;
border-radius: 30px !important;
box-shadow: 0 5px 25px rgba(255, 140, 0, 0.5) !important;
}
html body #xb-welcome-modal .xb-welcome-footer {
margin-top: 50px !important;
text-align: center !important;
}
html body #xb-welcome-modal .xb-welcome-tip {
font-size: 1.4rem !important;
color: #8070a0 !important;
}
/* ============================================
MODAL OBJETS - SANS LAG
============================================ */
html body #xb-modal {
position: fixed !important;
inset: 0 !important;
background: rgba(0, 0, 0, 0.95) !important;
z-index: 99999 !important;
display: none;
justify-content: center !important;
align-items: center !important;
}
html body #xb-modal[style*="flex"] {
display: flex !important;
}
html body #xb-modal > .xb-mod-box {
position: relative !important;
width: 95vw !important;
max-width: 1200px !important;
height: 90vh !important;
background: #0f0f18 !important;
border: 3px solid #ffd700 !important;
border-radius: 20px !important;
box-shadow: 0 0 60px rgba(0,0,0,0.9) !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
/* CARTES OBJETS - SIMPLE ET RAPIDE */
.xb-items-grid.xb-grid-cards {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
gap: 15px !important;
padding: 20px !important;
overflow-y: auto !important;
}
.xb-crd {
background: #1a1a28 !important;
border: 2px solid #333 !important;
border-radius: 15px !important;
padding: 15px !important;
cursor: pointer !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
.xb-crd:hover {
border-color: #ffd700 !important;
background: #252538 !important;
}
.xb-crd-top {
position: relative !important;
width: 80px !important;
height: 80px !important;
margin-bottom: 12px !important;
}
.xb-crd-img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
.xb-crd-lvl {
position: absolute !important;
top: -8px !important;
right: -10px !important;
background: #ffd700 !important;
color: #000 !important;
font-size: 0.85rem !important;
font-weight: 900 !important;
padding: 4px 10px !important;
border-radius: 12px !important;
}
.xb-crd-name {
font-family: 'Cinzel', serif !important;
font-size: 1rem !important;
font-weight: 700 !important;
color: #fff !important;
line-height: 1.3 !important;
margin-bottom: 8px !important;
}
.xb-crd-pano {
font-size: 0.85rem !important;
color: #9b59b6 !important;
font-weight: 600 !important;
margin-bottom: 8px !important;
}
.xb-crd-stats {
width: 100% !important;
}
.xb-crd-stat {
font-size: 0.9rem !important;
padding: 2px 0 !important;
font-weight: 600 !important;
}
/* DOFUS - COMPACT */
.xb-dofus-section {
margin: 5px 0 !important;
padding: 10px !important;
background: rgba(155, 89, 182, 0.1) !important;
border-radius: 12px !important;
}
.xb-dofus-label {
font-size: 0.8rem !important;
color: #ffd700 !important;
font-weight: 800 !important;
text-align: center !important;
margin-bottom: 8px !important;
letter-spacing: 2px !important;
}
.xb-dofus-row {
display: flex !important;
justify-content: center !important;
gap: 8px !important;
}
.xb-slot-dofus {
width: 42px !important;
height: 42px !important;
}
/* RESPONSIVE */
@media (max-width: 700px) {
html body #xb-welcome-modal .xb-welcome-content {
padding: 40px 25px !important;
}
html body #xb-welcome-modal .xb-welcome-title {
font-size: 2.5rem !important;
}
html body #xb-welcome-modal .xb-welcome-subtitle {
font-size: 1.3rem !important;
margin-bottom: 30px !important;
}
html body #xb-welcome-modal .xb-welcome-option {
min-width: 100% !important;
padding: 30px 25px !important;
}
html body #xb-welcome-modal .xb-welcome-icon {
font-size: 4rem !important;
}
html body #xb-welcome-modal .xb-welcome-option-title {
font-size: 1.6rem !important;
}
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
padding: 10px !important;
}
.xb-crd-name {
font-size: 0.85rem !important;
}
}
/* ================================================================
V87.10 - MODAL BIENVENUE ÉPIQUE + PERFORMANCE
================================================================ */
/* MODAL BIENVENUE - DESIGN ÉPIQUE */
#xb-welcome-modal {
position: fixed !important;
inset: 0 !important;
background: linear-gradient(135deg, #0a0515 0%, #1a0a2e 50%, #0f0520 100%) !important;
z-index: 999999 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
#xb-welcome-modal.hidden {
display: none !important;
}
#xb-welcome-modal .xb-welcome-content {
background: linear-gradient(145deg, rgba(60, 40, 100, 0.9), rgba(30, 20, 60, 0.95)) !important;
border: 5px solid #ffd700 !important;
border-radius: 30px !important;
padding: 50px 60px !important;
max-width: 850px !important;
width: 95% !important;
box-shadow:
0 0 80px rgba(255, 215, 0, 0.5),
0 0 150px rgba(255, 215, 0, 0.3),
inset 0 0 60px rgba(255, 215, 0, 0.1) !important;
text-align: center !important;
}
#xb-welcome-modal .xb-welcome-stars {
font-size: 2rem !important;
color: #ffd700 !important;
letter-spacing: 30px !important;
margin-bottom: 10px !important;
text-shadow: 0 0 20px #ffd700 !important;
}
#xb-welcome-modal .xb-welcome-icon-main {
font-size: 5rem !important;
display: block !important;
margin-bottom: 10px !important;
filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.8)) !important;
}
#xb-welcome-modal .xb-welcome-title {
font-family: 'Cinzel', serif !important;
font-size: 3.5rem !important;
font-weight: 900 !important;
color: #ffd700 !important;
text-shadow:
0 0 30px rgba(255, 215, 0, 0.9),
0 0 60px rgba(255, 215, 0, 0.6),
0 4px 0 #b8860b !important;
margin-bottom: 15px !important;
letter-spacing: 4px !important;
}
#xb-welcome-modal .xb-welcome-subtitle {
font-size: 1.8rem !important;
color: #e8d4ff !important;
margin-bottom: 40px !important;
font-weight: 600 !important;
letter-spacing: 3px !important;
}
#xb-welcome-modal .xb-welcome-options {
display: flex !important;
gap: 30px !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
#xb-welcome-modal .xb-welcome-option {
flex: 1 !important;
min-width: 320px !important;
max-width: 380px !important;
padding: 40px 30px !important;
background: linear-gradient(145deg, rgba(100, 70, 150, 0.5), rgba(50, 30, 90, 0.7)) !important;
border: 3px solid rgba(255, 215, 0, 0.4) !important;
border-radius: 25px !important;
cursor: pointer !important;
text-align: center !important;
position: relative !important;
overflow: hidden !important;
}
#xb-welcome-modal .xb-welcome-option:hover {
border-color: #ffd700 !important;
background: linear-gradient(145deg, rgba(120, 90, 170, 0.6), rgba(70, 50, 120, 0.8)) !important;
box-shadow: 0 0 50px rgba(255, 215, 0, 0.4) !important;
}
#xb-welcome-modal .xb-welcome-option-glow {
display: none !important;
}
#xb-welcome-modal .xb-welcome-icon {
display: block !important;
font-size: 5rem !important;
margin-bottom: 20px !important;
}
#xb-welcome-modal .xb-welcome-option-title {
display: block !important;
font-family: 'Cinzel', serif !important;
font-size: 2rem !important;
font-weight: 800 !important;
color: #ffd700 !important;
margin-bottom: 15px !important;
text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}
#xb-welcome-modal .xb-welcome-option-desc {
display: block !important;
font-size: 1.2rem !important;
color: #d0c0e8 !important;
line-height: 1.5 !important;
margin-bottom: 15px !important;
}
#xb-welcome-modal .xb-welcome-option-badge {
display: inline-block !important;
padding: 8px 20px !important;
background: linear-gradient(135deg, #9b59b6, #8e44ad) !important;
color: #fff !important;
font-size: 1rem !important;
font-weight: 700 !important;
border-radius: 20px !important;
margin-top: 10px !important;
}
#xb-welcome-modal .xb-welcome-char-count {
display: inline-block !important;
padding: 10px 25px !important;
background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
color: #1a0a20 !important;
font-size: 1.2rem !important;
font-weight: 900 !important;
border-radius: 25px !important;
margin-top: 10px !important;
box-shadow: 0 4px 20px rgba(255, 140, 0, 0.5) !important;
}
#xb-welcome-modal .xb-welcome-footer {
margin-top: 40px !important;
}
#xb-welcome-modal .xb-welcome-tip {
font-size: 1.3rem !important;
color: #9080b0 !important;
}
/* CARTES OBJETS - OPTIMISÉES SANS LAG */
.xb-items-grid.xb-grid-cards {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
gap: 15px !important;
padding: 20px !important;
overflow-y: auto !important;
}
.xb-crd {
background: #1a1a2a !important;
border: 2px solid #444 !important;
border-radius: 15px !important;
padding: 15px !important;
cursor: pointer !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
will-change: border-color !important;
}
.xb-crd:hover {
border-color: #ffd700 !important;
}
.xb-crd-top {
position: relative !important;
width: 80px !important;
height: 80px !important;
margin-bottom: 12px !important;
}
.xb-crd-img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
.xb-crd-lvl {
position: absolute !important;
top: -8px !important;
right: -12px !important;
background: #ffd700 !important;
color: #000 !important;
font-size: 0.9rem !important;
font-weight: 900 !important;
padding: 5px 12px !important;
border-radius: 12px !important;
}
.xb-crd-name {
font-family: 'Cinzel', serif !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
color: #fff !important;
line-height: 1.3 !important;
margin-bottom: 8px !important;
}
.xb-crd-pano {
font-size: 0.95rem !important;
color: #9b59b6 !important;
font-weight: 700 !important;
margin-bottom: 10px !important;
}
.xb-crd-stats {
width: 100% !important;
}
.xb-crd-stat {
font-size: 1rem !important;
padding: 3px 0 !important;
font-weight: 600 !important;
}
/* BOUTON + PANOPLIE */
.xb-btn-set {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
color: #000 !important;
font-size: 1.5rem !important;
font-weight: 900 !important;
border: none !important;
border-radius: 50% !important;
cursor: pointer !important;
margin-left: 10px !important;
box-shadow: 0 3px 10px rgba(255, 140, 0, 0.5) !important;
}
.xb-btn-set:hover {
background: linear-gradient(135deg, #ffed4a, #ffd700) !important;
transform: scale(1.1) !important;
}
/* PODS - EMOJI SAC */
.xb-st-emoji {
display: inline-block !important;
font-size: 1.3rem !important;
margin-right: 8px !important;
vertical-align: middle !important;
}
/* RESPONSIVE */
@media (max-width: 800px) {
#xb-welcome-modal .xb-welcome-content {
padding: 35px 25px !important;
}
#xb-welcome-modal .xb-welcome-title {
font-size: 2.2rem !important;
}
#xb-welcome-modal .xb-welcome-subtitle {
font-size: 1.3rem !important;
margin-bottom: 30px !important;
}
#xb-welcome-modal .xb-welcome-option {
min-width: 100% !important;
padding: 30px 25px !important;
}
#xb-welcome-modal .xb-welcome-icon {
font-size: 4rem !important;
}
#xb-welcome-modal .xb-welcome-option-title {
font-size: 1.6rem !important;
}
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
}
/* ================================================================
V87.11 - REFONTE COMPLÈTE
================================================================ */
/* ============================================
MODAL BIENVENUE - DESIGN PROFESSIONNEL
============================================ */
#xb-welcome-modal {
position: fixed !important;
inset: 0 !important;
background: linear-gradient(180deg, #0d0a1a 0%, #1a1428 50%, #0d0a1a 100%) !important;
z-index: 999999 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
#xb-welcome-modal.hidden {
display: none !important;
}
#xb-welcome-modal .xb-welcome-content {
background: linear-gradient(160deg, #201830 0%, #12101e 100%) !important;
border: 3px solid #d4af37 !important;
border-radius: 24px !important;
padding: 50px 60px !important;
max-width: 900px !important;
width: 95% !important;
box-shadow:
0 0 60px rgba(212, 175, 55, 0.3),
0 30px 80px rgba(0, 0, 0, 0.8) !important;
}
#xb-welcome-modal .xb-welcome-header {
text-align: center !important;
margin-bottom: 40px !important;
}
#xb-welcome-modal .xb-welcome-icon-big {
font-size: 5rem !important;
display: block !important;
margin-bottom: 15px !important;
}
#xb-welcome-modal .xb-welcome-title {
font-family: 'Cinzel', serif !important;
font-size: 3.5rem !important;
font-weight: 900 !important;
color: #d4af37 !important;
margin: 0 0 10px 0 !important;
letter-spacing: 8px !important;
text-shadow: 0 4px 20px rgba(212, 175, 55, 0.5) !important;
}
#xb-welcome-modal .xb-welcome-subtitle {
font-size: 1.5rem !important;
color: #a090c0 !important;
margin: 0 !important;
font-weight: 400 !important;
}
#xb-welcome-modal .xb-welcome-options {
display: flex !important;
gap: 30px !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
#xb-welcome-modal .xb-welcome-option {
flex: 1 !important;
min-width: 340px !important;
max-width: 400px !important;
padding: 40px !important;
background: linear-gradient(145deg, rgba(50, 40, 80, 0.6), rgba(30, 25, 50, 0.8)) !important;
border: 2px solid rgba(212, 175, 55, 0.25) !important;
border-radius: 20px !important;
cursor: pointer !important;
text-align: center !important;
transition: all 0.25s ease !important;
}
#xb-welcome-modal .xb-welcome-option:hover {
border-color: #d4af37 !important;
background: linear-gradient(145deg, rgba(70, 55, 100, 0.7), rgba(45, 35, 70, 0.9)) !important;
transform: translateY(-5px) !important;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(212, 175, 55, 0.2) !important;
}
#xb-welcome-modal .xb-option-icon {
font-size: 5rem !important;
display: block !important;
margin-bottom: 20px !important;
}
#xb-welcome-modal .xb-option-title {
font-family: 'Cinzel', serif !important;
font-size: 2rem !important;
font-weight: 800 !important;
color: #fff !important;
margin: 0 0 15px 0 !important;
}
#xb-welcome-modal .xb-option-desc {
font-size: 1.2rem !important;
color: #b0a0c0 !important;
margin: 0 0 20px 0 !important;
line-height: 1.5 !important;
}
#xb-welcome-modal .xb-option-tag {
display: inline-block !important;
padding: 10px 24px !important;
font-size: 1.1rem !important;
font-weight: 800 !important;
border-radius: 25px !important;
}
#xb-welcome-modal .xb-tag-free {
background: linear-gradient(135deg, #9b59b6, #8e44ad) !important;
color: #fff !important;
}
#xb-welcome-modal .xb-tag-count {
background: linear-gradient(135deg, #d4af37, #b8860b) !important;
color: #1a1020 !important;
}
#xb-welcome-modal .xb-welcome-footer {
margin-top: 40px !important;
text-align: center !important;
}
#xb-welcome-modal .xb-welcome-tip {
font-size: 1.2rem !important;
color: #706080 !important;
margin: 0 !important;
}
/* ============================================
DOFUS - REMONTÉ COLLÉ AUX FLÈCHES
============================================ */
.xb-char-zone {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.xb-dofus-section {
margin-top: 5px !important;
padding: 8px 0 !important;
background: transparent !important;
border: none !important;
}
.xb-dofus-label {
display: none !important;
}
.xb-dofus-row {
display: flex !important;
justify-content: center !important;
gap: 6px !important;
}
.xb-slot-dofus {
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
}
/* ============================================
CARTES OBJETS - NOUVEAU DESIGN
============================================ */
.xb-items-grid.xb-grid-cards {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
gap: 15px !important;
padding: 20px !important;
overflow-y: auto !important;
}
.xb-crd {
background: linear-gradient(145deg, #1e1e2e, #141420) !important;
border: 2px solid #333 !important;
border-radius: 16px !important;
padding: 15px !important;
cursor: pointer !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
min-height: 180px !important;
}
.xb-crd:hover {
border-color: #d4af37 !important;
background: linear-gradient(145deg, #282838, #1e1e2e) !important;
}
/* Niveau en HAUT À GAUCHE */
.xb-crd-lvl {
position: absolute !important;
top: 10px !important;
left: 10px !important;
background: linear-gradient(135deg, #d4af37, #b8860b) !important;
color: #000 !important;
font-size: 0.95rem !important;
font-weight: 900 !important;
padding: 5px 12px !important;
border-radius: 10px !important;
z-index: 2 !important;
}
.xb-crd-top {
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 80px !important;
margin-bottom: 12px !important;
margin-top: 5px !important;
}
.xb-crd-img {
width: 70px !important;
height: 70px !important;
object-fit: contain !important;
}
.xb-crd-name {
font-family: 'Cinzel', serif !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
color: #fff !important;
text-align: center !important;
line-height: 1.3 !important;
margin-bottom: 8px !important;
min-height: 2.6em !important;
}
.xb-crd-pano {
font-size: 0.95rem !important;
color: #9b59b6 !important;
font-weight: 700 !important;
text-align: center !important;
margin-bottom: 10px !important;
padding: 4px 10px !important;
background: rgba(155, 89, 182, 0.15) !important;
border-radius: 8px !important;
}
.xb-crd-stats {
margin-top: auto !important;
}
.xb-crd-stat {
font-size: 1rem !important;
font-weight: 600 !important;
text-align: center !important;
padding: 2px 0 !important;
}
/* ============================================
RESPONSIVE MODAL BIENVENUE
============================================ */
@media (max-width: 800px) {
#xb-welcome-modal .xb-welcome-content {
padding: 35px 25px !important;
}
#xb-welcome-modal .xb-welcome-title {
font-size: 2.2rem !important;
letter-spacing: 4px !important;
}
#xb-welcome-modal .xb-welcome-subtitle {
font-size: 1.2rem !important;
}
#xb-welcome-modal .xb-welcome-option {
min-width: 100% !important;
padding: 30px !important;
}
#xb-welcome-modal .xb-option-icon {
font-size: 4rem !important;
}
#xb-welcome-modal .xb-option-title {
font-size: 1.6rem !important;
}
#xb-welcome-modal .xb-option-desc {
font-size: 1.1rem !important;
}
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
padding: 10px !important;
}
.xb-crd {
min-height: 160px !important;
padding: 12px !important;
}
.xb-crd-name {
font-size: 0.95rem !important;
}
}
/* ================================================================
V87.12 - REFONTE MAJEURE
================================================================ */
/* ============================================
DOFUS INLINE - SOUS LES FLÈCHES
============================================ */
.xb-dofus-section {
display: none !important;
}
.xb-dofus-inline {
display: flex !important;
justify-content: center !important;
gap: 6px !important;
margin-top: 10px !important;
padding: 8px 0 !important;
}
.xb-dofus-inline .xb-slot-dofus {
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background: rgba(155, 89, 182, 0.2) !important;
border: 2px solid rgba(155, 89, 182, 0.4) !important;
}
.xb-dofus-inline .xb-slot-dofus:hover {
border-color: #9b59b6 !important;
background: rgba(155, 89, 182, 0.3) !important;
}
.xb-dofus-inline .xb-slot-dofus.filled {
border-color: #9b59b6 !important;
background: rgba(155, 89, 182, 0.25) !important;
}
/* ============================================
TAGS AVEC CONTOUR - MES BUILDS
============================================ */
.xb-card-tag {
display: inline-block !important;
padding: 5px 12px !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
border-radius: 15px !important;
margin: 3px !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
.xb-card-footer-tags {
display: flex !important;
flex-wrap: wrap !important;
gap: 5px !important;
justify-content: center !important;
margin-top: 10px !important;
padding-top: 10px !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* ============================================
CARTES MODALES - REFONTE COMPLÈTE
============================================ */
.xb-items-grid.xb-grid-cards {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
gap: 16px !important;
padding: 20px !important;
overflow-y: auto !important;
background: #0a0a12 !important;
}
.xb-crd {
background: linear-gradient(160deg, #1a1a28 0%, #12121a 100%) !important;
border: 2px solid #2a2a3a !important;
border-radius: 16px !important;
padding: 0 !important;
cursor: pointer !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
overflow: hidden !important;
transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s !important;
}
.xb-crd:hover {
border-color: #d4af37 !important;
transform: translateY(-4px) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.15) !important;
}
/* Niveau en HAUT À GAUCHE avec contour propre */
.xb-crd-lvl {
position: absolute !important;
top: 12px !important;
left: 12px !important;
background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%) !important;
color: #000 !important;
font-family: 'Cinzel', serif !important;
font-size: 0.9rem !important;
font-weight: 900 !important;
padding: 6px 14px !important;
border-radius: 20px !important;
z-index: 5 !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
border: 2px solid rgba(255, 255, 255, 0.2) !important;
}
/* Zone image avec fond subtil */
.xb-crd-top {
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 100px !important;
padding: 15px !important;
background: linear-gradient(180deg, rgba(212, 175, 55, 0.05) 0%, transparent 100%) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.xb-crd-img {
width: 75px !important;
height: 75px !important;
object-fit: contain !important;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)) !important;
}
/* Contenu texte */
.xb-crd-content {
padding: 15px !important;
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important;
}
.xb-crd-name {
font-family: 'Cinzel', serif !important;
font-size: 1.05rem !important;
font-weight: 800 !important;
color: #fff !important;
text-align: center !important;
line-height: 1.3 !important;
margin-bottom: 8px !important;
padding: 0 5px !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}
.xb-crd-pano {
font-size: 0.85rem !important;
color: #9b59b6 !important;
font-weight: 700 !important;
text-align: center !important;
margin-bottom: 10px !important;
padding: 5px 10px !important;
background: rgba(155, 89, 182, 0.15) !important;
border: 1px solid rgba(155, 89, 182, 0.3) !important;
border-radius: 10px !important;
}
/* Stats avec icônes */
.xb-crd-stats {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
margin-top: auto !important;
padding: 10px !important;
background: rgba(0, 0, 0, 0.2) !important;
border-radius: 0 0 14px 14px !important;
}
.xb-crd-stat {
font-size: 0.9rem !important;
font-weight: 600 !important;
text-align: left !important;
padding: 3px 8px !important;
border-radius: 6px !important;
background: rgba(255, 255, 255, 0.03) !important;
}
/* ============================================
TOGGLE VISIBILITÉ PUBLIC/PRIVÉ
============================================ */
.xb-visibility-toggle {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 15px !important;
background: rgba(0, 0, 0, 0.3) !important;
border-radius: 10px !important;
margin-bottom: 15px !important;
}
.xb-visibility-label {
font-size: 0.95rem !important;
color: #aaa !important;
}
.xb-visibility-switch {
position: relative !important;
width: 50px !important;
height: 26px !important;
background: #333 !important;
border-radius: 13px !important;
cursor: pointer !important;
transition: background 0.3s !important;
}
.xb-visibility-switch.public {
background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
}
.xb-visibility-switch::after {
content: '' !important;
position: absolute !important;
top: 3px !important;
left: 3px !important;
width: 20px !important;
height: 20px !important;
background: #fff !important;
border-radius: 50% !important;
transition: transform 0.3s !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}
.xb-visibility-switch.public::after {
transform: translateX(24px) !important;
}
.xb-visibility-status {
font-size: 0.9rem !important;
font-weight: 700 !important;
}
.xb-visibility-status.private {
color: #e74c3c !important;
}
.xb-visibility-status.public {
color: #27ae60 !important;
}
/* ============================================
RESPONSIVE CARTES
============================================ */
@media (max-width: 768px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
padding: 10px !important;
}
.xb-crd-lvl {
top: 8px !important;
left: 8px !important;
font-size: 0.8rem !important;
padding: 4px 10px !important;
}
.xb-crd-top {
height: 80px !important;
}
.xb-crd-img {
width: 60px !important;
height: 60px !important;
}
.xb-crd-name {
font-size: 0.9rem !important;
}
.xb-crd-content {
padding: 10px !important;
}
}
@media (max-width: 500px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(2, 1fr) !important;
}
.xb-dofus-inline {
gap: 4px !important;
}
.xb-dofus-inline .xb-slot-dofus {
width: 32px !important;
height: 32px !important;
}
}
/* ================================================================
V87.12 FINAL - CORRECTIONS COMPLÈTES
================================================================ */
/* ============================================
DOFUS INLINE - JUSTE SOUS LES FLÈCHES
============================================ */
.xb-dofus-section {
display: none !important;
}
.xb-arrows {
position: relative !important;
bottom: auto !important;
margin-top: 10px !important;
z-index: 20 !important;
}
.xb-char-zone {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
min-height: auto !important;
height: auto !important;
padding-bottom: 20px !important;
}
.xb-dofus-inline {
display: flex !important;
justify-content: center !important;
gap: 8px !important;
margin-top: 15px !important;
padding: 12px 15px !important;
background: rgba(155, 89, 182, 0.1) !important;
border-radius: 25px !important;
border: 1px solid rgba(155, 89, 182, 0.3) !important;
}
.xb-dofus-inline .xb-slot-dofus {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
border-radius: 50% !important;
background: rgba(30, 20, 50, 0.8) !important;
border: 2px solid rgba(155, 89, 182, 0.5) !important;
transition: all 0.2s ease !important;
}
.xb-dofus-inline .xb-slot-dofus:hover {
border-color: #9b59b6 !important;
background: rgba(155, 89, 182, 0.3) !important;
transform: scale(1.1) !important;
}
.xb-dofus-inline .xb-slot-dofus.filled {
border-color: #9b59b6 !important;
}
/* ============================================
TAGS AVEC CONTOUR - MES BUILDS
============================================ */
.xb-card-tag {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
padding: 6px 14px !important;
font-size: 0.9rem !important;
font-weight: 700 !important;
border-radius: 20px !important;
margin: 3px !important;
border: 2px solid rgba(255, 255, 255, 0.4) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
.xb-card-footer-tags {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
justify-content: flex-start !important;
margin-bottom: 10px !important;
}
/* ============================================
TOGGLE VISIBILITÉ PUBLIC/PRIVÉ
============================================ */
.xb-card-visibility {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 8px 12px !important;
background: rgba(0, 0, 0, 0.3) !important;
border-radius: 20px !important;
margin-bottom: 10px !important;
}
.xb-vis-label {
font-size: 0.85rem !important;
font-weight: 700 !important;
color: #aaa !important;
}
.xb-vis-toggle {
position: relative !important;
width: 44px !important;
height: 24px !important;
background: #3a3a4a !important;
border: none !important;
border-radius: 12px !important;
cursor: pointer !important;
transition: background 0.3s !important;
padding: 0 !important;
}
.xb-vis-toggle.public {
background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
}
.xb-vis-toggle .xb-vis-dot {
position: absolute !important;
top: 3px !important;
left: 3px !important;
width: 18px !important;
height: 18px !important;
background: #fff !important;
border-radius: 50% !important;
transition: transform 0.3s !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}
.xb-vis-toggle.public .xb-vis-dot {
transform: translateX(20px) !important;
}
/* ============================================
CARTES MODALES - DESIGN PREMIUM
============================================ */
#xb-modal .xb-mod-box {
background: #0c0c14 !important;
}
.xb-items-grid.xb-grid-cards {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
gap: 18px !important;
padding: 25px !important;
overflow-y: auto !important;
background: linear-gradient(180deg, #0a0a12 0%, #0f0f1a 100%) !important;
}
.xb-crd {
background: linear-gradient(165deg, #1c1c2a 0%, #14141e 100%) !important;
border: 2px solid #2a2a40 !important;
border-radius: 18px !important;
padding: 0 !important;
cursor: pointer !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
overflow: hidden !important;
transition: all 0.25s ease !important;
min-height: 260px !important;
}
.xb-crd:hover {
border-color: #d4af37 !important;
transform: translateY(-6px) !important;
box-shadow:
0 15px 40px rgba(0, 0, 0, 0.6),
0 0 30px rgba(212, 175, 55, 0.15),
inset 0 0 20px rgba(212, 175, 55, 0.03) !important;
}
/* NIVEAU - Badge premium en haut à gauche */
.xb-crd-lvl {
position: absolute !important;
top: 14px !important;
left: 14px !important;
background: linear-gradient(145deg, #d4af37 0%, #a08520 100%) !important;
color: #0a0a0f !important;
font-family: 'Cinzel', serif !important;
font-size: 0.85rem !important;
font-weight: 900 !important;
padding: 6px 14px !important;
border-radius: 20px !important;
z-index: 10 !important;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
letter-spacing: 0.5px !important;
}
/* IMAGE - Zone avec fond subtil */
.xb-crd-top {
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 110px !important;
padding: 20px !important;
background: linear-gradient(180deg,
rgba(212, 175, 55, 0.06) 0%,
rgba(212, 175, 55, 0.02) 50%,
transparent 100%) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}
.xb-crd-img {
width: 80px !important;
height: 80px !important;
object-fit: contain !important;
filter: drop-shadow(0 6px 15px rgba(0, 0, 0, 0.6)) !important;
transition: transform 0.25s ease !important;
}
.xb-crd:hover .xb-crd-img {
transform: scale(1.08) !important;
}
/* CONTENU - Textes */
.xb-crd-content {
padding: 16px !important;
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important;
gap: 8px !important;
}
.xb-crd-name {
font-family: 'Cinzel', serif !important;
font-size: 1.05rem !important;
font-weight: 800 !important;
color: #fff !important;
text-align: center !important;
line-height: 1.35 !important;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
min-height: 2.7em !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.xb-crd-pano {
font-size: 0.85rem !important;
color: #b48fdc !important;
font-weight: 700 !important;
text-align: center !important;
padding: 6px 12px !important;
background: linear-gradient(135deg, rgba(155, 89, 182, 0.2), rgba(155, 89, 182, 0.1)) !important;
border: 1px solid rgba(155, 89, 182, 0.35) !important;
border-radius: 12px !important;
}
/* STATS - Section bas de carte */
.xb-crd-stats {
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
margin-top: auto !important;
padding: 12px !important;
background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.25) 100%) !important;
border-radius: 0 0 16px 16px !important;
border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
}
.xb-crd-stat {
font-size: 0.9rem !important;
font-weight: 600 !important;
text-align: left !important;
padding: 4px 10px !important;
border-radius: 8px !important;
background: rgba(255, 255, 255, 0.04) !important;
border-left: 3px solid currentColor !important;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 768px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
padding: 15px !important;
}
.xb-crd {
min-height: 220px !important;
}
.xb-crd-lvl {
top: 10px !important;
left: 10px !important;
font-size: 0.75rem !important;
padding: 5px 10px !important;
}
.xb-crd-top {
height: 90px !important;
padding: 15px !important;
}
.xb-crd-img {
width: 65px !important;
height: 65px !important;
}
.xb-crd-name {
font-size: 0.9rem !important;
}
.xb-crd-content {
padding: 12px !important;
}
.xb-dofus-inline {
gap: 5px !important;
padding: 8px 10px !important;
}
.xb-dofus-inline .xb-slot-dofus {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
}
}
@media (max-width: 500px) {
.xb-card-visibility {
flex-wrap: wrap !important;
justify-content: center !important;
}
}
/* ================================================================
V87.13 - REFONTE FINALE
================================================================ */
/* ============================================
DOFUS INLINE - DESIGN PROPRE
============================================ */
.xb-dofus-inline {
display: flex !important;
justify-content: center !important;
gap: 10px !important;
margin-top: 20px !important;
padding: 15px 20px !important;
background: linear-gradient(135deg, rgba(155, 89, 182, 0.15), rgba(100, 50, 150, 0.1)) !important;
border-radius: 30px !important;
border: 2px solid rgba(155, 89, 182, 0.4) !important;
box-shadow:
0 5px 20px rgba(155, 89, 182, 0.2),
inset 0 0 20px rgba(155, 89, 182, 0.1) !important;
}
.xb-dofus-inline .xb-slot-dofus {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
border-radius: 50% !important;
background: linear-gradient(145deg, #1a1028, #120818) !important;
border: 2px solid rgba(155, 89, 182, 0.5) !important;
box-shadow:
0 3px 10px rgba(0, 0, 0, 0.4),
inset 0 2px 5px rgba(255, 255, 255, 0.05) !important;
transition: all 0.2s ease !important;
}
.xb-dofus-inline .xb-slot-dofus:hover {
border-color: #9b59b6 !important;
background: linear-gradient(145deg, #2a1838, #1a0a28) !important;
transform: scale(1.15) !important;
box-shadow:
0 5px 15px rgba(155, 89, 182, 0.4),
inset 0 2px 5px rgba(255, 255, 255, 0.1) !important;
}
.xb-dofus-inline .xb-slot-dofus.filled {
border-color: #9b59b6 !important;
box-shadow:
0 0 15px rgba(155, 89, 182, 0.5),
inset 0 2px 5px rgba(255, 255, 255, 0.1) !important;
}
.xb-dofus-inline .xb-slot-dofus .xb-remove {
top: -6px !important;
right: -6px !important;
width: 18px !important;
height: 18px !important;
font-size: 12px !important;
}
/* ============================================
CARTES MODALES - STYLE DOFUSBOOK
============================================ */
.xb-items-grid.xb-grid-cards {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
padding: 20px !important;
overflow-y: auto !important;
background: #0a0a12 !important;
}
.xb-crd {
background: linear-gradient(145deg, #1a1a1a, #111) !important;
border: 1px solid #333 !important;
border-radius: 10px !important;
padding: 15px !important;
cursor: pointer !important;
display: flex !important;
flex-direction: row !important;
gap: 18px !important;
position: relative !important;
min-height: auto !important;
transition: all 0.2s ease !important;
overflow: visible !important;
}
.xb-crd:hover {
border-color: #d4af37 !important;
background: linear-gradient(145deg, #222, #1a1a1a) !important;
transform: translateY(-3px) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
z-index: 5 !important;
}
/* Niveau - Position absolue en haut à droite */
.xb-crd-lvl {
position: absolute !important;
top: 12px !important;
right: 12px !important;
font-family: 'Cinzel', serif !important;
font-weight: 900 !important;
font-size: 1.3rem !important;
color: #d4af37 !important;
border: 3px solid #d4af37 !important;
padding: 5px 12px !important;
border-radius: 10px !important;
background: #000 !important;
line-height: 1 !important;
box-shadow: 0 0 15px rgba(212, 175, 55, 0.4) !important;
text-shadow: 0 0 10px rgba(212, 175, 55, 0.5) !important;
}
/* Colonne image */
.xb-crd-top {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 90px !important;
flex-shrink: 0 !important;
height: auto !important;
padding: 0 !important;
background: none !important;
border: none !important;
margin: 0 !important;
}
.xb-crd-img {
width: 80px !important;
height: 80px !important;
object-fit: contain !important;
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5)) !important;
}
/* Contenu texte */
.xb-crd-content {
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
padding: 0 !important;
gap: 10px !important;
overflow: hidden !important;
}
.xb-crd-name {
font-family: 'Cinzel', serif !important;
font-weight: 800 !important;
font-size: 1.35rem !important;
color: white !important;
margin-right: 70px !important;
line-height: 1.25 !important;
word-wrap: break-word !important;
text-transform: uppercase !important;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05)) !important;
padding: 10px 14px !important;
border-radius: 8px !important;
border-left: 4px solid #d4af37 !important;
text-align: left !important;
min-height: auto !important;
}
.xb-crd-pano {
font-size: 1rem !important;
color: #d4af37 !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.15), transparent) !important;
padding: 8px 14px !important;
border-radius: 8px !important;
border: 1px solid rgba(212, 175, 55, 0.3) !important;
text-align: center !important;
}
/* Stats */
.xb-crd-stats {
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
margin-top: 5px !important;
padding: 0 !important;
background: none !important;
border-radius: 0 !important;
border: none !important;
}
.xb-crd-stat {
display: flex !important;
align-items: center !important;
gap: 10px !important;
font-size: 1.1rem !important;
font-weight: 600 !important;
text-align: left !important;
padding: 4px 0 !important;
background: none !important;
border: none !important;
border-left: none !important;
}
/* ============================================
EXPLORER - TITRE
============================================ */
.xb-explorer-title {
font-family: 'Cinzel', serif !important;
font-size: 1.8rem !important;
color: #d4af37 !important;
margin: 0 !important;
text-shadow: 0 2px 10px rgba(212, 175, 55, 0.5) !important;
}
.xb-explorer-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 20px !important;
background: rgba(0, 0, 0, 0.3) !important;
border-radius: 15px !important;
margin-bottom: 20px !important;
}
/* ============================================
RESPONSIVE CARTES
============================================ */
@media (max-width: 768px) {
.xb-items-grid.xb-grid-cards {
padding: 15px !important;
gap: 10px !important;
}
.xb-crd {
padding: 12px !important;
gap: 12px !important;
}
.xb-crd-top {
width: 70px !important;
}
.xb-crd-img {
width: 65px !important;
height: 65px !important;
}
.xb-crd-lvl {
font-size: 1rem !important;
padding: 4px 8px !important;
top: 8px !important;
right: 8px !important;
}
.xb-crd-name {
font-size: 1.1rem !important;
padding: 8px 10px !important;
margin-right: 50px !important;
}
.xb-crd-stat {
font-size: 0.95rem !important;
}
.xb-dofus-inline {
gap: 6px !important;
padding: 10px 15px !important;
}
.xb-dofus-inline .xb-slot-dofus {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
}
}
@media (max-width: 500px) {
.xb-crd {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
.xb-crd-lvl {
position: relative !important;
top: 0 !important;
right: 0 !important;
margin-bottom: 10px !important;
align-self: flex-end !important;
}
.xb-crd-name {
margin-right: 0 !important;
text-align: center !important;
border-left: none !important;
border-bottom: 4px solid #d4af37 !important;
}
.xb-crd-stat {
justify-content: center !important;
}
}
/* CONDITIONS DANS CARTES */
.xb-crd-cond {
font-size: 0.9rem !important;
color: #e74c3c !important;
font-style: italic !important;
padding: 8px 12px !important;
margin-top: 5px !important;
background: rgba(231, 76, 60, 0.1) !important;
border-radius: 6px !important;
border-left: 3px solid #e74c3c !important;
}
/* ================================================================
V87.14 - CARTES 5 COLONNES + PROFIL AMÉLIORÉ + STATS ICÔNES
================================================================ */
/* ============================================
CARTES MODALES - 5 PAR LIGNE
============================================ */
.xb-items-grid.xb-grid-cards {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 12px !important;
padding: 20px !important;
overflow-y: auto !important;
background: #0a0a12 !important;
}
.xb-crd {
background: linear-gradient(145deg, #1a1a1a, #111) !important;
border: 1px solid #333 !important;
border-radius: 10px !important;
padding: 12px !important;
cursor: pointer !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
position: relative !important;
min-height: auto !important;
transition: all 0.2s ease !important;
overflow: hidden !important;
}
.xb-crd:hover {
border-color: #d4af37 !important;
background: linear-gradient(145deg, #252525, #1a1a1a) !important;
transform: translateY(-3px) !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
z-index: 5 !important;
}
/* Niveau - Badge compact haut droite */
.xb-crd-lvl {
position: absolute !important;
top: 8px !important;
right: 8px !important;
font-family: 'Cinzel', serif !important;
font-weight: 900 !important;
font-size: 1rem !important;
color: #d4af37 !important;
border: 2px solid #d4af37 !important;
padding: 3px 8px !important;
border-radius: 8px !important;
background: rgba(0, 0, 0, 0.9) !important;
line-height: 1 !important;
box-shadow: 0 0 10px rgba(212, 175, 55, 0.3) !important;
}
/* Image centrée */
.xb-crd-top {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 10px !important;
background: none !important;
border: none !important;
height: auto !important;
width: auto !important;
}
.xb-crd-img {
width: 70px !important;
height: 70px !important;
object-fit: contain !important;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) !important;
}
/* Contenu */
.xb-crd-content {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
padding: 0 !important;
}
.xb-crd-name {
font-family: 'Cinzel', serif !important;
font-weight: 800 !important;
font-size: 0.95rem !important;
color: white !important;
text-align: center !important;
line-height: 1.2 !important;
padding: 6px 8px !important;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.05)) !important;
border-radius: 6px !important;
border-left: 3px solid #d4af37 !important;
margin-right: 0 !important;
text-transform: none !important;
min-height: auto !important;
}
.xb-crd-pano {
font-size: 0.8rem !important;
color: #d4af37 !important;
font-weight: 700 !important;
text-align: center !important;
padding: 4px 8px !important;
background: rgba(212, 175, 55, 0.1) !important;
border-radius: 6px !important;
border: 1px solid rgba(212, 175, 55, 0.25) !important;
}
/* Stats avec icônes */
.xb-crd-stats {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
padding: 8px !important;
background: rgba(0, 0, 0, 0.3) !important;
border-radius: 8px !important;
max-height: 150px !important;
overflow-y: auto !important;
}
.xb-crd-stat {
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
padding: 3px 6px !important;
background: rgba(255, 255, 255, 0.03) !important;
border-radius: 4px !important;
border: none !important;
}
.xb-crd-stat img {
width: 16px !important;
height: 16px !important;
flex-shrink: 0 !important;
}
.xb-crd-cond {
font-size: 0.75rem !important;
color: #e74c3c !important;
padding: 5px 8px !important;
background: rgba(231, 76, 60, 0.1) !important;
border-radius: 4px !important;
border-left: 2px solid #e74c3c !important;
text-align: center !important;
}
/* ============================================
PROFIL - NOUVEAU DESIGN
============================================ */
.xb-profile-container {
max-width: 900px !important;
margin: 0 auto !important;
padding: 20px !important;
}
.xb-profile-header {
display: flex !important;
align-items: center !important;
gap: 20px !important;
padding: 25px !important;
background: linear-gradient(135deg, #1a1428, #0d0a15) !important;
border-radius: 20px !important;
border: 1px solid rgba(212, 175, 55, 0.2) !important;
margin-bottom: 25px !important;
}
.xb-profile-avatar {
width: 80px !important;
height: 80px !important;
background: linear-gradient(135deg, #d4af37, #b8860b) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3) !important;
}
.xb-avatar-emoji {
font-size: 2.5rem !important;
}
.xb-profile-info {
flex: 1 !important;
}
.xb-profile-name {
font-family: 'Cinzel', serif !important;
font-size: 1.8rem !important;
font-weight: 900 !important;
color: #fff !important;
margin: 0 0 5px 0 !important;
}
.xb-profile-username {
font-size: 1rem !important;
color: #888 !important;
margin: 0 !important;
}
.xb-btn-edit-profile {
background: linear-gradient(135deg, #333, #222) !important;
border: 1px solid #444 !important;
color: #fff !important;
padding: 12px 20px !important;
border-radius: 10px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: all 0.2s !important;
}
.xb-btn-edit-profile:hover {
background: linear-gradient(135deg, #444, #333) !important;
border-color: #d4af37 !important;
}
/* Stats rapides */
.xb-profile-quick-stats {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 15px !important;
margin-bottom: 25px !important;
}
.xb-quick-stat {
background: linear-gradient(145deg, #1a1a28, #12121a) !important;
border: 1px solid #2a2a3a !important;
border-radius: 15px !important;
padding: 20px 15px !important;
text-align: center !important;
}
.xb-quick-stat.public {
border-color: rgba(39, 174, 96, 0.4) !important;
background: linear-gradient(145deg, #1a2820, #121a18) !important;
}
.xb-quick-stat.private {
border-color: rgba(231, 76, 60, 0.4) !important;
background: linear-gradient(145deg, #281a1a, #1a1212) !important;
}
.xb-qs-value {
display: block !important;
font-family: 'Cinzel', serif !important;
font-size: 2rem !important;
font-weight: 900 !important;
color: #d4af37 !important;
}
.xb-qs-label {
display: block !important;
font-size: 0.85rem !important;
color: #888 !important;
margin-top: 5px !important;
}
/* Section visibilité */
.xb-profile-section {
background: linear-gradient(145deg, #1a1a28, #12121a) !important;
border: 1px solid #2a2a3a !important;
border-radius: 15px !important;
padding: 25px !important;
margin-bottom: 20px !important;
}
.xb-section-title {
font-family: 'Cinzel', serif !important;
font-size: 1.3rem !important;
color: #d4af37 !important;
margin: 0 0 10px 0 !important;
}
.xb-section-desc {
color: #888 !important;
font-size: 0.95rem !important;
margin: 0 0 20px 0 !important;
}
.xb-visibility-controls {
display: flex !important;
gap: 15px !important;
margin-bottom: 20px !important;
}
.xb-btn-vis {
flex: 1 !important;
padding: 15px 20px !important;
border-radius: 12px !important;
font-weight: 700 !important;
font-size: 1rem !important;
cursor: pointer !important;
transition: all 0.2s !important;
border: 2px solid transparent !important;
}
.xb-btn-all-public {
background: linear-gradient(135deg, #27ae60, #1e8449) !important;
color: #fff !important;
}
.xb-btn-all-public:hover {
transform: translateY(-2px) !important;
box-shadow: 0 5px 20px rgba(39, 174, 96, 0.4) !important;
}
.xb-btn-all-private {
background: linear-gradient(135deg, #333, #222) !important;
color: #aaa !important;
border-color: #444 !important;
}
.xb-btn-all-private:hover {
border-color: #e74c3c !important;
color: #fff !important;
}
/* Liste des builds */
.xb-builds-visibility-list {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
max-height: 400px !important;
overflow-y: auto !important;
}
.xb-vis-item {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 12px 15px !important;
background: rgba(0, 0, 0, 0.3) !important;
border-radius: 10px !important;
border-left: 4px solid #666 !important;
transition: all 0.2s !important;
}
.xb-vis-item.public {
border-left-color: #27ae60 !important;
}
.xb-vis-item.private {
border-left-color: #e74c3c !important;
}
.xb-vis-item-info {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
}
.xb-vis-item-name {
font-weight: 700 !important;
color: #fff !important;
font-size: 1rem !important;
}
.xb-vis-item-class {
font-size: 0.85rem !important;
color: #888 !important;
}
.xb-vis-toggle-btn {
padding: 8px 16px !important;
border-radius: 20px !important;
font-weight: 700 !important;
font-size: 0.85rem !important;
cursor: pointer !important;
transition: all 0.2s !important;
border: none !important;
}
.xb-vis-toggle-btn.public {
background: linear-gradient(135deg, #27ae60, #1e8449) !important;
color: #fff !important;
}
.xb-vis-toggle-btn.private {
background: linear-gradient(135deg, #555, #444) !important;
color: #aaa !important;
}
.xb-vis-toggle-btn:hover {
transform: scale(1.05) !important;
}
/* Classes favorites */
.xb-classes-grid {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.xb-class-card {
display: grid !important;
grid-template-columns: 40px 100px 1fr 100px !important;
align-items: center !important;
gap: 15px !important;
padding: 12px 15px !important;
background: rgba(0, 0, 0, 0.3) !important;
border-radius: 10px !important;
}
.xb-class-medal {
font-size: 1.5rem !important;
}
.xb-class-name {
font-weight: 700 !important;
color: #fff !important;
}
.xb-class-bar-bg {
height: 8px !important;
background: #333 !important;
border-radius: 4px !important;
overflow: hidden !important;
}
.xb-class-bar-fill {
height: 100% !important;
background: linear-gradient(90deg, #d4af37, #f1c40f) !important;
border-radius: 4px !important;
transition: width 0.3s ease !important;
}
.xb-class-stats {
font-size: 0.85rem !important;
color: #888 !important;
text-align: right !important;
}
/* Actions */
.xb-profile-actions {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
margin-top: 25px !important;
}
.xb-action-btn {
flex: 1 !important;
min-width: 200px !important;
padding: 15px 20px !important;
background: linear-gradient(135deg, #333, #222) !important;
border: 1px solid #444 !important;
color: #fff !important;
border-radius: 12px !important;
font-weight: 700 !important;
font-size: 0.95rem !important;
cursor: pointer !important;
transition: all 0.2s !important;
}
.xb-action-btn:hover {
background: linear-gradient(135deg, #444, #333) !important;
border-color: #d4af37 !important;
transform: translateY(-2px) !important;
}
.xb-btn-import {
background: linear-gradient(135deg, #2980b9, #1a5276) !important;
border-color: #3498db !important;
}
/* ============================================
RESPONSIVE CARTES
============================================ */
@media (max-width: 1400px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(4, 1fr) !important;
}
}
@media (max-width: 1100px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 800px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
padding: 15px !important;
}
.xb-profile-quick-stats {
grid-template-columns: repeat(2, 1fr) !important;
}
.xb-profile-header {
flex-direction: column !important;
text-align: center !important;
}
.xb-class-card {
grid-template-columns: 30px 80px 1fr 70px !important;
gap: 10px !important;
}
}
@media (max-width: 500px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: 1fr !important;
}
.xb-crd-img {
width: 60px !important;
height: 60px !important;
}
.xb-visibility-controls {
flex-direction: column !important;
}
}
/* ================================================================
V87.15 - RETOUR AU STYLE ORIGINAL DES MODALES
================================================================ */
/* ============================================
GRILLE ITEMS - STYLE ORIGINAL
============================================ */
.xb-items-grid.xb-grid-cards {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 15px !important;
overflow-y: auto !important;
padding: 15px !important;
align-content: start !important;
background: #0a0a0f !important;
}
/* CARTE ITEM - STYLE ORIGINAL HORIZONTAL */
.xb-item {
background: linear-gradient(145deg, #1a1a1a, #111) !important;
border: 1px solid #333 !important;
border-radius: 10px !important;
transition: all 0.2s ease !important;
position: relative !important;
padding: 15px !important;
cursor: pointer !important;
display: flex !important;
gap: 15px !important;
min-height: auto !important;
align-items: stretch !important;
overflow: visible !important;
}
.xb-item:hover {
border-color: var(--gold) !important;
background: #222 !important;
transform: translateY(-3px) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
z-index: 5 !important;
}
/* Colonne gauche - Image + Bouton */
.xb-item-left {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 90px !important;
flex-shrink: 0 !important;
gap: 10px !important;
}
.xb-item-img {
width: 80px !important;
height: 80px !important;
object-fit: contain !important;
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5)) !important;
}
/* Bouton panoplie */
.xb-btn-add-set {
width: 100% !important;
text-align: center !important;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(212, 175, 55, 0.15)) !important;
border: 2px solid var(--gold) !important;
color: var(--gold) !important;
padding: 8px 6px !important;
font-size: 0.8rem !important;
font-weight: 900 !important;
text-transform: uppercase !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: all 0.3s !important;
white-space: normal !important;
line-height: 1.2 !important;
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
.xb-btn-add-set:hover {
background: linear-gradient(135deg, var(--gold), #d4a533) !important;
color: #111 !important;
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
transform: translateY(-2px) scale(1.02) !important;
}
/* Colonne droite - Contenu */
.xb-item-right {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
overflow: hidden !important;
gap: 8px !important;
}
/* Niveau - Badge en haut à droite */
.xb-item-lvl-box {
position: absolute !important;
top: 12px !important;
right: 12px !important;
font-family: 'Cinzel', serif !important;
font-weight: 900 !important;
font-size: 1.3rem !important;
color: var(--gold) !important;
border: 3px solid var(--gold) !important;
padding: 5px 12px !important;
border-radius: 8px !important;
background: #000 !important;
line-height: 1 !important;
box-shadow: 0 0 15px rgba(212, 175, 55, 0.4) !important;
text-shadow: 0 0 10px rgba(212, 175, 55, 0.5) !important;
}
/* Nom de l'item */
.xb-item-name {
font-family: 'Cinzel', serif !important;
font-weight: 800 !important;
font-size: 1.25rem !important;
color: white !important;
margin-bottom: 0 !important;
margin-right: 70px !important;
line-height: 1.25 !important;
word-wrap: break-word !important;
text-transform: uppercase !important;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05)) !important;
padding: 10px 14px !important;
border-radius: 8px !important;
border-left: 4px solid var(--gold) !important;
}
/* Panoplie */
.xb-item-set {
font-size: 1rem !important;
color: var(--gold) !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.15), transparent) !important;
padding: 8px 14px !important;
border-radius: 6px !important;
border: 1px solid rgba(212, 175, 55, 0.3) !important;
text-align: center !important;
}
/* Stats */
.xb-item-stats {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
width: 100% !important;
}
.xb-item-stat-row {
display: flex !important;
align-items: center !important;
gap: 10px !important;
font-size: 1.05rem !important;
font-weight: 600 !important;
color: #ddd !important;
padding: 3px 0 !important;
}
.xb-item-stat-row img {
width: 20px !important;
height: 20px !important;
object-fit: contain !important;
flex-shrink: 0 !important;
}
/* ============================================
PROFIL PUBLIC AMÉLIORÉ
============================================ */
.xb-profile-container {
max-width: 1000px !important;
margin: 0 auto !important;
padding: 25px !important;
}
/* En-tête avec bannière */
.xb-profile-header {
display: flex !important;
align-items: center !important;
gap: 25px !important;
padding: 30px !important;
background: linear-gradient(135deg, #1a1428 0%, #0d0a15 100%) !important;
border-radius: 20px !important;
border: 2px solid rgba(212, 175, 55, 0.3) !important;
margin-bottom: 30px !important;
position: relative !important;
overflow: hidden !important;
}
.xb-profile-header::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 4px !important;
background: linear-gradient(90deg, transparent, #d4af37, transparent) !important;
}
.xb-profile-avatar {
width: 100px !important;
height: 100px !important;
background: linear-gradient(135deg, #d4af37, #b8860b) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4) !important;
border: 3px solid rgba(255, 255, 255, 0.2) !important;
}
.xb-avatar-emoji {
font-size: 3rem !important;
}
.xb-profile-info {
flex: 1 !important;
}
.xb-profile-name {
font-family: 'Cinzel', serif !important;
font-size: 2.2rem !important;
font-weight: 900 !important;
color: #fff !important;
margin: 0 0 8px 0 !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}
.xb-profile-username {
font-size: 1.1rem !important;
color: #888 !important;
margin: 0 !important;
}
.xb-btn-edit-profile {
background: linear-gradient(135deg, #d4af37, #b8860b) !important;
border: none !important;
color: #000 !important;
padding: 14px 25px !important;
border-radius: 12px !important;
font-weight: 800 !important;
font-size: 1rem !important;
cursor: pointer !important;
transition: all 0.2s !important;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3) !important;
}
.xb-btn-edit-profile:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 25px rgba(212, 175, 55, 0.5) !important;
}
/* Stats rapides améliorées */
.xb-profile-quick-stats {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
margin-bottom: 30px !important;
}
.xb-quick-stat {
background: linear-gradient(145deg, #1a1a28, #12121a) !important;
border: 2px solid #2a2a3a !important;
border-radius: 16px !important;
padding: 25px 20px !important;
text-align: center !important;
transition: all 0.2s !important;
}
.xb-quick-stat:hover {
transform: translateY(-3px) !important;
border-color: #d4af37 !important;
}
.xb-quick-stat.public {
border-color: #27ae60 !important;
background: linear-gradient(145deg, #1a2820, #121a18) !important;
}
.xb-quick-stat.public .xb-qs-value {
color: #27ae60 !important;
}
.xb-quick-stat.private {
border-color: #e74c3c !important;
background: linear-gradient(145deg, #281a1a, #1a1212) !important;
}
.xb-quick-stat.private .xb-qs-value {
color: #e74c3c !important;
}
.xb-qs-value {
display: block !important;
font-family: 'Cinzel', serif !important;
font-size: 2.5rem !important;
font-weight: 900 !important;
color: #d4af37 !important;
line-height: 1 !important;
}
.xb-qs-label {
display: block !important;
font-size: 0.9rem !important;
color: #888 !important;
margin-top: 8px !important;
font-weight: 600 !important;
}
/* Sections */
.xb-profile-section {
background: linear-gradient(145deg, #1a1a28, #12121a) !important;
border: 2px solid #2a2a3a !important;
border-radius: 16px !important;
padding: 25px !important;
margin-bottom: 25px !important;
}
.xb-section-title {
font-family: 'Cinzel', serif !important;
font-size: 1.4rem !important;
color: #d4af37 !important;
margin: 0 0 15px 0 !important;
padding-bottom: 15px !important;
border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
}
.xb-section-desc {
color: #888 !important;
font-size: 1rem !important;
margin: 0 0 20px 0 !important;
line-height: 1.5 !important;
}
/* Contrôles visibilité */
.xb-visibility-controls {
display: flex !important;
gap: 15px !important;
margin-bottom: 25px !important;
}
.xb-btn-vis {
flex: 1 !important;
padding: 16px 24px !important;
border-radius: 12px !important;
font-weight: 800 !important;
font-size: 1rem !important;
cursor: pointer !important;
transition: all 0.2s !important;
border: none !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
.xb-btn-all-public {
background: linear-gradient(135deg, #27ae60, #1e8449) !important;
color: #fff !important;
box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3) !important;
}
.xb-btn-all-public:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 25px rgba(39, 174, 96, 0.5) !important;
}
.xb-btn-all-private {
background: linear-gradient(135deg, #444, #333) !important;
color: #aaa !important;
border: 2px solid #555 !important;
}
.xb-btn-all-private:hover {
background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
color: #fff !important;
border-color: #e74c3c !important;
}
/* Liste des builds */
.xb-builds-visibility-list {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
max-height: 450px !important;
overflow-y: auto !important;
padding-right: 10px !important;
}
.xb-vis-item {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 15px 20px !important;
background: rgba(0, 0, 0, 0.4) !important;
border-radius: 12px !important;
border-left: 5px solid #666 !important;
transition: all 0.2s !important;
}
.xb-vis-item:hover {
background: rgba(0, 0, 0, 0.6) !important;
}
.xb-vis-item.public {
border-left-color: #27ae60 !important;
}
.xb-vis-item.private {
border-left-color: #e74c3c !important;
}
.xb-vis-item-info {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
.xb-vis-item-name {
font-weight: 800 !important;
color: #fff !important;
font-size: 1.1rem !important;
}
.xb-vis-item-class {
font-size: 0.9rem !important;
color: #888 !important;
}
.xb-vis-toggle-btn {
padding: 10px 20px !important;
border-radius: 25px !important;
font-weight: 800 !important;
font-size: 0.9rem !important;
cursor: pointer !important;
transition: all 0.2s !important;
border: none !important;
}
.xb-vis-toggle-btn.public {
background: linear-gradient(135deg, #27ae60, #1e8449) !important;
color: #fff !important;
}
.xb-vis-toggle-btn.private {
background: linear-gradient(135deg, #555, #444) !important;
color: #aaa !important;
}
.xb-vis-toggle-btn:hover {
transform: scale(1.05) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}
/* Classes favorites */
.xb-classes-grid {
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
}
.xb-class-card {
display: grid !important;
grid-template-columns: 50px 120px 1fr 120px !important;
align-items: center !important;
gap: 20px !important;
padding: 15px 20px !important;
background: rgba(0, 0, 0, 0.3) !important;
border-radius: 12px !important;
transition: all 0.2s !important;
}
.xb-class-card:hover {
background: rgba(0, 0, 0, 0.5) !important;
}
.xb-class-medal {
font-size: 2rem !important;
text-align: center !important;
}
.xb-class-name {
font-weight: 800 !important;
color: #fff !important;
font-size: 1.1rem !important;
}
.xb-class-bar-bg {
height: 10px !important;
background: #333 !important;
border-radius: 5px !important;
overflow: hidden !important;
}
.xb-class-bar-fill {
height: 100% !important;
background: linear-gradient(90deg, #d4af37, #f1c40f) !important;
border-radius: 5px !important;
transition: width 0.5s ease !important;
}
.xb-class-stats {
font-size: 0.95rem !important;
color: #888 !important;
text-align: right !important;
font-weight: 600 !important;
}
/* Actions profil */
.xb-profile-actions {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 15px !important;
margin-top: 30px !important;
}
.xb-action-btn {
padding: 18px 20px !important;
background: linear-gradient(135deg, #333, #222) !important;
border: 2px solid #444 !important;
color: #fff !important;
border-radius: 12px !important;
font-weight: 700 !important;
font-size: 1rem !important;
cursor: pointer !important;
transition: all 0.2s !important;
text-align: center !important;
}
.xb-action-btn:hover {
background: linear-gradient(135deg, #444, #333) !important;
border-color: #d4af37 !important;
transform: translateY(-2px) !important;
}
.xb-btn-import {
background: linear-gradient(135deg, #2980b9, #1a5276) !important;
border-color: #3498db !important;
}
.xb-btn-import:hover {
background: linear-gradient(135deg, #3498db, #2980b9) !important;
}
/* ============================================
RESPONSIVE MODALES
============================================ */
@media (max-width: 1200px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 800px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.xb-item {
padding: 12px !important;
gap: 12px !important;
}
.xb-item-left {
width: 70px !important;
}
.xb-item-img {
width: 65px !important;
height: 65px !important;
}
.xb-item-lvl-box {
font-size: 1rem !important;
padding: 4px 8px !important;
}
.xb-item-name {
font-size: 1rem !important;
padding: 8px 10px !important;
margin-right: 50px !important;
}
.xb-item-stat-row {
font-size: 0.9rem !important;
}
.xb-item-stat-row img {
width: 16px !important;
height: 16px !important;
}
.xb-profile-quick-stats {
grid-template-columns: repeat(2, 1fr) !important;
}
.xb-profile-header {
flex-direction: column !important;
text-align: center !important;
}
.xb-profile-actions {
grid-template-columns: 1fr !important;
}
.xb-class-card {
grid-template-columns: 40px 80px 1fr 80px !important;
gap: 10px !important;
padding: 12px 15px !important;
}
}
@media (max-width: 500px) {
.xb-visibility-controls {
flex-direction: column !important;
}
.xb-class-card {
grid-template-columns: 35px 1fr !important;
}
.xb-class-bar-bg,
.xb-class-stats {
display: none !important;
}
}
/* ================================================================
V87.16 - CARTES 4 COLONNES + STATS INLINE + PROFIL LARGEUR
================================================================ */
/* ============================================
MODAL AGRANDIE
============================================ */
#xb-modal .xb-modal-box {
max-width: 95vw !important;
width: 1400px !important;
max-height: 90vh !important;
}
/* ============================================
GRILLE 4 COLONNES
============================================ */
.xb-items-grid.xb-grid-cards {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px !important;
overflow-y: auto !important;
padding: 15px !important;
align-content: start !important;
background: #0a0a0f !important;
}
/* CARTE ITEM - Compacte */
.xb-item {
background: linear-gradient(145deg, #1a1a1a, #111) !important;
border: 1px solid #333 !important;
border-radius: 10px !important;
transition: all 0.2s ease !important;
position: relative !important;
padding: 12px !important;
cursor: pointer !important;
display: flex !important;
gap: 12px !important;
min-height: auto !important;
align-items: flex-start !important;
}
.xb-item:hover {
border-color: var(--gold) !important;
background: #222 !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
z-index: 5 !important;
}
/* Image + bouton */
.xb-item-left {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 70px !important;
flex-shrink: 0 !important;
gap: 8px !important;
}
.xb-item-img {
width: 65px !important;
height: 65px !important;
object-fit: contain !important;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) !important;
}
.xb-btn-add-set {
width: 100% !important;
text-align: center !important;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.15)) !important;
border: 1px solid var(--gold) !important;
color: var(--gold) !important;
padding: 5px 4px !important;
font-size: 0.7rem !important;
font-weight: 800 !important;
text-transform: uppercase !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: all 0.2s !important;
}
.xb-btn-add-set:hover {
background: var(--gold) !important;
color: #000 !important;
}
/* Contenu droite */
.xb-item-right {
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
gap: 6px !important;
overflow: hidden !important;
}
/* Niveau */
.xb-item-lvl-box {
position: absolute !important;
top: 8px !important;
right: 8px !important;
font-family: 'Cinzel', serif !important;
font-weight: 900 !important;
font-size: 1rem !important;
color: var(--gold) !important;
border: 2px solid var(--gold) !important;
padding: 3px 8px !important;
border-radius: 6px !important;
background: #000 !important;
line-height: 1 !important;
box-shadow: 0 0 10px rgba(212, 175, 55, 0.3) !important;
}
/* Nom compact */
.xb-item-name {
font-family: 'Cinzel', serif !important;
font-weight: 700 !important;
font-size: 0.95rem !important;
color: white !important;
margin-right: 55px !important;
line-height: 1.2 !important;
word-wrap: break-word !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), transparent) !important;
padding: 6px 10px !important;
border-radius: 6px !important;
border-left: 3px solid var(--gold) !important;
}
/* Panoplie */
.xb-item-set {
font-size: 0.8rem !important;
color: var(--gold) !important;
font-weight: 700 !important;
text-align: center !important;
background: rgba(212, 175, 55, 0.1) !important;
padding: 4px 8px !important;
border-radius: 4px !important;
border: 1px solid rgba(212, 175, 55, 0.2) !important;
}
/* ============================================
STATS INLINE - UNE LIGNE
============================================ */
.xb-item-stats-inline {
display: flex !important;
flex-wrap: wrap !important;
gap: 4px !important;
padding: 6px 0 !important;
}
.xb-stat-chip {
display: inline-flex !important;
align-items: center !important;
gap: 3px !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
padding: 2px 6px !important;
background: rgba(255, 255, 255, 0.05) !important;
border-radius: 4px !important;
white-space: nowrap !important;
}
.xb-stat-chip img {
width: 14px !important;
height: 14px !important;
object-fit: contain !important;
}
/* ============================================
PROFIL - LAYOUT 2 COLONNES
============================================ */
.xb-profile-layout {
display: grid !important;
grid-template-columns: 350px 1fr !important;
gap: 25px !important;
padding: 20px !important;
max-width: 1400px !important;
margin: 0 auto !important;
}
/* Colonne gauche */
.xb-profile-left {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.xb-profile-card {
background: linear-gradient(145deg, #1a1428, #0d0a15) !important;
border: 1px solid rgba(212, 175, 55, 0.2) !important;
border-radius: 16px !important;
padding: 25px !important;
text-align: center !important;
}
.xb-profile-avatar {
width: 80px !important;
height: 80px !important;
background: linear-gradient(135deg, #d4af37, #b8860b) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto 15px !important;
box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3) !important;
}
.xb-avatar-emoji {
font-size: 2.5rem !important;
}
.xb-profile-name {
font-family: 'Cinzel', serif !important;
font-size: 1.6rem !important;
font-weight: 900 !important;
color: #fff !important;
margin: 0 0 5px 0 !important;
}
.xb-profile-username {
font-size: 0.95rem !important;
color: #888 !important;
margin: 0 0 15px 0 !important;
}
.xb-btn-edit-profile {
background: linear-gradient(135deg, #d4af37, #b8860b) !important;
border: none !important;
color: #000 !important;
padding: 10px 20px !important;
border-radius: 8px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: all 0.2s !important;
}
.xb-btn-edit-profile:hover {
transform: scale(1.05) !important;
}
/* Stats grid 2x2 */
.xb-stats-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
.xb-stat-box {
background: linear-gradient(145deg, #1a1a28, #12121a) !important;
border: 1px solid #2a2a3a !important;
border-radius: 12px !important;
padding: 20px 15px !important;
text-align: center !important;
}
.xb-stat-box.green {
border-color: #27ae60 !important;
background: linear-gradient(145deg, #1a2820, #121a18) !important;
}
.xb-stat-box.green .xb-stat-val { color: #27ae60 !important; }
.xb-stat-box.red {
border-color: #e74c3c !important;
background: linear-gradient(145deg, #281a1a, #1a1212) !important;
}
.xb-stat-box.red .xb-stat-val { color: #e74c3c !important; }
.xb-stat-val {
display: block !important;
font-family: 'Cinzel', serif !important;
font-size: 2rem !important;
font-weight: 900 !important;
color: #d4af37 !important;
line-height: 1 !important;
}
.xb-stat-lbl {
display: block !important;
font-size: 0.85rem !important;
color: #888 !important;
margin-top: 5px !important;
}
/* Classes favorites */
.xb-card-title {
font-family: 'Cinzel', serif !important;
font-size: 1.2rem !important;
color: #d4af37 !important;
margin: 0 0 15px 0 !important;
text-align: left !important;
}
.xb-classes-list {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.xb-class-row {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 8px !important;
background: rgba(0, 0, 0, 0.3) !important;
border-radius: 8px !important;
}
.xb-class-medal {
font-size: 1.2rem !important;
width: 25px !important;
}
.xb-class-icon {
width: 30px !important;
height: 30px !important;
object-fit: contain !important;
}
.xb-class-name {
flex: 1 !important;
font-weight: 700 !important;
color: #fff !important;
font-size: 0.95rem !important;
}
.xb-class-bar {
width: 80px !important;
height: 6px !important;
background: #333 !important;
border-radius: 3px !important;
overflow: hidden !important;
}
.xb-class-bar > div {
height: 100% !important;
background: linear-gradient(90deg, #d4af37, #f1c40f) !important;
}
.xb-class-pct {
width: 40px !important;
text-align: right !important;
font-size: 0.85rem !important;
color: #888 !important;
font-weight: 600 !important;
}
/* Actions row */
.xb-profile-actions-row {
display: flex !important;
gap: 10px !important;
}
.xb-act-btn {
flex: 1 !important;
padding: 12px 10px !important;
background: linear-gradient(135deg, #333, #222) !important;
border: 1px solid #444 !important;
color: #fff !important;
border-radius: 8px !important;
font-weight: 700 !important;
font-size: 0.85rem !important;
cursor: pointer !important;
transition: all 0.2s !important;
}
.xb-act-btn:hover {
border-color: #d4af37 !important;
transform: translateY(-2px) !important;
}
.xb-act-btn.blue {
background: linear-gradient(135deg, #2980b9, #1a5276) !important;
border-color: #3498db !important;
}
/* Colonne droite - Gestionnaire builds */
.xb-profile-right {
display: flex !important;
flex-direction: column !important;
}
.xb-builds-manager {
background: linear-gradient(145deg, #1a1428, #0d0a15) !important;
border: 1px solid rgba(212, 175, 55, 0.2) !important;
border-radius: 16px !important;
padding: 20px !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
.xb-manager-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 20px !important;
padding-bottom: 15px !important;
border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
}
.xb-manager-header h2 {
font-family: 'Cinzel', serif !important;
font-size: 1.3rem !important;
color: #d4af37 !important;
margin: 0 !important;
}
.xb-manager-actions {
display: flex !important;
gap: 10px !important;
}
.xb-btn-bulk {
padding: 8px 15px !important;
background: linear-gradient(135deg, #444, #333) !important;
border: 1px solid #555 !important;
color: #aaa !important;
border-radius: 8px !important;
font-weight: 700 !important;
font-size: 0.85rem !important;
cursor: pointer !important;
transition: all 0.2s !important;
}
.xb-btn-bulk.green {
background: linear-gradient(135deg, #27ae60, #1e8449) !important;
border-color: #27ae60 !important;
color: #fff !important;
}
.xb-btn-bulk:hover {
transform: scale(1.05) !important;
}
/* Grille des builds */
.xb-builds-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
gap: 12px !important;
flex: 1 !important;
overflow-y: auto !important;
padding-right: 5px !important;
}
.xb-build-tile {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 15px !important;
background: rgba(0, 0, 0, 0.3) !important;
border-radius: 10px !important;
border-left: 4px solid #666 !important;
cursor: pointer !important;
transition: all 0.2s !important;
}
.xb-build-tile:hover {
background: rgba(0, 0, 0, 0.5) !important;
transform: translateX(5px) !important;
}
.xb-build-tile.public {
border-left-color: #27ae60 !important;
}
.xb-build-tile.private {
border-left-color: #e74c3c !important;
}
.xb-tile-icon {
width: 40px !important;
height: 40px !important;
object-fit: contain !important;
flex-shrink: 0 !important;
}
.xb-tile-info {
flex: 1 !important;
overflow: hidden !important;
}
.xb-tile-name {
display: block !important;
font-weight: 700 !important;
color: #fff !important;
font-size: 0.95rem !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.xb-tile-meta {
display: block !important;
font-size: 0.8rem !important;
color: #888 !important;
}
.xb-tile-toggle {
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
border: none !important;
font-size: 1.1rem !important;
cursor: pointer !important;
transition: all 0.2s !important;
flex-shrink: 0 !important;
}
.xb-tile-toggle.public {
background: linear-gradient(135deg, #27ae60, #1e8449) !important;
}
.xb-tile-toggle.private {
background: linear-gradient(135deg, #555, #444) !important;
}
.xb-tile-toggle:hover {
transform: scale(1.1) !important;
}
.xb-empty-builds {
text-align: center !important;
padding: 40px 20px !important;
color: #888 !important;
}
.xb-empty-builds p {
margin: 0 0 20px 0 !important;
font-size: 1.1rem !important;
}
/* ============================================
RESPONSIVE PROFIL
============================================ */
@media (max-width: 1000px) {
.xb-profile-layout {
grid-template-columns: 1fr !important;
}
.xb-stats-grid {
grid-template-columns: repeat(4, 1fr) !important;
}
.xb-profile-actions-row {
flex-wrap: wrap !important;
}
}
@media (max-width: 700px) {
.xb-stats-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.xb-builds-grid {
grid-template-columns: 1fr !important;
}
.xb-manager-header {
flex-direction: column !important;
gap: 15px !important;
}
}
/* ============================================
RESPONSIVE CARTES MODALES
============================================ */
@media (max-width: 1200px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 900px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(2, 1fr) !important;
}
#xb-modal .xb-modal-box {
width: 95vw !important;
}
}
@media (max-width: 600px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: 1fr !important;
}
.xb-item {
flex-direction: column !important;
text-align: center !important;
}
.xb-item-left {
width: 100% !important;
flex-direction: row !important;
justify-content: center !important;
}
.xb-item-lvl-box {
position: static !important;
margin-left: 10px !important;
}
.xb-item-name {
margin-right: 0 !important;
}
}
/* ================================================================
V87.17 - MODAL 4 CARTES + STATS LIGNES + PROFIL TEXTES AGRANDIS
================================================================ */
/* ============================================
MODAL ÉLARGIE POUR 4 CARTES SANS SCROLL
============================================ */
#xb-modal .xb-modal-box {
max-width: 98vw !important;
width: 1600px !important;
max-height: 95vh !important;
}
/* Zone de filtres compacte */
.xb-modal-filters {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
padding: 10px 15px !important;
background: rgba(0, 0, 0, 0.4) !important;
border-radius: 8px !important;
margin-bottom: 10px !important;
}
.xb-search {
padding: 10px 15px !important;
font-size: 0.95rem !important;
margin-bottom: 10px !important;
}
.xb-filter-btns {
gap: 6px !important;
margin-bottom: 8px !important;
}
.xb-filter-btn {
padding: 6px 12px !important;
font-size: 0.85rem !important;
}
.xb-stat-filters {
gap: 4px !important;
margin-bottom: 8px !important;
}
.xb-stat-filter-btn {
padding: 4px 8px !important;
font-size: 0.75rem !important;
}
/* ============================================
GRILLE 4 COLONNES SANS SCROLL
============================================ */
.xb-items-grid.xb-grid-cards {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 10px !important;
overflow-y: auto !important;
padding: 10px !important;
align-content: start !important;
background: #0a0a0f !important;
max-height: calc(95vh - 200px) !important;
}
/* CARTE ITEM - Image agrandie, fond transparent */
.xb-item {
background: linear-gradient(145deg, #1a1a1a, #111) !important;
border: 1px solid #333 !important;
border-radius: 8px !important;
transition: all 0.2s ease !important;
position: relative !important;
padding: 10px !important;
cursor: pointer !important;
display: flex !important;
gap: 10px !important;
min-height: auto !important;
align-items: flex-start !important;
}
.xb-item:hover {
border-color: var(--gold) !important;
background: #222 !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
z-index: 5 !important;
}
/* Image agrandie sans fond */
.xb-item-left {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 85px !important;
flex-shrink: 0 !important;
gap: 6px !important;
}
.xb-item-img {
width: 80px !important;
height: 80px !important;
object-fit: contain !important;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) !important;
background: none !important;
}
.xb-btn-add-set {
width: 100% !important;
text-align: center !important;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.15)) !important;
border: 1px solid var(--gold) !important;
color: var(--gold) !important;
padding: 4px 3px !important;
font-size: 0.65rem !important;
font-weight: 800 !important;
text-transform: uppercase !important;
border-radius: 5px !important;
cursor: pointer !important;
transition: all 0.2s !important;
}
/* Niveau compact */
.xb-item-lvl-box {
position: absolute !important;
top: 6px !important;
right: 6px !important;
font-family: 'Cinzel', serif !important;
font-weight: 900 !important;
font-size: 0.9rem !important;
color: var(--gold) !important;
border: 2px solid var(--gold) !important;
padding: 2px 6px !important;
border-radius: 5px !important;
background: #000 !important;
line-height: 1 !important;
box-shadow: 0 0 8px rgba(212, 175, 55, 0.3) !important;
}
/* Nom compact */
.xb-item-name {
font-family: 'Cinzel', serif !important;
font-weight: 700 !important;
font-size: 0.85rem !important;
color: white !important;
margin-right: 45px !important;
line-height: 1.2 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), transparent) !important;
padding: 5px 8px !important;
border-radius: 5px !important;
border-left: 2px solid var(--gold) !important;
}
/* Panoplie compact */
.xb-item-set {
font-size: 0.75rem !important;
color: var(--gold) !important;
font-weight: 700 !important;
text-align: center !important;
background: rgba(212, 175, 55, 0.1) !important;
padding: 3px 6px !important;
border-radius: 4px !important;
border: 1px solid rgba(212, 175, 55, 0.2) !important;
}
/* ============================================
STATS EN LIGNES (1 PAR LIGNE)
============================================ */
.xb-item-stats-list {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
max-height: 120px !important;
overflow-y: auto !important;
padding-right: 3px !important;
}
.xb-item-stat-line {
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
padding: 2px 4px !important;
background: rgba(255, 255, 255, 0.03) !important;
border-radius: 3px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.xb-item-stat-line img {
width: 14px !important;
height: 14px !important;
object-fit: contain !important;
flex-shrink: 0 !important;
}
.xb-item-stat-line span {
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* ============================================
BUILDS - # SÉPARÉ DU NOM
============================================ */
.xb-card-header-row {
display: flex !important;
align-items: center !important;
gap: 15px !important;
padding: 15px !important;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), transparent) !important;
border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
}
.xb-card-number {
font-family: 'Cinzel', serif !important;
font-size: 1.8rem !important;
font-weight: 900 !important;
color: var(--gold) !important;
text-shadow: 0 2px 10px rgba(212, 175, 55, 0.5) !important;
flex-shrink: 0 !important;
min-width: 50px !important;
}
.xb-card-title-center {
flex: 1 !important;
text-align: left !important;
}
.xb-card-name-big {
font-family: 'Cinzel', serif !important;
font-size: 1.4rem !important;
font-weight: 800 !important;
color: #fff !important;
margin: 0 0 4px 0 !important;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
}
.xb-card-class-name {
font-size: 0.95rem !important;
color: #888 !important;
font-weight: 600 !important;
}
/* ============================================
TAGS AVEC CONTOUR
============================================ */
.xb-card-tag {
border: 2px solid rgba(255, 255, 255, 0.5) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
padding: 4px 10px !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
}
/* Tags filtres en haut (sticky) */
.xb-builds-tags-bar .xb-tag-filter {
border: 2px solid rgba(255, 255, 255, 0.4) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}
.xb-builds-tags-bar .xb-tag-filter.active {
border-color: #fff !important;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
}
/* ============================================
INFOBULLES UNIFORMES
============================================ */
.xb-tip-effect,
.xb-tip-stat {
font-size: 0.9rem !important;
line-height: 1.4 !important;
padding: 3px 0 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.xb-tip-effects {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
.xb-build-tooltip .xb-tip-effect {
font-size: 0.85rem !important;
padding: 2px 0 !important;
}
/* ============================================
PROFIL - TEXTES AGRANDIS
============================================ */
.xb-profile-layout {
display: grid !important;
grid-template-columns: 380px 1fr !important;
gap: 30px !important;
padding: 25px !important;
max-width: 1500px !important;
margin: 0 auto !important;
}
.xb-profile-name {
font-family: 'Cinzel', serif !important;
font-size: 2.4rem !important;
font-weight: 900 !important;
color: #fff !important;
margin: 0 0 8px 0 !important;
text-shadow: 0 3px 15px rgba(0, 0, 0, 0.5) !important;
}
.xb-profile-username {
font-size: 1.2rem !important;
color: #888 !important;
margin: 0 0 20px 0 !important;
}
.xb-stat-val {
display: block !important;
font-family: 'Cinzel', serif !important;
font-size: 2.8rem !important;
font-weight: 900 !important;
color: #d4af37 !important;
line-height: 1 !important;
}
.xb-stat-lbl {
display: block !important;
font-size: 1rem !important;
color: #888 !important;
margin-top: 8px !important;
font-weight: 600 !important;
}
.xb-card-title {
font-family: 'Cinzel', serif !important;
font-size: 1.4rem !important;
color: #d4af37 !important;
margin: 0 0 18px 0 !important;
}
.xb-class-name {
font-weight: 800 !important;
color: #fff !important;
font-size: 1.1rem !important;
}
.xb-tile-name {
font-weight: 800 !important;
font-size: 1.1rem !important;
}
.xb-tile-meta {
font-size: 0.9rem !important;
}
.xb-manager-header h2 {
font-size: 1.5rem !important;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1400px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 1100px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(2, 1fr) !important;
}
.xb-profile-layout {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 700px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: 1fr !important;
}
.xb-card-number {
font-size: 1.4rem !important;
}
.xb-card-name-big {
font-size: 1.1rem !important;
}
}
/* ============================================
PAGE PUBLIQUE - PROFIL
============================================ */
.xb-public-page-card {
background: linear-gradient(135deg, rgba(39, 174, 96, 0.1), rgba(0, 0, 0, 0.3)) !important;
border-color: rgba(39, 174, 96, 0.3) !important;
}
.xb-public-desc {
color: #aaa !important;
font-size: 0.95rem !important;
margin: 0 0 20px 0 !important;
line-height: 1.5 !important;
}
.xb-public-link {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 15px 20px !important;
background: rgba(0, 0, 0, 0.4) !important;
border-radius: 12px !important;
border: 1px solid rgba(39, 174, 96, 0.3) !important;
text-decoration: none !important;
margin-bottom: 20px !important;
transition: all 0.2s !important;
}
.xb-public-link:hover {
background: rgba(39, 174, 96, 0.1) !important;
border-color: #27ae60 !important;
transform: translateY(-2px) !important;
}
.xb-link-icon {
font-size: 1.5rem !important;
}
.xb-link-url {
color: #27ae60 !important;
font-weight: 700 !important;
font-size: 1.1rem !important;
}
.xb-public-actions {
display: flex !important;
gap: 12px !important;
}
.xb-act-btn.gold {
background: linear-gradient(135deg, #d4af37, #b8860b) !important;
color: #000 !important;
border: none !important;
font-weight: 800 !important;
}
.xb-act-btn.gold:hover {
box-shadow: 0 5px 20px rgba(212, 175, 55, 0.4) !important;
}
/* ============================================
SUPPRIMER DUPLICATIONS PROFIL
============================================ */
.xb-profile-card .xb-profile-avatar {
margin: 0 auto 20px !important;
}
.xb-profile-card .xb-avatar-emoji {
font-size: 3rem !important;
}
/* ================================================================
V87.17 FINAL - CORRECTIONS COMPLÈTES
================================================================ */
/* ============================================
FILTRES COMPACTS DANS MODALE
============================================ */
.xb-modal-controls {
padding: 8px 12px !important;
gap: 8px !important;
background: rgba(0, 0, 0, 0.5) !important;
margin-bottom: 8px !important;
border-radius: 8px !important;
}
.xb-search {
padding: 8px 12px !important;
font-size: 0.9rem !important;
margin-bottom: 8px !important;
background: #111 !important;
border-radius: 6px !important;
}
.xb-filter-btns {
gap: 4px !important;
margin-bottom: 6px !important;
flex-wrap: wrap !important;
}
.xb-filter-btn {
padding: 5px 10px !important;
font-size: 0.8rem !important;
border-radius: 4px !important;
}
.xb-stat-filters {
gap: 3px !important;
margin-bottom: 6px !important;
flex-wrap: wrap !important;
}
.xb-stat-filter-btn {
padding: 3px 6px !important;
font-size: 0.7rem !important;
}
.xb-level-filter {
padding: 6px !important;
gap: 6px !important;
}
.xb-level-filter input {
padding: 4px 8px !important;
font-size: 0.85rem !important;
width: 60px !important;
}
/* Zone des filtres compacte */
.xb-modal-filters-wrap {
max-height: 100px !important;
overflow: hidden !important;
}
/* ============================================
TAGS AVEC CONTOUR (BARRE STICKY)
============================================ */
.xb-tags-filter .xb-filter-tag,
.xb-builds-tags-bar .xb-tag-filter {
border: 2px solid rgba(255, 255, 255, 0.4) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
padding: 6px 14px !important;
font-weight: 800 !important;
backdrop-filter: blur(4px) !important;
}
.xb-tags-filter .xb-filter-tag.active,
.xb-builds-tags-bar .xb-tag-filter.active {
border-color: #fff !important;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 0 3px 10px rgba(0, 0, 0, 0.5) !important;
transform: scale(1.05) !important;
}
.xb-tags-filter .xb-filter-tag:hover,
.xb-builds-tags-bar .xb-tag-filter:hover {
border-color: rgba(255, 255, 255, 0.7) !important;
transform: translateY(-2px) !important;
}
/* ============================================
TOOLTIPS UNIFORMES
============================================ */
.xb-tip-effects {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
}
.xb-tip-effect {
font-size: 0.9rem !important;
line-height: 1.35 !important;
padding: 3px 0 !important;
display: block !important;
white-space: nowrap !important;
}
.xb-build-tooltip .xb-tip-effect,
.xb-slot-tooltip .xb-tip-effect,
.xb-tip-content .xb-tip-effect {
font-size: 0.88rem !important;
line-height: 1.35 !important;
padding: 2px 0 !important;
}
/* Header tooltip */
.xb-tip-header,
.xb-tip-name {
font-family: 'Cinzel', serif !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
margin-bottom: 8px !important;
}
.xb-tip-level,
.xb-tip-lvl {
font-size: 0.85rem !important;
color: var(--gold) !important;
font-weight: 700 !important;
}
/* ============================================
BUILDS - # SÉPARÉ + NOM AGRANDI
============================================ */
.xb-card-header-row {
display: flex !important;
align-items: center !important;
gap: 15px !important;
padding: 18px 20px !important;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(0, 0, 0, 0.3)) !important;
border-bottom: 2px solid rgba(212, 175, 55, 0.3) !important;
}
.xb-card-number {
font-family: 'Cinzel', serif !important;
font-size: 2rem !important;
font-weight: 900 !important;
color: var(--gold) !important;
text-shadow: 0 3px 12px rgba(212, 175, 55, 0.6) !important;
flex-shrink: 0 !important;
min-width: 55px !important;
background: rgba(0, 0, 0, 0.4) !important;
padding: 8px 12px !important;
border-radius: 8px !important;
border: 2px solid rgba(212, 175, 55, 0.4) !important;
}
.xb-card-title-center {
flex: 1 !important;
text-align: left !important;
}
.xb-card-name-big {
font-family: 'Cinzel', serif !important;
font-size: 1.6rem !important;
font-weight: 900 !important;
color: #fff !important;
margin: 0 0 6px 0 !important;
text-shadow: 0 3px 8px rgba(0, 0, 0, 0.6) !important;
letter-spacing: 0.5px !important;
}
.xb-card-class-name {
font-size: 1.05rem !important;
color: #999 !important;
font-weight: 700 !important;
}
.xb-card-level-badge {
font-family: 'Cinzel', serif !important;
font-size: 1.3rem !important;
font-weight: 900 !important;
color: var(--gold) !important;
background: rgba(0, 0, 0, 0.5) !important;
padding: 10px 18px !important;
border-radius: 10px !important;
border: 2px solid var(--gold) !important;
box-shadow: 0 0 20px rgba(212, 175, 55, 0.3) !important;
}
/* ============================================
CARTES TAGS DANS FOOTER
============================================ */
.xb-card-tag {
border: 2px solid rgba(255, 255, 255, 0.5) !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
padding: 5px 12px !important;
font-size: 0.9rem !important;
font-weight: 800 !important;
border-radius: 6px !important;
}
/* ============================================
PROFIL - TEXTES ENCORE PLUS GRANDS
============================================ */
.xb-profile-name {
font-size: 2.8rem !important;
}
.xb-profile-username {
font-size: 1.3rem !important;
}
.xb-stat-val {
font-size: 3.2rem !important;
}
.xb-stat-lbl {
font-size: 1.1rem !important;
}
.xb-card-title {
font-size: 1.5rem !important;
}
.xb-class-name {
font-size: 1.2rem !important;
}
.xb-tile-name {
font-size: 1.15rem !important;
}
.xb-manager-header h2 {
font-size: 1.6rem !important;
}
/* ============================================
MODAL - IMAGE AGRANDIE + STATS EN LIGNE
============================================ */
.xb-item-img {
width: 85px !important;
height: 85px !important;
background: none !important;
border: none !important;
filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.6)) !important;
}
.xb-item-left {
width: 90px !important;
}
/* Stats 1 par ligne */
.xb-item-stats-list {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
max-height: 130px !important;
overflow-y: auto !important;
padding-right: 4px !important;
scrollbar-width: thin !important;
}
.xb-item-stat-line {
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
padding: 2px 5px !important;
background: rgba(255, 255, 255, 0.04) !important;
border-radius: 4px !important;
white-space: nowrap !important;
}
.xb-item-stat-line img {
width: 15px !important;
height: 15px !important;
flex-shrink: 0 !important;
}
/* ============================================
RESPONSIVE AJUSTEMENTS
============================================ */
@media (max-width: 900px) {
.xb-card-number {
font-size: 1.5rem !important;
padding: 6px 10px !important;
}
.xb-card-name-big {
font-size: 1.2rem !important;
}
.xb-profile-name {
font-size: 2rem !important;
}
.xb-stat-val {
font-size: 2.2rem !important;
}
}
/* ================================================================
V87.18 - CORRECTIONS COMPLÈTES
================================================================ */
/* ============================================
STATISTIQUES EN OR - TAILLE RÉDUITE
============================================ */
.xb-stat-row .xb-stat-val,
.xb-stat-value,
.xb-stat-total {
font-size: 1.1rem !important;
}
.xb-stat-row {
font-size: 0.9rem !important;
}
/* ============================================
BUILDER - ÉLARGI DE 15%
============================================ */
.xb-wrapper {
max-width: 2100px !important;
}
.xb-col-stats {
width: 500px !important;
min-width: 500px !important;
}
.xb-workspace {
gap: 25px !important;
}
/* ============================================
MODAL - 4 CARTES VISIBLES SANS SCROLL
============================================ */
#xb-modal .xb-modal-box {
max-width: 96vw !important;
width: 1750px !important;
max-height: 92vh !important;
}
/* Barre de recherche réduite + niveau à droite */
.xb-modal-search-row {
display: flex !important;
align-items: center !important;
gap: 15px !important;
padding: 10px 15px !important;
background: rgba(0, 0, 0, 0.4) !important;
border-radius: 8px !important;
margin-bottom: 10px !important;
}
.xb-search {
flex: 1 !important;
max-width: 400px !important;
padding: 8px 12px !important;
font-size: 0.9rem !important;
margin: 0 !important;
}
.xb-level-filter {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-left: auto !important;
padding: 0 !important;
background: none !important;
border: none !important;
}
.xb-level-filter label {
font-size: 0.85rem !important;
color: #888 !important;
white-space: nowrap !important;
}
.xb-level-filter input {
width: 55px !important;
padding: 6px 8px !important;
font-size: 0.85rem !important;
background: #111 !important;
border: 1px solid #444 !important;
border-radius: 4px !important;
color: var(--gold) !important;
text-align: center !important;
}
/* Filtres compacts sur 1 ligne */
.xb-modal-filters-compact {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
padding: 8px 10px !important;
background: rgba(0, 0, 0, 0.3) !important;
border-radius: 6px !important;
margin-bottom: 8px !important;
}
.xb-filter-btns {
display: flex !important;
flex-wrap: wrap !important;
gap: 4px !important;
margin: 0 !important;
}
.xb-filter-btn {
padding: 4px 8px !important;
font-size: 0.75rem !important;
}
.xb-stat-filters,
.xb-stat-filter-bar {
gap: 3px !important;
}
.xb-stat-filter-btn {
padding: 3px 5px !important;
width: 26px !important;
height: 26px !important;
}
.xb-stat-filter-btn img {
width: 16px !important;
height: 16px !important;
}
/* Grille 4 colonnes */
.xb-items-grid.xb-grid-cards {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px !important;
padding: 12px !important;
max-height: calc(92vh - 180px) !important;
overflow-y: auto !important;
}
/* Carte item - Stats agrandies */
.xb-item {
padding: 10px !important;
gap: 10px !important;
}
.xb-item-stat-line {
font-size: 0.88rem !important;
font-weight: 700 !important;
padding: 3px 5px !important;
}
.xb-item-stat-line img {
width: 16px !important;
height: 16px !important;
}
.xb-item-stats-list {
max-height: 140px !important;
gap: 3px !important;
}
/* ============================================
TAGS - CONTOUR PERMANENT
============================================ */
.xb-card-tag,
.xb-filter-tag,
.xb-tag-filter,
.xb-build-tag {
border: 2px solid rgba(255, 255, 255, 0.5) !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}
.xb-card-tag:hover,
.xb-filter-tag:hover,
.xb-tag-filter:hover,
.xb-build-tag:hover {
border-color: #fff !important;
transform: scale(1.05) !important;
}
.xb-filter-tag.active,
.xb-tag-filter.active {
border-color: #fff !important;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 0 3px 10px rgba(0, 0, 0, 0.5) !important;
}
/* ============================================
INFOBULLES - TEXTES AGRANDIS
============================================ */
.xb-tip-effect,
.xb-tip-stat {
font-size: 1rem !important;
line-height: 1.4 !important;
padding: 4px 0 !important;
}
.xb-build-tooltip .xb-tip-effect {
font-size: 0.95rem !important;
}
.xb-tip-name,
.xb-tip-header {
font-size: 1.15rem !important;
font-weight: 800 !important;
}
.xb-tip-level,
.xb-tip-lvl {
font-size: 0.95rem !important;
}
/* ============================================
PROFIL - LAYOUT EN LARGEUR
============================================ */
.xb-profile-layout {
display: grid !important;
grid-template-columns: 320px 1fr !important;
gap: 20px !important;
padding: 20px !important;
max-width: 100% !important;
}
.xb-profile-left {
gap: 15px !important;
}
.xb-profile-card {
padding: 20px !important;
}
/* Stats en ligne horizontale */
.xb-stats-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 10px !important;
}
.xb-stat-box {
padding: 15px 10px !important;
}
.xb-stat-val {
font-size: 2.2rem !important;
}
.xb-stat-lbl {
font-size: 0.9rem !important;
}
/* Builds grid plus dense */
.xb-builds-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
gap: 10px !important;
max-height: 60vh !important;
overflow-y: auto !important;
}
.xb-build-tile {
padding: 10px 12px !important;
gap: 10px !important;
}
.xb-tile-icon {
width: 35px !important;
height: 35px !important;
}
.xb-tile-name {
font-size: 1rem !important;
}
.xb-tile-meta {
font-size: 0.8rem !important;
}
.xb-tile-toggle {
width: 32px !important;
height: 32px !important;
font-size: 1rem !important;
}
/* Page publique card plus compacte */
.xb-public-page-card {
padding: 18px !important;
}
.xb-public-desc {
font-size: 0.9rem !important;
margin-bottom: 15px !important;
}
.xb-public-link {
padding: 12px 15px !important;
margin-bottom: 15px !important;
}
.xb-public-actions {
gap: 10px !important;
}
.xb-act-btn {
padding: 10px 12px !important;
font-size: 0.8rem !important;
}
/* Classes favorites compact */
.xb-class-row {
padding: 6px !important;
}
.xb-class-icon {
width: 25px !important;
height: 25px !important;
}
.xb-class-name {
font-size: 0.95rem !important;
}
/* ============================================
PERSONNAGES - CARTES CORRIGÉES
============================================ */
.xb-char-card,
button.xb-char-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 15px !important;
background: linear-gradient(145deg, #1a1a2e, #0f0f1a) !important;
border: 2px solid #333 !important;
border-radius: 12px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
width: 100% !important;
max-width: 180px !important;
min-height: 200px !important;
text-align: center !important;
}
.xb-char-card:hover,
button.xb-char-card:hover {
border-color: var(--gold) !important;
transform: translateY(-5px) !important;
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3) !important;
}
.xb-char-card img,
button.xb-char-card img {
width: 80px !important;
height: 80px !important;
object-fit: contain !important;
margin-bottom: 10px !important;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) !important;
}
.xb-char-card .xb-char-name,
button.xb-char-card .xb-char-name {
font-family: 'Cinzel', serif !important;
font-size: 1rem !important;
font-weight: 700 !important;
color: #fff !important;
margin-bottom: 5px !important;
}
.xb-char-card .xb-char-class,
button.xb-char-card .xb-char-class {
font-size: 0.85rem !important;
color: #888 !important;
}
.xb-char-card .xb-char-level,
button.xb-char-card .xb-char-level {
font-size: 0.9rem !important;
color: var(--gold) !important;
font-weight: 700 !important;
}
/* Grid personnages */
.xb-chars-grid,
.xb-welcome-chars {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
gap: 15px !important;
padding: 15px !important;
justify-items: center !important;
}
/* ============================================
RESPONSIVE AJUSTEMENTS
============================================ */
@media (max-width: 1600px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(3, 1fr) !important;
}
#xb-modal .xb-modal-box {
width: 95vw !important;
}
}
@media (max-width: 1200px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(2, 1fr) !important;
}
.xb-profile-layout {
grid-template-columns: 1fr !important;
}
.xb-col-stats {
width: 100% !important;
min-width: auto !important;
}
}
@media (max-width: 800px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: 1fr !important;
}
.xb-stats-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* ============================================
PROFIL - NOUVEAU LAYOUT HORIZONTAL
============================================ */
.xb-profile-wide {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
padding: 15px !important;
}
/* Bandeau profil en haut */
.xb-profile-banner {
display: flex !important;
align-items: center !important;
gap: 30px !important;
padding: 20px 25px !important;
background: linear-gradient(135deg, #1a1428, #0d0a15) !important;
border: 1px solid rgba(212, 175, 55, 0.3) !important;
border-radius: 16px !important;
flex-wrap: wrap !important;
}
.xb-banner-left {
display: flex !important;
align-items: center !important;
gap: 15px !important;
}
.xb-profile-avatar {
width: 70px !important;
height: 70px !important;
background: linear-gradient(135deg, #d4af37, #b8860b) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 5px 20px rgba(212, 175, 55, 0.4) !important;
}
.xb-profile-avatar span {
font-size: 2.2rem !important;
}
.xb-banner-info {
display: flex !important;
flex-direction: column !important;
}
.xb-profile-name {
font-family: 'Cinzel', serif !important;
font-size: 1.8rem !important;
font-weight: 900 !important;
color: #fff !important;
margin: 0 !important;
}
.xb-profile-username {
font-size: 1rem !important;
color: #888 !important;
margin: 0 !important;
}
/* Stats dans le bandeau */
.xb-banner-stats {
display: flex !important;
gap: 20px !important;
margin-left: auto !important;
}
.xb-bstat {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 10px 20px !important;
background: rgba(0, 0, 0, 0.3) !important;
border-radius: 10px !important;
border: 1px solid #333 !important;
min-width: 80px !important;
}
.xb-bstat.green {
border-color: #27ae60 !important;
background: rgba(39, 174, 96, 0.1) !important;
}
.xb-bstat.green .xb-bstat-val { color: #27ae60 !important; }
.xb-bstat.red {
border-color: #e74c3c !important;
background: rgba(231, 76, 60, 0.1) !important;
}
.xb-bstat.red .xb-bstat-val { color: #e74c3c !important; }
.xb-bstat-val {
font-family: 'Cinzel', serif !important;
font-size: 1.8rem !important;
font-weight: 900 !important;
color: var(--gold) !important;
}
.xb-bstat-lbl {
font-size: 0.8rem !important;
color: #888 !important;
}
.xb-banner-actions {
display: flex !important;
gap: 10px !important;
}
.xb-btn-edit,
.xb-btn-share {
padding: 10px 18px !important;
border-radius: 8px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: all 0.2s !important;
border: none !important;
}
.xb-btn-edit {
background: linear-gradient(135deg, #d4af37, #b8860b) !important;
color: #000 !important;
}
.xb-btn-share {
background: #333 !important;
color: #fff !important;
border: 1px solid #555 !important;
}
.xb-btn-edit:hover,
.xb-btn-share:hover {
transform: translateY(-2px) !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}
/* 3 colonnes */
.xb-profile-cols {
display: grid !important;
grid-template-columns: 300px 1fr 250px !important;
gap: 20px !important;
}
.xb-pcol {
background: linear-gradient(145deg, #1a1428, #0d0a15) !important;
border: 1px solid rgba(212, 175, 55, 0.2) !important;
border-radius: 12px !important;
overflow: hidden !important;
}
.xb-pcol-head {
padding: 12px 15px !important;
font-family: 'Cinzel', serif !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
color: var(--gold) !important;
background: rgba(0, 0, 0, 0.3) !important;
border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
/* Colonne Page Publique */
.xb-pcol-page {
display: flex !important;
flex-direction: column !important;
}
.xb-page-preview {
padding: 15px !important;
}
.xb-page-link {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 15px !important;
background: rgba(39, 174, 96, 0.1) !important;
border: 1px solid rgba(39, 174, 96, 0.3) !important;
border-radius: 10px !important;
text-decoration: none !important;
margin-bottom: 12px !important;
transition: all 0.2s !important;
}
.xb-page-link:hover {
background: rgba(39, 174, 96, 0.2) !important;
transform: translateY(-2px) !important;
}
.xb-page-icon {
font-size: 1.3rem !important;
}
.xb-page-link span:last-child {
color: #27ae60 !important;
font-weight: 700 !important;
font-size: 0.95rem !important;
}
.xb-page-desc {
color: #888 !important;
font-size: 0.85rem !important;
line-height: 1.4 !important;
margin: 0 0 12px 0 !important;
}
.xb-page-btns {
display: flex !important;
gap: 8px !important;
}
.xb-pbtn {
flex: 1 !important;
padding: 8px 10px !important;
background: #333 !important;
border: 1px solid #444 !important;
color: #fff !important;
border-radius: 6px !important;
font-weight: 700 !important;
font-size: 0.8rem !important;
cursor: pointer !important;
transition: all 0.2s !important;
text-decoration: none !important;
text-align: center !important;
}
.xb-pbtn.gold {
background: linear-gradient(135deg, #d4af37, #b8860b) !important;
color: #000 !important;
border: none !important;
}
.xb-pbtn:hover {
transform: translateY(-2px) !important;
}
/* Classes favorites */
.xb-fav-classes {
padding: 10px 15px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.xb-fav-class {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 6px 8px !important;
background: rgba(0, 0, 0, 0.3) !important;
border-radius: 6px !important;
}
.xb-fc-medal {
font-size: 1rem !important;
width: 22px !important;
}
.xb-fav-class img {
width: 24px !important;
height: 24px !important;
object-fit: contain !important;
}
.xb-fc-name {
flex: 1 !important;
font-weight: 700 !important;
font-size: 0.9rem !important;
}
.xb-fc-bar {
width: 60px !important;
height: 5px !important;
background: #333 !important;
border-radius: 3px !important;
overflow: hidden !important;
}
.xb-fc-bar > div {
height: 100% !important;
background: linear-gradient(90deg, #d4af37, #f1c40f) !important;
}
.xb-fc-pct {
width: 35px !important;
text-align: right !important;
font-size: 0.8rem !important;
color: #888 !important;
}
/* Colonne Builds */
.xb-pcol-builds {
display: flex !important;
flex-direction: column !important;
max-height: 500px !important;
}
.xb-bulk-btns {
display: flex !important;
gap: 8px !important;
}
.xb-bulk {
padding: 6px 12px !important;
background: #333 !important;
border: 1px solid #444 !important;
color: #aaa !important;
border-radius: 6px !important;
font-weight: 700 !important;
font-size: 0.75rem !important;
cursor: pointer !important;
transition: all 0.2s !important;
}
.xb-bulk.green {
background: linear-gradient(135deg, #27ae60, #1e8449) !important;
border-color: #27ae60 !important;
color: #fff !important;
}
.xb-bulk:hover {
transform: scale(1.05) !important;
}
.xb-builds-list {
flex: 1 !important;
overflow-y: auto !important;
padding: 10px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
/* Colonne Actions */
.xb-pcol-actions {
display: flex !important;
flex-direction: column !important;
}
.xb-quick-actions {
padding: 15px !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.xb-qaction {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 15px !important;
background: rgba(0, 0, 0, 0.3) !important;
border: 1px solid #333 !important;
border-radius: 10px !important;
cursor: pointer !important;
transition: all 0.2s !important;
}
.xb-qaction:hover {
background: rgba(212, 175, 55, 0.1) !important;
border-color: var(--gold) !important;
transform: translateX(5px) !important;
}
.xb-qa-icon {
font-size: 1.5rem !important;
}
.xb-qa-text {
font-weight: 700 !important;
color: #fff !important;
font-size: 0.95rem !important;
}
/* Responsive profil */
@media (max-width: 1200px) {
.xb-profile-cols {
grid-template-columns: 1fr 1fr !important;
}
.xb-pcol-actions {
grid-column: span 2 !important;
}
.xb-quick-actions {
flex-direction: row !important;
flex-wrap: wrap !important;
}
.xb-qaction {
flex: 1 !important;
min-width: 200px !important;
}
}
@media (max-width: 900px) {
.xb-profile-cols {
grid-template-columns: 1fr !important;
}
.xb-pcol-actions {
grid-column: span 1 !important;
}
.xb-banner-stats {
margin: 0 !important;
flex-wrap: wrap !important;
}
.xb-profile-banner {
justify-content: center !important;
text-align: center !important;
}
.xb-banner-left {
flex-direction: column !important;
}
}
/* ================================================================
V87.19 - COLONNES AJUSTÉES + STATS AGRANDIES + PROFIL PUBLIC
================================================================ */
/* ============================================
COLONNES BUILDER RÉAJUSTÉES
============================================ */
.xb-col-doll {
flex: 1.5 !important; /* Réduit de 15% (était 1.8) */
max-width: 380px !important;
}
.xb-col-stats {
width: 560px !important;
min-width: 560px !important;
flex-shrink: 0 !important;
}
.mode-build .xb-col-doll {
flex: 2.5 !important;
}
/* ============================================
STATISTIQUES AGRANDIES
============================================ */
.xb-stat-row {
font-size: 1rem !important;
padding: 8px 18px !important;
}
.xb-stat-row .xb-stat-label {
font-size: 1rem !important;
font-weight: 600 !important;
}
.xb-stat-row .xb-stat-val,
.xb-stat-value {
font-size: 1.25rem !important;
font-weight: 800 !important;
font-family: 'Cinzel', serif !important;
}
.xb-stat-total {
font-size: 1.3rem !important;
font-weight: 900 !important;
}
/* Input stats base */
.xb-stat-row input[type="number"] {
font-size: 1.1rem !important;
padding: 6px 10px !important;
width: 70px !important;
}
/* Stats header */
.xb-stats-head {
padding: 18px !important;
}
/* Scrolls et bonus */
.xb-scroll-val,
.xb-bonus-val {
font-size: 1.1rem !important;
font-weight: 700 !important;
}
/* Section titre */
.xb-stats-section-title {
font-size: 1.1rem !important;
padding: 12px 18px !important;
}
/* Totaux en bas */
.xb-stats-total {
font-size: 1.2rem !important;
padding: 15px 20px !important;
}
.xb-stats-total .xb-total-label {
font-size: 1rem !important;
}
.xb-stats-total .xb-total-val {
font-size: 1.4rem !important;
font-weight: 900 !important;
}
/* ============================================
PROFIL - INTÉGRATION PAGE PUBLIQUE
============================================ */
/* Onglets profil */
.xb-profile-tabs {
display: flex !important;
gap: 0 !important;
margin-bottom: 20px !important;
border-bottom: 2px solid rgba(212, 175, 55, 0.3) !important;
}
.xb-profile-tab {
padding: 12px 25px !important;
background: transparent !important;
border: none !important;
color: #888 !important;
font-weight: 700 !important;
font-size: 1rem !important;
cursor: pointer !important;
transition: all 0.2s !important;
border-bottom: 3px solid transparent !important;
margin-bottom: -2px !important;
}
.xb-profile-tab:hover {
color: #fff !important;
}
.xb-profile-tab.active {
color: var(--gold) !important;
border-bottom-color: var(--gold) !important;
}
/* Contenu des onglets */
.xb-profile-tab-content {
display: none !important;
}
.xb-profile-tab-content.active {
display: block !important;
}
/* Iframe page publique */
.xb-public-profile-frame {
width: 100% !important;
min-height: 800px !important;
border: none !important;
border-radius: 12px !important;
background: #020617 !important;
}
/* Message de configuration */
.xb-public-config-msg {
padding: 30px !important;
text-align: center !important;
background: linear-gradient(145deg, #1a1428, #0d0a15) !important;
border: 1px solid rgba(212, 175, 55, 0.2) !important;
border-radius: 12px !important;
}
.xb-public-config-msg h3 {
font-family: 'Cinzel', serif !important;
font-size: 1.5rem !important;
color: var(--gold) !important;
margin: 0 0 15px 0 !important;
}
.xb-public-config-msg p {
color: #888 !important;
margin: 0 0 20px 0 !important;
line-height: 1.5 !important;
}
.xb-public-config-btn {
display: inline-block !important;
padding: 15px 30px !important;
background: linear-gradient(135deg, #d4af37, #b8860b) !important;
color: #000 !important;
text-decoration: none !important;
border-radius: 8px !important;
font-weight: 800 !important;
font-size: 1.1rem !important;
transition: all 0.2s !important;
}
.xb-public-config-btn:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4) !important;
}
/* ============================================
RESPONSIVE AJUSTEMENTS
============================================ */
@media (max-width: 1600px) {
.xb-col-stats {
width: 480px !important;
min-width: 480px !important;
}
.xb-col-doll {
max-width: 350px !important;
}
}
@media (max-width: 1400px) {
.xb-col-stats {
width: 420px !important;
min-width: 420px !important;
}
.xb-stat-row {
font-size: 0.95rem !important;
padding: 6px 15px !important;
}
.xb-stat-row .xb-stat-val {
font-size: 1.1rem !important;
}
}
@media (max-width: 1200px) {
.xb-col-stats {
width: 100% !important;
min-width: auto !important;
}
.xb-col-doll {
max-width: 100% !important;
}
}
/* ================================================================
V87.19 FINAL - COLONNES + STATS + PROFIL ONGLETS + PAGE PUBLIQUE
================================================================ */
/* ============================================
COLONNES BUILDER - DOLL -15%, STATS +15%
============================================ */
.xb-col-doll {
flex: 1.3 !important; /* Réduit de 15% (était 1.5-1.8) */
max-width: 340px !important; /* Réduit de 380px */
}
.xb-col-stats {
width: 580px !important; /* Augmenté de 500px */
min-width: 580px !important;
flex-shrink: 0 !important;
}
.mode-build .xb-col-doll {
flex: 2 !important; /* Réduit */
}
/* ============================================
STATISTIQUES - TEXTES AGRANDIS
============================================ */
.xb-stat-row {
font-size: 1.05rem !important;
padding: 10px 20px !important;
}
.xb-stat-row .xb-stat-label {
font-size: 1.05rem !important;
font-weight: 700 !important;
}
.xb-stat-row .xb-stat-val,
.xb-stat-value {
font-size: 1.35rem !important;
font-weight: 900 !important;
font-family: 'Cinzel', serif !important;
}
.xb-stat-total {
font-size: 1.4rem !important;
}
.xb-stat-row input[type="number"] {
font-size: 1.15rem !important;
padding: 8px 12px !important;
width: 75px !important;
}
.xb-scroll-val,
.xb-bonus-val {
font-size: 1.15rem !important;
}
/* ============================================
PROFIL - ONGLETS DASHBOARD / MA PAGE
============================================ */
.xb-profile-container {
width: 100% !important;
}
.xb-profile-tabs {
display: flex !important;
gap: 0 !important;
margin-bottom: 0 !important;
border-bottom: 2px solid rgba(212, 175, 55, 0.3) !important;
background: rgba(0, 0, 0, 0.3) !important;
border-radius: 12px 12px 0 0 !important;
overflow: hidden !important;
}
.xb-profile-tab {
padding: 15px 30px !important;
background: transparent !important;
border: none !important;
color: #888 !important;
font-weight: 800 !important;
font-size: 1.1rem !important;
cursor: pointer !important;
transition: all 0.2s !important;
border-bottom: 3px solid transparent !important;
margin-bottom: -2px !important;
font-family: 'Cinzel', serif !important;
}
.xb-profile-tab:hover {
color: #fff !important;
background: rgba(212, 175, 55, 0.1) !important;
}
.xb-profile-tab.active {
color: var(--gold) !important;
border-bottom-color: var(--gold) !important;
background: rgba(212, 175, 55, 0.15) !important;
}
.xb-profile-tab-content {
display: none !important;
}
.xb-profile-tab-content.active {
display: block !important;
}
/* ============================================
ONGLET PAGE PUBLIQUE - IFRAME INTÉGRÉ
============================================ */
.xb-public-page-embed {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
background: #020617 !important;
border-radius: 0 0 12px 12px !important;
overflow: hidden !important;
}
.xb-public-toolbar {
display: flex !important;
gap: 20px !important;
padding: 15px 20px !important;
background: rgba(15, 23, 42, 0.95) !important;
border-bottom: 1px solid rgba(251, 191, 36, 0.3) !important;
}
.xb-public-open,
.xb-public-config {
padding: 10px 20px !important;
border-radius: 8px !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: all 0.2s !important;
}
.xb-public-open {
background: linear-gradient(135deg, #27ae60, #1e8449) !important;
color: #fff !important;
}
.xb-public-config {
background: linear-gradient(135deg, #d4af37, #b8860b) !important;
color: #000 !important;
}
.xb-public-open:hover,
.xb-public-config:hover {
transform: translateY(-2px) !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}
.xb-public-iframe {
width: 100% !important;
min-height: 800px !important;
height: calc(100vh - 300px) !important;
border: none !important;
background: #020617 !important;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1600px) {
.xb-col-stats {
width: 500px !important;
min-width: 500px !important;
}
.xb-col-doll {
max-width: 320px !important;
}
.xb-stat-row .xb-stat-val {
font-size: 1.2rem !important;
}
}
@media (max-width: 1400px) {
.xb-col-stats {
width: 450px !important;
min-width: 450px !important;
}
.xb-col-doll {
max-width: 300px !important;
}
.xb-stat-row {
font-size: 0.95rem !important;
padding: 8px 15px !important;
}
}
@media (max-width: 1200px) {
.xb-col-stats {
width: 100% !important;
min-width: auto !important;
}
.xb-col-doll {
max-width: 100% !important;
}
.xb-profile-tabs {
flex-wrap: wrap !important;
}
.xb-profile-tab {
flex: 1 !important;
text-align: center !important;
}
}
/* ================================================================
V87.20 - CORRECTIONS BUILDER + MODALES + TAGS + PERSONNAGES
================================================================ */
/* ============================================
BUILDER CENTRAL - AGRANDI DE 75%
============================================ */
.xb-col-doll {
flex: 2.3 !important; /* Augmenté de 75% (était 1.3) */
max-width: 550px !important; /* Augmenté de 340px */
min-width: 450px !important;
}
.mode-build .xb-col-doll {
flex: 3.5 !important;
}
/* Stats reste à 580px comme avant */
.xb-col-stats {
width: 580px !important;
min-width: 520px !important;
}
/* ============================================
MODALES - TEXTES AGRANDIS DANS LES CARTES
============================================ */
.xb-item-name {
font-size: 1rem !important;
font-weight: 800 !important;
line-height: 1.3 !important;
}
.xb-item-stat-line {
font-size: 0.95rem !important;
font-weight: 700 !important;
padding: 4px 6px !important;
}
.xb-item-stat-line img {
width: 18px !important;
height: 18px !important;
}
.xb-item-stats-list {
max-height: 160px !important;
gap: 4px !important;
}
.xb-item-lvl-box {
font-size: 1rem !important;
font-weight: 800 !important;
padding: 4px 10px !important;
}
/* Panoplie */
.xb-item-pano {
font-size: 0.9rem !important;
font-weight: 700 !important;
}
/* ============================================
BARRE DE RECHERCHE + TRI À DROITE
============================================ */
.xb-modal-search-row {
display: flex !important;
align-items: center !important;
gap: 15px !important;
padding: 12px 15px !important;
background: rgba(0, 0, 0, 0.4) !important;
border-radius: 8px !important;
margin-bottom: 10px !important;
}
.xb-search {
flex: 1 !important;
max-width: 350px !important;
padding: 10px 15px !important;
font-size: 1rem !important;
margin: 0 !important;
}
/* Sélecteur de tri à droite */
.xb-sort-select,
.xb-modal-sort {
margin-left: auto !important;
padding: 8px 12px !important;
background: #1a1a2e !important;
border: 1px solid #444 !important;
border-radius: 6px !important;
color: #fff !important;
font-size: 0.9rem !important;
min-width: 150px !important;
}
/* Niveau à côté du tri */
.xb-level-filter {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 0 !important;
background: none !important;
border: none !important;
}
.xb-level-filter label {
font-size: 0.85rem !important;
color: #888 !important;
white-space: nowrap !important;
}
.xb-level-filter input {
width: 55px !important;
padding: 6px 8px !important;
font-size: 0.9rem !important;
background: #111 !important;
border: 1px solid #444 !important;
border-radius: 4px !important;
color: var(--gold) !important;
text-align: center !important;
}
/* ============================================
TAGS TOOLBAR - ENCADREMENT
============================================ */
.xb-toolbar-tags,
.xb-builds-tags-bar {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
padding: 12px 15px !important;
background: rgba(0, 0, 0, 0.3) !important;
border-radius: 8px !important;
margin-bottom: 12px !important;
border: 1px solid rgba(212, 175, 55, 0.2) !important;
}
.xb-toolbar-tags .xb-tag-filter,
.xb-builds-tags-bar .xb-tag-filter,
.xb-filter-tag {
padding: 8px 14px !important;
border: 2px solid rgba(255, 255, 255, 0.4) !important;
border-radius: 20px !important;
font-size: 0.9rem !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
background: rgba(0, 0, 0, 0.4) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}
.xb-toolbar-tags .xb-tag-filter:hover,
.xb-builds-tags-bar .xb-tag-filter:hover,
.xb-filter-tag:hover {
border-color: rgba(255, 255, 255, 0.7) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
.xb-toolbar-tags .xb-tag-filter.active,
.xb-builds-tags-bar .xb-tag-filter.active,
.xb-filter-tag.active {
border-color: #fff !important;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
transform: scale(1.05) !important;
}
/* ============================================
PERSONNAGES - GRILLE 2x4 (8 persos)
============================================ */
.xb-chars-grid,
.xb-welcome-chars,
.xb-perso-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
grid-template-rows: repeat(4, 1fr) !important;
gap: 12px !important;
padding: 15px !important;
max-height: none !important;
width: 100% !important;
}
.xb-char-card,
button.xb-char-card {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 15px !important;
background: linear-gradient(145deg, #1a1a2e, #0f0f1a) !important;
border: 2px solid #333 !important;
border-radius: 10px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
width: 100% !important;
min-height: 70px !important;
text-align: left !important;
}
.xb-char-card:hover,
button.xb-char-card:hover {
border-color: var(--gold) !important;
transform: translateX(5px) !important;
box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3) !important;
}
.xb-char-card img,
button.xb-char-card img {
width: 50px !important;
height: 50px !important;
object-fit: contain !important;
flex-shrink: 0 !important;
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)) !important;
}
.xb-char-card .xb-char-info {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
.xb-char-card .xb-char-name,
button.xb-char-card .xb-char-name {
font-family: 'Cinzel', serif !important;
font-size: 1rem !important;
font-weight: 700 !important;
color: #fff !important;
margin: 0 !important;
}
.xb-char-card .xb-char-class,
button.xb-char-card .xb-char-class {
font-size: 0.85rem !important;
color: #888 !important;
margin: 0 !important;
}
.xb-char-card .xb-char-level,
button.xb-char-card .xb-char-level {
font-size: 0.9rem !important;
color: var(--gold) !important;
font-weight: 700 !important;
margin: 0 !important;
}
/* Carte "Nouveau personnage" */
.xb-char-card.xb-new-char,
button.xb-char-card.xb-new-char {
border-style: dashed !important;
border-color: #555 !important;
background: rgba(0, 0, 0, 0.3) !important;
justify-content: center !important;
}
.xb-char-card.xb-new-char:hover {
border-color: var(--gold) !important;
background: rgba(212, 175, 55, 0.1) !important;
}
/* ============================================
PROFIL - SECTIONS CONFIGURABLES
============================================ */
.xb-profile-sections {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
padding: 20px !important;
}
.xb-profile-section {
background: linear-gradient(145deg, #1a1428, #0d0a15) !important;
border: 1px solid rgba(212, 175, 55, 0.2) !important;
border-radius: 12px !important;
overflow: hidden !important;
}
.xb-section-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 15px 20px !important;
background: rgba(0, 0, 0, 0.3) !important;
border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
}
.xb-section-title {
font-family: 'Cinzel', serif !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
color: var(--gold) !important;
margin: 0 !important;
}
.xb-section-toggle {
padding: 6px 12px !important;
background: #333 !important;
border: 1px solid #444 !important;
border-radius: 6px !important;
color: #aaa !important;
font-size: 0.8rem !important;
cursor: pointer !important;
}
.xb-section-content {
padding: 20px !important;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1600px) {
.xb-col-doll {
max-width: 480px !important;
min-width: 380px !important;
}
.xb-col-stats {
width: 520px !important;
min-width: 450px !important;
}
}
@media (max-width: 1400px) {
.xb-col-doll {
max-width: 420px !important;
min-width: 350px !important;
}
.xb-col-stats {
width: 450px !important;
min-width: 400px !important;
}
.xb-chars-grid {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
}
}
@media (max-width: 1200px) {
.xb-col-doll,
.xb-col-stats {
width: 100% !important;
max-width: 100% !important;
min-width: auto !important;
}
}
/* ============================================
PROFIL V87.20 - LAYOUT 2 COLONNES SIMPLIFIÉ
============================================ */
.xb-profile-container {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
/* Bandeau */
.xb-profile-banner {
display: flex !important;
align-items: center !important;
gap: 25px !important;
padding: 20px 25px !important;
background: linear-gradient(135deg, #1a1428, #0d0a15) !important;
border: 1px solid rgba(212, 175, 55, 0.3) !important;
border-radius: 12px !important;
flex-wrap: wrap !important;
}
.xb-banner-actions {
display: flex !important;
gap: 10px !important;
flex-wrap: wrap !important;
}
.xb-btn-view,
.xb-btn-edit,
.xb-btn-share {
padding: 10px 18px !important;
border-radius: 8px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: all 0.2s !important;
border: none !important;
text-decoration: none !important;
font-size: 0.9rem !important;
}
.xb-btn-view {
background: linear-gradient(135deg, #27ae60, #1e8449) !important;
color: #fff !important;
}
.xb-btn-edit {
background: linear-gradient(135deg, #d4af37, #b8860b) !important;
color: #000 !important;
}
.xb-btn-share {
background: #333 !important;
color: #fff !important;
border: 1px solid #555 !important;
}
.xb-btn-view:hover,
.xb-btn-edit:hover,
.xb-btn-share:hover {
transform: translateY(-2px) !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}
/* Main 2 colonnes */
.xb-profile-main {
display: grid !important;
grid-template-columns: 350px 1fr !important;
gap: 20px !important;
}
/* Sidebar gauche */
.xb-profile-sidebar {
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
}
.xb-profile-card {
background: linear-gradient(145deg, #1a1428, #0d0a15) !important;
border: 1px solid rgba(212, 175, 55, 0.2) !important;
border-radius: 12px !important;
padding: 18px !important;
}
.xb-card-title {
font-family: 'Cinzel', serif !important;
font-size: 1.15rem !important;
font-weight: 700 !important;
color: var(--gold) !important;
margin: 0 0 15px 0 !important;
padding-bottom: 10px !important;
border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
}
.xb-page-hint {
color: #777 !important;
font-size: 0.85rem !important;
line-height: 1.4 !important;
margin: 12px 0 0 0 !important;
}
/* Quick buttons */
.xb-quick-btns {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.xb-qbtn {
padding: 12px 15px !important;
background: rgba(0, 0, 0, 0.4) !important;
border: 1px solid #444 !important;
border-radius: 8px !important;
color: #fff !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: all 0.2s !important;
text-align: left !important;
}
.xb-qbtn:hover {
background: rgba(212, 175, 55, 0.15) !important;
border-color: var(--gold) !important;
transform: translateX(5px) !important;
}
/* Colonne builds */
.xb-profile-builds {
background: linear-gradient(145deg, #1a1428, #0d0a15) !important;
border: 1px solid rgba(212, 175, 55, 0.2) !important;
border-radius: 12px !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
.xb-builds-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 15px 20px !important;
background: rgba(0, 0, 0, 0.3) !important;
border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
}
.xb-builds-header h2 {
font-family: 'Cinzel', serif !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
color: var(--gold) !important;
margin: 0 !important;
}
.xb-builds-list {
flex: 1 !important;
overflow-y: auto !important;
padding: 15px !important;
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
gap: 10px !important;
max-height: 500px !important;
}
/* Responsive profil */
@media (max-width: 1100px) {
.xb-profile-main {
grid-template-columns: 1fr !important;
}
.xb-builds-list {
max-height: 400px !important;
}
}
/* ================================================================
V87.21 - COLONNES + MODALES + TAGS + PERSONNAGES CORRIGÉS
================================================================ */
/* ============================================
BUILDER - DOLL +10%, STATS +15%
============================================ */
.xb-col-doll {
flex: 2.5 !important; /* +10% (était 2.3) */
max-width: 600px !important; /* +10% */
min-width: 500px !important;
}
.xb-col-stats {
width: 670px !important; /* +15% (était 580px) */
min-width: 600px !important;
}
.mode-build .xb-col-doll {
flex: 3.8 !important;
}
/* ============================================
MODALES - SEARCH + TRI SUR MÊME LIGNE
============================================ */
#xb-modal .xb-modal-box {
max-width: 98vw !important;
width: 1850px !important; /* Agrandi pour 4 cartes */
max-height: 95vh !important;
}
.xb-modal-search-row {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 10px 15px !important;
background: rgba(0, 0, 0, 0.4) !important;
border-radius: 8px !important;
margin-bottom: 8px !important;
}
.xb-search {
flex: 0 0 280px !important; /* Largeur fixe réduite */
max-width: 280px !important;
padding: 10px 15px !important;
font-size: 1rem !important;
margin: 0 !important;
}
/* Niveau */
.xb-level-filter {
display: flex !important;
align-items: center !important;
gap: 6px !important;
margin: 0 !important;
}
.xb-level-filter label {
font-size: 0.85rem !important;
color: #888 !important;
}
.xb-level-filter input {
width: 50px !important;
padding: 6px 8px !important;
font-size: 0.9rem !important;
}
/* Sélecteur tri à droite */
.xb-sort-select,
.xb-modal-sort,
select.xb-sort-select {
margin-left: auto !important;
padding: 10px 15px !important;
background: #1a1a2e !important;
border: 1px solid #444 !important;
border-radius: 8px !important;
color: #fff !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
min-width: 180px !important;
cursor: pointer !important;
}
/* ============================================
CARTES ITEMS - TEXTES AGRANDIS, SANS FOND STATS
============================================ */
.xb-item {
width: calc(25% - 12px) !important; /* 4 par ligne avec gap */
max-width: none !important;
padding: 12px !important;
}
.xb-items-grid.xb-grid-cards {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
padding: 12px !important;
max-height: calc(95vh - 180px) !important;
overflow-y: auto !important;
}
/* Nom item agrandi */
.xb-item-name {
font-size: 1.1rem !important;
font-weight: 800 !important;
line-height: 1.25 !important;
}
/* Niveau très agrandi */
.xb-item-lvl-box {
font-size: 1.15rem !important;
font-weight: 900 !important;
padding: 5px 12px !important;
background: linear-gradient(135deg, rgba(212,175,55,0.9), rgba(184,134,11,0.9)) !important;
color: #000 !important;
}
/* Stats SANS fond, textes agrandis */
.xb-item-stat-line {
font-size: 1rem !important;
font-weight: 700 !important;
padding: 3px 0 !important;
background: none !important;
border: none !important;
}
.xb-item-stat-line img {
width: 18px !important;
height: 18px !important;
}
.xb-item-stats-list {
max-height: 170px !important;
gap: 2px !important;
background: none !important;
}
/* Panoplie */
.xb-item-pano {
font-size: 0.95rem !important;
font-weight: 700 !important;
}
/* Image item */
.xb-item-img {
width: 90px !important;
height: 90px !important;
}
/* ============================================
TAGS - TAILLE AUGMENTÉE
============================================ */
.xb-toolbar-tags,
.xb-builds-tags-bar {
gap: 10px !important;
padding: 15px 18px !important;
}
.xb-toolbar-tags .xb-tag-filter,
.xb-builds-tags-bar .xb-tag-filter,
.xb-filter-tag {
padding: 10px 18px !important;
font-size: 1rem !important;
font-weight: 800 !important;
border: 2px solid rgba(255, 255, 255, 0.5) !important;
}
.xb-card-tag,
.xb-build-tag {
padding: 6px 14px !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
}
/* ============================================
PERSONNAGES - CARTES 2x4 COMPACTES
============================================ */
.xb-chars-grid,
.xb-welcome-chars,
.xb-perso-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
padding: 12px !important;
max-height: 380px !important;
overflow-y: auto !important;
}
.xb-char-card,
button.xb-char-card {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 12px !important;
background: linear-gradient(145deg, #1a1a2e, #0f0f1a) !important;
border: 2px solid #333 !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
width: 100% !important;
min-height: 60px !important;
max-height: 70px !important;
position: relative !important;
overflow: hidden !important;
}
.xb-char-card:hover,
button.xb-char-card:hover {
border-color: var(--gold) !important;
transform: translateX(3px) !important;
box-shadow: 0 3px 12px rgba(212, 175, 55, 0.25) !important;
}
/* Image perso */
.xb-char-card img,
button.xb-char-card img {
width: 42px !important;
height: 42px !important;
object-fit: contain !important;
flex-shrink: 0 !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
}
/* Niveau en haut à gauche - TEXTE NOIR */
.xb-char-card .xb-char-level,
button.xb-char-card .xb-char-level {
position: absolute !important;
top: 4px !important;
left: 6px !important;
font-size: 0.75rem !important;
font-weight: 900 !important;
color: #000 !important;
background: linear-gradient(135deg, #d4af37, #f1c40f) !important;
padding: 2px 6px !important;
border-radius: 4px !important;
margin: 0 !important;
z-index: 2 !important;
}
/* Infos perso */
.xb-char-card .xb-char-info {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
min-width: 0 !important;
padding-left: 5px !important;
}
.xb-char-card .xb-char-name,
button.xb-char-card .xb-char-name {
font-family: 'Cinzel', serif !important;
font-size: 0.9rem !important;
font-weight: 700 !important;
color: #fff !important;
margin: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.xb-char-card .xb-char-class,
button.xb-char-card .xb-char-class {
font-size: 0.75rem !important;
color: #888 !important;
margin: 0 !important;
}
/* Carte "Nouveau personnage" */
.xb-char-card.xb-new-char,
button.xb-char-card.xb-new-char {
border-style: dashed !important;
border-color: #444 !important;
background: rgba(0, 0, 0, 0.2) !important;
justify-content: center !important;
min-height: 60px !important;
}
.xb-char-card.xb-new-char span {
font-size: 1.5rem !important;
}
/* ============================================
RESPONSIVE MODALES
============================================ */
@media (max-width: 1800px) {
.xb-item {
width: calc(33.333% - 12px) !important; /* 3 par ligne */
}
#xb-modal .xb-modal-box {
width: 95vw !important;
}
}
@media (max-width: 1400px) {
.xb-item {
width: calc(50% - 12px) !important; /* 2 par ligne */
}
.xb-col-stats {
width: 550px !important;
min-width: 480px !important;
}
.xb-col-doll {
max-width: 500px !important;
min-width: 400px !important;
}
}
@media (max-width: 1000px) {
.xb-item {
width: 100% !important; /* 1 par ligne */
}
.xb-search {
flex: 1 !important;
max-width: none !important;
}
.xb-sort-select {
min-width: 140px !important;
}
}
/* ================================================================
V87.22 - CORRECTIONS COMPLÈTES
================================================================ */
/* ============================================
BUILDER - DOLL +10%
============================================ */
.xb-col-doll {
flex: 2.75 !important; /* +10% de 2.5 */
max-width: 660px !important; /* +10% de 600 */
min-width: 550px !important;
}
.mode-build .xb-col-doll {
flex: 4.2 !important;
}
/* ============================================
STATS - BOUTONS DÉCALÉS POUR PLACE AUX TOTAUX
============================================ */
.xb-stats-head {
padding: 12px 15px !important;
}
.xb-reset-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
justify-content: flex-start !important;
}
.xb-btn-remove-all,
.xb-btn-rst {
padding: 6px 10px !important;
font-size: 0.7rem !important;
white-space: nowrap !important;
}
/* Stats totaux avec plus d'espace */
.xb-st-tot,
.xb-stat-total,
.xb-stat-val {
min-width: 80px !important;
text-align: right !important;
font-size: 1.3rem !important;
font-weight: 900 !important;
letter-spacing: 0.5px !important;
}
.xb-st-row {
padding: 8px 12px !important;
gap: 8px !important;
}
/* Capital restant */
#xb-capital {
font-size: 1.4rem !important;
font-weight: 900 !important;
min-width: 90px !important;
}
/* ============================================
MODALES - LAYOUT CARTES HORIZONTAL
============================================ */
/* Ligne recherche + tri sur MÊME ligne */
.xb-modal-filters,
.xb-modal-header-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 15px !important;
background: rgba(0, 0, 0, 0.3) !important;
border-radius: 8px !important;
margin-bottom: 8px !important;
}
/* Recherche à gauche */
.xb-search {
flex: 0 0 260px !important;
max-width: 260px !important;
padding: 10px 14px !important;
font-size: 0.95rem !important;
order: 1 !important;
}
/* Niveau au milieu */
.xb-level-filter {
order: 2 !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
/* Tri à DROITE */
.xb-sort-select,
select.xb-sort-select,
.xb-modal-sort {
order: 10 !important;
margin-left: auto !important;
padding: 10px 14px !important;
min-width: 160px !important;
background: #1a1a2e !important;
border: 1px solid #555 !important;
border-radius: 8px !important;
color: #fff !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
cursor: pointer !important;
}
/* ============================================
CARTES ITEMS - LAYOUT HORIZONTAL
============================================ */
.xb-item {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 12px !important;
padding: 12px !important;
width: calc(25% - 12px) !important;
min-height: 160px !important; /* Hauteur fixe pour uniformité */
max-height: 180px !important;
overflow: hidden !important;
}
/* Image réduite à gauche */
.xb-item-left,
.xb-item-img-wrap {
flex-shrink: 0 !important;
width: 70px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 5px !important;
}
.xb-item-img {
width: 65px !important;
height: 65px !important;
}
/* Niveau en haut de l'image */
.xb-item-lvl-box {
font-size: 0.9rem !important;
font-weight: 900 !important;
padding: 3px 8px !important;
background: linear-gradient(135deg, rgba(212,175,55,0.95), rgba(184,134,11,0.95)) !important;
color: #000 !important;
border-radius: 4px !important;
position: static !important;
margin-top: 4px !important;
}
/* Contenu à droite */
.xb-item-right,
.xb-item-content {
flex: 1 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
/* Nom sous le niveau, à droite de l'image */
.xb-item-name {
font-size: 0.95rem !important;
font-weight: 800 !important;
line-height: 1.2 !important;
margin: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Panoplie */
.xb-item-pano {
font-size: 0.8rem !important;
font-weight: 600 !important;
opacity: 0.8 !important;
}
/* Stats - prend tout l'espace disponible */
.xb-item-stats-list {
flex: 1 !important;
max-height: none !important;
overflow-y: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
.xb-item-stat-line {
font-size: 0.85rem !important;
font-weight: 600 !important;
padding: 2px 0 !important;
background: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.xb-item-stat-line img {
width: 14px !important;
height: 14px !important;
}
/* Bouton ajouter panoplie */
.xb-btn-add-set {
margin-top: auto !important;
padding: 5px 8px !important;
font-size: 0.7rem !important;
}
/* ============================================
GRILLE ITEMS - 4 PAR LIGNE
============================================ */
.xb-items-grid.xb-grid-cards {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
padding: 12px !important;
max-height: calc(95vh - 200px) !important;
overflow-y: auto !important;
align-items: stretch !important; /* Toutes cartes même hauteur */
}
/* Modal élargie */
#xb-modal .xb-modal-box {
max-width: 98vw !important;
width: 1900px !important;
}
/* ============================================
RESPONSIVE MODALES
============================================ */
@media (max-width: 1850px) {
.xb-item {
width: calc(33.333% - 12px) !important;
}
}
@media (max-width: 1400px) {
.xb-item {
width: calc(50% - 12px) !important;
}
.xb-col-doll {
max-width: 550px !important;
min-width: 450px !important;
}
}
@media (max-width: 1000px) {
.xb-item {
width: 100% !important;
max-height: none !important;
}
.xb-search {
flex: 1 1 200px !important;
max-width: none !important;
}
}
/* ================================================================
V87.22 FINAL - TOUTES CORRECTIONS
================================================================ */
/* ============================================
BUILDER - DOLL +10% SUPPLÉMENTAIRE
============================================ */
.xb-col-doll {
flex: 3 !important; /* +10% supplémentaire */
max-width: 720px !important;
min-width: 600px !important;
}
.mode-build .xb-col-doll {
flex: 4.5 !important;
}
/* ============================================
STATS - BOUTONS COMPACTS + PLACE AUX TOTAUX
============================================ */
.xb-stats-head {
padding: 10px 12px !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
align-items: center !important;
}
.xb-stats-title {
flex: 1 !important;
font-size: 1rem !important;
}
/* Boutons reset compacts */
.xb-btn-remove-all,
.xb-btn-rst,
.xb-reset-btn {
padding: 5px 8px !important;
font-size: 0.65rem !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
/* Stats rows avec plus d'espace pour les totaux */
.xb-st-row {
display: grid !important;
grid-template-columns: minmax(100px, 140px) 1fr minmax(70px, 90px) !important;
padding: 6px 10px !important;
gap: 6px !important;
align-items: center !important;
}
/* Totaux bien visibles */
.xb-st-tot,
.xb-stat-val,
.xb-stat-total {
font-size: 1.4rem !important;
font-weight: 900 !important;
text-align: right !important;
font-family: 'Cinzel', serif !important;
min-width: 70px !important;
}
/* Capital */
#xb-capital {
font-size: 1.5rem !important;
font-weight: 900 !important;
}
/* ============================================
MODALE - RECHERCHE + TRI SUR MÊME LIGNE
============================================ */
.xb-mod-search-sort-row {
display: flex !important;
align-items: center !important;
gap: 15px !important;
padding: 12px 15px !important;
background: rgba(0, 0, 0, 0.4) !important;
border-radius: 8px !important;
margin-bottom: 10px !important;
}
/* Recherche à gauche */
.xb-mod-search-sort-row .xb-search-input {
flex: 0 0 320px !important;
padding: 12px 16px !important;
font-size: 1rem !important;
background: #111 !important;
border: 1px solid #444 !important;
border-radius: 8px !important;
color: #fff !important;
}
/* Tri à droite */
.xb-mod-search-sort-row .xb-filter-select {
margin-left: auto !important;
padding: 12px 16px !important;
background: #1a1a2e !important;
border: 1px solid #555 !important;
border-radius: 8px !important;
color: #fff !important;
font-size: 1rem !important;
font-weight: 700 !important;
min-width: 180px !important;
cursor: pointer !important;
}
/* Masquer l'ancienne search bar si elle existe encore */
.xb-mod-search-bar {
display: none !important;
}
/* ============================================
CARTES ITEMS - LAYOUT HORIZONTAL + HAUTEUR UNIFORME
============================================ */
.xb-items-grid.xb-grid-cards {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
padding: 10px !important;
max-height: calc(95vh - 220px) !important;
overflow-y: auto !important;
align-items: stretch !important;
}
.xb-item {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 10px !important;
padding: 10px !important;
width: calc(25% - 10px) !important;
min-height: 150px !important;
height: 150px !important; /* Hauteur FIXE pour uniformité */
overflow: hidden !important;
background: linear-gradient(145deg, #1a1a2e, #0d0a15) !important;
border: 1px solid #333 !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: all 0.2s !important;
}
.xb-item:hover {
border-color: var(--gold) !important;
transform: translateY(-2px) !important;
}
/* Partie gauche - Image + Niveau */
.xb-item-left {
flex-shrink: 0 !important;
width: 60px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 4px !important;
}
/* Niveau EN HAUT de l'image */
.xb-item-lvl-box {
font-size: 0.85rem !important;
font-weight: 900 !important;
padding: 3px 8px !important;
background: linear-gradient(135deg, #d4af37, #f1c40f) !important;
color: #000 !important;
border-radius: 4px !important;
order: -1 !important;
}
/* Image réduite */
.xb-item-img {
width: 55px !important;
height: 55px !important;
object-fit: contain !important;
}
/* Bouton panoplie */
.xb-btn-add-set {
padding: 3px 6px !important;
font-size: 0.6rem !important;
white-space: nowrap !important;
}
/* Partie droite - Nom + Stats */
.xb-item-right {
flex: 1 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
overflow: hidden !important;
height: 100% !important;
}
/* Nom */
.xb-item-name {
font-size: 0.9rem !important;
font-weight: 800 !important;
line-height: 1.15 !important;
color: #fff !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Panoplie */
.xb-item-set {
font-size: 0.75rem !important;
color: #888 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Stats - prend l'espace restant */
.xb-item-stats-list {
flex: 1 !important;
overflow-y: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
max-height: none !important;
}
.xb-item-stat-line {
font-size: 0.8rem !important;
font-weight: 600 !important;
padding: 1px 0 !important;
background: none !important;
border: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.3 !important;
}
.xb-item-stat-line img {
width: 13px !important;
height: 13px !important;
vertical-align: middle !important;
margin-right: 3px !important;
}
/* Modal élargie */
#xb-modal .xb-modal-box {
width: 1900px !important;
max-width: 98vw !important;
max-height: 95vh !important;
}
/* ============================================
RESPONSIVE MODALES
============================================ */
@media (max-width: 1850px) {
.xb-item {
width: calc(33.333% - 10px) !important;
}
}
@media (max-width: 1400px) {
.xb-item {
width: calc(50% - 10px) !important;
height: 160px !important;
}
.xb-mod-search-sort-row .xb-search-input {
flex: 1 !important;
max-width: none !important;
}
.xb-col-doll {
max-width: 600px !important;
min-width: 480px !important;
}
}
@media (max-width: 1000px) {
.xb-item {
width: 100% !important;
height: auto !important;
min-height: 120px !important;
}
.xb-mod-search-sort-row {
flex-wrap: wrap !important;
}
.xb-mod-search-sort-row .xb-search-input,
.xb-mod-search-sort-row .xb-filter-select {
flex: 1 1 100% !important;
margin-left: 0 !important;
}
}
@media (max-width: 1200px) {
.xb-col-doll {
max-width: 100% !important;
min-width: auto !important;
}
}
/* ================================================================
V87.23 - STATS ALIGNÉES + MODALE TEXTES AGRANDIS
================================================================ */
/* ============================================
STATS - ALIGNEMENT + SANS SCROLL
============================================ */
.xb-stats-panel,
.xb-col-stats {
overflow: visible !important;
max-height: none !important;
}
.xb-stats-content {
overflow: visible !important;
max-height: none !important;
}
/* En-têtes de colonnes alignées */
.xb-stats-header-row {
display: grid !important;
grid-template-columns: minmax(110px, 150px) 70px 70px 90px !important;
gap: 8px !important;
padding: 8px 12px !important;
background: rgba(0, 0, 0, 0.4) !important;
border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
color: #888 !important;
text-transform: uppercase !important;
}
.xb-stats-header-row span {
text-align: center !important;
}
.xb-stats-header-row span:first-child {
text-align: left !important;
}
.xb-stats-header-row span:last-child {
text-align: right !important;
}
/* Lignes de stats alignées */
.xb-st-row {
display: grid !important;
grid-template-columns: minmax(110px, 150px) 70px 70px 90px !important;
gap: 8px !important;
padding: 8px 12px !important;
align-items: center !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.xb-st-row:hover {
background: rgba(212, 175, 55, 0.08) !important;
}
/* Label stat */
.xb-st-lbl {
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 0.9rem !important;
font-weight: 700 !important;
}
.xb-st-icon {
width: 20px !important;
height: 20px !important;
}
/* Inputs base/scroll */
.xb-st-base,
.xb-st-scroll {
text-align: center !important;
}
.xb-st-base input,
.xb-st-scroll input {
width: 60px !important;
padding: 6px 8px !important;
font-size: 0.95rem !important;
text-align: center !important;
background: rgba(0, 0, 0, 0.4) !important;
border: 1px solid #444 !important;
border-radius: 6px !important;
color: #fff !important;
}
/* Total aligné à droite */
.xb-st-tot {
text-align: right !important;
font-size: 1.3rem !important;
font-weight: 900 !important;
font-family: 'Cinzel', serif !important;
}
/* Stats secondaires sans scroll */
.xb-stats-secondary {
overflow: visible !important;
max-height: none !important;
}
/* ============================================
MODALE - TEXTES AGRANDIS + 4 CARTES MAX
============================================ */
.xb-items-grid.xb-grid-cards {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important; /* FIXE 4 colonnes */
gap: 12px !important;
padding: 12px !important;
max-height: calc(95vh - 220px) !important;
overflow-y: auto !important;
}
.xb-item {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 12px !important;
padding: 12px !important;
width: 100% !important; /* Prend toute la colonne */
min-height: 170px !important;
height: auto !important;
background: linear-gradient(145deg, #1a1a2e, #0d0a15) !important;
border: 1px solid #333 !important;
border-radius: 10px !important;
}
/* Image et niveau */
.xb-item-left {
flex-shrink: 0 !important;
width: 75px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 6px !important;
}
.xb-item-lvl-box {
font-size: 1rem !important;
font-weight: 900 !important;
padding: 4px 10px !important;
background: linear-gradient(135deg, #d4af37, #f1c40f) !important;
color: #000 !important;
border-radius: 5px !important;
order: -1 !important;
}
.xb-item-img {
width: 65px !important;
height: 65px !important;
}
/* Nom et stats */
.xb-item-right {
flex: 1 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
.xb-item-name {
font-size: 1.05rem !important;
font-weight: 800 !important;
line-height: 1.2 !important;
color: #fff !important;
}
.xb-item-set {
font-size: 0.85rem !important;
color: #aaa !important;
}
/* STATS AGRANDIES */
.xb-item-stats-list {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
max-height: none !important;
overflow: visible !important;
}
.xb-item-stat-line {
font-size: 0.95rem !important;
font-weight: 700 !important;
padding: 2px 0 !important;
background: none !important;
line-height: 1.35 !important;
display: flex !important;
align-items: center !important;
gap: 5px !important;
}
.xb-item-stat-line img {
width: 16px !important;
height: 16px !important;
flex-shrink: 0 !important;
}
.xb-item-stat-line span {
flex: 1 !important;
}
/* Bouton panoplie */
.xb-btn-add-set {
margin-top: 8px !important;
padding: 6px 10px !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
}
/* ============================================
RESPONSIVE MODALE
============================================ */
@media (max-width: 1600px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 1200px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 800px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: 1fr !important;
}
}
/* ================================================================
V87.24 - STATS ALIGNÉES + BOUTONS AGRANDIS + MODALE ÉLARGIE
================================================================ */
/* ============================================
BOUTONS RESET - TEXTES AGRANDIS
============================================ */
.xb-reset-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
margin-top: 12px !important;
}
.xb-btn-remove-all {
padding: 10px 18px !important;
font-size: 0.9rem !important;
font-weight: 800 !important;
background: linear-gradient(135deg, #c0392b, #a93226) !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
transition: all 0.2s !important;
}
.xb-btn-remove-all:hover {
transform: translateY(-2px) !important;
box-shadow: 0 5px 15px rgba(192, 57, 43, 0.4) !important;
}
.xb-btn-rst {
padding: 10px 18px !important;
font-size: 0.9rem !important;
font-weight: 800 !important;
background: linear-gradient(135deg, #555, #444) !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
transition: all 0.2s !important;
}
.xb-btn-rst:hover {
background: linear-gradient(135deg, #666, #555) !important;
transform: translateY(-2px) !important;
}
/* ============================================
STATS - COLONNES PARFAITEMENT ALIGNÉES
============================================ */
/* En-tête avec titres de colonnes */
.xb-stats-header {
display: grid !important;
grid-template-columns: 130px 110px 110px 100px !important;
gap: 10px !important;
padding: 10px 15px !important;
background: rgba(0, 0, 0, 0.5) !important;
border-bottom: 2px solid rgba(212, 175, 55, 0.3) !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
color: #888 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.xb-stats-header span:nth-child(1) { text-align: left !important; }
.xb-stats-header span:nth-child(2) { text-align: center !important; }
.xb-stats-header span:nth-child(3) { text-align: center !important; }
.xb-stats-header span:nth-child(4) { text-align: right !important; }
/* Ligne de stat - grille 4 colonnes */
.xb-st-row {
display: grid !important;
grid-template-columns: 130px 110px 110px 100px !important;
gap: 10px !important;
padding: 10px 15px !important;
align-items: center !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
transition: background 0.2s !important;
}
.xb-st-row:hover {
background: rgba(212, 175, 55, 0.08) !important;
}
/* Colonne 1 - Label */
.xb-st-lbl {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 1rem !important;
font-weight: 700 !important;
}
.xb-st-icon {
width: 22px !important;
height: 22px !important;
flex-shrink: 0 !important;
}
/* Colonnes 2 et 3 - Inputs */
.xb-input-wrap {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
}
.xb-btn-pm {
width: 28px !important;
height: 28px !important;
padding: 0 !important;
font-size: 1.1rem !important;
font-weight: 900 !important;
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid #444 !important;
border-radius: 6px !important;
color: #fff !important;
cursor: pointer !important;
transition: all 0.15s !important;
}
.xb-btn-pm:hover {
background: rgba(212, 175, 55, 0.3) !important;
border-color: #d4af37 !important;
}
.xb-st-in {
width: 50px !important;
padding: 6px 4px !important;
font-size: 1rem !important;
font-weight: 700 !important;
text-align: center !important;
background: rgba(0, 0, 0, 0.5) !important;
border: 1px solid #444 !important;
border-radius: 6px !important;
color: #fff !important;
}
.xb-st-in:focus {
outline: none !important;
border-color: #d4af37 !important;
}
/* Colonne 4 - Total */
.xb-st-tot {
text-align: right !important;
font-size: 1.4rem !important;
font-weight: 900 !important;
font-family: 'Cinzel', serif !important;
letter-spacing: 0.5px !important;
}
/* Capital restant */
.xb-capital-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 12px 15px !important;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(184, 134, 11, 0.1)) !important;
border-radius: 8px !important;
margin-top: 10px !important;
}
.xb-capital-label {
font-size: 1rem !important;
font-weight: 700 !important;
color: #d4af37 !important;
}
#xb-capital {
font-size: 1.6rem !important;
font-weight: 900 !important;
font-family: 'Cinzel', serif !important;
color: #d4af37 !important;
}
/* Stats sans scroll */
.xb-stats-content,
.xb-col-stats,
.xb-stats-panel {
overflow: visible !important;
max-height: none !important;
}
/* ============================================
MODALE - ÉLARGIE 15% + TEXTES AGRANDIS
============================================ */
#xb-modal .xb-modal-box {
width: 2185px !important; /* +15% de 1900px */
max-width: 98vw !important;
max-height: 95vh !important;
}
/* Grille 4 colonnes fixes */
.xb-items-grid.xb-grid-cards {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 14px !important;
padding: 14px !important;
max-height: calc(95vh - 220px) !important;
overflow-y: auto !important;
}
/* Cartes items */
.xb-item {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 14px !important;
padding: 14px !important;
min-height: 180px !important;
background: linear-gradient(145deg, #1a1a2e, #0d0a15) !important;
border: 1px solid #333 !important;
border-radius: 12px !important;
cursor: pointer !important;
transition: all 0.2s !important;
}
.xb-item:hover {
border-color: var(--gold) !important;
transform: translateY(-3px) !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
}
/* Image et niveau */
.xb-item-left {
flex-shrink: 0 !important;
width: 80px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 8px !important;
}
.xb-item-lvl-box {
font-size: 1.1rem !important;
font-weight: 900 !important;
padding: 5px 12px !important;
background: linear-gradient(135deg, #d4af37, #f1c40f) !important;
color: #000 !important;
border-radius: 6px !important;
order: -1 !important;
}
.xb-item-img {
width: 70px !important;
height: 70px !important;
object-fit: contain !important;
}
/* Contenu droite */
.xb-item-right {
flex: 1 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
overflow: hidden !important;
}
/* NOM VISIBLE - Texte agrandi, pas de coupure */
.xb-item-name {
font-size: 1.1rem !important;
font-weight: 800 !important;
line-height: 1.25 !important;
color: #fff !important;
margin: 0 !important;
/* Permet 3 lignes max */
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
word-break: break-word !important;
}
/* Panoplie */
.xb-item-set {
font-size: 0.9rem !important;
font-weight: 600 !important;
color: #aaa !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Stats */
.xb-item-stats-list {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
overflow: visible !important;
max-height: none !important;
}
.xb-item-stat-line {
font-size: 1rem !important;
font-weight: 700 !important;
padding: 2px 0 !important;
background: none !important;
line-height: 1.4 !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
.xb-item-stat-line img {
width: 16px !important;
height: 16px !important;
flex-shrink: 0 !important;
}
/* Bouton panoplie */
.xb-btn-add-set {
margin-top: auto !important;
padding: 8px 12px !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
background: linear-gradient(135deg, #3498db, #2980b9) !important;
border: none !important;
border-radius: 6px !important;
color: #fff !important;
cursor: pointer !important;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 2100px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 1500px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(2, 1fr) !important;
}
.xb-st-row {
grid-template-columns: 110px 100px 100px 80px !important;
gap: 8px !important;
padding: 8px 12px !important;
}
.xb-stats-header {
grid-template-columns: 110px 100px 100px 80px !important;
}
}
@media (max-width: 1000px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: 1fr !important;
}
.xb-st-row {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.xb-st-lbl {
justify-content: center !important;
}
.xb-st-tot {
text-align: center !important;
}
}
/* ================================================================
V87.25 - STATS AVEC ÉQUIP + MODALE CORRIGÉE
================================================================ */
/* ============================================
STATS - LARGEUR OPTIMISÉE + ÉQUIP
============================================ */
/* En-tête colonnes */
.xb-stats-header {
display: grid !important;
grid-template-columns: 100px 100px 100px 1fr !important;
gap: 8px !important;
padding: 10px 12px !important;
background: rgba(0, 0, 0, 0.5) !important;
border-bottom: 2px solid rgba(212, 175, 55, 0.3) !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
color: #888 !important;
text-transform: uppercase !important;
}
.xb-stats-header span:nth-child(1) { text-align: left !important; }
.xb-stats-header span:nth-child(2),
.xb-stats-header span:nth-child(3) { text-align: center !important; }
.xb-stats-header span:nth-child(4) { text-align: right !important; }
/* Lignes stats */
.xb-st-row {
display: grid !important;
grid-template-columns: 100px 100px 100px 1fr !important;
gap: 8px !important;
padding: 8px 12px !important;
align-items: center !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.xb-st-row:hover {
background: rgba(212, 175, 55, 0.08) !important;
}
/* Label stat */
.xb-st-lbl {
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
}
.xb-st-icon {
width: 20px !important;
height: 20px !important;
}
/* Inputs */
.xb-input-wrap {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
}
.xb-btn-pm {
width: 26px !important;
height: 26px !important;
font-size: 1rem !important;
font-weight: 900 !important;
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid #444 !important;
border-radius: 5px !important;
color: #fff !important;
cursor: pointer !important;
}
.xb-btn-pm:hover {
background: rgba(212, 175, 55, 0.3) !important;
}
.xb-st-in {
width: 45px !important;
padding: 5px 3px !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
text-align: center !important;
background: rgba(0, 0, 0, 0.5) !important;
border: 1px solid #444 !important;
border-radius: 5px !important;
color: #fff !important;
}
/* Total avec équipement */
.xb-st-tot {
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 2px !important;
text-align: right !important;
}
.xb-tot-main {
font-size: 1.4rem !important;
font-weight: 900 !important;
font-family: 'Cinzel', serif !important;
line-height: 1 !important;
}
.xb-tot-equip {
font-size: 0.85rem !important;
font-weight: 600 !important;
opacity: 0.7 !important;
}
/* Capital */
.xb-capital-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 12px 15px !important;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(184, 134, 11, 0.1)) !important;
border-radius: 8px !important;
margin-top: 12px !important;
}
.xb-capital-label {
font-size: 1rem !important;
font-weight: 700 !important;
color: #d4af37 !important;
}
#xb-capital {
font-size: 1.6rem !important;
font-weight: 900 !important;
font-family: 'Cinzel', serif !important;
color: #d4af37 !important;
}
/* ============================================
MODALE - XB-MOD-BOX ÉLARGIE + TEXTES AGRANDIS
============================================ */
.xb-mod-box {
width: 2200px !important;
max-width: 98vw !important;
max-height: 95vh !important;
background: linear-gradient(145deg, #1a1428, #0d0a15) !important;
border: 2px solid rgba(212, 175, 55, 0.4) !important;
border-radius: 16px !important;
}
/* Grille 4 colonnes */
.xb-items-grid.xb-grid-cards {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 15px !important;
padding: 15px !important;
max-height: calc(95vh - 250px) !important;
overflow-y: auto !important;
}
/* Cartes items - Niveau en haut à gauche */
.xb-item {
position: relative !important;
display: flex !important;
flex-direction: column !important;
padding: 50px 15px 15px 15px !important; /* Espace pour niveau */
min-height: 220px !important;
background: linear-gradient(145deg, #1a1a2e, #0d0a15) !important;
border: 1px solid #444 !important;
border-radius: 12px !important;
cursor: pointer !important;
transition: all 0.2s !important;
}
.xb-item:hover {
border-color: var(--gold) !important;
transform: translateY(-3px) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
/* NIVEAU EN HAUT À GAUCHE - GRAND */
.xb-item-lvl-box {
position: absolute !important;
top: 10px !important;
left: 10px !important;
font-size: 1.3rem !important;
font-weight: 900 !important;
padding: 6px 14px !important;
background: linear-gradient(135deg, #d4af37, #f1c40f) !important;
color: #000 !important;
border-radius: 8px !important;
z-index: 5 !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4) !important;
}
/* Contenu de la carte */
.xb-item-left {
display: none !important; /* On réorganise tout */
}
.xb-item-right {
display: contents !important;
}
/* Zone image + nom */
.xb-item-top {
display: flex !important;
align-items: center !important;
gap: 15px !important;
margin-bottom: 10px !important;
}
/* IMAGE PLUS GRANDE */
.xb-item-img {
width: 90px !important;
height: 90px !important;
object-fit: contain !important;
flex-shrink: 0 !important;
filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5)) !important;
}
/* NOM TOUJOURS VISIBLE - TEXTE AGRANDI */
.xb-item-name {
font-size: 1.2rem !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #fff !important;
flex: 1 !important;
/* Pas de coupure */
display: block !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
/* Panoplie */
.xb-item-set {
font-size: 1rem !important;
font-weight: 600 !important;
color: #aaa !important;
margin-bottom: 8px !important;
}
/* STATS - TEXTES AGRANDIS */
.xb-item-stats-list {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
overflow: visible !important;
}
.xb-item-stat-line {
font-size: 1.1rem !important;
font-weight: 700 !important;
padding: 3px 0 !important;
background: none !important;
line-height: 1.4 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.xb-item-stat-line img {
width: 18px !important;
height: 18px !important;
flex-shrink: 0 !important;
}
/* Bouton panoplie */
.xb-btn-add-set {
margin-top: auto !important;
padding: 10px 15px !important;
font-size: 0.9rem !important;
font-weight: 700 !important;
background: linear-gradient(135deg, #3498db, #2980b9) !important;
border: none !important;
border-radius: 8px !important;
color: #fff !important;
cursor: pointer !important;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 2100px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 1500px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: repeat(2, 1fr) !important;
}
.xb-mod-box {
width: 95vw !important;
}
}
@media (max-width: 900px) {
.xb-items-grid.xb-grid-cards {
grid-template-columns: 1fr !important;
}
}