@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
body {
    font-family: sans-serif;
    background: #3C7891;
    color: white;
    margin: 0;
}
.controls {
    background: #34495e;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items:center;
    gap: 15px;
}
        select { padding: 8px; border-radius: 4px; border: none; font-size: 16px; }
        button { padding: 8px 15px; background: #1abc9c; color: white; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background: #16a085; }
        table { border-collapse: collapse; width: 100%; background: #34495e; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
        th, td { border: 1px solid #456789; padding: 12px; text-align: left; }
        th { background: #1abc9c; text-transform: uppercase; font-size: 13px; }
        tr:nth-child(even) { background: #3d566e; }
        .number { text-align: right; font-family: 'Courier New', monospace; font-weight: bold; }



/* Container global du Tracker de bâtiments */
.tracker-buildings-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 1100px;
    margin: 20px auto;
    font-family: 'Montserrat', sans-serif;
}

/* Une ligne de bâtiment */
.building-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1e2b38; /* Fond sombre premium */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s, background 0.2s;
}

.building-row:hover {
    background: #243546;
    border-color: rgba(236, 110, 34, 0.4); /* Lueur orange style Boom Beach */
}

/* Identité du bâtiment (Image + Titre + Sélecteur) */
.building-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 2;
    min-width: 250px;
}

.building-img-wrapper {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 4px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.building-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.building-title-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.building-name {
    font-size: 1.1em;
    font-weight: 700;
    color: #ffffff;
}

/* Badge contenant le select de niveau */
.building-level-badge {
    background: #111a24;
    border-radius: 4px;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.lvl-select {
    background: transparent;
    color: #1abc9c;
    border: none;
    font-weight: 600;
    font-size: 0.85em;
    cursor: pointer;
    outline: none;
}

/* Bloc des statistiques de l'amélioration (Temps / XP) */
.building-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 120px;
}

.building-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    font-weight: 600;
}

.building-stat-item.time { color: #f1c40f; } /* Jaune Horloge */
.building-stat-item.xp { color: #3498db; }   /* Bleu XP */

/* Bloc des ressources requises */
.building-costs {
    display: flex;
    gap: 8px;
    flex: 3;
    justify-content: center;
    flex-wrap: wrap;
}

.resource-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #111a24;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 700;
    min-width: 100px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.res-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* Thématiquation des textes et bordures par ressource */
.resource-pill.wood { color: #e74c3c; border-color: rgba(231, 76, 60, 0.2); }
.resource-pill.stone { color: #bdc3c7; border-color: rgba(189, 195, 199, 0.2); }
.resource-pill.iron { color: #3498db; border-color: rgba(52, 152, 219, 0.2); }

/* Zone du bouton d'action */
.building-action {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-width: 110px;
}



/* Adaptabilité Mobile (Responsive) */
@media (max-width: 768px) {
    .building-row {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
        padding: 15px;
    }
    .building-costs {
        justify-content: flex-start;
        width: 100%;
    }
    .building-action {
        width: 100%;
    }
}







        /* Style du QG cliquable */
        .qg-trigger {
            cursor: pointer;
            transition: transform 0.2s, filter 0.2s;
            text-align:center;
        }
        .qg-trigger:hover {
            transform: scale(1.05);
            filter: brightness(1.2);
        }

        /* La Modal (Fond noir) */
        .modal {
            display: none; 
            position: fixed;
            z-index: 1000;
            left: 0; top: 0; width: 100%; height: 100%;
            background-color: rgba(0,0,0,0.8);
            backdrop-filter: blur(5px);
        }

        /* Contenu de la Modal */
        .modal-content {
            background-color: #1a252f;
            margin: 2% auto;
            padding: 30px;
            border: 2px solid #1abc9c;
            width: 90%;
            max-width: 1100px; /* Plus large pour accueillir les grandes images */
            border-radius: 20px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 0 30px rgba(0,0,0,0.5);
        }

        /* Grille des QG */
        .qg-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr); /* Force exactement 5 colonnes */
            gap: 20px;
            margin-top: 30px;
        }

        .qg-item {
            text-align: center;
            padding: 20px; /* Plus d'espace interne */
            background: #2c3e50;
            border-radius: 12px;
            text-decoration: none;
            color: white;
            transition: all 0.3s ease;
            border: 1px solid transparent;
        }

        .qg-item:hover { 
            background: #34495e; 
            border-color: #1abc9c;
            transform: translateY(-5px);
        }

        /* Images plus grandes */
        .qg-item img { 
            width: 120px; /* Taille augmentée */
            height: auto;
            display: block; 
            margin: 0 auto 15px; 
            filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3));
        }

        .qg-item span { 
            font-size: 16px; /* Texte plus lisible */
            font-weight: bold; 
            color: #ecf0f1;
        }
        
        .close-modal { float: right; font-size: 28px; cursor: pointer; color: #1abc9c; }

/* ==========================================================================
   BARRE DE DÉBLOCAGE RAPIDE DES CHEFS DE BATAILLON (au-dessus du dashboard-wrapper
   de l'onglet Chef de bataillon)
   ========================================================================== */
.officer-quickbar {
    background: #1a252f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    margin-bottom: 20px;
}

/* <details>/<summary> natif -- même principe que .stats-sidebar-accordion
   (rétractable partout, fermé par défaut sur mobile seulement, voir script.js).
   Le padding qui vivait auparavant sur .officer-quickbar directement est
   réparti entre le résumé et la grille pour garder le même rendu visuel. */
.officer-quickbar-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.officer-quickbar-summary::-webkit-details-marker {
    display: none;
}

.officer-quickbar-title {
    margin: 0;
    color: #ecf0f1;
    font-size: 1.05em;
}

.officer-quickbar-arrow {
    font-size: 0.8em;
    color: #bdc3c7;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.officer-quickbar-accordion[open] > .officer-quickbar-summary .officer-quickbar-arrow {
    transform: rotate(180deg);
}

.officer-quickbar-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    padding: 0 18px 18px;
}

@media (min-width: 1300px) {
    .officer-quickbar-grid { grid-template-columns: repeat(9, 1fr); }
}

.officer-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 6px;
    border-radius: 10px;
    background: #212f3c;
    border: 2px solid transparent;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
    text-align: center;
}

.officer-quick-item:hover {
    transform: translateY(-3px);
    border-color: #1abc9c;
}

.officer-quick-unlocked { border-color: rgba(26, 188, 156, 0.5); }
.officer-quick-locked { opacity: 0.55; filter: grayscale(0.6); }
.officer-quick-locked:hover { opacity: 0.85; }

/* Mobile uniquement : 2 colonnes en format carré (desktop reste comme avant,
   6-9 colonnes en rectangles) */
@media (max-width: 768px) {
    .officer-quickbar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .officer-quick-item {
        aspect-ratio: 1 / 1;
        justify-content: center;
        width: 100%;
        max-width: 150px;
        margin: 0 auto;
    }
}

.officer-quick-img-wrapper { position: relative; }

.img-unit-small {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.officer-quick-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 0.85em;
    background: #1a252f;
    border-radius: 50%;
    line-height: 1;
    padding: 2px;
}

.officer-quick-name {
    font-size: 0.78em;
    color: #ecf0f1;
    font-weight: 600;
    line-height: 1.15;
}

/* Modale de confirmation déblocage/verrouillage (réutilise .modal/.modal-content) */
.officer-unlock-modal-content {
    max-width: 380px;
    text-align: center;
}

.officer-unlock-modal-body img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin: 10px auto;
    display: block;
}

.officer-unlock-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.officer-unlock-modal-actions .officer-unlock-btn {
    width: 100%;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    padding: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: filter 0.15s ease;
}

.officer-unlock-modal-actions .officer-unlock-btn:hover { filter: brightness(1.1); }

.officer-unlock-btn-yes { background: #1abc9c; color: #06231d; }
.officer-unlock-btn-no  { background: #e74c3c; color: #fff; }

/* Modale de confirmation avant amélioration (troupes ET bâtiments/pièges) --
   réutilise .modal/.modal-content, voir characters.php / buildings.php / script.js
   (openUpgradePreviewModal). */
.upgrade-preview-modal-content {
    max-width: 480px;
}

.upgrade-preview-modal-content h3 {
    margin: 0 0 16px 0;
    text-align: center;
    color: #1abc9c;
}

#upgrade-preview-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 50vh;
    overflow-y: auto;
}

.upgrade-preview-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    font-size: 0.92em;
}

.upgrade-preview-label { color: #ecf0f1;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px; }
.upgrade-preview-current { color: #95a5a6; }
.upgrade-preview-arrow { color: #7f8c8d; }
.upgrade-preview-next { color: #ecf0f1; font-weight: 600; }
.upgrade-preview-diff { color: #2ecc71; font-weight: 700; min-width: 48px; text-align: right; }

.upgrade-preview-empty {
    text-align: center;
    color: #95a5a6;
    padding: 12px 0;
}

.upgrade-preview-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}



/* Layout Principal en Grid */
.main-layout {
    display: grid;
    grid-template-columns: 250px 1fr; /* Sidebar et contenu (surchargé plus bas) */
}

/* Menu latéral (styles historiques conservés pour .sidebar-title ci-dessous ;
   le positionnement/habillage réel de .sidebar est défini plus bas, section ARCTracker) */

/* Zone de contenu à droite */
.main-content {
    flex-grow: 1;
    padding: 20px;
    box-sizing: border-box;
    background-color: #F4E5C1;
    width: 100%;
    /* Empêche la grille .main-layout de s'étirer pour loger le contenu interne
       (ex : .qg-progress-strip) au lieu de le laisser scroller dans sa propre boîte.
       Sans ça, un enfant plus large que la colonne pousse toute la page en scroll
       horizontal global au lieu de rester confiné à son conteneur overflow-x:auto. */
    min-width: 0;
}

.sidebar-title {
    font-size: 2em;
    text-align: center;
    color: #e3e3e3;
    background-color: #4b5466;
    font-family: Bangers;
    padding: 20px 0;
}

.menu-header {
    cursor: pointer;
    padding: 15px;
    font-family: Bangers;
    background: #4b5466;
    font-size: 1.4em;
    color: #e3e3e3;
}

.nav-button {
    border: none;
    outline: none;
    
    /* Taille identique pour tous les boutons */
    width: 100%;
    max-width: 220px; /* Aligne la largeur des boutons */
    display: block;
    margin: 0 auto;   /* Centre les boutons horizontalement */
    
    /* Gestion du texte sur une seule ligne */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Typographie */
    font-family: 'Bangers', cursive;
    font-size: 1.4em;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    /* Contour noir épais autour des lettres (Text Stroke) */
    text-shadow: 
        -2px -2px 0 #000,  
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
         0px  3px 0px rgba(0, 0, 0, 0.6); /* Ombre portée du texte */

    /* Design du bouton (Couleur de base vert clair de ta capture) */
    background-color: #a2e23b; 
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;

    /* Effet 3D : Bordure inférieure foncée (l'épaisseur du bouton) et bordure supérieure claire (effet de lumière) */
    box-shadow: 
        inset 0 4px 0px rgba(255, 255, 255, 0.4),  /* Reflet clair intérieur haut */
        inset 0 -4px 0px rgba(0, 0, 0, 0.2),       /* Ombre intérieure basse */
        0 5px 0px #5b9200,                         /* Épaisseur 3D du bouton (Vert foncé) */
        0 6px 3px rgba(0, 0, 0, 0.4);              /* Ombre portée sur le fond */

    /* IMPORTANT : Ajout du filtre dans la transition pour que l'éclaircissement soit fluide */
    transition: transform 0.1s ease, filter 0.1s ease, box-shadow 0.1s ease;
}

/* Éclaircissement léger au survol de la souris */
.nav-button:hover {
    filter: brightness(1.08);
}

/* L'effet au clic (Rétrécissement + Éclaircissement flash) */
.nav-button:active {
    transform: scale(0.93) !important; /* Le !important force le rétrécissement si hérité ailleurs */
    filter: brightness(1.25) !important; /* Augmente la luminosité de 25% */
    box-shadow: 
        inset 0 4px 0px rgba(255, 255, 255, 0.4),
        inset 0 -4px 0px rgba(0, 0, 0, 0.2),
        0 1px 0px #5b9200,
        0 2px 1px rgba(0, 0, 0, 0.4); /* Écrase l'effet 3D pour simuler l'appui */
} 

.submenu {
    background: #3d566e;
    margin: 0;
    padding: 12px 15px;
    list-style: none;
}

.submenu li {
    margin-bottom: 12px;
    text-align: center;
}
.submenu li:last-child {
    margin-bottom: 0; /* Retire l'espace sous le dernier bouton */
}

/* Contenu */
h2{
    padding: 10px;
    font-size: 36px;
    font-family: Bangers;
    letter-spacing: 2px !important;
    color: white !important;
    text-shadow: 1px 1px 1px black, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 0px -1px 1px black, 0px 1px 1px black, -1px 0px 1px black, 1px 0px 1px black, 0 2px 1px black, -1px 3px 1px black, 1px 3px 1px black;
    font-weight: 300;
    line-height: 1.25;
    background-color: #3C7891;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 20px 0;
}

h3{
    text-align: center;
}

/* 🔥 h2 (36px) beaucoup trop imposant sur mobile (ex. "Bâtiments Économiques",
   "Chef de bataillon") : réduit + padding/marge resserrés, même habillage
   (contour noir, fond bleu) conservé. */
@media (max-width: 768px) {
    h2 {
        font-size: 22px;
        padding: 8px;
        margin: 0 0 14px 0;
    }
}



.tab-content {
    display: none;
    animation: fadeIn 0.4s;
    border: 10px solid #3C7891;
    border-radius: 10px;
    /* padding: 18px; */
    box-sizing: border-box;
}

.dashboard-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 10px;
}

/* Mobile : la sidebar de stats (2e enfant, flex:1 en ligne) passe AU-DESSUS des cards
   (juste sous le h2) au lieu de rester collée à côté — on reste dans le même
   .dashboard-wrapper, on empile juste verticalement + on réordonne visuellement
   via `order` (le DOM et le rendu desktop ne changent pas). */
@media (max-width: 768px) {
    .dashboard-wrapper {
        flex-direction: column;
    }

    .dashboard-wrapper > div {
        flex: 1 1 auto !important;
        width: 100%;
    }

    .dashboard-wrapper > div:first-child {
        order: 2;
    }

    .dashboard-wrapper > div:last-child {
        order: 1;
    }
}

.category-nav-grid{
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 10px;

}

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

/* Force le masquage de tous les sous-onglets par défaut */
.sub-tab-content {
    display: none !important;
}

/* Affiche uniquement celui qui est actif */
.sub-tab-content.active {
    display: block !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}












.units-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px;
}

.unit-card {
    background: #2c3e50; /* Couleur sombre comme sur ton croquis */
    border-radius: 15px;
    /* width: calc(45% - 20px); */
    width: 100%;
    min-width: 300px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 15px;
    color: white;
    border: 2px solid #34495e;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    align-items: flex-start;
    min-height: 200px;
    gap: 25px;
}

/* Classe appliquée au conteneur de l'unité */
.unit-locked {
    filter: grayscale(100%);
    opacity: 0.7;
    position: relative;
    /* On enlève pointer-events: none; ici pour permettre à l'overlay de capter le clic */
}

.unlock-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.6);
    /* L'overlay capte les clics */
    pointer-events: auto; 
}

/* On force le bouton à être cliquable */
.btn-unlock-officer {
    pointer-events: auto; 
    padding: 15px 25px;
    background-color: #27ae60;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    z-index: 11; /* S'assure qu'il est au-dessus de tout */
}

.unit-talent{
    display: flex;
    flex-direction: column;
    width: 50%;
}
.unit-info-wrapper{
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 50%;
    box-sizing: border-box;
    align-items: center;
}

/* Portrait des cartes Héros/Officiers (.unit-card-hero/.unit-card-officer,
   voir plus bas) : jusqu'ici sans règle dédiée (le sélecteur .unit-image
   existant ne correspondait à aucune classe réellement générée -- .img-unit
   est la vraie classe posée sur le <img>, voir functions.php), donc l'image
   s'affichait à sa taille native, écrasant le reste de la carte. */
.img-unit {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.unit-details {
    flex-grow: 1;
}

.officer-talent {
    display: flex;
    flex-direction: column;
    align-items: center;
}

button.btn-upgrade-talent {
    width: 100%;
}

.officer-ability{
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 6px;
    margin-top: 5px;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   Cartes Héros / Officiers -- stylées indépendamment à partir d'ici
   ========================================================================== */

/* --- Héros : carte plus compacte, image/infos à gauche + les 3 capacités
   (.hero-ability-columns, empilées) à droite (voir plus bas) --- */
.unit-card-hero {
    min-height: 0;
    padding: 12px 16px;
    gap: 16px;
    align-items: stretch;
}
/* 🔥 Élargi 190px -> 240px, au détriment de .hero-ability-columns (demande explicite,
   "réduire la taille des hero-ability-columns et augmenter unit-info-wrapper") --
   .hero-ability-columns est déjà flex:1 (voir plus bas), donc récupère automatiquement
   tout l'espace restant, pas besoin d'y toucher directement. */
.unit-card-hero .unit-info-wrapper {
    width: auto;
    flex: 0 0 240px;
}

/* --- Officiers : sur bureau, colonnes horizontales côte à côte (portrait,
   talents, capacités) comme les Héros -- empilées verticalement uniquement
   en mobile (voir @media max-width:768px plus bas, qui force déjà
   flex-direction:column pour .unit-card-hero ET .unit-card-officer). --- */
.unit-card-officer {
    align-items: stretch;
    min-height: 0;
    gap: 16px;
}
.unit-card-officer .unit-info-wrapper {
    width: auto;
    flex: 0 0 150px;
}
.unit-card-officer .officer-talent {
    flex: 0 0 200px;
}
/* 🔥 Les 2 capacités (passive/active) côte à côte, avec leurs 3 "sous-lignes"
   (header / niveau / amélioration) VRAIMENT alignées entre les 2 colonnes --
   pas juste 2 boîtes indépendantes qui peuvent dériver l'une de l'autre selon
   leur contenu (texte de verrouillage plus ou moins long, etc). Technique :
   .officer-ability devient une grille 2 colonnes x 3 lignes, et les
   conteneurs intermédiaires (.officer-ability-row/.officer-ability-info)
   passent en display:contents pour laisser leurs enfants (header/niveau/
   amélioration) participer DIRECTEMENT à la grille -- chacun placé
   explicitement dans sa colonne (1re/2e capacité) et sa ligne (header=1,
   niveau=2, amélioration=3) via :first-child/:last-child ci-dessous. */
.unit-card-officer .officer-ability {
    width: auto;
    flex: 1;
    min-width: 0;
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: 8px;
    align-items: start;
}
.unit-card-officer .officer-ability-row,
.unit-card-officer .officer-ability-info {
    display: contents;
}
.unit-card-officer .officer-ability-row:first-child .officer-ability-header  { grid-column: 1; grid-row: 1; }
.unit-card-officer .officer-ability-row:first-child .officer-ability-level   { grid-column: 1; grid-row: 2; }
.unit-card-officer .officer-ability-row:first-child .officer-ability-upgrade { grid-column: 1; grid-row: 3; }
.unit-card-officer .officer-ability-row:last-child .officer-ability-header   { grid-column: 2; grid-row: 1; }
.unit-card-officer .officer-ability-row:last-child .officer-ability-level    { grid-column: 2; grid-row: 2; }
.unit-card-officer .officer-ability-row:last-child .officer-ability-upgrade  { grid-column: 2; grid-row: 3; }

/* 🔥 Boutons Débloquer talent suivant/Rétrograder en double (voir
   core/functions.php) : une copie sous unit-details (affichée en bureau), une
   copie dans .officer-talent au même endroit qu'avant (affichée en mobile
   seulement, voir @media plus bas). Une seule des deux est jamais visible à
   la fois. */
.unit-card-officer .officer-talent-actions-original {
    display: none;
}
.unit-card-officer .officer-talent-actions-duplicate {
    display: flex;
    margin: 10px 0 0;
}


/* Coût + temps du prochain niveau de héros, affiché entre unit-details et le bouton,
   à l'intérieur de unit-info-wrapper.
   🔥 En colonne (demande explicite, "les hero-upgrade-cost en colonne") : coût et
   temps empilés au lieu de côte à côte -- gap réduit (14px -> 6px), pensé pour un
   espacement vertical entre 2 lignes plutôt qu'horizontal entre 2 items. */
.hero-upgrade-cost{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-weight: 600;
    color: #ecf0f1;
}
.hero-cost-item,
.hero-time-item{
    display: flex;
    align-items: center;
    gap: 4px;
}
.hero-cost-icon,
.hero-time-icon{
    width: 18px;
    vertical-align: middle;
}

/* Condition "QG niveau X" pour le prochain niveau de héros, au-dessus du coût/temps */
.hero-upgrade-condition {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82em;
    font-weight: 600;
    color: #95a5a6;
    margin-top: 4px;
}

.hero-condition-icon {
    width: 13px;
    height: 13px;
    object-fit: contain;
}

/* Bouton "Améliorer" d'un Héros, verrouillé (QG pas encore au niveau requis) : même
   traitement visuel que les Troupes (.troop-card-action .btn-upgrade.btn-locked:disabled)
   -- rouge, plein, curseur "interdit". Uniquement l'état verrouillé : le style "normal"
   (vert) du bouton héros vient d'ailleurs (pas dans ce fichier) et n'est pas touché ici,
   pour ne rien changer au cas déjà correct. */
.unit-info-wrapper .btn-upgrade.btn-locked:disabled {
    background: #e74c3c;
    color: white;
    opacity: 1;
    cursor: not-allowed;
}


/* Les héros ont 3 capacités, empilées verticalement (comme les officiers,
   voir .officer-ability-row plus bas, partagée entre les deux). */
.hero-ability-columns{
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    background: rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 6px;
    box-sizing: border-box;
    min-width: 0;
}
.hero-ability-column{
    flex: 1;
    min-width: 0;
}
/* 🔥 Demandé : le texte de verrouillage (ex: "Niveau max") et le bouton
   Rétrograder de .officer-ability-upgrade occupaient l'espace en tant que
   groupe centré (le texte collé au bouton, décalé vers la gauche) plutôt que
   chacun centré dans sa propre moitié -- uniquement gênant sur les cartes
   Héros (empilées, une seule colonne large), pas touché côté Officier (grille
   2 colonnes déjà alignée, voir .unit-card-officer plus haut). */
.unit-card-hero .officer-ability-upgrade > * {
    flex: 0 0 50%;
    text-align: center;
}
@media (max-width: 768px) {
    /* Format mobile : cartes Héros ET Officier entièrement empilées (infos
       au-dessus des capacités). 🔥 CORRECTIF : .unit-card-officer était
       resté en flex-direction row hérité de .unit-card sur mobile -- le
       passage à l'horizontal sur bureau (voir plus haut) avait retiré son
       ancien "flex-direction: column" (qui s'appliquait avant à toutes les
       tailles d'écran) sans jamais le redéfinir ici pour le mobile, d'où les
       3 colonnes (portrait/talents/capacités) écrasées côte à côte au lieu de
       s'empiler. */
    .unit-card-hero,
    .unit-card-officer {
        flex-direction: column;
    }
    .unit-card-hero .unit-info-wrapper,
    .unit-card-officer .unit-info-wrapper {
        width: 100%;
        flex: none;
    }
    .unit-card-officer .officer-talent,
    .unit-card-officer .officer-ability {
        width: 100%;
        flex: none;
    }
    /* 🔥 CORRECTIF : align-items:start (posé sur .officer-ability pour la
       grille bureau, voir plus haut) restait actif en mobile faute d'être
       réinitialisé ici -- résultat, .officer-ability-row (et tout son
       contenu) ne s'étirait plus sur toute la largeur mais reprenait la
       largeur de son propre contenu (aligné à gauche), d'où la marge visible
       à droite malgré le correctif précédent sur les boutons. stretch
       (valeur par défaut) restaure l'étirement pleine largeur en mobile. */
    .unit-card-officer .officer-ability {
        align-items: stretch;
    }
    /* Les 2 capacités repassent empilées (pas assez de place côte à côte sur
       téléphone) : on annule la grille desktop (display:contents inclus) et
       on repasse .officer-ability-row/.officer-ability-info en boîtes flex
       normales -- même comportement qu'avant l'alignement en grille. */
    .unit-card-officer .officer-ability {
        display: flex;
        flex-direction: column;
    }
    .unit-card-officer .officer-ability-row,
    .unit-card-officer .officer-ability-info {
        display: flex;
        flex-direction: column;
    }
    .unit-card-officer .officer-ability-row:first-child .officer-ability-header,
    .unit-card-officer .officer-ability-row:first-child .officer-ability-level,
    .unit-card-officer .officer-ability-row:first-child .officer-ability-upgrade,
    .unit-card-officer .officer-ability-row:last-child .officer-ability-header,
    .unit-card-officer .officer-ability-row:last-child .officer-ability-level,
    .unit-card-officer .officer-ability-row:last-child .officer-ability-upgrade {
        grid-column: auto;
        grid-row: auto;
    }

    /* Boutons Débloquer/Rétrograder : copie mobile (dans .officer-talent,
       position inchangée) affichée, copie bureau (sous unit-details) masquée. */
    .unit-card-officer .officer-talent-actions-original {
        display: flex;
    }
    .unit-card-officer .officer-talent-actions-duplicate {
        display: none;
    }

    /* 🔥 Ordre inversé (mobile uniquement) : la liste des 5 talents (check/
       notcheck) passe AVANT les boutons Débloquer/Rétrograder -- nécessite
       .talent-status en flex-column pour que "order" fasse effet (elle n'a
       sinon aucun style propre, simple <div> en flux normal). */
    .unit-card-officer .talent-status {
        display: flex;
        flex-direction: column;
    }
    .unit-card-officer .officer-talent-actions-original {
        order: 2;
    }
    .unit-card-officer .officer-talent-list {
        order: 1;
    }

    /* 🔥 officer-ability-row en pleine largeur : les boutons Améliorer/
       Rétrograder de .officer-ability-upgrade gardaient leur plafond
       max-width:194px (pensé pour talent-actions/hero, plus étroit qu'une
       carte Officier pleine largeur en mobile), ce qui laissait une marge
       inutilisée de chaque côté au lieu de remplir toute la carte.
       flex:0 0 50% (plutôt que flex:1) + justify-content:flex-start :
       chaque bouton garde toujours exactement 50% de la largeur, qu'il y en
       ait 1 ou 2 -- quand un seul est présent (typiquement niveau 1, pas de
       Rétrograder), il reste calé dans la 1re moitié et la 2e reste vide au
       lieu de s'étirer pour occuper toute la ligne. */
    .unit-card-officer .officer-ability-upgrade {
        width: 100%;
        justify-content: flex-start;
    }
    .unit-card-officer .officer-ability-upgrade > * {
        /* shrink:1 (pas 0) pour absorber le gap de 10px entre les 2 boutons
           sans déborder de la carte quand les 2 sont présents. */
        flex: 0 1 50%;
        max-width: 50%;
        box-sizing: border-box;
    }

    /* Cartes Héros/Officiers plus compactes en mobile : portrait réduit +
       moins de marge, pour laisser la place au contenu sans déborder. */
    .unit-card-hero,
    .unit-card-officer {
        padding: 12px;
        gap: 12px;
    }
    .img-unit {
        width: 64px;
        height: 64px;
    }

    /* Sidebars "Progression ..." (.stats-sidebar-accordion, voir aussi
       script.js -- fermées par défaut en mobile) : lignes plus compactes pour
       ne pas déborder de la carte une fois ouvertes, + scroll horizontal en
       dernier recours si ça ne suffit toujours pas. */
    .stats-sidebar-content {
        overflow-x: auto;
    }
    .stats-sidebar-row {
        font-size: 0.78em;
        padding: 5px 8px;
    }
}

.officer-ability-row{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}
.officer-ability-info{
    text-align: center;
    display: flex;
    gap: 10px;
    flex-direction: column;
    width: 100%;
}
.officer-ability-header{
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}
.officer-ability-info-placeholder{
    padding:10px;
    border:1px dashed #555;
    text-align:center;
    background: rgba(0,0,0,0.1);
    border-radius:6px;
    margin-bottom: 5px;
}
.officer-ability-upgrade{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}
.officer-ability-name{
    font-family: "bangers";
    font-weight: 600;
    font-size: 1.5em;
    letter-spacing: 1px;
    color: #fff;
}
.officer-ability-type{
    color: #00D400;
    font-family: "bangers";
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
    display: block;
}
.officer-ability-icon{
    width: 32px;
    vertical-align: middle;
    margin-right: 8px;
}
.officer-ability-level{
    background: #2c3e50;
    padding: 10px 0 10px 0;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.officer-ability-lvl-max{
    color: #F7373E;
    font-weight: bold;
    padding: 2px 6px;
    display: inline-block;
    text-align: center;
}
/* Bouton "Améliorer" des capacités (active/passive/héros), même gabarit que
   .btn-downgrade juste en dessous (même sélecteur groupé) pour que les deux
   boutons d'une même ligne aient TOUJOURS exactement la même taille, qu'ils
   soient affichés côte à côte ou seuls (ex : capacité au niveau max, où seul
   le bouton Rétrograder reste affiché) -- avant ce correctif, .btn-upgrade-ability
   n'avait ni width/max-width/aspect-ratio, ce qui le laissait grandir/rétrécir
   de façon asymétrique par rapport à .btn-downgrade dans le même conteneur flex. */
.officer-ability-upgrade .btn-downgrade,
.talent-actions .btn-downgrade,
.btn-upgrade-ability {
    box-sizing: border-box;
    width: 100%;
    max-width: 194px;
    aspect-ratio: 194 / 50;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    overflow: hidden;
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Bangers', cursive;
    font-weight: 400;
    letter-spacing: 0.5px;
    font-size: 1em;
    white-space: normal;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), 0 3px 4px rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: white;
    transition: box-shadow 0.15s ease, color 0.15s ease;
}

.officer-ability-upgrade .btn-downgrade,
.talent-actions .btn-downgrade {
    background-image: url('images/icons/74.png');
}

.btn-upgrade-ability {
    background-image: url('images/icons/73.png');
}

.officer-ability-upgrade .btn-downgrade:hover:not(:disabled),
.talent-actions .btn-downgrade:hover:not(:disabled),
.btn-upgrade-ability:hover:not(:disabled) {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.1);
}

/* Même correctif que .btn-upgrade:hover plus bas dans le fichier : .btn-upgrade-ability
   est une classe unique (spécificité 0,1,0), insuffisante face au vieux "button:hover"
   générique (0,1,1) tout en haut du fichier -- on réaffirme l'image ici. */
.btn-upgrade-ability:hover:not(:disabled) {
    background-image: url('images/icons/73.png');
}

.officer-ability-upgrade .btn-downgrade:disabled,
.talent-actions .btn-downgrade:disabled {
    opacity: 0.4;
    color: #576574;
    cursor: not-allowed;
}

.btn-upgrade-ability:disabled {
    background: #576574;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Conteneur des boutons débloquer/rétrograder d'un talent, côte à côte */
.talent-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* Liste des 5 talents nommés (check.png/notcheck.png), affichée sous les
   boutons débloquer/rétrograder d'un Officier -- voir core/functions.php. */
.officer-talent-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}
.officer-talent-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
    color: #95a5a6;
}
.officer-talent-list-item.unlocked {
    color: #ecf0f1;
}
.officer-talent-list-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.talent-actions .btn-unlock-talent {
    box-sizing: border-box;
    width: 100%;
    max-width: 194px;
    aspect-ratio: 194 / 50;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    overflow: hidden;
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Bangers', cursive;
    font-weight: 400;
    letter-spacing: 0.5px;
    font-size: 1em;
    white-space: normal;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), 0 3px 4px rgba(0, 0, 0, 0.5);
    background-image: url('images/icons/73.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: white;
    transition: box-shadow 0.15s ease, color 0.15s ease;
}

.talent-actions .btn-unlock-talent:hover:not(:disabled) {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.1);
    background-image: url('images/icons/73.png');
}

