* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #87CEEB 0%, #E0F4FF 50%, #F5E6D3 100%);
    color: #2c3e50;
}

/* =====================
   Header
   ===================== */
header {
    background: linear-gradient(90deg, #4a90b8 0%, #6bb3d9 50%, #4a90b8 100%);
    color: #fff;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #c9a227;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

header h1 {
    font-size: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    color: #f0e68c;
}

/* =====================
   Footer
   ===================== */
footer {
    background: linear-gradient(90deg, #4a90b8 0%, #6bb3d9 50%, #4a90b8 100%);
    color: #fff;
    padding: 0.75rem;
    text-align: center;
    font-size: 0.85rem;
    border-top: 3px solid #c9a227;
}

/* =====================
   App Layout (3 colonnes)
   ===================== */
.app-layout {
    display: flex;
    flex-direction: column;
}

.app-container {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 1rem 0;
    gap: 1rem;
    overflow: hidden;
}

/* Marges laterales */
.app-container::before,
.app-container::after {
    content: '';
    flex: 0 0 10%;
}

/* Sidebar gauche */
.sidebar-left {
    flex: 0 0 10%;
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(240,230,210,0.95) 100%);
    border: 2px solid #c9a227;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Zone centrale */
.main-content {
    flex: 0 0 60%;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(240,230,210,0.9) 100%);
    border: 2px solid #c9a227;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Sidebar droite */
.sidebar-right {
    flex: 0 0 10%;
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(240,230,210,0.95) 100%);
    border: 2px solid #c9a227;
    border-radius: 8px;
    overflow-y: auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* =====================
   Panels
   ===================== */
.panel {
    padding: 1rem;
}

.panel h2 {
    font-size: 1rem;
    color: #1e3a5f;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #c9a227;
    padding-bottom: 0.5rem;
}

/* Separateur */
.separator {
    border: none;
    border-top: 2px solid #c9a227;
    margin: 0;
}

.separator-light {
    border: none;
    border-top: 1px solid #ccc;
    margin: 0.5rem 0;
}

.section-subtitle {
    font-size: 0.9rem;
    color: #1e3a5f;
    margin: 0.75rem 0 0.5rem 0;
}

/* =====================
   Panel Info (compte/personnage)
   ===================== */
.panel-info .info-login {
    font-size: 1.1rem;
    font-weight: bold;
    color: #1e3a5f;
    margin-bottom: 0.5rem;
}

.btn-new-personnage {
    display: block;
    padding: 0.4rem 0.5rem;
    background: transparent;
    color: #4a90b8;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    transition: all 0.2s;
}

.btn-new-personnage:hover {
    background: rgba(201, 162, 39, 0.15);
    color: #2d6a8a;
}

.personnage-actif {
    background: linear-gradient(135deg, #6bb3d9 0%, #4a90b8 100%);
    padding: 0.75rem;
    border-radius: 4px;
    margin-top: 0.5rem;
    border: 1px solid #c9a227;
}

.personnage-actif .personnage-nom {
    font-weight: bold;
    color: #f0e68c;
}

/* Liste des personnages */
.personnages-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.personnage-item {
    border-radius: 4px;
    transition: background 0.2s;
}

.personnage-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.5rem;
    text-decoration: none;
    color: inherit;
}

.personnage-item:hover {
    background: rgba(201, 162, 39, 0.15);
}

.personnage-item.actif {
    background: linear-gradient(135deg, #4a90b8 0%, #2d6a8a 100%);
    border: 1px solid #c9a227;
}

.personnage-item .personnage-nom {
    font-size: 0.85rem;
    color: #2c3e50;
}

.personnage-item.actif .personnage-nom {
    color: #f0e68c;
    font-weight: bold;
}

.personnage-item .personnage-niveau {
    font-size: 0.75rem;
    color: #666;
    margin-left: 8px;
}

.personnage-item.actif .personnage-niveau {
    color: #b8c5d1;
}

.no-personnage {
    color: #666;
    font-style: italic;
}

/* Loader AJAX */
.loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: #4a90b8;
    font-size: 1.1rem;
}

.loading::before {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid rgba(74, 144, 184, 0.3);
    border-top-color: #4a90b8;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* =====================
   Panel Zones
   ===================== */
.zones-list {
    list-style: none;
}

.zone-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.2s;
    color: #2c3e50;
}

.zone-item:hover,
.zone-item.hover {
    background: rgba(45, 90, 123, 0.1);
    border-left-color: #c9a227;
}

.zone-item.active {
    background: linear-gradient(90deg, rgba(45, 90, 123, 0.2) 0%, transparent 100%);
    border-left-color: #c9a227;
    color: #1e3a5f;
    font-weight: bold;
}

.zone-item.hover {
    background: rgba(201, 162, 39, 0.2);
}

/* =====================
   Panel Map (carte)
   ===================== */
.panel-map {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.map-container {
    flex: 1;
    background: #1a3a5c;
    border-radius: 8px;
    border: 2px solid #c9a227;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    overflow: hidden;
}

.map-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
}

.map-wrapper img {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    height: auto;
    border-radius: 4px;
}

.map-wrapper area {
    cursor: pointer;
}

/* Tooltip pour les zones */
.zone-tooltip {
    position: absolute;
    background: linear-gradient(135deg, #4a90b8 0%, #2d6a8a 100%);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: 2px solid #c9a227;
    font-size: 0.9rem;
    font-weight: bold;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 100;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.zone-tooltip.visible {
    opacity: 1;
}

/* Highlight overlay pour les zones */
.zone-highlight {
    position: absolute;
    background: rgba(201, 162, 39, 0.3);
    border: 2px solid #c9a227;
    border-radius: 50%;
    pointer-events: none;
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 1; }
}

/* =====================
   Panel TODO
   ===================== */
.todo-list {
    list-style: none;
}

.todo-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(201, 162, 39, 0.3);
    font-size: 0.9rem;
    color: #555;
}

.todo-list li:last-child {
    border-bottom: none;
}

/* =====================
   Boutons
   ===================== */
.btn-logout {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #c9a227 0%, #a08020 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    border: 1px solid #8b7355;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-logout:hover {
    background: linear-gradient(135deg, #a08020 0%, #8b7355 100%);
}

/* =====================
   Formulaire de connexion
   ===================== */
.login-form {
    max-width: 400px;
    margin: 2rem auto;
    padding: 2rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(240,230,210,0.95) 100%);
    border-radius: 8px;
    border: 2px solid #c9a227;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #1e3a5f;
}

.form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #c9a227;
    border-radius: 4px;
    font-size: 1rem;
    background: #fff;
    color: #2c3e50;
}

.form-group input:focus {
    outline: none;
    border-color: #1e3a5f;
    box-shadow: 0 0 5px rgba(30, 58, 95, 0.3);
}

.btn-submit {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, #2d5a7b 0%, #1e3a5f 100%);
    color: #f0e68c;
    border: 2px solid #c9a227;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-submit:hover {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2840 100%);
}

.error-message {
    background: rgba(200, 50, 50, 0.1);
    color: #a03030;
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    text-align: center;
    border: 1px solid #a03030;
}

/* =====================
   Detail Personnage
   ===================== */
.panel-personnage-detail {
    height: 100%;
}

.panel-personnage-detail h2 {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 0.25rem;
}

.personnage-classe {
    text-align: center;
    color: #4a90b8;
    font-style: italic;
    margin-bottom: 1rem;
}

.empty-message {
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 1rem;
}

/* Onglets */
.tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #c9a227;
    padding-bottom: 0;
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #555;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -2px;
}

.tab-btn:hover {
    color: #1e3a5f;
    background: rgba(201, 162, 39, 0.1);
}

.tab-btn.active {
    color: #1e3a5f;
    font-weight: bold;
    border-bottom-color: #c9a227;
    background: rgba(201, 162, 39, 0.1);
}

/* Contenu des onglets */
.tab-content {
    min-height: 300px;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.personnage-stats {
    margin-bottom: 2rem;
}

.stats-row {
    display: flex;
    gap: 2rem;
    margin-bottom: 0.75rem;
}

.stat-block {
    flex: 1;
}

.stat-label {
    display: block;
    font-weight: bold;
    color: #1e3a5f;
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 0.9rem;
    color: #555;
}

.stat-bar {
    height: 20px;
    background: #ddd;
    border-radius: 10px;
    overflow: hidden;
    margin: 0.25rem 0;
    border: 1px solid #c9a227;
}

.stat-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

.hp-bar {
    background: linear-gradient(90deg, #2ecc71 0%, #27ae60 100%);
}

.mp-bar {
    background: linear-gradient(90deg, #3498db 0%, #2980b9 100%);
}

.exp-bar {
    background: linear-gradient(90deg, #f1c40f 0%, #f39c12 100%);
}

.personnage-attributes h3 {
    font-size: 1.1rem;
    color: #1e3a5f;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #c9a227;
}

.attributes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 2rem;
}

.attribute {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(201, 162, 39, 0.3);
}

.attr-name {
    color: #1e3a5f;
}

.attr-value {
    font-weight: bold;
    color: #4a90b8;
}

.stat-bonus {
    font-size: 0.85em;
    color: #27ae60;
    font-weight: normal;
}

/* Onglet Competences */
.competences-list h3 {
    font-size: 1rem;
    color: #1e3a5f;
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #c9a227;
}

.competences-list h3:first-child {
    margin-top: 0;
}

.competence-category {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.competence-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: rgba(74, 144, 184, 0.1);
    border-radius: 4px;
    border-left: 3px solid #4a90b8;
}

.competence-name {
    font-weight: bold;
    color: #1e3a5f;
}

.competence-cost {
    font-size: 0.85rem;
    color: #3498db;
}

/* Onglet Equipement */
.equipement-bonus-summary {
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.1) 0%, rgba(201, 162, 39, 0.2) 100%);
    border: 1px solid #c9a227;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.equipement-bonus-summary .bonus-title {
    font-weight: bold;
    color: #c9a227;
    display: block;
    margin-bottom: 0.5rem;
}

.equipement-bonus-summary .bonus-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.equipement-bonus-summary .bonus-item {
    background: rgba(39, 174, 96, 0.2);
    color: #27ae60;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-size: 0.85rem;
    font-weight: 500;
}

.equipement-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
}

.equip-slot {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    cursor: pointer;
    transition: transform 0.2s;
}

.equip-slot:hover {
    transform: translateY(-2px);
}

.slot-label {
    font-weight: bold;
    color: #1e3a5f;
    font-size: 0.85rem;
}

.slot-item {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: relative;
    min-height: 60px;
    transition: all 0.2s;
}

.slot-item:not(.empty) {
    background: linear-gradient(135deg, #2c3e50 0%, #1e3a5f 100%);
    border: 2px solid #c9a227;
}

.slot-item:not(.empty):hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.slot-item .item-name {
    font-weight: bold;
    font-size: 0.95rem;
}

.slot-item .item-rarete {
    font-size: 0.75rem;
    color: #aaa;
    text-transform: uppercase;
}

.slot-item.empty {
    background: rgba(0, 0, 0, 0.05);
    border: 2px dashed #aaa;
    justify-content: center;
    align-items: center;
}

.slot-item.empty:hover {
    border-color: #c9a227;
    background: rgba(201, 162, 39, 0.1);
}

.slot-item.empty .item-name {
    color: #888;
    font-style: italic;
    font-weight: normal;
}

.btn-desequiper {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: rgba(192, 57, 43, 0.8);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.slot-item:hover .btn-desequiper {
    opacity: 1;
}

.btn-desequiper:hover {
    background: #c0392b;
}

/* Popin selection equipement */
.popin-equipement-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.popin-equipement {
    background: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.popin-equip-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c3e50 100%);
    color: #fff;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.popin-equip-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.btn-close-popin-equip {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.btn-close-popin-equip:hover {
    opacity: 1;
}

.popin-equip-content {
    padding: 1rem;
    max-height: 60vh;
    overflow-y: auto;
}

.equip-choice-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.equip-choice-item {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #ddd;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.equip-choice-item:hover {
    border-color: #c9a227;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.equip-choice-item.equipped-current {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-color: #27ae60;
}

.equip-choice-name {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.equip-choice-rarete {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.equip-choice-stats {
    font-size: 0.8rem;
    color: #27ae60;
}

.equip-current-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: #27ae60;
    color: #fff;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    text-transform: uppercase;
}

/* Actions personnage (suppression) */
.personnage-actions {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #ddd;
    text-align: center;
}

.btn-delete-personnage {
    padding: 0.5rem 1rem;
    border: 1px solid #c0392b;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    background: transparent;
    color: #c0392b;
    transition: all 0.2s;
}

.btn-delete-personnage:hover {
    background: #c0392b;
    color: #fff;
}

/* Confirmation suppression */
.delete-confirmation {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(192, 57, 43, 0.1);
    border: 2px solid #c0392b;
    border-radius: 8px;
    text-align: center;
}

.delete-warning {
    font-size: 1rem;
    color: #c0392b;
    margin-bottom: 0.5rem;
}

.delete-warning-sub {
    color: #666;
    font-style: italic;
    margin-bottom: 1rem;
}

.delete-confirmation-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-delete-confirm {
    padding: 0.75rem 1.5rem;
    border: 2px solid #c0392b;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    background: linear-gradient(135deg, #c0392b 0%, #922b21 100%);
    color: #fff;
    font-weight: bold;
}

.btn-delete-confirm:hover {
    background: linear-gradient(135deg, #922b21 0%, #641e16 100%);
}

.btn-delete-confirm:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-delete-cancel {
    padding: 0.75rem 1.5rem;
    border: 2px solid #7f8c8d;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    color: #fff;
}

.btn-delete-cancel:hover {
    background: linear-gradient(135deg, #7f8c8d 0%, #5d6d7e 100%);
}

/* =====================
   Competences
   ===================== */
.competences-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.competence-item {
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(240,235,220,0.9) 100%);
    border: 1px solid #c9a227;
    border-radius: 6px;
    padding: 0.75rem;
}

.competence-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.competence-nom {
    font-weight: bold;
    color: #2c3e50;
}

.competence-mp {
    font-size: 0.85rem;
    color: #2980b9;
    font-weight: bold;
}

.competence-description {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 0.5rem;
    font-style: italic;
}

.competence-tags {
    display: flex;
    gap: 0.5rem;
}

.competence-effet,
.competence-element {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    text-transform: capitalize;
}

.competence-effet,
.competence-type {
    background: #ecf0f1;
    color: #7f8c8d;
}

/* Types de competences */
.competence-type-technique .competence-type {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    color: #fff;
}

.competence-type-black-magic .competence-type {
    background: linear-gradient(135deg, #8e44ad 0%, #6c3483 100%);
    color: #fff;
}

.competence-type-white-magic .competence-type {
    background: linear-gradient(135deg, #f5f5dc 0%, #e8e4c9 100%);
    color: #2c3e50;
}

.competence-type-blue-magic .competence-type {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: #fff;
}

.competence-type-overdrive .competence-type {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: #fff;
}

.competence-element {
    color: #fff;
}

.element-feu {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.element-glace {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.element-foudre {
    background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%);
    color: #2c3e50;
}

.element-eau {
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
}

.element-terre {
    background: linear-gradient(135deg, #8b4513 0%, #654321 100%);
}

.element-vent {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.element-lumiere {
    background: linear-gradient(135deg, #f5f5dc 0%, #e8e4c9 100%);
    color: #2c3e50;
}

.element-tenebres {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
}

/* Panel sans personnage */
.panel-no-personnage {
    text-align: center;
    padding: 3rem;
}

.panel-no-personnage p {
    margin: 1rem 0 2rem;
    color: #666;
}

.btn-create {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #4a90b8 0%, #2d6a8a 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    border: 2px solid #c9a227;
}

.btn-create:hover {
    background: linear-gradient(135deg, #2d6a8a 0%, #1e4a5f 100%);
}

/* Zones links */
.zone-item a {
    color: #2c3e50;
    text-decoration: none;
    display: block;
    padding: 0.5rem 0.75rem;
    margin: -0.5rem -0.75rem;
}

.zone-item a:hover {
    color: #2c3e50;
}

.zone-item:hover a {
    color: #2c3e50;
}

.zone-item.active a {
    color: #1e3a5f;
}

/* =====================
   Page Creation Personnage
   ===================== */
.create-personnage-content {
    max-width: 800px;
    margin: 0 auto;
}

.panel-create-personnage {
    padding: 2rem;
}

.panel-create-personnage h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: #1e3a5f;
}

.create-form .form-group {
    margin-bottom: 1.5rem;
}

.create-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #1e3a5f;
}

.create-form input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #c9a227;
    border-radius: 4px;
    font-size: 1rem;
    background: #fff;
    color: #2c3e50;
}

.create-form input[type="text"]:focus {
    outline: none;
    border-color: #1e3a5f;
    box-shadow: 0 0 5px rgba(30, 58, 95, 0.3);
}

/* Options de sexe */
.sexe-options {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.sexe-option {
    cursor: pointer;
    flex: 1;
}

.sexe-option input[type="radio"] {
    display: none;
}

.sexe-card {
    display: block;
    padding: 0.75rem 1rem;
    background: #f8f4e8;
    border: 2px solid #ddd;
    border-radius: 6px;
    text-align: center;
    transition: all 0.2s;
    color: #2c3e50;
}

.sexe-card:hover {
    border-color: #c9a227;
    background: rgba(201, 162, 39, 0.1);
}

.sexe-option input[type="radio"]:checked + .sexe-card {
    border-color: #c9a227;
    background: linear-gradient(135deg, #6bb3d9 0%, #4a90b8 100%);
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Liste deroulante des classes */
.create-form select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #c9a227;
    border-radius: 4px;
    font-size: 1rem;
    background: #fff;
    color: #2c3e50;
    cursor: pointer;
}

.create-form select:focus {
    outline: none;
    border-color: #1e3a5f;
    box-shadow: 0 0 5px rgba(30, 58, 95, 0.3);
}

/* Description de la classe */
.classe-description {
    margin-top: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(107, 179, 217, 0.1) 0%, rgba(74, 144, 184, 0.15) 100%);
    border: 1px solid #c9a227;
    border-radius: 6px;
    min-height: 80px;
}

.classe-description p {
    margin: 0;
    color: #2c3e50;
    font-size: 0.9rem;
    line-height: 1.5;
    font-style: italic;
}

.classe-description.active p {
    font-style: normal;
}

/* Grille des classes avec icones */
.classes-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.classe-card-option {
    cursor: pointer;
}

.classe-card-option input[type="radio"] {
    display: none;
}

.classe-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.5rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(240,230,210,0.95) 100%);
    border: 2px solid #ddd;
    border-radius: 8px;
    text-align: center;
    transition: all 0.2s;
    min-height: 100px;
}

.classe-card:hover {
    border-color: #c9a227;
    background: linear-gradient(180deg, rgba(201, 162, 39, 0.15) 0%, rgba(201, 162, 39, 0.25) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.classe-card-option input[type="radio"]:checked + .classe-card {
    border-color: #c9a227;
    background: linear-gradient(135deg, #4a90b8 0%, #2d6a8a 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.classe-card-option input[type="radio"]:checked + .classe-card .classe-nom {
    color: #f0e68c;
    font-weight: bold;
}

.classe-card-option input[type="radio"]:checked + .classe-card .classe-icon {
    color: #f0e68c;
}

.classe-icon-wrapper {
    width: 48px;
    height: 48px;
    margin-bottom: 0.5rem;
}

.classe-icon {
    width: 100%;
    height: 100%;
    color: #4a90b8;
    transition: color 0.2s;
}

.classe-card:hover .classe-icon {
    color: #2d6a8a;
}

.classe-nom {
    display: block;
    font-size: 0.75rem;
    color: #2c3e50;
    line-height: 1.2;
}

/* Responsive pour les classes */
@media (max-width: 1200px) {
    .classes-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 800px) {
    .classes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Bouton retour */
.btn-back {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: transparent;
    color: #fff;
    text-decoration: none;
    border: 1px solid #fff;
    border-radius: 4px;
    font-size: 0.9rem;
}

.btn-back:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* =====================
   Zone Exploration
   ===================== */
.panel-zone-exploration {
    height: 100%;
}

.panel-zone-exploration h2 {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
    color: #1e3a5f;
}

.exploration-personnage-recap {
    background: linear-gradient(135deg, rgba(74, 144, 184, 0.1) 0%, rgba(45, 90, 123, 0.1) 100%);
    border: 1px solid #c9a227;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.recap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(201, 162, 39, 0.3);
}

.recap-nom {
    font-weight: bold;
    font-size: 1.1rem;
    color: #1e3a5f;
}

.recap-classe {
    color: #4a90b8;
    font-style: italic;
}

.recap-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.recap-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.recap-label {
    width: 40px;
    font-weight: bold;
    color: #1e3a5f;
    font-size: 0.9rem;
}

.recap-stat .stat-bar {
    flex: 1;
}

.recap-value {
    width: 100px;
    text-align: right;
    font-size: 0.85rem;
    color: #555;
}

.exploration-message {
    background: rgba(201, 162, 39, 0.1);
    border: 1px solid #c9a227;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1.5rem;
    text-align: center;
}

.exploration-message.event {
    background: rgba(76, 175, 80, 0.1);
    border-color: #4caf50;
}

.exploration-message.event p {
    color: #2e7d32;
    font-weight: bold;
}

.exploration-message.nothing p {
    color: #666;
    font-style: italic;
}

.exploration-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-explore,
.btn-rest {
    padding: 0.75rem 2rem;
    border: 2px solid #c9a227;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-explore {
    background: linear-gradient(135deg, #4a90b8 0%, #2d6a8a 100%);
    color: #fff;
}

.btn-explore:hover {
    background: linear-gradient(135deg, #2d6a8a 0%, #1e4a5f 100%);
}

.btn-rest {
    background: linear-gradient(135deg, #f0e68c 0%, #daa520 100%);
    color: #1e3a5f;
}

.btn-rest:hover {
    background: linear-gradient(135deg, #daa520 0%, #b8860b 100%);
}

/* Barre de progression de zone */
.zone-progression {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    border: 1px solid #c9a227;
}

.zone-progression-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.zone-progression-label {
    font-weight: bold;
    color: #1e3a5f;
}

.zone-progression-value {
    color: #666;
}

.zone-progression-bar {
    height: 20px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ccc;
}

.zone-progression-fill {
    height: 100%;
    background: linear-gradient(90deg, #4a90b8 0%, #6bb3d9 100%);
    border-radius: 10px;
    transition: width 0.5s ease;
}

.zone-progression-fill.boss-ready {
    background: linear-gradient(90deg, #c0392b 0%, #e74c3c 100%);
    animation: pulse-boss 1.5s infinite;
}

.zone-progression-fill.boss-vaincu {
    background: linear-gradient(90deg, #27ae60 0%, #2ecc71 100%);
}

@keyframes pulse-boss {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.zone-boss-ready {
    text-align: center;
    color: #c0392b;
    font-weight: bold;
    margin-top: 0.5rem;
    animation: pulse-boss 1.5s infinite;
}

.zone-boss-vaincu {
    text-align: center;
    color: #27ae60;
    font-weight: bold;
    margin-top: 0.5rem;
}

/* Bouton Boss */
.btn-boss {
    padding: 0.75rem 2rem;
    border: 2px solid #c0392b;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    background: linear-gradient(135deg, #c0392b 0%, #922b21 100%);
    color: #fff;
    font-weight: bold;
    animation: pulse-boss 1.5s infinite;
}

.btn-boss:hover {
    background: linear-gradient(135deg, #922b21 0%, #641e16 100%);
    animation: none;
}

/* Confirmation boss */
.boss-confirmation {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: rgba(192, 57, 43, 0.1);
    border: 2px solid #c0392b;
    border-radius: 8px;
    text-align: center;
}

.boss-warning {
    font-size: 1.1rem;
    font-weight: bold;
    color: #c0392b;
    margin-bottom: 0.5rem;
}

.boss-warning-sub {
    color: #666;
    font-style: italic;
    margin-bottom: 1rem;
}

.boss-confirmation-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-boss-confirm {
    padding: 0.75rem 2rem;
    border: 2px solid #c0392b;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    background: linear-gradient(135deg, #c0392b 0%, #922b21 100%);
    color: #fff;
    font-weight: bold;
}

.btn-boss-confirm:hover {
    background: linear-gradient(135deg, #922b21 0%, #641e16 100%);
}

.btn-boss-cancel {
    padding: 0.75rem 2rem;
    border: 2px solid #7f8c8d;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    color: #fff;
}

.btn-boss-cancel:hover {
    background: linear-gradient(135deg, #7f8c8d 0%, #5d6d7e 100%);
}

/* =====================
   Combat
   ===================== */
.panel-combat {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.panel-combat h2 {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 0.25rem;
    color: #c0392b;
}

.combat-lieu {
    text-align: center;
    color: #666;
    font-style: italic;
    margin-bottom: 1.5rem;
}

.combat-arena {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.combatant {
    flex: 1;
    padding: 1rem;
    border-radius: 8px;
    border: 2px solid #c9a227;
}

.combatant-monstre {
    background: linear-gradient(135deg, rgba(192, 57, 43, 0.1) 0%, rgba(192, 57, 43, 0.2) 100%);
}

.combatant-personnage {
    background: linear-gradient(135deg, rgba(74, 144, 184, 0.1) 0%, rgba(74, 144, 184, 0.2) 100%);
}

.combatant h3 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: #1e3a5f;
}

.combatant-info {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.75rem;
}

.combatant-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.combat-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.combat-label {
    width: 30px;
    font-weight: bold;
    font-size: 0.85rem;
    color: #1e3a5f;
}

.combat-stat .stat-bar {
    flex: 1;
}

.combat-value {
    font-size: 0.8rem;
    color: #555;
    min-width: 80px;
    text-align: right;
}

.combat-vs {
    font-size: 1.5rem;
    font-weight: bold;
    color: #c9a227;
    align-self: center;
    padding: 0 0.5rem;
}

.combat-log {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1rem;
    margin-top: 1.5rem;
    flex: 1;
    min-height: 100px;
    overflow-y: auto;
}

.combat-log p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
    color: #333;
}

/* Logs speciaux de combat */
.combat-log .log-victoire {
    color: #27ae60;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    padding: 0.5rem;
    background: rgba(39, 174, 96, 0.1);
    border-radius: 4px;
    margin: 0.5rem 0;
}

.combat-log .log-defaite {
    color: #c0392b;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    padding: 0.5rem;
    background: rgba(192, 57, 43, 0.1);
    border-radius: 4px;
    margin: 0.5rem 0;
}

.combat-log .log-levelup {
    color: #f1c40f;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    padding: 0.5rem;
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.2) 0%, rgba(243, 156, 18, 0.2) 100%);
    border: 1px solid #f1c40f;
    border-radius: 4px;
    margin: 0.5rem 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.combat-log .log-loot {
    color: #8e44ad;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    background: rgba(142, 68, 173, 0.1);
    border-left: 3px solid #8e44ad;
    margin: 0.3rem 0;
}

.combat-log .log-gils {
    color: #c9a227;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    background: rgba(201, 162, 39, 0.1);
    border-left: 3px solid #c9a227;
    margin: 0.3rem 0;
}

.combat-log .log-boss {
    color: #e74c3c;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    padding: 0.5rem;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.2) 0%, rgba(192, 57, 43, 0.2) 100%);
    border: 1px solid #e74c3c;
    border-radius: 4px;
    margin: 0.5rem 0;
}

.combat-log .log-ko {
    color: #e74c3c;
    font-style: italic;
}

.combat-log .log-vaincu {
    color: #27ae60;
    font-weight: 500;
}

.combat-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-combat {
    padding: 0.75rem 1.5rem;
    border: 2px solid #c9a227;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-attack {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: #fff;
}

.btn-attack:hover {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
}

/* Boutons de competences en combat */
.btn-competence {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    color: #fff;
}

.btn-competence:hover {
    background: linear-gradient(135deg, #7f8c8d 0%, #707b7c 100%);
}

.btn-technique {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    color: #fff;
}

.btn-technique:hover {
    background: linear-gradient(135deg, #d35400 0%, #ba4a00 100%);
}

.btn-black-magic {
    background: linear-gradient(135deg, #8e44ad 0%, #6c3483 100%);
    color: #fff;
}

.btn-black-magic:hover {
    background: linear-gradient(135deg, #6c3483 0%, #5b2c6f 100%);
}

.btn-white-magic {
    background: linear-gradient(135deg, #f5f5dc 0%, #e8e4c9 100%);
    color: #2c3e50;
}

.btn-white-magic:hover {
    background: linear-gradient(135deg, #e8e4c9 0%, #d4d0b8 100%);
}

.btn-blue-magic {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: #fff;
}

.btn-blue-magic:hover {
    background: linear-gradient(135deg, #2980b9 0%, #1f6dad 100%);
}

.btn-item {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    color: #fff;
}

.btn-item:hover {
    background: linear-gradient(135deg, #229954 0%, #1e8449 100%);
}

.btn-continue {
    background: linear-gradient(135deg, #f0e68c 0%, #daa520 100%);
    color: #1e3a5f;
}

.btn-continue:hover {
    background: linear-gradient(135deg, #daa520 0%, #b8860b 100%);
}

.btn-combat:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =====================
   Pop-in de competences en combat
   ===================== */
.combat-popin {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popin-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.popin-content {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(240,230,210,0.98) 100%);
    border: 3px solid #c9a227;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.popin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 2px solid #c9a227;
    background: linear-gradient(135deg, #4a90b8 0%, #2d6a8a 100%);
    border-radius: 5px 5px 0 0;
}

.popin-title {
    margin: 0;
    color: #f0e68c;
    font-size: 1.2rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.popin-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 0.5rem;
    line-height: 1;
}

.popin-close:hover {
    color: #e74c3c;
}

.popin-body {
    padding: 1rem;
    overflow-y: auto;
}

.popin-personnage {
    margin: 0 0 0.5rem;
    color: #2c3e50;
}

.popin-mp-info {
    margin: 0 0 1rem;
    color: #2980b9;
    font-weight: bold;
}

.competences-select-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.competence-select-item {
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(240,235,220,0.9) 100%);
    border: 2px solid #c9a227;
    border-radius: 6px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.competence-select-item:hover {
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.2) 0%, rgba(201, 162, 39, 0.3) 100%);
    transform: translateX(5px);
}

.competence-select-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(128, 128, 128, 0.1);
}

.competence-select-item.disabled:hover {
    transform: none;
    background: rgba(128, 128, 128, 0.1);
}

.competence-select-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.competence-select-nom {
    font-weight: bold;
    color: #2c3e50;
}

.competence-select-mp {
    font-size: 0.9rem;
    color: #2980b9;
    font-weight: bold;
}

.competence-select-mp.insufficient {
    color: #e74c3c;
}

.competence-select-desc {
    font-size: 0.85rem;
    color: #555;
    margin: 0.25rem 0;
    font-style: italic;
}

.competence-select-element {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    text-transform: capitalize;
    color: #fff;
    margin-top: 0.25rem;
}

/* Zone active */
.zone-item.actif {
    background: rgba(201, 162, 39, 0.2);
    border-left-color: #c9a227;
}

.zone-item.actif a {
    color: #1e3a5f;
    font-weight: bold;
}

/* Zones verrouillees */
.zone-item.zone-locked {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(128, 128, 128, 0.1);
}

.zone-item.zone-locked:hover {
    background: rgba(128, 128, 128, 0.1);
    border-left-color: transparent;
}

.zone-name-locked {
    display: block;
    padding: 0.5rem 0.75rem;
    margin: -0.5rem -0.75rem;
    color: #888;
}

/* =====================
   Selection d'equipe
   ===================== */
.panel-team-selection h2 {
    text-align: center;
    margin-bottom: 0.5rem;
}

.team-instruction {
    text-align: center;
    color: #666;
    margin-bottom: 1.5rem;
}

.team-selection-container {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.team-available,
.team-selected {
    flex: 1;
}

.team-available h3,
.team-selected h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #c9a227;
}

.team-available-list,
.team-selected-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.team-perso-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: rgba(74, 144, 184, 0.1);
    border: 1px solid #c9a227;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.team-perso-item:hover {
    background: rgba(74, 144, 184, 0.2);
}

.team-perso-item.in-team {
    display: none;
}

/* Personnages non eligibles pour la zone */
.team-locked-title {
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: #888;
    border-top: 1px solid #ddd;
}

.team-locked-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.team-perso-locked {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(128, 128, 128, 0.1) !important;
}

.team-perso-locked:hover {
    background: rgba(128, 128, 128, 0.1) !important;
}

.team-perso-locked .team-perso-nom {
    color: #888;
}

.team-perso-locked-reason {
    font-size: 0.75rem;
    color: #999;
    font-style: italic;
    margin-right: 0.5rem;
}

.team-no-perso {
    padding: 1rem;
    text-align: center;
    color: #888;
    font-style: italic;
}

.team-perso-info {
    flex: 1;
}

.team-perso-nom {
    display: block;
    font-weight: bold;
    color: #1e3a5f;
}

.team-perso-details {
    font-size: 0.85rem;
    color: #666;
}

.team-perso-stats {
    display: flex;
    gap: 0.75rem;
    margin-right: 1rem;
}

.team-stat {
    font-size: 0.8rem;
    color: #555;
}

.btn-add-team,
.btn-remove-team {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-team {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    color: #fff;
}

.btn-add-team:hover {
    background: linear-gradient(135deg, #229954 0%, #1e8449 100%);
}

.btn-remove-team {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
    color: #fff;
}

.btn-remove-team:hover {
    background: linear-gradient(135deg, #a93226 0%, #922b21 100%);
}

.team-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: rgba(74, 144, 184, 0.15);
    border: 2px solid #c9a227;
    border-radius: 6px;
    min-height: 60px;
}

.team-slot-empty {
    background: rgba(0, 0, 0, 0.05);
    border-style: dashed;
    justify-content: center;
}

.slot-label {
    color: #999;
    font-style: italic;
}

.slot-perso-info {
    flex: 1;
}

.slot-perso-nom {
    display: block;
    font-weight: bold;
    color: #1e3a5f;
}

.slot-perso-details {
    font-size: 0.85rem;
    color: #666;
}

.team-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-start-exploration {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    color: #fff;
    transition: all 0.2s ease;
}

.btn-start-exploration:hover:not(:disabled) {
    background: linear-gradient(135deg, #229954 0%, #1e8449 100%);
}

.btn-start-exploration:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-cancel-team {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    color: #fff;
    transition: all 0.2s ease;
}

.btn-cancel-team:hover {
    background: linear-gradient(135deg, #7f8c8d 0%, #707b7c 100%);
}

.btn-change-team {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: #fff;
    transition: all 0.2s ease;
}

.btn-change-team:hover {
    background: linear-gradient(135deg, #2980b9 0%, #2471a3 100%);
}

/* =====================
   Combat Equipe
   ===================== */
.combatant-team {
    background: linear-gradient(135deg, rgba(74, 144, 184, 0.1) 0%, rgba(74, 144, 184, 0.2) 100%);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.team-member {
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.team-member.active-turn {
    border-color: #c9a227;
    background: rgba(201, 162, 39, 0.15);
}

.team-member.ko {
    opacity: 0.5;
    background: rgba(192, 57, 43, 0.1);
}

.team-member-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.team-member-header h4 {
    margin: 0;
    font-size: 1rem;
    color: #1e3a5f;
}

.team-member-info {
    font-size: 0.85rem;
    color: #666;
}

.turn-indicator {
    color: #c9a227;
    font-size: 0.9rem;
    margin-left: auto;
}

.turn-info {
    text-align: center;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: rgba(201, 162, 39, 0.1);
    border-radius: 6px;
}

.turn-info p {
    margin: 0;
    color: #555;
}

.current-turn-name {
    color: #1e3a5f;
}

/* Recap equipe en exploration */
.exploration-team-recap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.exploration-team-recap .exploration-personnage-recap {
    background: rgba(74, 144, 184, 0.1);
    border: 1px solid #c9a227;
    border-radius: 8px;
    padding: 0.75rem;
}

/* =====================
   Combat multi-monstres
   ===================== */
.combatant-monstres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(192, 57, 43, 0.1) 0%, rgba(192, 57, 43, 0.2) 100%);
}

.combatant-monstres.monstres-nombreux {
    flex-direction: column;
}

.monstre-card {
    flex: 1;
    min-width: 120px;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(192, 57, 43, 0.3);
    border-radius: 6px;
    transition: all 0.2s;
    cursor: pointer;
}

.monstre-card:hover:not(.ko) {
    border-color: rgba(192, 57, 43, 0.6);
    background: rgba(255, 255, 255, 0.7);
}

.monstre-card.selected {
    border-width: 3px;
    border-color: #c0392b;
    background: rgba(192, 57, 43, 0.15);
    box-shadow: 0 0 8px rgba(192, 57, 43, 0.4);
}

.monstre-card h3 {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    color: #c0392b;
}

.monstre-card .combatant-info {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.monstre-card.ko {
    opacity: 0.4;
    background: rgba(128, 128, 128, 0.3);
    cursor: not-allowed;
    border-color: #999;
}

.monstre-card.ko h3 {
    text-decoration: line-through;
    color: #666;
}

/* Nom d'equipe de monstres */
.combat-equipe-nom {
    text-align: center;
    color: #c0392b;
    font-style: italic;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

/* =====================
   Barre d'ordre de tour
   ===================== */
.turn-order-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    background: rgba(201, 162, 39, 0.1);
    border: 1px solid #c9a227;
    border-radius: 6px;
}

.turn-order-label {
    font-weight: bold;
    font-size: 0.85rem;
    color: #1e3a5f;
    white-space: nowrap;
}

.turn-order-list {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    align-items: center;
}

.turn-order-item {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.turn-order-item.personnage {
    background: rgba(74, 144, 184, 0.2);
    color: #1e3a5f;
    border: 1px solid rgba(74, 144, 184, 0.4);
}

.turn-order-item.monstre {
    background: rgba(192, 57, 43, 0.2);
    color: #7b241c;
    border: 1px solid rgba(192, 57, 43, 0.4);
}

.turn-order-item.current {
    font-weight: bold;
    transform: scale(1.1);
    box-shadow: 0 0 6px rgba(201, 162, 39, 0.6);
}

.turn-order-item.current.personnage {
    background: rgba(74, 144, 184, 0.4);
    border-color: #4a90b8;
}

.turn-order-item.current.monstre {
    background: rgba(192, 57, 43, 0.4);
    border-color: #c0392b;
}

/* Indicateur de type de tour (ennemi) */
.turn-type-indicator {
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

.turn-type-indicator.enemy {
    color: #c0392b;
    font-weight: bold;
}

/* Monstre actif (tour en cours) */
.monstre-card.active-turn {
    border-color: #c9a227;
    box-shadow: 0 0 10px rgba(201, 162, 39, 0.5);
    background: rgba(201, 162, 39, 0.15);
}