.talent-actions .btn-unlock-talent:disabled {
    background: #576574;
    opacity: 0.7;
    cursor: not-allowed;
}
.talent-table{
    display: none;
    margin-top: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    padding: 6px;
}

.unit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.unit-name {
    font-weight: bold;
    font-size: 1.1em;
}

.unit-level {
    font-size: 0.9em;
    color: #f1c40f; /* Couleur jaune pour le niveau */
}

.unit-ability {
    display: flex;
    align-items: center;
    font-size: 0.85em;
    margin-top: 5px;
}

.star-icon {
    width: 18px;
    height: 18px;
    background: gold;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    margin-right: 8px;
}

.tracker-buildings-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.building-row {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
}

/* Ajustement pour que ça s'adapte sur mobile */
@media (max-width: 768px) {
    .building-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   NOUVEAU DESIGN : DASHBOARD & JAUGE ANNEAU COMPLET (360°)
   ========================================================================== */

/* Alignement et espacement de la grille des cartes */
.dashboard-widgets {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 15px;
    justify-content: center;
}


/* Carte de widget : Structure verticale stricte et alignée */
.widget-card {
    background: #1e2b38;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 25px 20px;
    width: 20%;
    min-height: 300px; /* Force une hauteur minimale identique pour toutes les cartes */
    
    /* Flexbox vertical pour isoler le haut, le centre et le bas */
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    align-items: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}

/* Titre du Widget tout en haut */
.widget-card .widget-title {
    font-family: 'Bangers', cursive;
    font-size: 1.4em;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
    width: 100%;
    text-align: center;
    flex-grow: 0;
    min-height: 45px; /* Aligne la base des titres même si l'un fait 1 ligne et l'autre 2 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Conteneur du graphique centré */
.gauge-circle-container {
    width: 140px;
    height: 140px;
    margin: 0 auto; 
    flex-shrink: 0; /* Évite que le cercle ne se déforme */
}

/* L'anneau de progression complet (360°) utilisant un dégradé conique */
.gauge-circle-bar {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    
    /* Fond de base : Gris foncé pour la partie non complétée */
    background: #2c3e50;
    
    /* Dégradé conique dynamique calculé selon la variable PHP (--value) convertie en pourcentage de cercle */
    background: conic-gradient(
        #1abc9c calc(var(--value, 0) * 1%), 
        #2c3e50 0deg
    );
    
    /* Transition douce si le pourcentage change */
    transition: background 0.5s ease;
}

/* Le masque intérieur sombre pour créer l'effet d'anneau évidé */
.gauge-circle-inner {
    position: absolute;
    top: 14px;      /* Épaisseur de l'anneau de progression (ici 14px) */
    left: 14px;
    width: 112px;   /* Calcul : 140px - (14px * 2) */
    height: 112px;
    border-radius: 50%;
    background: #1e2b38; /* Même couleur exacte que le fond de la carte .widget-card */
    
    /* Centre le texte du pourcentage verticalement et horizontalement à l'intérieur */
    display: block;
    line-height: 112px; 
    text-align: center;
}

/* Texte numérique du pourcentage au centre exact de l'anneau */
.gauge-percentage-text {
    font-family: 'Courier New', monospace;
    font-size: 2.1em;
    font-weight: bold;
    color: #ffffff;
    vertical-align: middle;
    display: inline-block;
}

/* Légende tout en bas */
.widget-card .gauge-legend {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95em;
    font-weight: 600;
    color: #f1c40f; /* Écrit en jaune or comme tes niveaux */
    margin-top: 0;
    margin-bottom: 0;
}

/* ==========================================================================
   MONUMENT MYSTIQUE — onglet dédié (style "soft", palette navy/teal de l'app)
   ========================================================================== */

.mm-panel {
    font-family: 'Montserrat', sans-serif;
    max-width: 900px;
    margin: 0 auto;
}

.mm-title {
    font-family: 'Bangers', cursive;
    font-size: 1.9em;
    color: var(--bb-white, #eef4f8);
    margin-bottom: 18px;
    letter-spacing: 1px;
}

.mm-top-card {
    background: var(--bb-navy-800, #1c2c39);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 18px 20px;
    border-radius: 12px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.mm-top-card-visual {
    background: rgba(0, 0, 0, 0.18);
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mm-top-card-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.mm-top-card-body { flex-grow: 1; }

.mm-top-card-label {
    display: block;
    font-weight: 600;
    font-size: 1.05em;
    margin-bottom: 10px;
    color: var(--bb-white, #eef4f8);
}

.mm-top-card-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mm-level-input {
    padding: 9px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bb-navy-900, #16232d);
    color: #fff;
    font-size: 1.05em;
    width: 100px;
    font-weight: bold;
    text-align: center;
}

.mm-save-btn {
    background: var(--bb-teal, #1abc9c);
    color: var(--bb-navy-950, #0f1a22);
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-weight: 700;
    font-size: 0.95em;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.mm-save-btn:hover { background: #22d6b5; }
.mm-save-btn:active { transform: scale(0.97); }

.mm-save-status {
    font-size: 0.9em;
    color: var(--bb-muted, #8aa0b0);
}

.mm-save-status-ok { color: var(--bb-teal, #1abc9c); }
.mm-save-status-error { color: #e74c3c; }

/* Liste des bonus : cartes empilées soft, sans thead ni colonne "Niveau requis" */
.mm-bonus-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bb-navy-800, #1c2c39);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.mm-bonus-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--bb-navy-700, #24384a);
    transition: background-color 0.2s ease, opacity 0.3s ease;
}

.mm-bonus-name {
    font-weight: 600;
    color: var(--bb-white, #eef4f8);
    margin-right: auto;
}

.mm-bonus-total {
    min-width: 70px;
    text-align: right;
    font-weight: 700;
    color: var(--bb-teal, #1abc9c);
    font-variant-numeric: tabular-nums;
}

.mm-qty-field {
    padding: 7px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bb-navy-900, #16232d);
    color: #fff;
    width: 80px;
    text-align: right;
    font-weight: bold;
    flex-shrink: 0;
}

.mm-bonus-row-locked {
    opacity: 0.4;
    background: var(--bb-navy-900, #16232d);
}

.mm-bonus-row-locked .mm-bonus-name { color: var(--bb-muted, #8aa0b0); }
.mm-bonus-row-locked .mm-bonus-total { color: var(--bb-muted, #8aa0b0); }

.mm-bonus-row-locked .mm-qty-field {
    background: rgba(255, 255, 255, 0.05);
    color: var(--bb-muted, #8aa0b0);
    cursor: not-allowed;
}

/* ==========================================================================
   ONGLET PROFIL > STATUE
   ========================================================================== */
.statue-panel {
    font-family: 'Montserrat', sans-serif;
    max-width: 1100px;
    margin: 0 auto;
}

.statue-title {
    font-family: 'Bangers', cursive;
    font-size: 1.9em;
    color: var(--bb-white, #eef4f8);
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.statue-subtitle {
    color: var(--bb-muted, #8aa0b0);
    margin-bottom: 16px;
}

.statue-empty-msg {
    color: var(--bb-muted, #8aa0b0);
    background: var(--bb-navy-800, #1c2c39);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 18px 20px;
}

.statue-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bb-navy-800, #1c2c39);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.statue-row {
    display: grid;
    grid-template-columns: 50px 1.4fr 1.4fr 110px 40px;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bb-navy-700, #24384a);
}

.statue-row-header {
    background: transparent;
    color: var(--bb-muted, #8aa0b0);
    font-weight: 700;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 14px;
}

.statue-slot-number {
    font-weight: 700;
    color: var(--bb-teal, #1abc9c);
    text-align: center;
}

.statue-select {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bb-navy-900, #16232d);
    color: #fff;
    font-weight: 600;
    width: 100%;
}

.statue-select:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: var(--bb-muted, #8aa0b0);
    cursor: not-allowed;
}

.statue-input-boost {
    padding: 7px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bb-navy-900, #16232d);
    color: #fff;
    width: 100%;
    text-align: right;
    font-weight: bold;
}

.statue-input-boost:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: var(--bb-muted, #8aa0b0);
    cursor: not-allowed;
}

.statue-clear-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.statue-clear-btn:hover { opacity: 1; }

.statue-save-row {
    margin-top: 12px;
    text-align: right;
}

.mm-bonus-save-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
}

/* ==========================================================================
   PANNEAU QUARTIER GÉNÉRAL (modal_qg.php)
   ========================================================================== */

.qg-panel {
    width: 75%;
    margin: 0 auto 30px auto;
    background: #3C7891;
    border: 1px solid #3e4a56;
    border-radius: 14px;
    color: #dcdde1;
    font-family: sans-serif;
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.5); */
    overflow: hidden;
    box-sizing: border-box;
    border: 10px solid #3C7891;
}

/* Bandeau bleu du haut avec le nom du QG (traduit) + son niveau */
.qg-panel-header {
    background: #3C7891;
    padding: 16px 24px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.qg-panel-header h2 {
    margin: 0;
    font-family: 'Bangers', cursive;
    letter-spacing: 0.5px;
    font-size: 1.7em;
    color: #ecf0f1;
    text-shadow: 0 2px 0 rgba(0,0,0,0.35);
}

.qg-panel-header-sub {
    font-size: 0.9em;
    color: #d4e8ef;
    font-weight: 600;
}

/* Corps : image à gauche | déblocages au milieu | coûts/bouton à droite */
.qg-panel-body {
    display: grid;
    grid-template-columns: 220px 1fr 260px;
    gap: 24px;
    padding: 24px;
    align-items: stretch;
    background: #F4E5C1;
}

.qg-panel-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    padding: 10px;
}

.qg-panel-visual img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.4));
}

/* Colonne centrale : bâtiments/troupes débloqués au niveau suivant */
.qg-panel-unlocks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.qg-panel-subtitle {
    margin: 0;
    font-family: 'Bangers', cursive;
    letter-spacing: 0.5px;
    font-size: 1.15em;
    color: #1abc9c;
}

.qg-unlocks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 14px;
    align-content: start;
}

.qg-unlock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.qg-unlock-icon-wrap {
    position: relative;
    width: 64px;
    height: 64px;
}

.qg-unlock-icon-wrap img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: #2f3640;
    border-radius: 10px;
    padding: 6px;
    box-sizing: border-box;
}

.qg-unlock-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: #EE893E;
    color: #1a1208;
    font-size: 0.65em;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.qg-unlock-name {
    line-height: 1.2;
    color: #fff;
    text-shadow: 1px 1px 1px black, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 0px -1px 1px black, 0px 1px 1px black, -1px 0px 1px black, 1px 0px 1px black, 0 2px 1px black, -1px 3px 1px black, 1px 3px 1px black;
}

.qg-unlocks-empty {
    color: #8aa0b0;
    font-size: 0.9em;
    font-style: italic;
    margin: 0;
}

/* Colonne de droite : coûts, temps, XP, bouton d'amélioration */
.qg-panel-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qg-cost-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #2f3640;
    border-radius: 10px;
    padding: 12px;
}

.qg-cost-row,
.qg-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95em;
    font-weight: 600;
    color: #fff;
    text-shadow: 1px 1px 1px black, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 0px -1px 1px black, 0px 1px 1px black, -1px 0px 1px black, 1px 0px 1px black, 0 2px 1px black, -1px 3px 1px black, 1px 3px 1px black;
}

.qg-cost-row img,
.qg-info-row img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.qg-btn-upgrade {
    margin-top: auto;
    padding: 12px 0;
    border: none;
    background: linear-gradient(90deg, #A7E74A, #8FCC43);
    color: #fff;
    text-shadow: 1px 1px 1px black, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 0px -1px 1px black, 0px 1px 1px black, -1px 0px 1px black, 1px 0px 1px black, 0 2px 1px black, -1px 3px 1px black, 1px 3px 1px black;
    font-family: 'Bangers', cursive;
    font-size: 1.25em;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 4px 0 #7BB428;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
}

.qg-btn-upgrade-sub {
    font-family: sans-serif;
    font-size: 0.5em;
    letter-spacing: 0;
    font-weight: 600;
    text-transform: none;
}

.qg-btn-upgrade:hover { background: #7BB428; 
    box-shadow: 0 4px 0 #A7E74A; }

.qg-btn-upgrade:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #b9631f;
}

.qg-panel-maxed {
    background: #F4E5C1;
    grid-template-columns: 220px 1fr;
    align-items: center;
}

.qg-maxed-text {
    text-align: center;
    color: #1abc9c;
    font-weight: 700;
    font-size: 1.1em;
    margin: 0;
}

/* ==========================================================================
   🔥 Bandeau identité + Déconnexion (demande explicite) : fusion de l'ancien
   .profile-page-header/.profile-page-actions (tracker/dashboard.php),
   supprimés en tant que blocs séparés -- ce panneau QG (.qg-panel, qui prend
   le lead) porte maintenant l'identité joueur tout en haut, au-dessus de son
   propre .qg-panel-header. Même famille de couleurs que le header du panneau
   (#3C7891) mais légèrement assombrie pour distinguer les deux bandeaux.
   ========================================================================== */
.qg-panel-topbar {
    background: #2f6277;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

.qg-panel-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.qg-panel-identity-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #0d1b2a;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qg-panel-identity-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qg-panel-identity-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.qg-panel-identity-pseudo {
    font-family: 'Bangers', cursive;
    letter-spacing: 0.5px;
    font-size: 1.15em;
    color: #ecf0f1;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qg-panel-identity-sub {
    font-size: 0.82em;
    color: #d4e8ef;
    font-weight: 600;
}

.qg-panel-logout-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ecf0f1;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85em;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}

.qg-panel-logout-btn:hover {
    border-color: #e74c3c;
    transform: translateY(-1px);
}

/* ==========================================================================
   🔥 "Ta collection" fusionnée dans le panneau QG (demande explicite) :
   nouvelle section tout en bas de .qg-panel, séparée par une ligne -- ex-bloc
   .collection-overview séparé plus bas dans tracker/dashboard.php (voir
   renderCollectionOverview() dans core/functions.php, appelée à l'identique).
   .collection-overview garde son propre style de carte sombre autonome (voir
   plus bas dans ce fichier) ; ce bloc-ci ne fait qu'ajouter le fond crème et
   le séparateur pour rester cohérent avec .qg-panel-body/.qg-panel-maxed
   juste au-dessus, et neutraliser sa marge basse désormais inutile (dernier
   élément du panneau).
   ========================================================================== */
.qg-panel-collection {
    background: #F4E5C1;
    padding: 20px 24px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.qg-panel-collection .collection-overview {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .qg-panel { width: 95%; }
    .qg-panel-body { grid-template-columns: 1fr; }
    .qg-panel-maxed { grid-template-columns: 1fr; }
    .qg-panel-visual { width: 100%; max-height: 220px; box-sizing: border-box; }
    .qg-panel-visual img { max-width: 100%; max-height: 200px; width: auto; height: auto; object-fit: contain; }
}

/* ==========================================================================
   CARTES DE BÂTIMENTS (renderBuildingsTable)
   ========================================================================== */

/* Grille : 3 bâtiments par ligne */
.buildings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Carte individuelle : nom/niveau -> image -> coûts en colonne -> boutons */
.building-card {
    background: #2c3e50;
    border: 2px solid #34495e;
    border-radius: 15px;
    color: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.building-card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 16px 18px 0;
}

.building-card-name {
    font-weight: bold;
    font-size: 1.1em;
    color: #ffffff;
}

.building-card-level {
    color: #1abc9c;
    font-weight: bold;
    font-size: 1em;
}

.building-card-visual {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin: 12px 18px 0;
    padding: 15px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.building-card-img {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
}

/* Zone basse : titre d'amélioration, coûts, temps, boutons */
.building-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 16px 18px 18px;
    width: 100%;
    box-sizing: border-box;
}

.building-card-upgrade-title {
    font-weight: bold;
    font-size: 1em;
    color: #ecf0f1;
    align-self: flex-start;
}

.building-card-maxed {
    color: #e74c3c;
    font-weight: bold;
    font-size: 1.05em;
}

/* Condition "QG niveau X" / "Arsenal niveau X", entre le titre et les coûts */
.building-card-condition {
    align-self: flex-start;
    font-size: 0.82em;
    font-weight: 600;
    color: #95a5a6;
    margin-top: -4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.building-card-condition-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Coûts affichés en colonne (un par ligne), icône + valeur groupées à gauche */
.building-card-costs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.building-cost-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    font-size: 0.9em;
    font-weight: 600;
    color: #ecf0f1;
}

.building-cost-label {
    display: flex;
    align-items: center;
}

.building-cost-value {
    font-variant-numeric: tabular-nums;
}

.building-cost-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Temps de construction/amélioration, sous les coûts */
.building-card-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9em;
    font-weight: 600;
    color: #f1c40f;
}

.building-time-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Style de base générique pour TOUT bouton .btn-upgrade / .btn-downgrade, quel que soit
   son conteneur (building-card-body, troop-card-action, building-action, building-card-action,
   officer-ability-upgrade, talent-actions...). Garantit que même un nouveau bouton ajouté
   sans wrapper dédié utilise bien le fond 73.png / 74.png et le bon gabarit. Les sélecteurs
   plus spécifiques ci-dessous restent inoffensifs par-dessus (mêmes valeurs). */
.btn-upgrade,
.btn-downgrade {
    box-sizing: border-box;
    width: 100%;
    max-width: 194px;
    aspect-ratio: 194 / 50;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    overflow: hidden;
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Bangers', cursive;
    font-weight: 400;
    letter-spacing: 0.5px;
    font-size: 1em;
    white-space: normal;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), 0 3px 4px rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: white;
    transition: box-shadow 0.15s ease, color 0.15s ease;
}

.btn-upgrade {
    background-image: url('images/icons/73.png');
}

.btn-downgrade {
    background-image: url('images/icons/74.png');
}

.btn-upgrade:hover:not(:disabled),
.btn-downgrade:hover:not(:disabled) {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.1);
}

/* 🔥 CORRECTIF hover vert : la règle générique "button:hover { background: #16a085; }"
   tout en haut du fichier (reliquat d'une ancienne page) a pour spécificité (0,1,1),
   supérieure à celle du simple ".btn-upgrade { background-image: ... }" (0,1,0) --
   elle gagnait donc sur background-image au survol et l'écrasait par un fond vert uni,
   UNIQUEMENT pour les boutons qui n'ont pas de wrapper dédié plus spécifique (héros,
   personnage générique, tribus -- .building-card-body/.troop-card-action ont 2 classes
   et n'étaient pas touchés). On réaffirme donc l'image ici : ".btn-upgrade:hover" a une
   spécificité de (0,3,0), ça règle le problème pour de bon. */
.btn-upgrade:hover:not(:disabled) {
    background-image: url('images/icons/73.png');
}

.btn-downgrade:hover:not(:disabled) {
    background-image: url('images/icons/74.png');
}

.btn-upgrade:disabled {
    background: #576574;
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-downgrade:disabled {
    opacity: 0.4;
    color: #576574;
    cursor: not-allowed;
}

.btn-upgrade.btn-locked:disabled {
    background: #e74c3c;
    color: white;
    opacity: 1;
    cursor: not-allowed;
}

/* Zone d'action des cartes tribus (bouton Améliorer + Rétrograder empilés) */
.building-card-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 18px 18px;
    width: 100%;
    box-sizing: border-box;
}

/* Réglage "Afficher les boutons Rétrograder" (voir core/settings.php,
   show_downgrade_buttons -- paramètres.php) : quand désactivé, l'attribut
   data-show-downgrade-btns="0" est posé sur <html> par tracker/includes/header.php,
   et masque TOUS les boutons .btn-downgrade (bâtiments, troupes, héros, officiers,
   tribus, gravures, talents), quel que soit leur conteneur. */
html[data-show-downgrade-btns="0"] .btn-downgrade {
    display: none !important;
}

/* Bouton Construire / Améliorer, pleine largeur */
.building-card-body .btn-upgrade {
    box-sizing: border-box;
    width: 100%;
    max-width: 194px;
    aspect-ratio: 194 / 50;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    overflow: hidden;
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Bangers', cursive;
    font-weight: 400;
    letter-spacing: 0.5px;
    font-size: 1em;
    white-space: normal;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), 0 3px 4px rgba(0, 0, 0, 0.5);
    background-image: url('images/icons/73.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: white;
}

.building-card-body .btn-upgrade:hover:not(:disabled) {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.1);
}

.building-card-body .btn-upgrade:disabled {
    background: #576574;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Bouton "Améliorer" verrouillé (QG/Arsenal pas encore au niveau requis) : rouge, inerte.
   Priorité sur le disabled générique gris grâce à la classe supplémentaire .btn-locked. */
.building-card-body .btn-upgrade.btn-locked:disabled {
    background: #e74c3c;
    color: white;
    opacity: 1;
    cursor: not-allowed;
}

/* Bouton Rétrograder, transparent avec bord + texte en vert (logique branchée plus tard) */
.building-card-body .btn-downgrade {
    box-sizing: border-box;
    width: 100%;
    max-width: 194px;
    aspect-ratio: 194 / 50;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    overflow: hidden;
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Bangers', cursive;
    font-weight: 400;
    letter-spacing: 0.5px;
    font-size: 1em;
    white-space: normal;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), 0 3px 4px rgba(0, 0, 0, 0.5);
    background-image: url('images/icons/74.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: white;
    transition: box-shadow 0.15s ease, color 0.15s ease;
}

.building-card-body .btn-downgrade:hover:not(:disabled) {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.1);
}

.building-card-body .btn-downgrade:disabled {
    opacity: 0.4;
    color: #576574;
    cursor: not-allowed;
}

/* Adaptabilité : 2 bâtiments par ligne en tablette, 1 en mobile */
@media (max-width: 1100px) {
    .buildings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .buildings-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   CARTES DE TROUPES / PROTO-TROUPES (renderTroopsTable)
   ========================================================================== */

/* Grille : 2 unités par ligne */
.troops-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}

/* Carte individuelle : contenu centré verticalement, même esprit que .building-card */
.troop-card {
    background: #2c3e50;
    border: 2px solid #34495e;
    border-radius: 15px;
    padding: 20px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.troop-card-visual {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.troop-card-img {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
}

.troop-card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.troop-card-name {
    font-weight: bold;
    font-size: 1.1em;
    color: #ffffff;
}

/* Ligne titre des cartes gravures, au-dessus de l'image : nom + qualité empilés à
   gauche, icône du type (Shard) à droite. Élément direct de .troop-card (pas de
   .troop-card-info) pour profiter de sa pleine largeur, même principe que .troop-card-costs. */
.engraving-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.engraving-name-quality {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
}

.engraving-type-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.troop-card-level {
    color: #1abc9c;
    font-weight: bold;
    font-size: 1em;
}

/* Ligne des coûts (Or / Jetons Proto) avec icônes, alignée à gauche */
.troop-card-costs {
    display: flex;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
}

.troop-cost-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    font-weight: 600;
    color: #ecf0f1;
}

.troop-cost-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Temps d'amélioration, sous les coûts */
.troop-card-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9em;
    font-weight: 600;
    color: #f1c40f;
}

.troop-time-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Bouton Améliorer, toujours en dernier, pleine largeur */
.troop-card-action {
    width: 100%;
    margin-top: 5px;
}

.troop-card-action .btn-upgrade {
    box-sizing: border-box;
    width: 100%;
    max-width: 194px;
    aspect-ratio: 194 / 50;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    overflow: hidden;
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Bangers', cursive;
    font-weight: 400;
    letter-spacing: 0.5px;
    font-size: 1em;
    white-space: normal;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), 0 3px 4px rgba(0, 0, 0, 0.5);
    background-image: url('images/icons/73.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: white;
}

.troop-card-action .btn-upgrade:hover:not(:disabled) {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.1);
}

.troop-card-action .btn-upgrade:disabled {
    background: #576574;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Bouton "Améliorer" verrouillé (Arsenal/Atelier pas encore au niveau requis) : rouge, inerte.
   Priorité sur le disabled générique gris grâce à la classe supplémentaire .btn-locked (même
   pattern que .building-card-body .btn-upgrade.btn-locked:disabled). */
.troop-card-action .btn-upgrade.btn-locked:disabled {
    background: #e74c3c;
    color: white;
    opacity: 1;
    cursor: not-allowed;
}

/* Titre "Améliorer au niveau X :", aligné à gauche comme sur les cards bâtiments */
.troop-card-upgrade-title {
    align-self: flex-start;
    font-weight: bold;
    font-size: 1em;
    color: #ecf0f1;
}

/* Condition "Arsenal niveau X" / "Atelier de Proto-troupes niveau X", entre le niveau et les coûts */
.troop-card-condition {
    align-self: flex-start;
    font-size: 0.82em;
    font-weight: 600;
    color: #95a5a6;
    margin-top: -4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.troop-card-condition.locked {
    color: #e74c3c;
    gap: 8px;
}

.troop-card-condition-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Bouton Rétrograder, transparent avec bord + texte en vert (logique branchée plus tard) */
.troop-card-action .btn-downgrade {
    box-sizing: border-box;
    width: 100%;
    max-width: 194px;
    aspect-ratio: 194 / 50;
    height: auto;
    margin: 8px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    overflow: hidden;
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Bangers', cursive;
    font-weight: 400;
    letter-spacing: 0.5px;
    font-size: 1em;
    white-space: normal;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), 0 3px 4px rgba(0, 0, 0, 0.5);
    background-image: url('images/icons/74.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: white;
    transition: box-shadow 0.15s ease, color 0.15s ease;
}

.troop-card-action .btn-downgrade:hover:not(:disabled) {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.1);
}

.troop-card-action .btn-downgrade:disabled {
    opacity: 0.4;
    color: #576574;
    cursor: not-allowed;
}

/* Adaptabilité : 2 unités par ligne en tablette, 1 en mobile */
@media (max-width: 1100px) {
    .troops-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .troops-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ACCORDÉON DES SIDEBARS DE STATS
   (renderStatsSidebar / renderUnitsStatsSidebar / renderHeroesStatsSidebar /
   renderLeadersStatsSidebar) — ouvert par défaut sur PC, fermé sur mobile
   (état initial géré en JS via matchMedia, toggle natif <details> ensuite).
   ========================================================================== */

.stats-sidebar {
    background: #2c3e50;
    border-radius: 8px;
    color: #fff;
    border: 1px solid #456789;
    overflow: hidden;
}

.stats-sidebar-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.stats-sidebar-summary::-webkit-details-marker {
    display: none;
}

.stats-sidebar-title {
    font-weight: bold;
    font-size: 1.05em;
}

.stats-sidebar-percent {
    font-size: 1.3em;
    font-weight: bold;
    color: #1abc9c;
    flex-shrink: 0;
}

.stats-sidebar-arrow {
    font-size: 0.8em;
    color: #bdc3c7;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.stats-sidebar-accordion[open] > .stats-sidebar-summary .stats-sidebar-arrow {
    transform: rotate(180deg);
}

.stats-sidebar-content {
    padding: 0 15px 15px;
    border-top: 1px solid #3e4a56;
    padding-top: 12px;
}

/* ==========================================================================
   LIGNES DE CONTENU DES SIDEBARS "Progression ..." (renderStatsSidebarRow) --
   uniformisées sur toutes les pages (Bâtiments/Troupes/Héros/Officiers/
   Gravures ; demande explicite "uniformiser ces volants ... ajoute le %
   à chaque ligne ... je veux pas le header du tableau ... design un peu
   similaire aux tableaux du dashboard [.progression-table/.resource-summary-
   table] mais SANS le box-shadow qu'ils portent" -- même famille visuelle
   (petites cartes espacées, fond #373737, coins arrondis) que ces tableaux,
   volontairement à plat (pas de box-shadow).
   ========================================================================== */

.stats-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85em;
}

.stats-sidebar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    background: #373737;
    border-radius: 8px;
}

/* Sous-ligne rattachée à la ligne précédente (ex: "Capacités de {héros}" sous
   son héros) : légèrement en retrait, fond un cran plus sombre, pas de gap
   au-dessus pour rester visuellement collée à sa ligne parente. */
.stats-sidebar-row-sub {
    margin-top: -3px;
    padding-left: 20px;
    background: #2f2f2f;
    font-style: italic;
    font-size: 0.92em;
}

.stats-sidebar-row-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Détail secondaire sous le nom (ex: Officiers -- "Talent 3/5 · Passif 8 ·
   Actif 5") : remplace les anciennes colonnes de tableau dédiées, retirées
   avec le header (demande explicite "je veux pas le header du tableau"). */
.stats-sidebar-row-detail {
    display: block;
    font-size: 0.85em;
    color: #95a5a6;
    font-weight: normal;
    white-space: normal;
}

.stats-sidebar-row-value {
    flex-shrink: 0;
}

/* Officiers : $value_text vide (le détail va dans .stats-sidebar-row-detail,
   voir renderLeadersStatsSidebar) -- la colonne valeur se masque plutôt que
   de laisser un espace vide entre le nom et le %. */
.stats-sidebar-row-value:empty {
    display: none;
}

/* ===================== ARCHIPEL — Régions (checkboxes groupées par niveau
   de Radar, voir renderRegionsTable() dans functions.php) ===================== */

.archipel-level-section {
    margin-bottom: 22px;
}

.archipel-level-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.archipel-level-header h3 {
    margin: 0;
    font-size: 1.05em;
    color: var(--bb-white, #eef4f8);
}

.archipel-level-progress {
    font-size: 0.85em;
    font-weight: 600;
    flex-shrink: 0;
}

/* 🔥 3 colonnes (demande explicite) -- passe à 2 puis 1 colonne en dessous
   d'une certaine largeur pour rester lisible sur tablette/mobile. */
.archipel-zone-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

@media (max-width: 900px) {
    .archipel-zone-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .archipel-zone-list { grid-template-columns: 1fr; }
}

/* 1 zone = 1 <details> : la case à cocher paie/explore, le reste de la ligne
   (résumé) ouvre/ferme le détail des nœuds (trésors, bases...) en dessous. */
.archipel-zone {
    background: #373737;
    border-radius: 8px;
    overflow: hidden;
}

.archipel-zone-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
    font-size: 0.9em;
}

.archipel-zone-summary::-webkit-details-marker { display: none; }
.archipel-zone-summary::marker { content: ''; }

.archipel-zone-checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: #2ecc71;
    cursor: pointer;
}

.archipel-zone-checkbox:disabled {
    cursor: default;
}

/* Icône(s) du contenu de la zone -- toutes les icônes distinctes présentes
   (dédupliquées par icône finale, voir getRegionNodeIcon()), positionnées
   entre le titre/coût et le chevron (demande explicite). */
.archipel-zone-icons {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.archipel-zone-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* Nom + coût empilés (demande explicite, "met le coût en dessous de la
   zone") plutôt que côte à côte -- l'ancienne colonne Temps est retirée
   entièrement (demande explicite, "retire le trait entre le coût et le
   chevron"). */
.archipel-zone-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.archipel-zone-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archipel-zone-cost {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #f1c40f;
    font-size: 0.85em;
}

.archipel-zone-cost img {
    width: 14px;
    height: 14px;
}

.archipel-zone-arrow {
    flex-shrink: 0;
    color: #95a5a6;
    font-size: 0.8em;
    transition: transform 0.15s ease;
}

.archipel-zone[open] .archipel-zone-arrow {
    transform: rotate(180deg);
}

.archipel-zone-content {
    padding: 0 12px 10px 40px;
}

.stats-sidebar-row-percent {
    flex-shrink: 0;
    font-weight: bold;
    min-width: 3em;
    text-align: right;
}

/* ==========================================================================
   ANNEAUX DE PROGRESSION (renderProgressRing) — principe %age inspiré de
   dexplorer-hazel.vercel.app. Utilisés dans les sidebars (remplace l'ancien
   %age plat .stats-sidebar-percent) et dans .collection-overview (dashboard).
   ========================================================================== */

.progress-ring-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.progress-ring-wrap svg {
    display: block;
    transform: rotate(-90deg);
}

.progress-ring-bg {
    stroke: rgba(255, 255, 255, 0.12);
}

.progress-ring-fill {
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}

.progress-ring-label {
    position: absolute;
    font-weight: bold;
    color: #ecf0f1;
    line-height: 1;
}

.progress-ring-sidebar .progress-ring-label {
    font-size: 11px !important;
}

.progress-ring-hero .progress-ring-label {
    font-size: 26px !important;
}

/* ==========================================================================
   "TA COLLECTION" — anneau global + cartes par catégorie (haut du dashboard)
   ========================================================================== */

.collection-overview {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    background: #2c3e50;
    border: 1px solid #456789;
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.collection-overview-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.collection-overview-hero-label {
    font-family: 'Bangers', cursive;
    letter-spacing: 0.5px;
    color: #ecf0f1;
    font-size: 1.15em;
}

.collection-overview-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    flex: 1;
}

.collection-overview-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #34495e;
    border-left: 4px solid var(--cat-color, #2477b2);
    border-radius: 8px;
    padding: 10px 16px;
    text-decoration: none;
    flex: 1;
    min-width: 170px;
    transition: background 0.15s ease, transform 0.15s ease;
}

.collection-overview-card:hover {
    background: #3d5670;
    transform: translateY(-2px);
}

.collection-overview-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.collection-overview-card-label {
    font-weight: bold;
    color: #ecf0f1;
    font-size: 0.95em;
}

.collection-overview-card-sub {
    color: #95a5a6;
    font-size: 0.8em;
}

@media (max-width: 768px) {
    .collection-overview {
        flex-direction: column;
        padding: 16px;
    }

    /* 🔥 CORRECTIF (demande explicite, "le truc de stat au format mobile est
       bancal") : les 3 petites cartes catégorie (Bâtiments/Personnages/Gravures)
       restaient en ligne (flex-wrap) sur mobile -- avec 3 cartes + leur anneau +
       leur texte, ça débordait du cadre (ex. "Gravures" tronqué en "Grav"). En
       colonne UNIQUEMENT sur mobile (desktop inchangé, toujours en ligne) et
       box-sizing: border-box pour que padding/border ne dépassent jamais la
       largeur du parent. */
    .collection-overview-categories {
        width: 100%;
        flex-direction: column;
    }

    .collection-overview-card {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   RÉCAP "TOTAL RESTANT" DANS LES SIDEBARS (renderStatsSidebar / renderUnitsStatsSidebar)
   ========================================================================== */

.sidebar-total-remaining {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #456789;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.sidebar-total-title {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #bdc3c7;
    margin-bottom: 8px;
    text-align: center;
}

.sidebar-total-costs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

.sidebar-total-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85em;
    font-weight: 600;
    color: #ecf0f1;
}

.sidebar-total-item img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.sidebar-total-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.85em;
    font-weight: 600;
    color: #f1c40f;
}

.sidebar-total-time img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* ==========================================================================
   TABLEAU DE BORD PRINCIPAL — Cartes "graph-card" façon ARCTracker
   ========================================================================== */

.dashboard-container {
    width: 100%;
    margin: 0 auto;
}

/* ==========================================================================
   BANDEAU DE PROGRESSION PAR QG (sous le Tableau de Bord principal)
   ========================================================================== */

.qg-strip-section {
    width: 100%;
    margin-top: 10px;
}

.qg-progress-strip {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 10px 20px 16px;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

.qg-progress-strip::-webkit-scrollbar { height: 6px; }
.qg-progress-strip::-webkit-scrollbar-track { background: transparent; }
.qg-progress-strip::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }

.qg-strip-card {
    flex: 0 0 auto;
    width: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: #1e2b38;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 6px;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.qg-strip-card:hover {
    border-color: rgba(238, 137, 62, 0.5);
    transform: translateY(-1px);
}

/* Niveau de QG actuel du joueur : liseré teal, cohérent avec .accent-teal */
.qg-strip-card-current {
    border-color: #1abc9c;
    box-shadow: 0 0 0 1px #1abc9c inset;
}

/* Niveau entièrement maxé (bâtiments + troupes + capa. canonnière + héros) */
.qg-strip-card-maxed {
    border-color: #2ecc71;
}

/* QG pas encore atteint par le joueur : légèrement estompé, comme .dash-row.disabled */
.qg-strip-card-future {
    opacity: 0.55;
}

.qg-strip-img-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qg-strip-img {
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
}

.qg-strip-check {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    background: #0f1720;
    border-radius: 50%;
    padding: 2px;
    box-sizing: border-box;
}

.qg-strip-level {
    font-family: 'Bangers', cursive;
    font-size: 0.95em;
    color: #ecf0f1;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   Colonne principale (QG + onglets) + Événements en cours, côte à côte.
   L'event-panel démarre en haut, aligné avec le panneau QG (modal_qg.php),
   et reste "sticky" sur toute la hauteur du contenu.
   ========================================================================== */

.content-body-flex {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

.content-main-col {
    flex: 1 1 auto;
    min-width: 0; /* évite que le contenu interne ne force la largeur de la colonne */
}

.event-panel {
    flex: 0 0 320px;
    width: 320px;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.035);
    border: 2px solid #3C7891;
    border-radius: 14px;
    box-sizing: border-box;
    overflow: hidden;
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    /* height (définie) en plus de max-height : sans hauteur définie, le flex-child
       .event-list (flex:1 1 auto) ne calcule pas de façon fiable l'espace qui lui
       reste selon les niveaux de zoom, ce qui coupait la dernière event-card au
       lieu de faire apparaître le scroll interne. */
    height: calc(100vh - 32px);
    max-height: calc(100vh - 32px);
}

.event-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background-color: #3C7891;
    flex-shrink: 0;
}

.event-panel-header h2 {
    margin: 0;
    font-family: 'Bangers', cursive;
    letter-spacing: 1.5px;
    font-size: 1.15em;
    font-weight: normal;
    color: #ecf0f1;
}

.event-panel-icon { font-size: 1.1em; }

.event-list {
    flex: 1 1 auto;
    min-height: 0; /* sans ça, ce flex-child s'étire selon son contenu au lieu de
                      respecter la hauteur du parent (.event-panel) — empêchait le
                      scroll interne et coupait les dernières event-card. */
    overflow-y: auto;
    overscroll-behavior: contain; /* empêche le scroll de la liste de "déborder"
                                      vers le scroll de la page une fois en bas/haut */
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.event-list::-webkit-scrollbar { width: 5px; }
.event-list::-webkit-scrollbar-track { background: transparent; }
.event-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }

.event-empty {
    color: #8aa0b0;
    text-align: center;
    padding: 30px 10px;
    font-size: 0.9em;
}
/* 🔥 CORRECTIF : .event-empty est partagée avec le tracker (fond sombre,
   inchangé) -- surcharge scopée à evenements.php/crab uniquement (fond
   désormais crème, voir body.public-home-page) plutôt que de changer la
   couleur de base et casser le tracker. */
.public-home-page .event-empty {
    color: var(--wiki-text-soft);
}

.event-card {
    display: flex;
    flex-direction: column;
    background: #1e2b38;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: border-color 0.15s ease, transform 0.15s ease;
    position: relative;
}

.event-card:hover {
    border-color: rgba(238, 137, 62, 0.5);
    transform: translateY(-1px);
}

.event-card-img-wrap {
    position: relative;
    width: 100%;
    height: 100px;
}

.event-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.2);
    display: block;
}

/* Icônes incrustées (sort GBA / troupes Troopmania) en bas à droite de la
   bannière de l'événement -- pas de plaque de fond (juste l'illustration,
   avec une ombre portée pour rester lisible sur tous les visuels de bannière),
   affichées plus grandes et légèrement chevauchantes s'il y en a 2. */
.event-overlay {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 68px;
    height: 68px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.65));
    z-index: 2;
}

.event-overlay-gba    { right: 6px; }
.event-overlay-troop1 { right: 6px; }
.event-overlay-troop2 { right: 50px; z-index: 1; }

.event-card-countdown.event-permanent {
    color: #8aa0b0;
    font-style: italic;
    font-weight: 600;
}

.event-card-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
}

.event-card-title {
    font-size: 0.9em;
    font-weight: 700;
    color: #ecf0f1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-card-countdown {
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    font-weight: bold;
    color: #1abc9c;
}

.event-card-countdown.event-ending-soon { color: #EE893E; }
.event-card-countdown.event-ended { color: #556877; }

@media (max-width: 900px) {
    .content-body-flex { flex-direction: column; align-items: stretch; }
    .event-panel {
        flex: 1 1 auto;
        width: 100%;
        position: static;
        max-height: 360px;
    }
}

.overview-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.overview-card {
    background: #1e2b38;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 22px 24px;
    flex: 1 1 240px;
    min-width: 230px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.overview-card[onclick] {
    cursor: pointer;
}

.overview-card[onclick]:hover {
    transform: translateY(-4px);
    border-color: #1abc9c;
}

.overview-card.disabled {
    opacity: 0.55;
}

.overview-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.overview-card-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: rgba(26, 188, 156, 0.15); */
    border-radius: 8px;
    font-size: 1.2em;
}

/* Icônes PNG/WebP (icon_building_defense.png, icon_building_support.png...) remplaçant les
   emojis dans les cartes de navigation Building-Overview (renderCategoryNav) -- contenues
   dans le conteneur 36x36 ci-dessus. */
.overview-card-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.overview-card-title {
    font-family: 'Bangers', cursive;
    font-size: 1.2em;
    color: #ecf0f1;
    letter-spacing: 0.5px;
}

.badge-soon {
    margin-left: auto;
    background: #e67e22;
    color: #fff;
    font-size: 0.65em;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 10px;
    letter-spacing: 0.5px;
}

.overview-card-value {
    font-family: 'Courier New', monospace;
    font-size: 2.1em;
    font-weight: bold;
    color: #ffffff;
}

.overview-card-value .value-max {
    font-size: 0.5em;
    font-weight: 600;
    color: #7f8c8d;
}

.overview-progress-track {
    width: 100%;
    height: 8px;
    background: #111a24;
    border-radius: 4px;
    overflow: hidden;
    margin: 14px 0 10px;
}

.overview-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #1abc9c, #16a085);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.overview-card.disabled .overview-progress-fill {
    background: #576574;
}

.overview-card-sub {
    font-size: 0.85em;
    font-weight: 600;
    color: #95a5a6;
}

/* ==========================================================================
   MINI-ONGLETS DE CATÉGORIE (cartes de navigation vers les sous-menus)
   ========================================================================== */

.category-nav-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 18px;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.category-nav-card {
    background: #1e2b38;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 18px 22px;
    flex: 1 1 220px;
    min-width: 200px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.category-nav-card:hover {
    transform: translateY(-3px);
    border-color: #1abc9c;
}

.category-nav-card-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.category-nav-card-label {
    font-family: 'Bangers', cursive;
    font-size: 1.25em;
    color: #ecf0f1;
    letter-spacing: 0.5px;
}

.category-nav-card-sub {
    font-size: 0.8em;
    color: #95a5a6;
    font-weight: 600;
    margin-top: 3px;
}

.category-nav-card-arrow {
    font-size: 1.6em;
    color: #1abc9c;
    font-weight: bold;
}

/* ==========================================================================
   PROFIL — Bouton de profil en bas de la sidebar (remplace l'ancien bandeau)
   ========================================================================== */

.profile-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #2c3e50;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    padding: 8px 14px 8px 8px;
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease;
}

.profile-btn:hover {
    background: #34495e;
}

.profile-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #1abc9c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bangers', cursive;
    font-size: 1.15em;
    color: #ffffff;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
}

.profile-avatar .badge-icon {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #2c3e50;
    border: 2px solid #2c3e50;
    object-fit: contain;
}

.profile-name {
    color: #ecf0f1;
    font-weight: 600;
    font-size: 0.95em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.profile-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    right: 0;
    background: #1e2b38;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    z-index: 50;
}

.profile-dropdown.open {
    display: block;
}

.profile-dropdown a {
    display: block;
    padding: 12px 16px;
    color: #ecf0f1;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9em;
    transition: background 0.15s ease;
}

.profile-dropdown a:hover {
    background: #e74c3c;
    color: #fff;
}


/* ==========================================================================
   GRAVURES — Détail des coûts repliable (renderEngravingsTable, cartes .troop-card)
   ========================================================================== */

.engraving-costs-toggle {
    width: 100%;
    background: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #bdc3c7;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0 0;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.engraving-costs-toggle:hover {
    color: #1abc9c;
}

.engraving-costs-toggle .chevron-icon {
    font-size: 0.9em;
}

.engraving-costs-table {
    display: none;
    width: 100%;
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    padding: 8px;
    max-height: 200px;
    overflow-y: auto;
    text-align: left;
    box-sizing: border-box;
}

.engraving-costs-table.open {
    display: block;
}

.engraving-costs-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8em;
    color: #ecf0f1;
}

.engraving-costs-table thead tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    text-align: left;
}

.engraving-costs-table th {
    padding: 4px 6px;
}

.engraving-costs-table td {
    padding: 5px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.engraving-costs-table tr.cost-row-done {
    opacity: 0.45;
    color: #95a5a6;
}

.engraving-costs-table tr.cost-row-next {
    background: rgba(241, 196, 15, 0.12);
    color: #f1c40f;
    font-weight: bold;
}

/* ==========================================================================
   REFONTE SIDEBAR — Menu fixe et rétractable façon ARCTracker.io
   Palette Boom Beach : bleu marine profond, accent vert/turquoise, blanc
   ========================================================================== */

:root {
    --bg-dark-blue: #105771;
    --bg-mid-blue: #01AFC1;
    --bg-light-blue: #00B0BF;
    --bg-light-light-blue: #30AACC;
    --bg-white: #D6D8D9;
    --bg-grey: #717171;
    
    --accent-teal: #1abc9c;
    --bb-navy-950: #0f1a22;
    --bb-navy-900: #16232d;
    --bb-navy-800: #1c2c39;
    --bb-navy-700: #24384a;
    --bb-teal: #1abc9c;
    --bb-teal-soft: rgba(26, 188, 156, 0.16);
    --bb-green: #a2e23b;
    --bb-white: #eef4f8;
    --bb-muted: #8aa0b0;
    --sidebar-w-expanded: 268px;
    --sidebar-w-collapsed: 76px;
}

.main-layout {
    grid-template-columns: var(--sidebar-w-expanded) 1fr;
    transition: grid-template-columns 0.25s ease;
}

.main-layout.sidebar-collapsed {
    grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}

.sidebar {
    position: sticky;
    /* 🔥 var(--bx-topbar-h, 0px) : le menu header Beachadex (.beachadex-topbar,
       position:fixed, 90px) est maintenant affiché aussi sur les pages du
       tracker (voir tracker/includes/header.php) et pousse tout le body vers
       le bas via body:has(.beachadex-topbar) { padding-top: ... } dans
       beachadex.css. Sans ce décalage ici, la sidebar (sticky top:0,
       height:100vh) débordait de 90px sous le viewport et son sommet se
       retrouvait caché sous le menu header une fois la page scrollée. Le
       fallback 0px préserve l'ancien comportement si jamais beachadex.css
       n'était pas chargé sur une page tracker. */
    top: var(--bx-topbar-h, 0px);
    height: calc(100vh - var(--bx-topbar-h, 0px));
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    background: linear-gradient(180deg, var(--bg-dark-blue) 0%, var(--bg-light-blue) 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    z-index: 100;
}

.sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* --- En-tête : logo + bouton de rétraction --- */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    overflow: hidden;
    min-width: 0;
}

.sidebar-logo-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
}

.sidebar-logo-text {
    font-family: 'Bangers';
    text-shadow: 1px 1px 1px black, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 0px -1px 1px black, 0px 1px 1px black, -1px 0px 1px black, 1px 0px 1px black, 0 2px 1px black, -1px 3px 1px black, 1px 3px 1px black;
    font-size: 1.35em;
    letter-spacing: 1px;
    color: var(--bb-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
}

.sidebar-toggle {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: var(--bb-teal);
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.sidebar-toggle:hover { background: var(--bb-teal-soft); }

.sidebar-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s ease;
}

.main-layout.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }

/* --- Corps scrollable du menu --- */
.sidebar-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 12px;
    background: var(--bg-white);
    margin: 10px;
}

.sidebar-scroll::-webkit-scrollbar { width: 5px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }

.sidebar-section { margin-bottom: 6px; }

.menu-group {
    margin-bottom: 3px;
    background: var(--bg-grey);
}

/* --- Items de menu (remplace l'ancien style "bandeau" plat) --- */
.menu-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 9px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.92em;
    color: var(--bb-white);
    background: transparent;
    text-transform: none;
    letter-spacing: 0.2px;
    text-shadow: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.menu-header:hover { background: rgba(255, 255, 255, 0.06); }

/* Repère "sélectionné" façon jeu (écran Chefs > Recrutement) : un léger fond teinté
   + 4 coins (focus_angle.png) au lieu d'un simple aplat de couleur. */
.menu-header.dashboard-btn.active,
.menu-header.active-parent {
    background: rgba(26, 188, 156, 0.10);
    border-color: rgba(26, 188, 156, 0.35);
    color: var(--bb-teal);
}

/* --- Coins de focus (focus_angle.png x4, un par coin) ---
   Même icône (coin haut-droit fourni), tournée par pas de 90° :
   tr = 0°, br = 90°, bl = 180°, tl = 270°. Masqués par défaut, révélés sur l'état
   actif/parent-actif (et légèrement au survol) pour un rendu "sélection" comme en jeu. */
.focus-corner {
    position: absolute;
    width: 13px;
    height: 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.focus-corner-tr { top: 3px;    right: 3px;  transform: rotate(0deg); }
.focus-corner-br { bottom: 3px; right: 3px;  transform: rotate(90deg); }
.focus-corner-bl { bottom: 3px; left: 3px;   transform: rotate(180deg); }
.focus-corner-tl { top: 3px;    left: 3px;   transform: rotate(270deg); }

.menu-header:hover .focus-corner { opacity: 0.35; }

.menu-header.dashboard-btn.active .focus-corner,
.menu-header.active-parent .focus-corner,
.menu-header.dashboard-btn.active:hover .focus-corner,
.menu-header.active-parent:hover .focus-corner {
    opacity: 1;
}

/* Les items verrouillés ne sont pas "sélectionnables" : pas de coins au survol */
.menu-header.locked:hover .focus-corner { opacity: 0; }

/* Mode replié (icônes seules) : coins un peu plus petits et plus rapprochés des bords,
   la vignette étant plus étroite */
.main-layout.sidebar-collapsed .focus-corner { width: 10px; height: 10px; }

.menu-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: 0.9;
}

.menu-icon svg,
.menu-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.menu-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-caret {
    font-size: 0.7em;
    color: var(--bb-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.menu-group.open > .menu-header .menu-caret { transform: rotate(180deg); }

/* --- Sous-menus --- */
.submenu {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin: 4px 0 8px 0;
    padding: 6px;
    list-style: none;
}

.submenu li { margin-bottom: 2px; text-align: left; }
.submenu li:last-child { margin-bottom: 0; }

.nav-button {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: none;
    padding: 8px 10px 8px 34px;
    border-radius: 7px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.85em;
    color: var(--bb-muted);
    text-transform: none;
    letter-spacing: 0.2px;
    text-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-button:hover { background: rgba(255, 255, 255, 0.07); color: var(--bb-white); filter: none; }
.nav-button:active { transform: none !important; filter: none !important; box-shadow: none !important; }

.nav-button.active-tab {
    background: var(--bb-teal-soft);
    color: var(--bb-teal);
}

/* --- Mode replié : icônes seules + info-bulles au survol --- */
.main-layout.sidebar-collapsed .sidebar-logo-text,
.main-layout.sidebar-collapsed .sidebar-section-label,
.main-layout.sidebar-collapsed .menu-label,
.main-layout.sidebar-collapsed .menu-caret,
.main-layout.sidebar-collapsed .submenu,
.main-layout.sidebar-collapsed .lang-label,
.main-layout.sidebar-collapsed .lang-caret,
.main-layout.sidebar-collapsed .profile-name {
    display: none !important;
}

.main-layout.sidebar-collapsed .sidebar-header {
    flex-direction: column;
    justify-content: center;
    padding: 16px 8px;
    gap: 10px;
}

.main-layout.sidebar-collapsed .menu-header,
.main-layout.sidebar-collapsed .lang-btn,
.main-layout.sidebar-collapsed .profile-btn {
    justify-content: center;
    padding: 10px;
    position: relative;
}

.main-layout.sidebar-collapsed .profile-btn { border-radius: 50%; width: 44px; height: 44px; padding: 0; margin: 0 auto; }

.main-layout.sidebar-collapsed [data-tooltip] {
    position: relative;
}

.main-layout.sidebar-collapsed [data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--bb-navy-800);
    color: var(--bb-white);
    padding: 6px 11px;
    border-radius: 6px;
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 300;
    pointer-events: none;
}

/* --- Pied de sidebar : sélecteur de langue + profil (toujours visible, sticky) --- */
/* 🔥 Ex-sidebar-footer (langue + profil) puis ex-"Retour au Beachadex" (retiré) :
   .sidebar-back a été remplacé par .sidebar-bottom-actions (demande explicite,
   "sépare Mass Upgrade / Admin / Changer de compte du reste du menu, tout en bas
   de la sidebar") -- même mécanisme flex : .sidebar-scroll (flex: 1 1 auto,
   scrollable) au-dessus, ce bloc-ci (flex-shrink: 0) épinglé en dessous, dans le
   parent flex-column .sidebar-inner. Voir tracker/includes/sidebar.php. */
.sidebar-bottom-actions {
    flex-shrink: 0;
    padding: 10px 12px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.sidebar-bottom-actions .menu-group:last-child { margin-bottom: 0; }

.lang-select { position: relative; }

.lang-btn {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--bb-white);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85em;
    font-weight: 600;
    transition: background 0.15s ease;
}

.lang-btn:hover { background: rgba(255, 255, 255, 0.08); }

.lang-flag { font-size: 1.15em; flex-shrink: 0; line-height: 1; }
.lang-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.lang-caret { font-size: 0.7em; color: var(--bb-muted); flex-shrink: 0; }

.lang-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bb-navy-800);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    z-index: 250;
    padding: 6px;
}

.main-layout.sidebar-collapsed .lang-dropdown {
    left: calc(100% + 12px);
    right: auto;
    bottom: 0;
    width: 230px;
}

.lang-dropdown.open { display: block; }

.lang-dropdown::-webkit-scrollbar { width: 5px; }
.lang-dropdown::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }

.lang-option {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--bb-white);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85em;
    font-weight: 600;
}

.lang-option:hover { background: rgba(255, 255, 255, 0.07); }
.lang-option.selected { color: var(--bb-teal); background: var(--bb-teal-soft); }

/* --- Profil : réintégré dans le footer sticky --- */
.sidebar-profile { margin-top: 0; padding-top: 0; border-top: none; position: relative; }

.profile-btn {
    position: relative;
    width: 100%;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid var(--bg-light-blue);
    box-shadow: 0 0 10px rgba(0, 176, 191, 0.45), inset 0 0 6px rgba(0, 176, 191, 0.25);
}
.profile-btn:hover { background: rgba(255, 255, 255, 0.1); }
.profile-btn:hover .focus-corner { opacity: 0.35; }
.profile-btn.active .focus-corner { opacity: 1; }

@media (max-width: 900px) {
    .main-layout { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
    .sidebar-logo-text, .sidebar-section-label, .menu-caret, .submenu,
    .lang-label, .lang-caret, .profile-name { display: none !important; }
    .sidebar-header { flex-direction: column; padding: 14px 8px; gap: 10px; }
    .menu-header, .lang-btn, .profile-btn { justify-content: center; padding: 10px; }
}

/* ==========================================================================
   TABLEAU DE BORD — Sections groupées (Bâtiments / Armée / Gravures / Autres)
   Simple liste ligne par ligne : un h3 par section, une ligne par sous-catégorie
   avec son libellé et son %age, façon écran "Stats de joueur" du jeu.
   ========================================================================== */

.dash-section-title {
    font-family: 'Bangers', cursive;
    font-size: 1.6em;
    letter-spacing: 0.5px;
    color: #1abc9c;
    margin: 30px 0 8px;
    padding: 0 20 0 20;
}

.dash-section-title:first-child { margin-top: 0; }

/* Panneau gris entourant les lignes d'une section, mêmes couleurs que l'écran
   "Stats de joueur" du jeu (fond #717171, texte blanc, accent teal #20AEBC) —
   avec un peu de marge intérieure entre le contenu et la bordure du panneau. */
.dash-section-box {
    background: #717171;
    border-radius: 10px;
    padding: 6px 18px;
    margin-left: 20px;
    margin-right: 20px;
}

.dash-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 0.95em;
}

.dash-row:last-of-type { border-bottom: none; }

.dash-row.clickable { cursor: pointer; }
.dash-row.clickable:hover { background: rgba(255, 255, 255, 0.08); }
.dash-row.disabled { opacity: 0.55; }

.dash-row-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    font-family: 'Bangers';
    text-shadow: 1px 1px 1px black, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 0px -1px 1px black, 0px 1px 1px black, -1px 0px 1px black, 1px 0px 1px black, 0 2px 1px black, -1px 3px 1px black, 1px 3px 1px black;
    
}

.dash-row-value {
    font-weight: bold;
    color: #fff;
    flex-shrink: 0;
    font-size: 1.2rem;
    font-family: 'Bangers';
    text-shadow: 1px 1px 1px black, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 0px -1px 1px black, 0px 1px 1px black, -1px 0px 1px black, 1px 0px 1px black, 0 2px 1px black, -1px 3px 1px black, 1px 3px 1px black;
    
}

/* ==========================================================================
   RÉSUMÉ "RESSOURCES POUR TOUT FINIR AU MAX" (Tableau de Bord)
   ========================================================================== */
.resource-summary {
    margin-top: 20px;
}

.resource-summary-title {
    margin: 0;
    padding: 10px 16px;
    font-family: 'Bangers', cursive;
    letter-spacing: 1.5px;
    font-size: 1.15em;
    color: #1e2b38;
    background: #cfe0ea;
    text-align: center;
    border-radius: 10px 10px 0 0;
}

/* 🔥 Icônes PNG/WebP remplaçant les emojis dans les titres de cartes (icon_buildings.png,
   icon_character.png, Icon_engravings.webp, icon_supply_chest.png, Time.png...) et dans la
   colonne "Type" du tableau de progression (icon_troop.png, icon_proto.png...) -- taille fixe
   pour qu'elles s'affichent comme un emoji plutôt qu'en résolution native. */
.resource-summary-title img,
.progression-type-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 2px;
}

.resource-summary-tables {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.resource-summary-table-wrap {
    flex: 1 1 420px;
    min-width: 320px;
    /* 🔥 CORRECTIF : voile noir translucide -> bleu ardoise plein (demande
       explicite, "background: rgba(0, 0, 0, 0.2); je parlais de ça !").
       Les lignes (<tr>) restent grises (#373737, voir .resource-summary-table
       tr ci-dessus) -- seul le fond du conteneur change ici. */
    background: #34495e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 10px 16px 12px;
    /* 🔥 CORRECTIF mobile : filet de sécurité identique à .progression-table-wrap
       (voir plus bas) -- si jamais le contenu (nowrap) ne tient toujours pas dans
       la largeur dispo, on scrolle DANS la carte plutôt que de laisser le tableau
       pousser toute la page en largeur (voir aussi min-width:0 dans la media query
       ci-dessous, la vraie cause du débordement "Total Temps" sur mobile). */
    overflow-x: auto;
}

.resource-summary-table-wrap h4 {
    margin: 0 0 12px 0;
    font-size: 1em;
    color: #1abc9c;
    font-weight: 700;
}

.resource-summary-table {
    width: 100%;
    /* 🔥 CORRECTIF : lignes pleines (demande explicite, "le total
       ressources et temps aussi" -- même traitement que .progression-table
       juste au-dessus, ensuite repassé du gris au bleu -- voir commentaire
       sur .progression-table tbody tr). border-collapse:collapse ne
       laissait aucune place pour un fond/une bordure par ligne (les <tr>
       se touchaient) -- passé en separate + border-spacing pour recréer
       les mêmes petites cartes espacées que Bâtiments/Personnages/
       Tribus/Gravures. */
    border-collapse: separate;
    border-spacing: 0 6px;
    font-size: 0.88em;
    color: #dcdde1;
}

.resource-summary-table tr:not(.resource-summary-total) {
    background: #373737;
    box-shadow: 0 0 0 1px #4a4a4a;
}

.resource-summary-table th,
.resource-summary-table td {
    padding: 7px 10px;
    text-align: center;
    border: none;
    /* 🔥 CORRECTIF mobile : demande explicite ("passer à la ligne si ça
       dépasse") -- nowrap forçait le scroll horizontal dans la carte
       (voir overflow-x:auto sur .resource-summary-table-wrap ci-dessus)
       plutôt qu'un retour à la ligne, ce qui donnait l'impression que le
       texte était coupé ("31j 20h 1...") sur mobile étroit. */
    white-space: normal;
    overflow-wrap: break-word;
}

.resource-summary-table td:first-child { border-radius: 8px 0 0 8px; }
.resource-summary-table td:last-child  { border-radius: 0 8px 8px 0; }

.resource-summary-table th:first-child,
.resource-summary-table td:first-child {
    text-align: left;
}

.resource-summary-table th {
    color: #8aa0b0;
    font-weight: 700;
    font-size: 0.85em;
}

.resource-summary-table td img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
    margin-left: 4px;
}

/* Ligne "Total" (voir renderEngravingsResourceSummaryTable()) : même
   traitement orange que .progression-total-row plutôt que le gris commun
   des autres lignes, pour rester visuellement distincte. */
.resource-summary-table tr.resource-summary-total {
    background: rgba(238, 137, 62, 0.12);
    box-shadow: 0 0 0 1px rgba(238, 137, 62, 0.4);
}

.resource-summary-table tr.resource-summary-total td {
    font-weight: 700;
    color: #EE893E;
}

@media (max-width: 900px) {
    .resource-summary-tables { flex-direction: column; }
}

/* ==========================================================================
   TABLEAU "PROGRESSION" FAÇON CLASH NINJA (Profil > Progression)
   4 colonnes Type / Ressource / Total / Temps, 1 carte-ligne par catégorie.
   ========================================================================== */
/* ==========================================================================
   TABLEAU "PROGRESSION" FAÇON CLASH NINJA (Profil > Overview)
   4 colonnes Type / Ressource / Total / Temps, 1 carte-ligne par catégorie,
   organisées en 2 colonnes (Bâtiments+Gravures | Personnages), puis une rangée
   Total ressources / Total temps sur toute la largeur.
   ========================================================================== */
/* 🔥 CSS Grid (et non flex) : chaque carte (Bâtiments/Personnages/Tribus/Gravures,
   voir renderProgressionOverview()) est désormais un item de grille À PART ENTIÈRE
   -- 2 par ligne, dans l'ordre du DOM (Bâtiments/Personnages puis Tribus/Gravures).
   align-items: stretch (comportement par défaut d'une grille) fait que 2 cartes sur
   la MÊME ligne de grille partagent automatiquement la même hauteur (ex: Tribus vide
   à côté de Gravures avec 2 lignes) -- impossible à obtenir avec l'ancien flex (une
   colonne = 2 cartes empilées, chaque colonne prenait sa propre hauteur de contenu,
   d'où des tableaux mal alignés entre la gauche et la droite. */
.progression-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.progression-col {
    min-width: 320px;
    display: flex;
    flex-direction: column;
}

/* La carte occupe TOUTE la hauteur de son item de grille (voir plus haut) : son
   tableau (.progression-table-wrap/.resource-summary-table-wrap) s'étire pour
   combler l'espace en trop côté carte la plus courte, au lieu de laisser un vide
   sous la carte sans que sa bordure ne suive. */
.progression-col > .resource-summary {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.progression-col .progression-table-wrap,
.progression-col .resource-summary-table-wrap {
    flex: 1;
}

@media (max-width: 900px) {
    .progression-columns { grid-template-columns: 1fr; }
    .progression-col { min-width: 0; }
    /* 🔥 CORRECTIF débordement mobile (Tableau de bord tracker, cartes "Total
       ressources"/"Total temps") : .progression-col repassait bien à min-width:0
       en dessous de 900px, mais .resource-summary-table-wrap gardait SON PROPRE
       min-width:320px codé en dur (pensé pour le layout desktop 2 colonnes côte à
       côte) -- sur un écran plus étroit que ~320px de contenu utile (après
       marges/padding des conteneurs parents), ce plancher forçait toute la carte,
       puis toute la page, à dépasser la largeur de la fenêtre. */
    .resource-summary-table-wrap { min-width: 0; }
}

.progression-table-wrap {
    /* 🔥 CORRECTIF : voile noir translucide -> bleu ardoise plein (demande
       explicite, "background: rgba(0, 0, 0, 0.2); je parlais de ça !").
       Les lignes (<tr>) restent grises (#373737, voir .progression-table
       tbody tr ci-dessus) -- seul le fond du conteneur change ici. */
    background: #34495e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: none;
    border-radius: 0 0 10px 10px;
    overflow-x: auto;
}

.progression-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    padding: 4px 12px 12px;
    color: #dcdde1;
}

.progression-table thead th {
    text-align: left;
    padding: 6px 14px;
    font-family: 'Bangers', cursive;
    letter-spacing: 1px;
    font-size: 0.95em;
    color: #1e2b38;
    background: #cfe0ea;
}

.progression-table thead th:first-child { border-radius: 8px 0 0 8px; }
.progression-table thead th:last-child  { border-radius: 0 8px 8px 0; }
/* Colonnes centrées : "%" (anneau, voir .progression-percent), "Total" et "Temps".
   "Type" et "Ressource" restent alignées à gauche (défaut hérité). */
.progression-table thead th:nth-child(2),
.progression-table thead th:nth-child(4),
.progression-table thead th:nth-child(5) { text-align: center; }

/* 🔥 CORRECTIF : lignes grises pleines (demande explicite, "les <tr> tu les
   passe en gris comme le screen du jeu" -- capture "Cycle du mal" déjà
   utilisée comme référence ailleurs cette session) -- même gris/bordure que
   les cartes .officer-release-card/.pass-release-card/.event-news-card
   (#373737 / #4a4a4a) plutôt que le voile blanc translucide d'origine. Un
   essai en bleu (#2477b2) a été fait entre-temps puis annulé -- le "bleu"
   demandé visait en fait le fond du conteneur (.progression-table-wrap /
   .resource-summary-table-wrap, voir plus bas), pas celui des lignes. */
.progression-table tbody tr {
    background: #373737;
    box-shadow: 0 0 0 1px #4a4a4a;
}

.progression-table tbody tr:hover {
    background: rgba(26, 188, 156, 0.08);
}

.progression-table td {
    padding: 10px 14px;
    vertical-align: middle;
}

.progression-table td:first-child { border-radius: 8px 0 0 8px; }
.progression-table td:last-child  { border-radius: 0 8px 8px 0; }

.progression-type {
    font-family: 'Bangers', cursive;
    letter-spacing: 0.5px;
    font-size: 1.05em;
    color: #fff;
    white-space: nowrap;
}

.progression-type-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Ligne ENTIÈRE cliquable vers la page/onglet correspondant (ex: buildings.php#Building-
   Trap), voir renderProgressionRow()/renderEngravingsResourceSummaryTable() dans
   functions.php -- même principe/mêmes couleurs que .dash-row.clickable du Tableau de
   Bord. 🔥 Portée du clic élargie du seul span .progression-type-inner (titre) à tout le
   <tr> (demande explicite, "toute la ligne plutôt qu'uniquement le titre"). */
.progression-table tbody tr.row-clickable,
.resource-summary-table tr.row-clickable {
    cursor: pointer;
    transition: background 0.15s ease;
}
.progression-table tbody tr.row-clickable:hover {
    background: rgba(255, 255, 255, 0.08);
}
.resource-summary-table tr.row-clickable:hover {
    background: #40403f;
}

.progression-type-icon {
    font-size: 1.3em;
    flex-shrink: 0;
}

.progression-resources,
.progression-totals {
    text-align: center;
}

/* Colonne "Ressource" (juste le nom/icône) élargie, colonne "Total" (les
   montants) réduite d'autant -- desktop uniquement, la version mobile empilée
   ci-dessous (@media max-width: 700px) garde ses propres largeurs 40/60. */
.progression-resources { width: 34%; }
.progression-totals { width: 16%; }

/* Colonne "%" (anneau de progression, voir renderProgressionRow()) -- même
   principe que .stats-sidebar-summary sur les pages individuelles. */
.progression-percent {
    width: 60px;
    text-align: center;
}

.progression-res-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 0.9em;
    white-space: nowrap;
}

.progression-totals .progression-res-line {
    font-weight: 700;
    color: #1abc9c;
    justify-content: flex-end;
}

.progression-res-line img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.progression-res-empty {
    color: #6b7c88;
    font-weight: 400 !important;
}

.progression-time {
    text-align: center;
    white-space: nowrap;
    font-weight: 600;
    color: #EE893E;
}

.progression-table tr.progression-total-row {
    background: rgba(238, 137, 62, 0.12);
    box-shadow: 0 0 0 1px rgba(238, 137, 62, 0.4);
}

.progression-table tr.progression-total-row .progression-type,
.progression-table tr.progression-total-row .progression-time {
    color: #EE893E;
}

.progression-table tr.progression-total-row .progression-totals .progression-res-line {
    color: #f5a561;
}

@media (max-width: 700px) {
    .progression-table { font-size: 0.9em; }
    .progression-table thead { display: none; }
    .progression-table, .progression-table tbody {
        display: block;
        width: 100%;
    }
    .progression-table tr {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    .progression-table tbody tr {
        margin-bottom: 10px;
        border-radius: 10px;
        padding: 4px 0;
    }
    .progression-table td {
        display: block;
        box-sizing: border-box;
        border-radius: 0 !important;
    }
    .progression-type {
        width: 100%;
    }
    .progression-percent {
        width: 100%;
        text-align: center;
        margin: 2px 0 6px;
    }
    .progression-resources,
    .progression-totals {
        display: flex;
        flex-direction: column;
        text-align: left;
    }
    .progression-resources { width: 62%; }
    .progression-totals { width: 38%; text-align: right; }
    .progression-res-line { justify-content: flex-start; width: 100%; }
    .progression-totals .progression-res-line { justify-content: flex-end; }
    .progression-time {
        width: 100%;
        text-align: left;
    }
}

/* Bouton "Masquer les X au max" (bâtiments, troupes, tribus, gravures) */
.btn-hide-maxed {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    padding: 8px 14px;
    border: 1px solid #34495e;
    border-radius: 6px;
    background: #2c3e50;
    color: #ecf0f1;
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-hide-maxed:hover {
    background: #34495e;
    border-color: #1abc9c;
}

.btn-hide-maxed.active {
    border-color: #1abc9c;
    color: #1abc9c;
}

.hide-maxed-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* Masquage des éléments au max */
.hide-maxed-container.maxed-hidden [data-maxed="1"] {
    display: none !important;
}

/* Barre d'outils au-dessus des grilles (bâtiments, troupes) : regroupe le bouton
   "Masquer au max" et le sélecteur de tri sur une même ligne, avec retour à la
   ligne automatique sur petit écran. */
.grid-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.grid-toolbar .btn-hide-maxed {
    margin-bottom: 0;
}

/* Sélecteur de tri "Trier par : XP / Temps" (voir renderSortControls / sortCards) */
.sort-cards-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: #ecf0f1;
}

.sort-cards-label {
    font-weight: 600;
    white-space: nowrap;
}

.sort-cards-select {
    padding: 8px 12px;
    border: 1px solid #34495e;
    border-radius: 6px;
    background: #2c3e50;
    color: #ecf0f1;
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sort-cards-select:hover,
.sort-cards-select:focus {
    background: #34495e;
    border-color: #1abc9c;
    outline: none;
}

/* ==========================================================================
   ONGLETS VERROUILLÉS DE LA SIDEBAR (Tribus / Monument mystique / Gravures)
   ========================================================================== */

.menu-header.locked,
.nav-button.locked {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.menu-header.locked:hover {
    background: transparent;
}

.menu-lock {
    font-size: 0.85em;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0.8;
}

/* Cadenas affiché dans une ligne "Ressources pour tout finir au max" (Personnages) quand la
   catégorie est encore verrouillée par le QG -- voir renderArmyResourceSummaryTable(),
   reprend l'info que portait l'ex-carte de nav Army-Overview. */
.progression-lock {
    font-size: 0.85em;
    opacity: 0.8;
    cursor: help;
}

.nav-button.locked {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ==========================================================================
   RESPONSIVE MOBILE
   Sur mobile, la sidebar devient une simple barre du haut fixe : "Beachapedia"
   (texte seul, sans logo image) + icône langue + icônes recherche/paramètre
   (pas encore branchées). Il n'y a plus de hamburger ni de tiroir de
   navigation plein écran : la navigation complète (Bâtiments, Armée, Tribus,
   Archipel, Monument, Gravures, Profil...) passe par les cartes du Tableau
   de bord, et les pages principales (Accueil / Skins / Événements / QG) par
   la nouvelle barre de navigation basse (.mobile-bottom-nav, tout en bas de
   ce fichier). Pour le reste, toutes les grilles de cartes repassent
   simplement en 1 colonne.
   ========================================================================== */

/* Éléments propres au mobile : masqués par défaut (desktop), affichés dans
   la media query ci-dessous. Placés AVANT la media query pour que celle-ci
   l'emporte correctement en cascade sur petit écran. */
.topbar-icon-btn { display: none; }

.mobile-bottom-nav { display: none; }

/* 🔥 CORRECTIF : cette règle vivait auparavant SEULEMENT à l'intérieur de la
   media query mobile -- sur desktop (media non actif), ce <div> n'avait donc
   AUCUNE règle "display" applicable et retombait sur le défaut du navigateur
   (display: block, comme n'importe quel <div>). Résultat : il devenait un
   élément BLOC bien réel et visible, qui participait au placement automatique
   de la grille CSS de .main-layout -- décalant .main-content dans une case
   imprévue (contenu principal invisible sur PC). Même filet que
   .mobile-bottom-nav ci-dessus : masqué par défaut, réaffiché uniquement dans
   la media query (body.mobile-menu-open .mobile-menu-backdrop, plus bas). */
.mobile-menu-backdrop { display: none; }

/* 🔥 CORRECTIF : même piège que ci-dessus, cette fois pour la barre du haut
   mobile PARTAGÉE (.bx-mobile-topbar, core/mobile_nav.php) et son panneau de
   recherche (.bx-mobile-search-panel) -- toutes deux uniquement déclarées à
   l'intérieur de la media query mobile plus bas, donc sans ce filet elles
   retombaient sur le display:block par défaut du navigateur et s'affichaient
   EN DOUBLE sous la topbar desktop (.beachadex-topbar), non stylées. Masquées
   par défaut ici, réaffichées uniquement dans la media query. */
.bx-mobile-topbar { display: none; }
.bx-mobile-search-panel { display: none; }

/* Pop-up "Menu" PARTAGÉ (design commun tracker + Beachadex, voir plus bas
   "POP-UP MENU MOBILE PARTAGÉ") : même correctif que ci-dessus. */
.bx-mobile-menu-popup { display: none; }

.mobile-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #8aa0b0;
    text-decoration: none;
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.mobile-bottom-nav-icon { font-size: 1.35em; line-height: 1; }

.mobile-bottom-nav-item.active { color: #1abc9c; }

@media (max-width: 768px) {

    :root { --mobile-topbar-h: 56px; --mobile-bottom-nav-h: 60px; }

    /* --- Layout général : on quitte la grille 2 colonnes, tout s'empile ---
       🔥 !important nécessaire : sans lui, .main-layout restait en display:grid
       chez un joueur malgré cette règle (mobile-bottom-nav passait bien en flex,
       mais pas .main-layout en block -- symptôme observé : contenu principal
       invisible, coincé dans une cellule de grille implicite avec les nouveaux
       éléments .mobile-menu-backdrop/.mobile-bottom-nav qui, eux, participaient
       soudain au placement automatique de la grille dès lors qu'ils devenaient
       visibles). !important élimine toute ambiguïté d'ordre/cascade. */
    .main-layout {
        display: block !important;
    }

    .main-content {
        width: 100%;
        padding: 14px;
        box-sizing: border-box;
        /* Laisse de la place pour la barre de navigation basse, fixe */
        padding-bottom: calc(var(--mobile-bottom-nav-h) + 14px);
    }

    /* --- La barre du haut (logo/langue/recherche/paramètres) et la barre
       basse sont désormais fournies par le composant mobile PARTAGÉ
       core/mobile_nav.php (identique tracker + Beachadex, voir plus bas
       "BARRE MOBILE PARTAGÉE"). .sidebar ne sert plus, en mobile, qu'à
       héberger .sidebar-scroll en pop-up (voir plus bas) : son propre
       en-tête/pied (ancien logo/langue/recherche/paramètres/toggle,
       dupliqués avant) est entièrement masqué. Comme .sidebar n'est plus
       positionné (position: static), il ne crée plus son propre contexte
       d'empilement : plus besoin du correctif de z-index qui vivait ici
       avant (voir l'ancien commentaire "CORRECTIF" à ce sujet). --- */
    .sidebar {
        position: static;
        width: 100%;
        height: 0;
        min-height: 0;
        overflow: visible;
        border: none;
    }

    .sidebar-header,
    .sidebar-bottom-actions {
        display: none;
    }

    /* --- Navigation complète : la dense liste desktop (.sidebar-scroll) est
       remplacée en mobile par un pop-up dédié et simplifié
       (.bx-mobile-menu-popup, voir tracker/includes/sidebar.php et plus bas
       "POP-UP MENU MOBILE PARTAGÉ") -- .sidebar-scroll elle-même reste
       simplement masquée, elle ne sert plus de pop-up. --- */
    .sidebar-scroll {
        display: none;
    }

    /* Fond semi-transparent derrière le pop-up : masqué par défaut (voir
       .mobile-menu-backdrop { display: none; } hors media query, plus haut),
       visible + cliquable (referme le menu, voir onclick dans
       core/mobile_nav.php) uniquement quand le menu est ouvert. */
    body.mobile-menu-open .mobile-menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 490;
    }

    /* ---------------------------------------------------------------------
       BARRE MOBILE PARTAGÉE (core/mobile_nav.php) — identique entre le
       tracker (tracker/includes/sidebar.php) et le Beachadex
       (beachadex/includes/header.php). Réutilise .lang-select/.lang-btn/
       .lang-dropdown/.lang-option (déjà stylés plus haut) et
       .beachadex-topbar-icon-btn (repli codé en dur plus bas, vraie
       définition dans beachadex.css) tels quels, sans les redéfinir.
       --------------------------------------------------------------------- */
    .bx-mobile-topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        height: var(--mobile-topbar-h);
        padding: 0 6px 0 14px;
        box-sizing: border-box;
        background: linear-gradient(180deg, var(--bg-dark-blue) 0%, var(--bg-light-blue) 100%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        z-index: 800;
    }

    /* Le topbar sortant du flux (position: fixed), on redonne cet espace au
       reste de la page -- même principe que body:has(.beachadex-topbar) déjà
       utilisé côté Beachadex (voir beachadex.css), généralisé ici aux deux
       contextes puisque .bx-mobile-topbar est commun aux deux. */
    body:has(.bx-mobile-topbar) {
        padding-top: var(--mobile-topbar-h);
    }

    .bx-mobile-topbar-logo {
        flex: 1 1 auto;
        min-width: 0;
        font-family: 'Bangers', cursive;
        font-size: 1.2em;
        letter-spacing: 0.5px;
        color: #ecf0f1;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bx-mobile-topbar #bxMobileSearchBtn { order: 3; }
    .bx-mobile-topbar #bxMobileSettingsBtn { order: 4; margin-right: 4px; }

    /* Repli pour .beachadex-topbar-icon-btn (boutons recherche/paramètres
       ci-dessus) : la vraie définition, plus riche, vit dans
       beachadex/beachadex.css (variables --bx-*), chargée APRÈS style.css sur
       les pages Beachadex -- elle prend donc le dessus là où elle est
       chargée. Côté tracker, beachadex.css n'est jamais chargé : ce repli
       (couleurs codées en dur, mêmes valeurs que le thème sombre par défaut
       du Beachadex) permet au même bouton d'avoir le même rendu des deux
       côtés sans dupliquer/deviner les variables --bx-*. */
    .beachadex-topbar-icon-btn {
        background: linear-gradient(180deg, #2a8fc7 0%, #0d3f61 100%);
        border: 2px solid #f4e6bf;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        padding: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
        transition: transform .15s ease, border-color .15s ease;
        flex-shrink: 0;
    }
    .beachadex-topbar-icon-btn:hover {
        border-color: #ffb400;
        transform: translateY(-1px);
    }
    .beachadex-topbar-icon-btn img {
        width: 20px;
        height: 20px;
        object-fit: contain;
        filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4));
    }

    /* Panneau de recherche live (icône loupe du topbar mobile), même
       comportement que la recherche desktop du Beachadex (voir
       beachadex/includes/settings_drawer.php) : tape sur le même endpoint
       beachadex/search.php, voir core/mobile_nav.js. */
    .bx-mobile-search-panel {
        display: none;
    }

    .bx-mobile-search-panel:not([hidden]) {
        display: block;
        position: fixed;
        top: var(--mobile-topbar-h);
        left: 0;
        right: 0;
        z-index: 799;
        background: linear-gradient(180deg, var(--bg-dark-blue) 0%, #0b3a4d 100%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
        padding: 10px 14px;
        box-sizing: border-box;
    }

    .bx-mobile-search-input {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 14px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: #f4ecd8;
        color: #1c2733;
        font-size: 1em;
        outline: none;
    }

    .bx-mobile-search-results {
        margin-top: 8px;
        max-height: 50vh;
        overflow-y: auto;
        background: #16232d;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
    }

    .bx-mobile-search-result {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        text-decoration: none;
        color: #ecf0f1;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .bx-mobile-search-result:last-child { border-bottom: none; }
    .bx-mobile-search-result:hover { background: rgba(255, 255, 255, 0.06); }

    .bx-mobile-search-result-icon {
        width: 28px;
        height: 28px;
        object-fit: contain;
        flex-shrink: 0;
        border-radius: 4px;
    }
    .bx-mobile-search-result-icon--empty {
        display: inline-block;
        background: #24384a;
    }

    .bx-mobile-search-result-name { flex: 1; font-size: 0.95em; }

    .bx-mobile-search-result-type {
        font-size: 0.75em;
        color: #8aa0b0;
        text-transform: uppercase;
        flex-shrink: 0;
    }

    .bx-mobile-search-empty {
        padding: 12px;
        color: #8aa0b0;
        font-size: 0.9em;
        text-align: center;
    }

    /* ---------------------------------------------------------------------
       POP-UP MENU MOBILE PARTAGÉ (.bx-mobile-menu-popup) — même design que
       l'ancien pop-up propre au Beachadex (.beachadex-mobile-menu-popup,
       désormais retiré de beachadex.css), réutilisé ici tel quel pour le
       tracker ET le Beachadex : carte arrondie, liens en Bangers majuscule,
       lien actif surligné, dernier lien "highlight" doré séparé par un trait.
       Chaque page fournit son propre contenu de liens (voir
       tracker/includes/sidebar.php / beachadex/includes/header.php) mais
       cette structure/ces couleurs sont communes aux deux. Couleurs codées en
       dur (pas de var(--bx-*), indisponibles côté tracker) plutôt que
       reprises du thème clair/sombre du Beachadex : ce pop-up mobile suit
       toujours l'apparence sombre, comme le reste de la barre mobile
       partagée (.bx-mobile-topbar, .bx-mobile-search-panel ci-dessus).
       --------------------------------------------------------------------- */
    body.mobile-menu-open .bx-mobile-menu-popup {
        display: flex;
        flex-direction: column;
        gap: 4px;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(var(--mobile-bottom-nav-h) + 14px);
        max-height: 62vh;
        overflow-y: auto;
        background: linear-gradient(180deg, var(--bg-dark-blue) 0%, #082c44 100%);
        border: 1px solid rgba(244, 230, 191, 0.35);
        border-radius: 18px;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
        padding: 10px;
        box-sizing: border-box;
        z-index: 600;
        animation: bxMobileMenuPopIn 0.16s ease-out;
    }

    @keyframes bxMobileMenuPopIn {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .bx-mobile-menu-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 10px;
        color: #dfe9f4;
        text-decoration: none;
        font-family: 'Bangers', cursive;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        font-size: 1.05em;
    }

    .bx-mobile-menu-link-icon {
        width: 26px;
        height: 26px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .bx-mobile-menu-link.active {
        color: #ffe066;
        background: rgba(255, 255, 255, 0.08);
    }

    .bx-mobile-menu-link.locked {
        color: #6f8494;
        cursor: default;
    }

    .bx-mobile-menu-link-highlight {
        margin-top: 6px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding-top: 14px;
        color: #ffe066;
    }

    /* ---------------------------------------------------------------------
       "Pour le reste, une carte par ligne" : toutes les grilles multi-
       colonnes repassent en 1 colonne / empilement vertical.
       --------------------------------------------------------------------- */
    .qg-grid { grid-template-columns: 1fr; }

    /* ---------------------------------------------------------------------
       Panneau QG (modal_qg.php) : réaffiché sur mobile (était complètement
       masqué, voir plus bas -- l'ancienne règle display:none est retirée),
       entièrement vertical mais avec un ORDRE réfléchi plutôt qu'un simple
       empilement dans l'ordre du DOM :
         1. Visuel du QG
         2. Coût / temps / XP requis / bouton "Améliorer" -- l'info
            actionnable en premier, pas noyée après une éventuelle longue
            liste de déblocages
         3. Déblocages (bâtiments/armée) -- le détail, en dessous
       --------------------------------------------------------------------- */
    .qg-panel { width: 95%; }

    .qg-panel-body {
        display: flex;
        flex-direction: column;
        gap: 16px;
        grid-template-columns: none; /* neutralise la grille desktop */
    }
    .qg-panel-visual { order: 1; width: 100%; max-height: 220px; box-sizing: border-box; }
    .qg-panel-visual img { max-width: 100%; max-height: 200px; width: auto; height: auto; object-fit: contain; }
    .qg-panel-side { order: 2; }
    .qg-panel-unlocks { order: 3; }

    /* Coûts (Bois/Pierre/Fer) en ligne plutôt qu'empilés : plus compact en
       pleine largeur mobile, sans changer leur ordre logique (bouton visible
       sans avoir à scroller après une liste de 3 lignes). */
    .qg-panel-side .qg-cost-list {
        flex-direction: row;
        justify-content: space-around;
    }
    .qg-panel-side .qg-cost-row { flex-direction: column; gap: 4px; font-size: 0.85em; }

    .qg-panel-side .qg-btn-upgrade { width: 100%; box-sizing: border-box; }

    /* .qg-panel-maxed (QG déjà au niveau max) : uniquement visuel + texte,
       la grille 1 colonne générale (.qg-panel-body ci-dessus, déjà en flex
       column) suffit -- rien de plus à faire ici. */

    .dashboard-widgets { flex-direction: column; }
    .widget-card { width: 100%; }

    .overview-cards-grid { flex-direction: column; }
    .overview-card { flex-basis: auto; width: 100%; min-width: 0; }

    .category-nav-grid { flex-direction: column; }
    .category-nav-card { flex-basis: auto; width: 100%; min-width: 0; box-sizing: border-box;}

    /* width/box-sizing en dur : .main-layout-container garde son style inline
       align-items:flex-start (non écrasable proprement par align-items:stretch
       ici, l'inline gagne toujours), donc sans largeur explicite .units-grid-left
       ne prenait que la largeur de son contenu au lieu de toute la colonne. */
    .units-grid-left {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        box-sizing: border-box;
    }
    .main-layout-container { flex-direction: column !important; }

    /* ---------------------------------------------------------------------
       Colonne principale + panneau Événements : passaient encore côte à
       côte sur mobile, l'event-panel (largeur fixe 320px) écrasait alors
       tout le contenu principal — bande de progression QG comprise — sur un
       écran étroit. C'était la cause du scroll horizontal QG 1-29 qui
       semblait cassé. On les empile en 1 colonne, l'event-panel n'est plus
       "sticky".
       Sur mobile, ce panneau intégré au dashboard est en plus complètement
       masqué (display:none) : la page dédiée evenement.php (mobile only)
       prend le relais pour les événements. Voir override juste après, scopé
       à .evenement-page-wrapper, qui réaffiche le panneau UNIQUEMENT là.
       --------------------------------------------------------------------- */
    .content-body-flex { flex-direction: column; align-items: stretch; }
    .event-panel {
        display: none;
        position: static;
        width: 100%;
        max-width: 100%;
        max-height: none;
        flex: 1 1 auto;
    }

    /* Sur evenement.php (page dédiée), on réaffiche le panel — mais SANS
       contrainte de hauteur ni scroll interne : c'est une page normale, qui
       défile entièrement comme le reste du site (pas de sous-div scrollable,
       ce qui causait aussi un scroll horizontal parasite). */
    .evenement-page-wrapper .event-panel {
        display: block;
    }


    /* Bande de progression QG : on s'assure qu'elle défile bien à l'horizontale
       et qu'elle ne peut jamais forcer la page entière à s'élargir, ni se faire
       comprimer par flexbox (chaque carte garde sa taille fixe, quitte à
       déborder et scroller — c'est le but). */
    .qg-strip-section { width: 100%; min-width: 0; }
    .qg-progress-strip {
        -webkit-overflow-scrolling: touch;
        width: 100%;
        overflow-x: auto !important;
    }
    .qg-strip-card {
        flex: 0 0 92px !important;
        width: 92px !important;
    }

    /* Image "QG actuel" cliquable (ouvre la sélection de QG) : jusqu'ici sans
       aucune limite de taille définie, elle s'affichait à sa résolution
       native (image géante en haut de page). On la contient. */
    .qg-trigger {
        max-width: 160px;
        margin: 0 auto;
    }
    .qg-trigger img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* ---------------------------------------------------------------------
       BARRE DE NAVIGATION BASSE : Accueil / Skins / Événements / QG
       (bouton déconnexion pour le moment, voir sidebar.php).
       --------------------------------------------------------------------- */
    .mobile-bottom-nav {
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--mobile-bottom-nav-h);
        background: var(--bg-dark-blue);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
        z-index: 700;
    }

    /* Bouton central "Menu" : légèrement surélevé au-dessus de la barre (façon
       bouton d'action flottant), ouvre/ferme le pop-up .bx-mobile-menu-popup
       (voir plus haut). justify-content: space-around sur .mobile-bottom-nav
       donne déjà l'espace naturel entre les 4 <a> ; ce bouton vient simplement
       se caler au milieu. */
    .mobile-bottom-nav-menu-btn {
        flex: 0 0 auto;
        width: 52px;
        height: 52px;
        margin-top: -22px;
        border-radius: 50%;
        background: linear-gradient(145deg, #1abc9c, #16a085);
        border: 3px solid var(--bg-dark-blue);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.15s ease, background 0.15s ease;
    }

    .mobile-bottom-nav-menu-btn img {
        width: 24px;
        height: 24px;
        transition: transform 0.2s ease;
    }

    .mobile-bottom-nav-menu-btn:active {
        transform: scale(0.94);
    }

    /* État "ouvert" : le bouton reste visuellement actif tant que le pop-up est
       affiché (même logique que .mobile-bottom-nav-item.active). */
    body.mobile-menu-open .mobile-bottom-nav-menu-btn {
        background: linear-gradient(145deg, #e74c3c, #c0392b);
    }
    body.mobile-menu-open .mobile-bottom-nav-menu-btn img {
        transform: rotate(45deg);
    }
}
/* ==========================================================================
   EN-TÊTE + ACTIONS DE PROFIL — 🔥 .profile-page-header, .profile-page-avatar,
   .profile-page-switch-btn, .profile-page-identity, .profile-page-name et
   .profile-page-actions retirés d'ici (demande explicite, fusionnés dans le
   panneau QG -- voir .qg-panel-topbar plus haut dans ce fichier et
   tracker/includes/modal_qg.php). .profile-page-sub et .profile-action-btn
   restent : réutilisés ailleurs (liste de comptes de la modale "Changer de
   compte" juste en dessous, boutons Annuler/Confirmer/Fermer des modales de
   characters.php/buildings.php/dashboard.php).
   ========================================================================== */

/* Modale de changement de compte (réutilise .modal/.modal-content) */
.account-switch-modal-content {
    max-width: 420px;
}

.player-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.player-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #0d1b2a;
    border-radius: 8px;
    padding: 10px 14px;
}

.profile-page-sub {
    font-size: 0.9em;
    color: #8aa0b0;
}

.profile-action-btn {
    background: #1e2b38;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ecf0f1;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95em;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.profile-action-btn:hover {
    border-color: #1abc9c;
    transform: translateY(-2px);
}

.boost-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    padding: 20px;
    margin: 0 20px;
}

.boost-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.boost-field label {
    font-weight: 700;
    color: #ecf0f1;
    font-size: 0.95em;
}

.boost-input-wrap {
    display: flex;
    align-items: center;
    background: #0c1a22;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 10px;
    width: 110px;
}

.boost-input-wrap input {
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 1.1em;
    width: 100%;
    font-family: 'Courier New', monospace;
}

.boost-input-suffix {
    color: #8aa0b0;
    font-weight: 700;
}

.boost-save-btn {
    background: #1abc9c;
    color: #0c1a22;
    border: none;
    border-radius: 8px;
    padding: 11px 22px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.boost-save-btn:hover {
    filter: brightness(1.1);
}

.boost-save-status {
    font-weight: 600;
    font-size: 0.9em;
    color: #8aa0b0;
}

.boost-save-status.boost-save-ok { color: #2ecc71; }
.boost-save-status.boost-save-error { color: #e74c3c; }

/* ==========================================================================
   RÉGLAGES (Boost / Statue) — accordéon natif <details>, fusion de profil.php
   dans dashboard.php. Boost/Statue étaient auparavant des onglets cachés
   (Profile-Boost/Profile-Statue) ouverts via showTab() ; ce sont désormais de
   simples accordéons toujours présents dans la page. Même langage visuel que
   .stats-sidebar-accordion (voir plus haut) mais classes dédiées : contexte
   différent (Réglages du dashboard, pas stats d'une catégorie).
   ========================================================================== */
/* 🔥 CORRECTIF : demande explicite ("met un espace au dessus de reglages,
   et fait en sorte que les 2 parties (stats & reglages) soient alignés sur
   les côtés, genre les stat dépassent mais je veux pas") -- la marge
   latérale de 20px (10px en mobile, voir plus bas) n'existait sur AUCUNE
   des sections juste au-dessus (.progression-columns, voir plus haut, n'a
   qu'un margin-top -- .content-main-col qui les contient toutes les deux
   n'a lui-même aucun padding), donc Réglages se retrouvait plus étroit et
   décalé vers l'intérieur par rapport à Bâtiments/Personnages/Tribus/
   Gravures/Total ressources/Total temps juste au-dessus. Marge latérale
   retirée (0 partout, mêmes bords que .progression-columns) + marge du
   haut ajoutée (0 -> 28px, il n'y en avait aucune : Réglages touchait
   directement la dernière rangée de stats). */
.settings-section {
    margin: 28px 0 24px;
}

.settings-section-title {
    font-family: 'Bangers', cursive;
    letter-spacing: 0.5px;
    font-size: 1.4em;
    color: #ecf0f1;
    margin: 0 0 12px;
    text-align: left;
}

.settings-accordion {
    background: #2c3e50;
    border-radius: 8px;
    color: #fff;
    border: 1px solid #456789;
    overflow: hidden;
}
.settings-accordion + .settings-accordion {
    margin-top: 12px;
}

.settings-accordion-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.settings-accordion-summary::-webkit-details-marker {
    display: none;
}

.settings-accordion-icon {
    font-size: 1.4em;
    flex-shrink: 0;
}

.settings-accordion-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.settings-accordion-title {
    font-weight: bold;
    font-size: 1.05em;
}

.settings-accordion-sub {
    font-size: 0.82em;
    color: #8aa0b0;
}

.settings-accordion-arrow {
    font-size: 0.8em;
    color: #bdc3c7;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.settings-accordion[open] > .settings-accordion-summary .settings-accordion-arrow {
    transform: rotate(180deg);
}

.settings-accordion-content {
    padding: 0 15px 15px;
    border-top: 1px solid #3e4a56;
    padding-top: 12px;
}
/* La marge latérale de .boost-form (0 20px) devient inutile ici : elle est
   déjà à l'intérieur de .settings-accordion-content, qui a son propre padding. */
.settings-accordion-content .boost-form {
    margin: 0;
}

@media (max-width: 768px) {
    /* 🔥 .profile-page-header/.profile-page-actions retirés d'ici (n'existent
       plus, fusionnés dans .qg-panel-topbar) -- .boost-form seul reste concerné. */
    .boost-form {
        margin-left: 10px;
        margin-right: 10px;
    }
    .boost-form { flex-direction: column; align-items: stretch; }
}
/* ==========================================================================
   PAGE SKINS (skin.php)
   3 cartes par ligne en PC, 1 par ligne en mobile (voir media query plus bas).
   ========================================================================== */
.skin-page {
    max-width: 1300px;
    margin: 0 auto;
    padding: 10px 20px 40px;
}

.skin-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

.skin-page-header h2 {
    font-family: 'Bangers', cursive;
    color: #1abc9c;
    font-size: 1.8em;
    margin: 0;
}

.skin-completion {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.skin-completion-percent {
    font-family: 'Bangers', cursive;
    font-size: 1.6em;
    color: #ecf0f1;
}

.skin-completion-sub {
    font-size: 0.8em;
    color: #95a5a6;
}

/* Petites cartes de stats du header (total/débloqués, coût restant en CamoTickets),
   même langage visuel que .skin-card / .resource-summary-table-wrap : fond sombre
   semi-transparent, bordure discrète, accent teal sur la valeur. */
.skin-header-stats {
    display: flex;
    width: 100%;
    gap: 12px;
}

.skin-stat-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
    background: #DFE5FA;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 18px;
}

.skin-stat-value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Bangers', cursive;
    font-size: 1.4em;
    color: #253C58;
    letter-spacing: 0.5px;
}

.skin-stat-value .skin-card-ticket-icon {
    width: 18px;
    height: 18px;
}

.skin-stat-label {
    font-size: 0.75em;
    color: #253C58;
    text-align: center;
    margin-top: 2px;
}

.skin-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 10px 0 28px;
}

.skin-card {
    background: #1e2b38;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
}

.skin-card:hover { transform: translateY(-3px); border-color: #1abc9c; }
.skin-card.unlocked { border-color: #1abc9c; box-shadow: 0 0 0 2px rgba(26, 188, 156, 0.35), 0 6px 18px rgba(0,0,0,0.3); }

.skin-card-img-wrap {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 150px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.skin-card-img { max-width: 100%; max-height: 100%; object-fit: contain; }

.skin-card-body { padding: 14px 16px; flex: 1; }

.skin-card-name {
    font-family: 'Bangers', cursive;
    font-size: 1.15em;
    color: #ecf0f1;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.skin-card-category { font-size: 0.8em; color: #1abc9c; font-weight: 600; margin-bottom: 2px; }
.skin-card-export   { font-size: 0.75em; color: #556877; margin-bottom: 8px; }
.skin-card-row      { font-size: 0.85em; color: #95a5a6; margin-top: 4px; }
.skin-card-cost     { display: flex; align-items: center; gap: 6px; }
.skin-card-ticket-icon { width: 18px; height: 18px; object-fit: contain; }

.skin-card-actions {
    display: flex;
    gap: 10px;
    padding: 10px 16px 16px;
}

.skin-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111a24;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.skin-action-btn img { width: 20px; height: 20px; object-fit: contain; }
.skin-action-btn:hover { background: #172230; }
.skin-action-btn.active { border-color: #1abc9c; background: rgba(26, 188, 156, 0.15); }

/* ==========================================================================
   PAGE ÉVÉNEMENTS / "BIENTÔT" (evenement.php) — affichée sur PC ET mobile.
   Sur mobile, l'event-panel intégré au dashboard reste masqué (voir règle
   .event-panel { display:none } dans le @media max-width:768px plus haut) :
   evenement.php est le seul endroit où voir les événements sur mobile.
   Sur PC, les deux coexistent : le panneau reste visible sur le dashboard
   ET cette page dédiée fonctionne aussi si on y accède directement.
   ========================================================================== */
.evenement-page-wrapper { padding: 10px 20px 40px; }

@media (min-width: 769px) {
    /* Seul sur sa page (pas à côté du dashboard), le panel n'a plus besoin
       de sa largeur fixe 320px ni de son comportement "sticky" de sidebar :
       on l'étale proprement, centré, comme une page normale. */
    .evenement-page-wrapper {
        max-width: 1100px;
        margin: 0 auto;
    }
    .evenement-page-wrapper .event-panel {
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;
        position: static;
        max-height: none;
    }
}

@media (max-width: 768px) {
    .skin-grid { grid-template-columns: 1fr; }
    .skin-page { padding: 10px 14px 30px; }
    .skin-header-stats { width: 100%; justify-content: space-between; }
    .skin-stat-block { flex: 1 1 auto; min-width: 0; padding: 8px 10px; }
}
/* ==========================================================================
   MÉGA CRABE — fiche détaillée d'une édition (evenement.php?event=mega_crabe...)
   ========================================================================== */
.crab-edition-page { padding: 4px 0 20px; }

.crab-edition-back {
    display: inline-block;
    margin-bottom: 14px;
    color: #1abc9c;
    text-decoration: none;
    font-size: 0.9em;
}
.crab-edition-back:hover { text-decoration: underline; }

/* 🔥 CORRECTIF : fond de page passé du bleu nuit au crème/parchemin de
   characters.php (demande explicite) -- ces titres bruts (sans carte propre)
   passent donc du blanc au texte sombre --wiki-text pour rester lisibles. */
.crab-edition-title {
    font-family: 'Bangers', cursive;
    color: var(--wiki-text);
    font-size: 1.8em;
    letter-spacing: 0.5px;
    margin: 0 0 18px;
}

.crab-edition-subtitle {
    font-family: 'Bangers', cursive;
    color: var(--wiki-text);
    font-size: 1.3em;
    margin: 24px 0 12px;
}

.crab-edition-trophies {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

/* 🔥 CORRECTIF : cartes sombres remplacées par le style "carte blanche"
   déjà appliqué ailleurs sur le site (.pass-release-card, .discovery-card)
   -- demande explicite ("appliquer le css du dossier beachadex" ; la page
   Méga Crabe est une sous-vue de evenements.php mais distincte de
   renderEventTimeline(), donc non concernée par le "je veux garder ça
   intact"). */
.crab-trophy-card {
    background: #ffffff;
    border: 2px solid #e1e6ea;
    border-radius: 0;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.crab-trophy-tier {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7d89;
    font-weight: 700;
}

.crab-trophy-icon { width: 44px; height: 44px; object-fit: contain; }

.crab-trophy-name {
    font-size: 0.85em;
    color: #16232e;
    font-weight: 600;
}

.crab-trophy-stone     .crab-trophy-tier { color: #a1887f; }
.crab-trophy-iron      .crab-trophy-tier { color: #b0bec5; }
.crab-trophy-gold      .crab-trophy-tier { color: #f1c40f; }
.crab-trophy-diamond   .crab-trophy-tier { color: #5dade2; }
.crab-trophy-legendary .crab-trophy-tier { color: #EE893E; }

.crab-bonus-list { display: flex; flex-direction: column; gap: 10px; }

.crab-bonus-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 2px solid #e1e6ea;
    border-radius: 0;
    padding: 10px 14px;
}

.crab-bonus-icon { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.crab-bonus-info { flex: 1; min-width: 0; }
.crab-bonus-name { font-size: 0.9em; color: #16232e; font-weight: 600; }
.crab-bonus-stages { font-size: 0.78em; color: #6b7d89; }
.crab-bonus-value { font-family: 'Bangers', cursive; font-size: 1.1em; color: #1abc9c; flex-shrink: 0; }

/* Capacité de canonnière temporaire débloquée à l'étape (crab_bonus.id_extra_spell,
   "capa temporaire" -- demande explicite), affichée sous le nom du bonus. */
.crab-bonus-extra { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.78em; color: #f1c40f; }
.crab-bonus-extra-icon { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }

@media (max-width: 768px) {
    .crab-edition-trophies { grid-template-columns: repeat(2, 1fr); }
}
/* ==========================================================================
   Cartes "en avant" (Chef de bataillon + Pass Boom Saison(s) + raccourcis) —
   uniquement utilisées par index.php désormais (renderDashboardQuickCards(),
   voir .public-home-columns plus bas) : tracker/dashboard.php ne les appelle
   plus depuis la fusion avec profil.php (remplacées par les colonnes de
   progression, voir renderProgressionOverview() dans functions.php).
   Affichées en pleine largeur, empilées, 2 colonnes de raccourcis sur mobile.

   Signature visuelle : le badge en dégradé derrière l'icône (teal pour le
   Chef, ambre/doré pour le Pass) — c'est le seul endroit où on se permet
   de la couleur ; le reste (fond de carte, quicklinks) reste sobre et
   aligné sur la palette existante du site.
   ========================================================================== */
.dash-quickcards { display: none; }

/* #dashboard-quickcards-slot est un frère de #Dashboard (pas dedans), donc pas
   concerné par le show/hide générique des .tab-content : on le synchronise
   nous-même via la classe .tab-active (voir showTab() dans script.js). */
.dash-quickcards.tab-active {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 18px;
}

.dash-fullcard {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #1e2b38;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dash-fullcard:hover {
    transform: translateY(-1px);
    border-color: rgba(26, 188, 156, 0.35);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Badge carré arrondi (façon icône d'app) derrière l'icône du Chef ou du
   skin de Pass — le dégradé change selon le type de carte. */
.dash-icon-badge {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-icon-badge-officer {
    background: linear-gradient(135deg, #1abc9c, #16806b);
    box-shadow: 0 4px 12px rgba(26, 188, 156, 0.35);
}
.dash-icon-badge-pass {
    background: linear-gradient(135deg, #f5a623, #d9770a);
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.35);
}

.dash-officer-icon, .dash-pass-skin {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex-shrink: 0;
}

.dash-fullcard-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.85em;
    color: #95a5a6;
    line-height: 1.35;
}
.dash-fullcard-eyebrow {
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #7f97a6;
}
.dash-fullcard-text strong {
    color: #ecf0f1;
    font-size: 1.1em;
    font-weight: 700;
}

.dash-fullcard-chevron {
    flex-shrink: 0;
    font-size: 1.6em;
    line-height: 1;
    color: #4a6072;
}

/* 2 colonnes, quelle que soit la largeur d'écran (utilisé par index.php,
   dans .public-home-col-center, voir plus bas). */
.dash-quicklinks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dash-quicklink {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1e2b38;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 14px 12px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.dash-quicklink:hover {
    transform: translateY(-1px);
    border-color: #1abc9c;
    background: #172230;
}

.dash-quicklink-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(26, 188, 156, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
}

.dash-quicklink-label {
    font-size: 0.85em;
    font-weight: 600;
    color: #ecf0f1;
}

/* L'ancienne section ".dashboard-top-row" (panneau QG + cartes "en avant"
   #dashboard-quickcards-slot côte à côte sur PC) a disparu : dashboard.php
   n'enveloppe plus modal_qg.php dans ce wrapper (fusion profil.php -- le
   panneau QG est de nouveau seul sur sa ligne, largeur par défaut de
   .qg-panel, voir plus haut). #dashboard-quickcards-slot/.dash-quickcards
   restent utilisés tels quels par index.php (renderDashboardQuickCards()),
   donc leurs styles de base restent en place, seul le layout "50/50 à côté
   du QG" propre au dashboard est retiré ici. */

/* 🔥 CORRECTIF : fond de page aligné sur celui de characters.php/buildings.php
   (body.character-public-page, beachadex.css) -- demande explicite ("je veux
   l'arrière-plan de index.php & pass.php et evenements.php de la même couleur
   que characters.php"). Réutilise les mêmes tokens (--wiki-cream-dark/
   --wiki-text, définis dans beachadex/beachadex.css :root, chargée après ce
   fichier sur ces 3 pages) plutôt que de dupliquer les valeurs. Les éléments
   qui gardaient leur propre fond sombre volontairement (topbar, barre de
   recherche, chips de nav pass.php...) ne sont PAS touchés : même logique que
   characters.php, où le bandeau/la fiche restent sombres sur fond clair. */
body.public-home-page {
        background: var(--wiki-cream-dark);
        color: var(--wiki-text);
        font-family: 'Segoe UI', Arial, sans-serif;
        margin: 0;
        padding: 0 0 60px;
    }

/* ==========================================================================
   TOPBAR page d'accueil — repris de beachadex-topbar (beachadex/includes/
   header.php) pour que index.php se fonde visuellement dans le reste du
   site : même fond, même bordure teal, mêmes liens de nav + icônes
   Search.png / Menu.png. Classes propres (public-home-*) car header.php
   n'est pas inclus ici (le bouton Dashboard/Connexion diffère du reste).
   ========================================================================== */
    .public-home-topbar {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 14px 24px;
        background: #1a252f;
        border-bottom: 2px solid #1abc9c;
    }

    .public-home-logo {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: #ecf0f1;
        flex-shrink: 0;
    }

    .public-home-logo-emoji { font-size: 1.4em; }

    .public-home-logo-text {
        font-family: 'Bangers', cursive;
        letter-spacing: 1px;
        font-size: 1.3em;
    }

    .public-home-nav-links {
        display: flex;
        align-items: center;
        gap: 26px;
        flex: 1;
    }

    .public-home-nav-link {
        color: #b0c4ce;
        text-decoration: none;
        font-size: 0.95em;
        font-weight: 600;
        padding: 4px 2px;
        border-bottom: 2px solid transparent;
        transition: color 0.15s ease, border-color 0.15s ease;
    }
    .public-home-nav-link:hover,
    .public-home-nav-link.active {
        color: #1abc9c;
        border-bottom-color: #1abc9c;
    }

    .public-home-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }

    .public-home-dashboard-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        color: #ecf0f1;
        font-weight: 700;
        font-size: 0.9em;
        text-decoration: none;
        padding: 8px 16px;
        border-radius: 8px;
        border: 1px solid rgba(236, 240, 241, 0.25);
        transition: border-color 0.15s ease, color 0.15s ease;
    }
    .public-home-dashboard-btn:hover { border-color: #1abc9c; color: #1abc9c; }

    .public-home-icon-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        border: none;
        background: transparent;
        cursor: pointer;
        flex-shrink: 0;
    }
    .public-home-icon-btn:hover { background: rgba(255, 255, 255, 0.08); }
    .public-home-icon-btn img { width: 19px; height: 19px; opacity: 0.9; }

    @media (max-width: 900px) {
        .public-home-nav-links { display: none; }
    }

/* ==========================================================================
   HERO — gros titre + mini présentation + barre de recherche, au-dessus des
   quickcards. La recherche tape sur beachadex/search.php (même endpoint que
   la recherche du header Beachadex) et liste personnages/bâtiments.
   ========================================================================== */
    .public-home-hero {
        max-width: 780px;
        margin: 44px auto 8px;
        padding: 0 16px;
        text-align: center;
    }

    .public-home-hero-title {
        font-family: 'Bangers', cursive;
        letter-spacing: 1.5px;
        font-size: 3em;
        margin: 0 0 12px;
        color: var(--wiki-text);
        text-shadow: none;
    }

    .public-home-hero-tagline {
        max-width: 560px;
        margin: 0 auto 26px;
        color: var(--wiki-text-soft);
        font-size: 1em;
        line-height: 1.55;
    }

    .public-home-hero-search {
        position: relative;
        max-width: 480px;
        margin: 0 auto;
    }

    .public-home-hero-search-input {
        width: 100%;
        box-sizing: border-box;
        background: #1a252f;
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #ecf0f1;
        font-size: 0.95em;
        padding: 13px 16px 13px 42px;
        border-radius: 10px;
        outline: none;
        transition: border-color 0.15s ease;
    }
    .public-home-hero-search-input:focus { border-color: #1abc9c; }
    .public-home-hero-search-input::placeholder { color: #6d8390; }

    .public-home-hero-search-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 17px;
        height: 17px;
        opacity: 0.6;
        pointer-events: none;
    }

    .public-home-hero-search-results {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 8px);
        background: #1e2b38;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
        overflow: hidden;
        z-index: 20;
        text-align: left;
    }

    .public-home-hero-search-results a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        text-decoration: none;
        color: #ecf0f1;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .public-home-hero-search-results a:last-child { border-bottom: none; }
    .public-home-hero-search-results a:hover { background: #243546; }

    .public-home-hero-search-results img {
        width: 26px;
        height: 26px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .public-home-hero-search-results .phs-name { font-weight: 600; font-size: 0.9em; }
    .public-home-hero-search-results .phs-type {
        margin-left: auto;
        font-size: 0.78em;
        color: #7f97a6;
        white-space: nowrap;
    }

    .public-home-hero-search-empty {
        padding: 12px 14px;
        color: #7f97a6;
        font-size: 0.88em;
    }

/* ==========================================================================
   2 colonnes sous le hero de la page d'accueil publique : DÉCOUVERTE
   ALÉATOIRE (gauche, largeur fixe) puis QUICKCARDS (centre/reste de la
   ligne, #dashboard-quickcards-slot). Le panneau "Événements en cours"
   (.event-panel) a été retiré de cette page (demande explicite -- il reste
   utilisé tel quel par tracker/dashboard.php et tracker/evenement.php, voir
   renderEventPanel() dans functions.php) ; .public-home-col-right a donc été
   renommé .public-home-col-left, la carte découverte prenant sa place.
   ========================================================================== */
    .public-home-columns {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        width: 90%;
        max-width: none;
        margin: 0 auto;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .public-home-col-left {
        flex: 0 1 320px;
        width: 320px;
        min-width: 0;
        max-width: 100%;
    }

    /* 🔥 CORRECTIF : display:flex + gap pour espacer les 3 sections empilées
       (Pass Boom/Chefs de bataillon/Actualité, demande explicite) --
       #dashboard-quickcards-slot (utilisé plus haut dans ce fichier) n'est
       PAS le parent réel ici, il a été retiré d'index.php, donc son gap
       n'avait aucun effet sur ce conteneur. */
    .public-home-col-center {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* 🔥 CORRECTIF : même panneau "façon jeu" que .officer-releases-section
       (bandeau + fond bleus, ligne grise -- demande explicite, capture
       "Cycle du mal" fournie en référence). */
    .discovery-card {
        background: #2477b2;
        border-radius: 0;
        overflow: hidden;
    }

    .discovery-card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 14px 16px;
        background-color: #235f91;
    }
    /* 🔥 CORRECTIF : classe dédiée (.discovery-card-title) plutôt qu'un
       sélecteur "h2" nu -- demande explicite ("ajoute une class pour la
       barre latérale"). Nécessaire car la règle h2{} générique (ligne ~614,
       pensée pour les bandeaux du tracker) pose SA PROPRE background-color
       (#3C7891) et un text-shadow noir directement sur la balise <h2>, en
       plus du padding/width/margin déjà annulés ci-dessous -- comme rien ne
       la contredisait sur ces 2 propriétés, elle s'affichait quand même
       (un fond + une bordure texte parasites derrière le titre, même
       repeints en bleu/gris ici). background/text-shadow à none et
       width à auto neutralisent cette règle générique proprement. */
    .discovery-card-title {
        margin: 0;
        padding: 0;
        font-family: 'Bangers', cursive;
        letter-spacing: 1.5px;
        font-size: 1.15em;
        font-weight: normal;
        color: #ecf0f1;
        background: none;
        text-shadow: none;
        width: auto;
        text-align: left;
    }
    /* 🔥 CORRECTIF : .discovery-card-icon ciblait un emoji (span, font-size) --
       remplacé par un <img> (icon_archipelago.png, demande explicite), qui a
       besoin d'une taille explicite en px/em plutôt que d'un font-size sans
       effet. Hauteur alignée sur le texte du h2 voisin (font-size: 1.15em) via
       .discovery-card-header en display:flex/align-items:center (pas besoin
       de vertical-align ici). */
    .discovery-card-icon { height: 1.3em; width: auto; flex-shrink: 0; }

    .discovery-card-empty {
        padding: 20px 16px;
        color: #cfe0ea;
        font-size: 0.9em;
    }

    /* Carte grise + texte blanc à l'intérieur du panneau bleu (demande
       explicite), même famille que .event-news-card/.pass-release-card. */
    .discovery-card-body {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 16px;
        padding: 14px;
        background: #373737;
        border: 2px solid #4a4a4a;
        text-decoration: none;
        color: inherit;
        transition: border-color 0.15s ease;
    }
    .discovery-card-body:hover { border-color: #1abc9c; }

    .discovery-card-img-wrap {
        flex-shrink: 0;
        width: 64px;
        height: 64px;
        border-radius: 14px;
        background: #2a2a2a;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .discovery-card-img { max-width: 44px; max-height: 44px; object-fit: contain; }

    .discovery-card-text {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .discovery-card-eyebrow {
        font-size: 0.78em;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #b0b0b0;
    }
    .discovery-card-text strong {
        font-size: 1.15em;
        color: #ecf0f1;
    }

    .discovery-card-chevron {
        flex-shrink: 0;
        font-size: 1.6em;
        line-height: 1;
        color: #cfd8de;
    }

    .discovery-card-reroll {
        display: block;
        text-align: center;
        margin: 0 16px 16px;
        padding: 10px 16px;
        background: #373737;
        border: 2px solid #4a4a4a;
        color: #1abc9c;
        text-decoration: none;
        font-size: 0.85em;
        font-weight: 600;
    }
    .discovery-card-reroll:hover { border-color: #1abc9c; }

    /* Sous 1050px : le centre repasse sous la découverte plutôt que de
       s'écraser. */
    @media (max-width: 1050px) {
        .public-home-columns { flex-wrap: wrap; }
        .public-home-col-center {
            flex-basis: 320px;
            width: auto;
            max-width: none;
        }
    }

    @media (max-width: 768px) {
        .public-home-columns {
            flex-direction: column;
            width: 100%;
        }
        .public-home-col-left,
        .public-home-col-center {
            width: 100%;
            max-width: none;
        }
        /* Carte "Découverte aléatoire" : bureau uniquement, demande explicite
           -- masquée en mode mobile (le reste de .public-home-col-left,
           renderRecurringEventsColumn(), reste visible). */
        .discovery-card {
            display: none;
        }
    }

    #dashboard-quickcards-slot {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

/* ==========================================================================
   DERNIERS CHEFS DE BATAILLON — section pleine largeur sous les 3 colonnes de
   la page d'accueil publique (index.php), 3 cartes générées par
   renderOfficerReleaseCards() (voir core/functions.php). Bannière pleine
   carte + nom/date incrustés en bas via un dégradé, même esprit visuel que
   .event-card mais en plus grand format "vitrine". La section entière n'est
   pas rendue si aucun chef n'a de release_date + bannière existante (voir
   getLatestOfficerReleases()), donc pas de règle "cas vide" à gérer ici.
   ========================================================================== */
/* Largeur = celle de l'ancien #dashboard-quickcards-slot (retiré de
   index.php, demande explicite) : 100% de .public-home-col-center, plus de
   90%/max-width/marges auto qui la resserraient et la décalaient par rapport
   au reste de la colonne. margin-top à 0 (au lieu de 36px) : cette section
   est désormais le tout premier enfant de .public-home-col-center -- un
   margin-top la décalait vers le bas par rapport à .public-home-col-left
   (.recurring-events-panel, lui sans marge haute), cassant l'alignement des
   2 colonnes demandé explicitement. */
/* 🔥 CORRECTIF : panneau "façon jeu" (bandeau titre bleu foncé + fond bleu
   clair, demande explicite -- capture d'écran "Cycle du mal" fournie en
   référence) au lieu du fond crème nu. Pas de padding latéral ici : le
   bandeau titre (.officer-releases-title) doit faire width:100% pile sur la
   largeur de la section (demande explicite) -- le padding latéral vit donc
   sur .officer-releases-grid à la place, pas sur la section elle-même. */
.officer-releases-section {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 20px;
    box-sizing: border-box;
    background: #2477b2;
}

/* Alignée sur .recurring-events-panel-header (même padding, même font-size)
   -- demande explicite ("alignés en hauteur", même taille en hauteur et
   police). padding explicite ci-dessous : remplace le padding:10px hérité
   de la règle h2 générique par le padding:14px 16px de
   .recurring-events-panel-header, pour une hauteur de bandeau identique. */
.officer-releases-title {
    /* 🔥 CORRECTIF : ⭐ (emoji inline dans le texte) remplacé par un <img>
       (icon_draft_pick.png, demande explicite) -- display:flex sur le h2
       lui-même pour aligner proprement l'icône avec le texte (même pattern
       que .discovery-card-header/.recurring-events-panel-header, qui sont
       déjà des conteneurs flex séparés du h2). width:100% + box-sizing
       explicites (demande explicite) plutôt que des marges négatives pour
       border à bord. */
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 14px 16px;
    font-family: 'Bangers', cursive;
    letter-spacing: 1.5px;
    font-size: 1.15em;
    font-weight: normal;
    color: #ecf0f1;
    background: #235f91;
}

/* Icônes des 3 h2 ci-dessus (officer-releases/pass-releases/event-news),
   toutes remplacées d'un emoji vers un <img> -- même taille/logique que
   .discovery-card-icon/.recurring-events-panel-icon. */
.officer-releases-title-icon,
.pass-releases-title-icon,
.event-news-title-icon {
    height: 1.3em;
    width: auto;
    flex-shrink: 0;
}

.officer-releases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding: 0 18px;
}

.officer-release-card {
    position: relative;
    display: block;
    border-radius: 0;
    overflow: hidden;
    background: #373737;
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-decoration: none;
    color: inherit;
    aspect-ratio: 367 / 244;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.officer-release-card:hover {
    transform: translateY(-2px);
    border-color: rgba(26, 188, 156, 0.5);
}

/* Toutes les bannières font 367x244 (confirmé) -- la carte a donc bien le
   même ratio fixe, et object-fit: cover la remplit entièrement sans jamais
   rogner puisque les 2 ratios sont identiques. */
.officer-release-banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Badge de rang (Lt.png) incrusté en haut à gauche de chaque carte. */
.officer-release-rank-icon {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 34px;
    height: 34px;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.officer-release-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
}

.officer-release-eyebrow {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9db2bd;
}

.officer-release-name {
    font-size: 1.05em;
    color: #ecf0f1;
    font-weight: 700;
}

.officer-release-date {
    font-size: 0.78em;
    color: #1abc9c;
    font-weight: 600;
}

@media (max-width: 768px) {
    .officer-releases-grid {
        grid-template-columns: 1fr;
    }
}

/* Accordéon "Voir plus" révélant les chefs de bataillon au-delà des 3
   premiers (toujours triés par date de sortie décroissante) -- même
   principe <details>/<summary> natif que .officer-quickbar-accordion
   ci-dessus (ligne ~288). */
.officer-releases-more {
    margin-top: 14px;
}

.officer-releases-more-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-radius: 0;
    font-family: 'Bangers', cursive;
    letter-spacing: 1px;
    font-size: 1em;
    /* 🔥 CORRECTIF : pastille teal isolée remplacée par le même langage que
       les cartes grises du panneau (fond #373737 + accent bleu clair) --
       demande explicite ("les boutons ... sont pas beau"), pour rester
       cohérent avec le reste du panneau bleu/gris plutôt que de trancher
       avec une 3e couleur (teal) qui n'apparaît nulle part ailleurs ici. */
    color: #7ec4e8;
    background: #373737;
    border: 1px solid #4a4a4a;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.officer-releases-more-summary:hover {
    background: #424242;
    border-color: #1abc9c;
}

.officer-releases-more-summary::-webkit-details-marker {
    display: none;
}

.officer-releases-more-arrow {
    font-size: 0.8em;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.officer-releases-more[open] > .officer-releases-more-summary .officer-releases-more-arrow {
    transform: rotate(180deg);
}

.officer-releases-grid-more {
    margin-top: 16px;
}

/* ==========================================================================
   PASS BOOM — section "vitrine" 3 cartes de index.php, AU-DESSUS de
   "Derniers chefs de bataillon" (demande explicite), voir
   renderPassBoomSeasonCards()/renderPassBoomSeasonCard() dans
   core/functions.php. Même largeur/marges que .officer-releases-section
   (100% de .public-home-col-center, 1er enfant donc pas de margin-top).
   ========================================================================== */
/* 🔥 CORRECTIF : même panneau "façon jeu" que .officer-releases-section --
   voir ce commentaire pour le détail (bandeau + fond bleus, demande
   explicite). */
.pass-releases-section {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 20px;
    box-sizing: border-box;
    background: #2477b2;
}

.pass-releases-title {
    /* 🔥 CORRECTIF : même chose que .officer-releases-title -- 🎫 remplacé
       par un <img> (icon_boom_pass.png, demande explicite). width:100% +
       box-sizing explicites (demande explicite), voir le commentaire sur
       .officer-releases-title pour le détail. */
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 14px 16px;
    font-family: 'Bangers', cursive;
    letter-spacing: 1.5px;
    font-size: 1.15em;
    font-weight: normal;
    color: #ecf0f1;
    background: #235f91;
}

.pass-releases-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 0 18px;
}

/* 🔥 CORRECTIF : cartes sombres remplacées par le style "carte blanche"
   déjà utilisé ailleurs sur le site (.event-news-card/.recurring-events-row)
   -- demande explicite ("appliquer le css du dossier beachadex"), pour que
   la section Pass Boom de l'accueil soit visuellement cohérente avec le
   reste de la page. */
.pass-release-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #373737;
    border: 2px solid #4a4a4a;
    border-radius: 0;
    padding: 18px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.pass-release-card:hover {
    transform: translateY(-2px);
    border-color: #1abc9c;
}

.pass-release-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.pass-release-skin {
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: #2a2a2a;
    border: 2px solid #1abc9c;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pass-release-skin-img { width: 56px; height: 56px; object-fit: contain; }
.pass-release-skin-placeholder { font-size: 28px; }

/* Cumul des récompenses (gratuit en haut / premium en bas, voir
   getPassBoomSeasonRewardTotals()) -- icône + quantité, plus les paliers "au
   choix" groupés en paire "(x4 A ou x4 B)". Les lignes s'enroulent
   (flex-wrap) et prennent la hauteur nécessaire -- pas de contrainte de
   hauteur, la carte grandit avec le nombre de récompenses distinctes. */
.pass-release-totals {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-top: 4px;
}

/* Grille fixe à 6 colonnes (demande explicite "6 icons par ligne") -- plafonne
   le nombre d'icônes par ligne quelle que soit la largeur de la carte, ce qui
   la fait grandir en hauteur plutôt qu'en largeur au-delà de 6 récompenses
   distinctes. Une pastille "au choix" (2 icônes) occupe 2 colonnes. */
.pass-release-totals-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: 10px 14px;
}

.pass-release-totals-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.pass-release-total-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pass-release-total-qty {
    font-size: 12.5px;
    font-weight: 700;
    color: #ecf0f1;
}

.pass-release-reward-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: none;
}

/* Palier "au choix" (reward OU reward2) : groupé à part, pas mélangé au
   cumul simple -- voir getPassBoomSeasonRewardTotals(). Reste sobre (pas de
   fond/bordure, demande explicite) : seules les parenthèses le distinguent
   visuellement d'un item simple. */
.pass-release-total-choice {
    grid-column: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pass-release-total-paren {
    font-size: 12px;
    font-weight: 700;
    color: #b0b0b0;
}

.pass-release-total-or {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b0b0b0;
}

.pass-release-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pass-release-season {
    font-size: 1.05em;
    color: #ffffff;
    font-weight: 700;
}

.pass-release-dates {
    font-size: 0.78em;
    /* 🔥 CORRECTIF : teal -> bleu (demande explicite, "je veux bien que Du
       27/07/2026 au 24/08/2026 ce soit en bleu"), même bleu clair d'accent
       (#7ec4e8) que .event-news-extra/.recurring-events-row-date ailleurs
       sur cette même page. */
    color: #7ec4e8;
    font-weight: 600;
}

@media (max-width: 768px) {
    .pass-releases-grid {
        grid-template-columns: 1fr;
    }

    /* 3 colonnes plutôt que 4 sur mobile (demande explicite, "pour faire plus
       joli") -- 4 icônes serrées restaient encore un peu tassées au doigt ;
       3 respire davantage. */
    .pass-release-totals-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 10px;
    }
}

.pass-releases-footer {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

.pass-releases-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-family: 'Bangers', cursive;
    letter-spacing: 1px;
    font-size: 1em;
    /* 🔥 CORRECTIF : même refonte que .officer-releases-more-summary
       juste au-dessus (demande explicite, "les boutons ... sont pas
       beau") -- pastille grise + accent bleu clair, cohérente avec les
       cartes plutôt qu'une pastille teal isolée. */
    color: #7ec4e8;
    background: #373737;
    border: 1px solid #4a4a4a;
    border-radius: 0;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.pass-releases-more-link:hover {
    background: #424242;
    border-color: #1abc9c;
}

/* Liste déroulante "Aller à une saison" de pass.php (renderPassSeasonPicker(),
   voir core/functions.php) -- navigue vers pass.php?season=N au choix,
   déplacée depuis index.php (demande explicite, l'affichage AJAX en direct
   sur la page d'accueil a été retiré : pass.php affiche déjà tout le détail
   server-side). */
.pass-season-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.pass-season-picker-label {
    font-size: 0.85em;
    color: var(--wiki-text-soft);
}

.pass-season-picker {
    background: #16232d;
    color: #ecf0f1;
    border: 1px solid #24384a;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.9em;
}

/* ==========================================================================
   ACTUALITÉ DU MOIS — cartes des événements non récurrents du mois en cours,
   sous les chefs de bataillon sur index.php (renderEventNewsSection(), voir
   core/functions.php). Format plus compact que les cartes chefs de
   bataillon : image en haut (avec badge En cours/Terminé), nom + dates en
   dessous. Section absente si aucun événement irrégulier ce mois-ci.
   ========================================================================== */
/* Même raison que .officer-releases-section ci-dessus : largeur = celle de
   l'ancien #dashboard-quickcards-slot. */
/* 🔥 CORRECTIF : même panneau "façon jeu" que .officer-releases-section --
   voir ce commentaire pour le détail (bandeau + fond bleus, demande
   explicite). */
.event-news-section {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 20px;
    box-sizing: border-box;
    background: #2477b2;
}

.event-news-title {
    /* 🔥 CORRECTIF : même chose que .officer-releases-title -- 📰 remplacé
       par un <img> (icon_task_force_mission.png, demande explicite). width:100%
       + box-sizing explicites (demande explicite), voir le commentaire sur
       .officer-releases-title pour le détail. */
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 14px 16px;
    font-family: 'Bangers', cursive;
    letter-spacing: 1.5px;
    font-size: 1.15em;
    font-weight: normal;
    color: #ecf0f1;
    background: #235f91;
    text-transform: capitalize;
}

/* Sous-titre de chaque groupe de statut (En cours / À venir / Terminés) --
   plus discret que .event-news-title, sert juste à séparer visuellement les
   3 groupes (voir renderEventNewsSection()). Padding latéral explicite : la
   section n'en a plus (voir .event-news-section), c'est ce h3/le lien "Voir
   tous les événements" en bas et .event-news-grid qui portent chacun leur
   propre inset désormais. */
.event-news-group-title {
    margin: 22px 0 10px;
    padding: 0 18px;
    font-size: 0.95em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #cfe0ea;
}
.event-news-group-title:first-of-type { margin-top: 0; }

.event-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 26px;
    padding: 0 18px;
}

/* 🔥 CORRECTIF : cartes grises + texte blanc (demande explicite, capture
   "Cycle du mal" fournie en référence) -- remplace le style "carte blanche"
   précédent, pour rester cohérent avec le nouveau panneau bleu de cette
   section (voir .event-news-section ci-dessus). */
.event-news-card {
    background: #373737;
    border: 2px solid #4a4a4a;
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.event-news-card:hover {
    transform: translateY(-2px);
    border-color: #1abc9c;
}

/* Carte Méga Crabe cliquable -> fiche détaillée (trophées + bonus par étape),
   voir renderEventNewsSection(). */
.event-news-card-clickable {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.event-news-card-clickable:focus-visible {
    outline: 2px solid #1abc9c;
    outline-offset: 2px;
}

/* Ratio fixe 351x161 (taille réelle des bannières images/event/*.png) +
   object-fit: contain, pour ne JAMAIS rogner l'image -- demande explicite
   (contrairement à .officer-release-banner, en object-fit: cover). */
.event-news-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 351 / 161;
    background: rgba(0, 0, 0, 0.1);
}

.event-news-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.event-news-status {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.event-news-status-live     { background: rgba(26, 188, 156, 0.95); color: #0d2b24; }
.event-news-status-upcoming { background: rgba(245, 166, 35, 0.95); color: #2b1c04; }
.event-news-status-done     { background: rgba(90, 105, 118, 0.95); color: #ffffff; }

.event-news-info {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-news-name {
    font-size: 1.05em;
    color: #ecf0f1;
    font-weight: 800;
}

.event-news-extra {
    font-size: 0.82em;
    color: #7ec4e8;
    font-weight: 600;
}

.event-news-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}

.event-news-date {
    font-size: 0.78em;
    color: #b0b0b0;
}

.event-news-hq {
    font-size: 0.72em;
    font-weight: 700;
    color: #7ec4e8;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 2px 6px;
    flex-shrink: 0;
}

/* Icônes incrustées (sort GBA / troupes Troopmania) en bas à droite de
   .event-news-img-wrap -- pas de fond, juste l'illustration avec une ombre
   portée, même principe que .event-overlay sur le panneau "Événements en
   cours" mais réduit pour la taille des cartes .event-news-card. */
.event-news-overlay {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
    z-index: 2;
}
.event-news-overlay-troop2 { right: 30px; z-index: 1; }

/* Bouton "Voir tous les événements" en bas de section, toujours affiché
   (voir renderEventNewsSection()) -- envoie vers evenements.php (frise
   complète, voir renderEventTimeline()). Texture bouton du jeu (même
   convention que .btn-upgrade-ability/.btn-downgrade plus haut dans ce
   fichier), pas de flèche dans le texte -- demande explicite. */
.event-news-full-link {
    display: inline-block;
    margin: 16px 0 0 18px;
    padding: 11px 26px;
    background-image: url('images/icons/76.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 4px;
    font-family: 'Bangers', cursive;
    font-weight: 400;
    letter-spacing: 0.5px;
    font-size: 1em;
    color: #ffffff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), 0 3px 4px rgba(0, 0, 0, 0.5);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}
.event-news-full-link:hover {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

/* ==========================================================================
   ÉVÉNEMENTS RÉGULIERS -- panneau unifié (bordure teal + en-tête + liste de
   cartes blanches), colonne gauche de la page d'accueil publique, au-dessus
   de .discovery-card. Même famille visuelle que .event-panel/.discovery-card
   -- demande explicite ("un truc de ce style", capture d'un panneau mobile
   "Événements actifs" fournie en référence). Voir renderRecurringEventsColumn().
   ========================================================================== */
/* 🔥 CORRECTIF : même panneau "façon jeu" que .officer-releases-section
   (bandeau + fond bleus, lignes grises espacées -- demande explicite,
   capture "Cycle du mal" fournie en référence). */
.recurring-events-panel {
    background: #2477b2;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 20px;
}

.recurring-events-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background-color: #235f91;
}
/* font-size aligné sur .officer-releases-title/.event-news-title -- demande
   explicite ("les h2 soient de la même taille"). padding:0 pour annuler le
   padding:10px hérité de la règle h2 générique -- le padding vient déjà du
   conteneur .recurring-events-panel-header (14px 16px) juste au-dessus,
   pour une hauteur de bandeau identique à .officer-releases-title.
   🔥 CORRECTIF : classe dédiée (.recurring-events-panel-title) plutôt qu'un
   sélecteur "h2" nu -- demande explicite ("du peut ajouter une class pour
   la barre latérale ? la couleur ne passe pas, vu qu'il est partagé
   ailleurs"). La règle h2{} générique (ligne ~614, pensée pour les bandeaux
   du tracker) pose SA PROPRE background-color (#3C7891) et un text-shadow
   noir directement sur la balise <h2> -- rien ne les contredisait, donc ils
   s'affichaient quand même par-dessus le bandeau bleu du panneau (le fond
   "tacheté" derrière le titre signalé). background/text-shadow à none et
   width à auto neutralisent cette règle générique proprement, sans y
   toucher (elle reste utilisée ailleurs sur le site). */
.recurring-events-panel-title {
    margin: 0;
    padding: 0;
    font-family: 'Bangers', cursive;
    letter-spacing: 1.5px;
    font-size: 1.15em;
    font-weight: normal;
    color: #ecf0f1;
    background: none;
    text-shadow: none;
    width: auto;
    text-align: left;
}
/* 🔥 CORRECTIF : même chose que .discovery-card-icon plus haut -- passé d'un
   emoji (span, font-size) à un <img> (Event.png, demande explicite). */
.recurring-events-panel-icon { height: 1.3em; width: auto; flex-shrink: 0; }

/* 🔥 CORRECTIF : gap + padding (demande explicite "un peu d'espace... entre
   les recurring-events-row et du margin") -- chaque ligne devient sa propre
   carte grise séparée plutôt que des lignes collées avec juste un filet de
   séparation. */
.recurring-events-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.recurring-events-row {
    background: #373737;
    border: 2px solid #4a4a4a;
    transition: border-color 0.15s ease;
}
.recurring-events-row:hover { border-color: #1abc9c; }

.recurring-events-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px 8px;
}

.recurring-events-row-title {
    font-size: 0.95em;
    font-weight: 800;
    color: #ecf0f1;
}

.recurring-events-row-arrow {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    object-fit: contain;
}

.recurring-events-row-img-wrap {
    width: 100%;
    aspect-ratio: 351 / 161;
    background: rgba(255, 255, 255, 0.06);
}
.recurring-events-row-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.recurring-events-row-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 14px 12px;
}
.recurring-events-row-date {
    font-size: 0.78em;
    color: #7ec4e8;
    font-weight: 600;
}
.recurring-events-row-hq {
    font-size: 0.72em;
    font-weight: 700;
    color: #7ec4e8;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 2px 6px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .event-news-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   HISTORIQUE COMPLET DES ÉVÉNEMENTS (evenements.php) -- frise verticale façon
   "Liste des événements" Pokékalos, voir renderEventTimeline() dans
   core/functions.php. Cartes blanches façon .event-news-card (cohérence
   visuelle) mais alignées le long d'une ligne verticale avec un point coloré
   par catégorie (eventCategoryMeta()).
   ========================================================================== */
.event-timeline-page {
    width: 90%;
    max-width: 900px;
    margin: 40px auto 60px;
    padding: 0 16px;
    box-sizing: border-box;
}

.event-timeline-page-title {
    font-family: 'Bangers', cursive;
    letter-spacing: 1.5px;
    font-size: 1.6em;
    font-weight: normal;
    color: var(--wiki-text);
    margin: 0 0 6px;
}

.event-timeline-page-subtitle {
    color: var(--wiki-text-soft);
    margin: 0 0 28px;
    font-size: 0.95em;
}

/* Lien retour affiché quand la page est filtrée sur une seule catégorie
   (evenements.php?TID=...), voir evenements.php. */
.event-timeline-backlink {
    display: inline-block;
    margin-left: 8px;
    color: #1abc9c;
    font-weight: 700;
    text-decoration: none;
}
.event-timeline-backlink:hover { text-decoration: underline; }

/* Sous-titre de groupe (En cours / À venir / Terminés), même principe que
   .event-news-group-title sur la page d'accueil -- voir renderEventTimeline(). */
.event-timeline-group-title {
    margin: 26px 0 12px;
    padding-left: 26px;
    font-size: 0.95em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #7f97a6;
}
.event-timeline-group-title:first-of-type { margin-top: 0; }

.event-timeline {
    position: relative;
    padding-left: 26px;
}

.event-timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: rgba(255, 255, 255, 0.15);
}

.event-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #ffffff;
    border: 2px solid #e1e6ea;
    padding: 14px 16px;
    margin-bottom: 16px;
}

/* Carte Méga Crabe cliquable -> fiche détaillée (trophées + bonus par étape),
   voir renderEventTimeline(). */
.event-timeline-item-clickable { cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
.event-timeline-item-clickable:hover { border-color: #EE893E; transform: translateY(-1px); }
.event-timeline-item-clickable:focus-visible { outline: 2px solid #EE893E; outline-offset: 2px; }

.event-timeline-dot {
    position: absolute;
    left: -26px;
    top: 20px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}

.event-timeline-content {
    flex: 1 1 auto;
    min-width: 0;
}

.event-timeline-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.event-timeline-statuspill {
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 8px;
    border-radius: 20px;
}
.event-timeline-statuspill-ongoing  { background: rgba(26, 188, 156, 0.15); color: #128c73; }
.event-timeline-statuspill-upcoming { background: rgba(245, 166, 35, 0.15); color: #b5760f; }
.event-timeline-statuspill-done     { background: rgba(90, 105, 118, 0.15); color: #5a6976; }

/* Titre en gros = la "donnée supplémentaire" de l'événement (troupes/sort/
   saison/édition), ou le nom générique à défaut -- demande explicite. */
.event-timeline-name {
    margin: 0 0 6px;
    font-size: 1.15em;
    font-weight: 800;
}

/* Catégorie (nom générique de l'événement) affichée SOUS le titre, sous forme
   de badge cliquable -- renvoie vers evenements.php?TID=... (historique
   complet de cette seule catégorie, voir getAllEventNews()/renderEventTimeline()). */
.event-timeline-category {
    display: inline-block;
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 8px;
    transition: opacity 0.15s ease;
}
.event-timeline-category:hover { opacity: 0.8; }

.event-timeline-dates {
    font-size: 0.82em;
    color: #566573;
    margin-bottom: 2px;
}

.event-timeline-countdown {
    font-size: 0.85em;
    color: #16232e;
    font-weight: 700;
}

.event-timeline-thumb {
    flex: 0 0 120px;
    width: 120px;
    aspect-ratio: 351 / 161;
    overflow: hidden;
    border: 2px solid #3C7891;
    background: rgba(0, 0, 0, 0.05);
}

.event-timeline-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.event-timeline-empty {
    color: #9db2bd;
}

@media (max-width: 600px) {
    .event-timeline-item {
        flex-direction: column;
    }
    .event-timeline-thumb {
        width: 100%;
        flex: 0 0 auto;
    }
}

/* Panneau QG (modal_qg.php) : réaffiché sur mobile, réorganisé verticalement
   (visuel / coût+bouton / déblocages) -- voir le bloc @media (max-width: 768px)
   plus haut, autour de .qg-panel-body. Était auparavant masqué en display:none
   sur mobile, remplacé par les seules quickcards ; les deux coexistent
   maintenant. */