@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: #2f8fd1; color: white; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background: #1f6fae; }
        /* 🔥 CORRECTIF (demande explicite, "insupportable de le voir à chaque
           fois") : box-shadow retiré -- s'appliquait à TOUS les <table> du site
           (règle générique tout en haut de la feuille de style). */
        table { border-collapse: collapse; width: 100%; background: #34495e; }
        th, td { border: 1px solid #456789; padding: 12px; text-align: left; }
        th { background: #2f8fd1; 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: #2f8fd1;
    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 #2f8fd1;
            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: #2f8fd1;
            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: #2f8fd1; }

/* ==========================================================================
   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: #2f8fd1;
}

.officer-quick-unlocked { border-color: rgba(47, 143, 209, 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: #2f8fd1; 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: #2f8fd1;
}

#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;
}

/* 🔥 AJOUT (demande explicite, "ajoute un peu d'espace en dessous des
   divs-Overview dans le dashboard") : buildings.php#Building-Overview,
   characters.php#Character-Overview, etc. -- toujours visibles (pas de classe
   .tab-content), touchaient directement l'onglet suivant sans marge. */
div[id$="-Overview"] {
    margin-bottom: 24px;
}

.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(
        #2f8fd1 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, #2f8fd1);
    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, #2f8fd1); }
.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, #2f8fd1);
    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
   ========================================================================== */
/* 🔥 CORRECTIF (demande explicite, "j'aime pas trop pour les boost, c'est
   illisible") : .statue-panel n'avait jamais eu de fond propre -- pour
   l'onglet Statues, ça passait inaperçu car .statue-table (plus bas) pose sa
   propre carte sombre juste en dessous du sous-titre, qui occupe presque tout
   l'espace visible. Mais l'onglet Boost de construction (.boost-form) n'a
   qu'un fond quasi transparent (rgba(255,255,255,0.035), pensé pour se poser
   SUR un fond déjà sombre) : sans carte sombre autour, le sous-titre et les
   champs BuildingBoost/ArmoryBoost se retrouvaient à nu sur le fond beige de
   la page, avec le texte gris-bleu clair (--bb-muted) devenu peu lisible
   dessus (vérifié en sandbox : #8aa0b0 sur #f4e5c1). Le panneau porte
   désormais sa propre carte sombre, cohérente entre les 2 onglets.
   .boost-form garde son fond quasi transparent, qui redevient un léger
   surlignage tel qu'imaginé à l'origine, maintenant posé sur ce fond sombre. */
.statue-panel {
    font-family: 'Montserrat', sans-serif;
    max-width: 1100px;
    margin: 0 auto;
    background: var(--bb-navy-800, #1c2c39);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* Le panneau pose déjà 20px de marge latérale (padding) : la marge propre de
   .boost-form (0 20px, pensée pour un panneau sans padding) devient inutile
   ici et créerait une double indentation -- même correctif déjà appliqué pour
   .settings-accordion-content .boost-form plus bas dans ce fichier. */
.statue-panel .boost-form {
    margin: 0;
}

.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;
    /* 🔥 AJOUT colonne "Ressource" (icône, demande explicite) entre Valeur et le
       bouton de suppression -- voir .statue-resource-icon plus bas. */
    grid-template-columns: 50px 1.4fr 1.4fr 110px 40px 40px;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bb-navy-700, #24384a);
}

.statue-resource-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin: 0 auto;
}

.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, #2f8fd1);
    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;
}

/* 🔥 CORRECTIF (demande explicite, "léger soucis format téléphone pour les
   statues") : .statue-row n'avait jamais eu de règle mobile -- sa grille fixe
   à 6 colonnes (50px 1.4fr 1.4fr 110px 40px 40px) n'a pas la place de
   respirer sur un écran de téléphone (vérifié en sandbox à 390px : le bouton
   de suppression se retrouvait poussé hors de la carte). Réorganisée en 3
   lignes sur mobile grâce aux classes déjà posées par ligne dans
   renderStatuesTable() (statue-slot-number/statue-select-tid/
   statue-select-bonus/statue-input-boost/statue-resource-icon/
   statue-clear-btn) : (Emplacement + Palier), (Bonus + Valeur), (icône +
   Vider). L'en-tête de colonnes (statue-row-header) n'a plus de sens une fois
   les champs réorganisés en grille 2D -- masqué sur mobile. */
@media (max-width: 600px) {
    .statue-row-header {
        display: none;
    }

    /* 🔥 CORRECTIF (demande explicite, "c'est encore pas joli les statues") :
       la 1ère version mobile (grid-template-areas 2 colonnes 40px/1fr,
       partagées par les 3 lignes) écrasait le select Bonus dans la colonne
       étroite pensée pour le numéro d'emplacement (#1..#13) -- vérifié en
       sandbox : le select Bonus s'affichait quasi vide (juste la flèche),
       alors qu'il contenait bien des options une fois ouvert. Une grille à
       colonnes fixes ne peut pas donner une largeur différente à la même
       colonne selon la ligne -- remplacée par un flex-wrap, où chaque ligne
       se calcule indépendamment : (slot + tid) remplit toute la largeur de la
       1ère ligne (tid en flex-grow, donc plus de place pour bonus derrière),
       ce qui pousse naturellement (bonus + valeur) sur une 2e ligne à ~50/50,
       puis (icône + Vider) sur une 3e.  */
    .statue-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
    }

    .statue-slot-number {
        flex: 0 0 30px;
    }
    .statue-select-tid {
        flex: 1 1 auto;
        min-width: 0;
    }
    .statue-select-bonus {
        flex: 1 1 45%;
        min-width: 0;
    }
    .statue-input-boost {
        flex: 1 1 45%;
        min-width: 0;
    }
    .statue-resource-icon {
        margin: 0;
    }
    .statue-clear-btn {
        margin-left: auto;
    }
}

.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: #2f8fd1;
}

.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: #2f8fd1;
    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: #2f8fd1;
    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: #1f6fae; }"
   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: #2f8fd1;
    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: #2f8fd1;
    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: #2f8fd1;
    box-shadow: 0 0 0 1px #2f8fd1 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: #2f8fd1;
}

.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: #2f8fd1;
}

.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(47, 143, 209, 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, #2f8fd1, #1f6fae);
    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: #2f8fd1;
}

.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: #2f8fd1;
    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: #2f8fd1;
    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: #2f8fd1;
}

.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: #2f8fd1;
    --bb-navy-950: #0f1a22;
    --bb-navy-900: #16232d;
    --bb-navy-800: #1c2c39;
    --bb-navy-700: #24384a;
    --bb-teal: #2f8fd1;
    --bb-teal-soft: rgba(47, 143, 209, 0.16);
    --bb-green: #a2e23b;
    --bb-white: #eef4f8;
    --bb-muted: #8aa0b0;
    --sidebar-w-expanded: 268px;
    --sidebar-w-collapsed: 76px;
}

/* 🔥 AJOUT (demande explicite, "récupère les couleurs des tribus... tu
   l'enregistres en css, on pourrait en avoir besoin plus tard") : couleur
   d'ambiance des 6 Tribus de l'Archipel -- table `sectors`, colonnes
   SectorOverlayMultiplier{Red,Green,Blue} (échelle 0-255, directement
   utilisable en rgb() -- même source que $sectors_list['overlay_rgb'] dans
   tracker/includes/queries.php, voir renderTribusTable()). Non utilisées
   ailleurs sur le site pour l'instant -- bloc autonome, à consommer plus
   tard là où besoin (pas de lien avec la fiche Méga Crabe). */
:root {
    --tribu-gardeglace:  rgb(113, 244, 237); /* Tribu Gardeglace (sectors.id=1) */
    --tribu-givrembleme: rgb(201, 117, 255); /* Tribu Givremblème (sectors.id=26) */
    --tribu-lanceflamme: rgb(242, 91, 91);   /* Tribu Lanceflamme (sectors.id=53) */
    --tribu-ragebraise:  rgb(255, 164, 47);  /* Tribu Ragebraise (sectors.id=74) */
    --tribu-bellevie:    rgb(105, 239, 110); /* Tribu Bellevie (sectors.id=100) */
    --tribu-espridanse:  rgb(255, 230, 82);  /* Tribu Espridanse (sectors.id=124) */
}

.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(47, 143, 209, 0.10);
    border-color: rgba(47, 143, 209, 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: #2f8fd1;
    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: #2f8fd1;
    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;
    /* 🔥 CORRECTIF (demande explicite) : box-shadow retiré. */
}

.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(47, 143, 209, 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: #2f8fd1;
    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: #2f8fd1;
}

.btn-hide-maxed.active {
    border-color: #2f8fd1;
    color: #2f8fd1;
}

.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: #2f8fd1;
    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: #2f8fd1; }

@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, #2f8fd1, #1f6fae);
        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;
    }

    /* 🔥 Icône "ouvert" = vraie icône Close.png dédiée (demande explicite : "sans
       faire de transform: rotate(45deg)"), plus l'ancien Menu.png pivoté en CSS --
       les deux <img> (voir core/mobile_nav.php) sont superposées via le même
       display:flex centré du bouton, une seule visible à la fois selon
       body.mobile-menu-open. */
    .mobile-bottom-nav-menu-btn img.mobile-bottom-nav-menu-icon-close {
        display: none;
    }
    body.mobile-menu-open .mobile-bottom-nav-menu-btn img.mobile-bottom-nav-menu-icon-menu {
        display: none;
    }
    body.mobile-menu-open .mobile-bottom-nav-menu-btn img.mobile-bottom-nav-menu-icon-close {
        display: block;
    }

    .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);
    }
}
/* ==========================================================================
   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: #2f8fd1;
    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;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 🔥 AJOUT (demande explicite, tracker/bonus.php onglet Boost de construction) :
   icon_speedups_build_times.png / icon_speedups_research.png devant chaque
   champ, à la place des émojis utilisés auparavant. */
.boost-field-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.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: #2f8fd1;
    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; }

    /* 🔥 CORRECTIF (demande explicite, "boost tu peut prendre 100% pour la
       largeur des zones de textes") : .boost-input-wrap gardait sa largeur
       fixe de bureau (110px) même une fois .boost-field étiré sur toute la
       largeur par align-items:stretch ci-dessus -- ne laissant qu'une toute
       petite zone de saisie collée à gauche, avec beaucoup d'espace vide à
       droite. Prend maintenant toute la largeur disponible du champ, sur
       téléphone uniquement (inchangé sur bureau, où les champs restent
       côte à côte). */
    .boost-input-wrap {
        width: 100%;
    }
}
/* ==========================================================================
   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: #2f8fd1;
    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: #2f8fd1; }
.skin-card.unlocked { border-color: #2f8fd1; box-shadow: 0 0 0 2px rgba(47, 143, 209, 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: #2f8fd1; 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: #2f8fd1; background: rgba(47, 143, 209, 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: #2f8fd1;
    text-decoration: none;
    font-size: 0.9em;
}
.crab-edition-back:hover { text-decoration: underline; }

/* ==========================================================================
   🔥 AJOUT (demande explicite, "ébauche façon article wiki", capture
   Poképédia/Pokékalos fournie en référence) : mise en page générique
   "article de wiki" -- titre, intro (+ image), puis sections à bandeau
   coloré (variante de couleur par section, façon Poképédia). Actuellement
   utilisée uniquement par la fiche Méga Crabe (renderCrabEditionPage()),
   mais volontairement générique (.wiki-article-*) pour être réutilisable
   sur d'autres fiches événement plus tard sans dupliquer le style.
   ========================================================================== */
.wiki-article {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wiki-article-header {
    background: #ffffff;
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.wiki-article-title {
    font-family: 'Bangers', cursive;
    color: var(--wiki-text);
    font-size: 1.8em;
    letter-spacing: 0.5px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* 🔥 AJOUT (demande explicite, "remplace l'icon crabe/l'icon calendrier/les
   éditions par..." -- remplace les emojis 🦀/📅/🏷️ par les icônes du site,
   voir renderCrabEditionPage()) : petite icône alignée avec le texte, un
   format un peu plus grand pour celle du titre (h1). */
.wiki-icon-inline {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: -3px;
}
.wiki-icon-title {
    width: 30px;
    height: 30px;
}
/* 🔥 CORRECTIF (demande explicite, "icon de cano un peu trop grand") : icône
   "Coût en canonnière" (icon_gunboat) de la page "Capacité supplémentaire"
   (voir core/functions.php) affichée en ligne avec le texte -- comme
   .wiki-icon-inline juste au-dessus, mais cette classe n'avait jamais eu de
   règle CSS du tout, donc l'image s'affichait à sa taille native (bien plus
   grande que l'icône 16-18px utilisée partout ailleurs pour ce même
   icon_gunboat, voir .character-levels-icon dans beachadex.css). */
.gba-energy-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: -3px;
}
/* 🔥 AJOUT (demande explicite, "lier les crabes entre eux") : kicker
   ("Éditions du Méga Crabe"), sous-titre = libellé de l'occurrence courante
   ("Crabe Joker 2025") et ligne de date, sur le modèle de la capture
   Poképédia fournie en référence. */
.wiki-article-kicker {
    margin: 0 0 4px;
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7a8f9b;
}
.wiki-article-subtitle {
    margin: 6px 0 0;
    font-size: 1.05em;
    font-weight: 700;
    color: #3C7891;
}
.wiki-article-daterange {
    margin: 4px 0 0;
    font-size: 0.92em;
    color: #5d7280;
}
/* 🔥 AJOUT (demande explicite, "indique la combientième édition c'est") --
   volontairement discret (même registre que .wiki-article-daterange), pas un
   badge/pastille criard : une simple ligne d'info de plus dans l'en-tête. */
.wiki-article-edition-ordinal {
    margin: 4px 0 0;
    font-size: 0.85em;
    color: #7a8f9b;
}

.wiki-article-intro {
    background: #ffffff;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 20px;
}
.wiki-article-intro p {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: #3d4f59;
    line-height: 1.6;
}
.wiki-article-intro-img {
    flex: 0 0 180px;
    width: 180px;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

/* Une section = un bandeau de titre teinté (couleur d'accent variable) +
   un bloc de contenu blanc en dessous, façon Poképédia -- .wiki-article-
   section-{couleur} ne change QUE l'accent (bordure gauche du titre +
   fond très légèrement teinté), le corps reste blanc partout. */
.wiki-article-section {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* 🔥 CORRECTIF : le h2 global du site (voir plus haut dans ce fichier)
   force "color: white !important" + un text-shadow noir épais, pensé pour
   les gros titres pleine largeur sur fond bleu foncé -- totalement
   illisible sur nos bandeaux clairs teintés. !important nécessaire pour
   les neutraliser (la spécificité de classe suffit déjà à écraser le
   reste : padding/background/margin/text-align non !important côté h2). */
.wiki-article-section-title {
    margin: 0;
    padding: 12px 20px 12px 16px;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--wiki-text) !important;
    text-shadow: none !important;
    text-align: left;
    border-left: 5px solid transparent;
}
.wiki-article-section-body {
    padding: 16px 20px 20px;
}
.wiki-article-section-body p {
    margin: 0;
    color: #3d4f59;
    line-height: 1.6;
}

.wiki-article-section-blue   .wiki-article-section-title { background: #e4f3fb; border-left-color: #1a7fb3; }
.wiki-article-section-gold   .wiki-article-section-title { background: #fbf3de; border-left-color: #d4a017; }
.wiki-article-section-teal   .wiki-article-section-title { background: #e3f7ef; border-left-color: #2f8fd1; }
.wiki-article-section-purple .wiki-article-section-title { background: #f1e9fb; border-left-color: #9b59b6; }
/* 🔥 AJOUT (demande explicite, section "Défenses spéciales" de la fiche Méga
   Crabe) -- même rouge que .event-timeline-dot pour la catégorie Méga Crabe
   (eventCategoryMeta(11), #e74c3c) : cette classe servait auparavant à la
   section Chronologie, déplacée + redesignée en pied de page discret (voir
   .crab-chrono-footer), donc libre pour ce nouvel usage. */
.wiki-article-section-red    .wiki-article-section-title { background: #fbe6e3; border-left-color: #e74c3c; }
/* 🔥 AJOUT (demande explicite, fiche dédiée Troupes à gogo) -- même vert que
   .event-timeline-dot pour cette catégorie (eventCategoryMeta(12), #2ecc71). */
.wiki-article-section-green  .wiki-article-section-title { background: #e5f9ee; border-left-color: #2ecc71; }

/* 🔥 AJOUT (demande explicite, "certains crabes ont des défenses spéciales,
   tu peux l'ajouter avec le visuel") : grille de cartes, même registre visuel
   que .crab-trophy-card (carte blanche, icône + libellé) -- un thème peut en
   avoir une ou deux (ex: Brûlé, Halloween), voir renderCrabEditionPage(). */
/* 🔥 CORRECTIF (demande explicite, "tu peut centrer les div des défenses
   spéciales") : passé de grid (grid-template-columns: repeat(auto-fill,
   minmax(140px, 1fr))) à flex -- avec des tracks en 1fr, justify-content
   n'a aucun effet sur une grid (les tracks flexibles consomment tout
   l'espace disponible par définition, donc les 1-2 cartes de la plupart
   des thèmes restaient collées à gauche/en pleine largeur). flex +
   justify-content:center centre correctement le lot de cartes quel que
   soit son nombre, même registre que .troopmania-troop-icons ci-dessous
   (registre déjà centré pour un cas similaire, 1-2 cartes). */
.crab-defense-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.crab-defense-card {
    /* Largeur fixe (ancien minmax(140px, 1fr) du grid retiré) -- garde des
       cartes de taille cohérente désormais que le conteneur est un flex
       centré plutôt qu'une grille pleine largeur. */
    flex: 0 1 140px;
    background: #ffffff;
    border: 1px solid #e1e6ea;
    border-radius: 10px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    /* 🔥 AJOUT (demande explicite, lien vers buildings.php?name=...) : la
       carte est un <a> quand la défense a résolu un vrai bâtiment (voir
       renderCrabEditionPage()) -- annule le style de lien par défaut du
       navigateur pour garder le même rendu qu'une carte non cliquable. */
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.crab-defense-card:hover {
    border-color: #e74c3c;
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.15);
}
.crab-defense-icon { width: 48px; height: 48px; object-fit: contain; }
.crab-defense-name {
    font-size: 0.85em;
    color: #16232e;
    font-weight: 600;
}

/* 🔥 AJOUT (demande explicite, "lier les crabes entre eux... le précédent,
   le suivant et ceux d'une même catégorie") : deux lignes de chronologie
   (même thème / toutes éditions), chacune précédent ◄ / courant / ► suivant.
   🔥 REDESIGN (demande explicite, "met la [div chronologie] plutôt en bas,
   et rend la div moins visible quitte à changer un peu le design") :
   auparavant un .wiki-article-section-red -- bandeau de titre rouge aussi
   voyant que les sections Trophées/Bonus -- remplacé par ce simple pied de
   page discret (pas de carte blanche à ombre portée, juste un fin séparateur
   + petit titre gris) posé en bas de la fiche, voir renderCrabEditionPage(). */
.crab-chrono-footer {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px dashed #d8e0e5;
}
.crab-chrono-footer-title {
    margin: 0 0 10px;
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9aa7ae;
}
.crab-chrono-group + .crab-chrono-group {
    margin-top: 18px;
}
.crab-chrono-group-title {
    font-size: 0.85em;
    font-weight: 700;
    color: #7a8f9b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.crab-chrono-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: #fbf7ee;
    border-radius: 10px;
    padding: 10px 14px;
}
.crab-chrono-link {
    flex: 1 1 0;
    min-width: 0;
    color: #3C7891;
    font-weight: 600;
    font-size: 0.92em;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}
.crab-chrono-link:hover { color: #e74c3c; }
.crab-chrono-prev { text-align: left; }
.crab-chrono-next { text-align: right; }
.crab-chrono-current {
    flex: 1.4 1 0;
    min-width: 0;
    text-align: center;
    font-weight: 700;
    color: var(--wiki-text);
    font-size: 0.95em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crab-chrono-none {
    flex: 1 1 0;
    text-align: center;
    color: #b9c3c9;
    font-size: 0.92em;
}

@media (max-width: 560px) {
    .crab-chrono-row { flex-direction: column; align-items: stretch; text-align: center; }
    .crab-chrono-link, .crab-chrono-current, .crab-chrono-none { text-align: center; flex: none; white-space: normal; }
}

/* ==========================================================================
   TROUPES À GOGO — fiche détaillée d'une occurrence (evenements.php?event=
   troopmania&occurrence=N), voir renderTroopmaniaEventPage(). Réutilise
   .wiki-article-*/.crab-edition-back tels quels (même habillage générique
   que la fiche Méga Crabe) -- seuls les éléments propres à cette fiche
   (icônes de troupe centrées) ont leur propre style ci-dessous.
   ========================================================================== */
.troopmania-event-page { padding: 4px 0 20px; }

/* Icônes des troupes mises à l'honneur, centrées (demande explicite,
   "[Icon des troupes centrées]") -- 1 ou 2 icônes selon l'occurrence, même
   registre visuel que .crab-defense-card (carte blanche, cliquable vers la
   fiche de la troupe) mais sans libellé texte, l'icône se suffit ici (le nom
   est déjà répété dans les phrases au-dessus). */
.troopmania-troop-icons {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    margin-top: 14px;
}
.troopmania-troop-icon-link {
    display: block;
    border-radius: 12px;
    padding: 10px;
    background: #f4f6f7;
    border: 1px solid #e1e6ea;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.troopmania-troop-icon-link:hover {
    border-color: #2ecc71;
    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.2);
    transform: translateY(-2px);
}
.troopmania-troop-icon {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: contain;
}
@media (max-width: 480px) {
    .troopmania-troop-icon { width: 72px; height: 72px; }
}

/* 🔥 AJOUT (demande explicite, div "Accès anticipé" -- liste des
   statistiques réduites) : chips discrètes, même registre que
   .event-news-hq (petite pastille teintée), teintées de l'accent or de
   .wiki-article-section-gold pour rester cohérentes avec le bandeau de la
   section. */
.troopmania-earlyaccess-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.troopmania-earlyaccess-stat {
    display: inline-block;
    background: #fbf3de;
    color: #8a6d1a;
    border: 1px solid #eddba8;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.85em;
    font-weight: 700;
}

@media (max-width: 560px) {
    .wiki-article-intro { flex-direction: column; align-items: stretch; }
    .wiki-article-intro-img { flex-basis: auto; width: 100%; }
}

.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: 1px solid #e1e6ea;
    border-radius: 10px;
    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;
}

/* 🔥 AJOUT (demande explicite, "les trophées se débloquent respectivement
   étape 10 / 20 / 40 / 60 / 70") : petite ligne discrète sous le nom du
   trophée -- voir aussi .crab-trophy-footnote pour la note de l'astérisque. */
.crab-trophy-stage {
    font-size: 0.72em;
    color: #9aa7ae;
}
.crab-trophy-footnote {
    margin: 12px 0 0;
    font-size: 0.78em;
    color: #7a8f9b;
    text-align: center;
}

.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; }

/* 🔥 AJOUT (demande explicite, "si j'ai eu le légendaire 1 et que le crabe
   revient, alors on passe au légendaire 2") : petit badge "Niveau N" -- SEULE
   la carte Légendaire peut le porter (voir renderCrabEditionPage()). */
.crab-trophy-level {
    margin-top: 2px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fdf0e4;
    color: #EE893E;
    font-size: 0.72em;
    font-weight: 700;
}

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

.crab-bonus-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e1e6ea;
    border-radius: 10px;
    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: #2f8fd1; 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; }

/* 🔥 AJOUT (demande explicite, refonte de la section "Capacité de
   canonnière supplémentaire" -- distinction 0/1/plusieurs capacités
   DIFFÉRENTES) : cartes des capacités elles-mêmes (une ou plusieurs, voir
   renderCrabEditionPage()) -- même registre visuel que .crab-defense-card
   (carte blanche, icône + libellé, centrées) plutôt que .crab-bonus-row
   (ligne pleine largeur), pour bien les distinguer visuellement des bonus %
   de la section au-dessus. */
.crab-extra-spell-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}
.crab-extra-spell-card {
    flex: 0 1 140px;
    background: #ffffff;
    border: 1px solid #e1e6ea;
    border-radius: 10px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.crab-extra-spell-card-icon { width: 48px; height: 48px; object-fit: contain; }
.crab-extra-spell-card-name { font-size: 0.85em; color: #16232e; font-weight: 600; }

/* Sous-section "Capacité par étapes" (uniquement quand il y a plusieurs
   capacités différentes) : icône + numéro d'étape, 5 par ligne (demande
   explicite). */
.crab-extra-spell-stages-title {
    margin: 18px 0 10px;
    font-size: 0.95em;
    font-weight: 700;
    color: #6b46a3;
}
.crab-extra-spell-stage-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.crab-extra-spell-stage-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: #faf7fd;
    border: 1px solid #ecdff5;
    border-radius: 8px;
    padding: 8px 4px;
}
.crab-extra-spell-stage-icon { width: 28px; height: 28px; object-fit: contain; }
.crab-extra-spell-stage-num { font-size: 0.78em; color: #6b7d89; font-weight: 600; }

@media (max-width: 560px) {
    .crab-extra-spell-stage-grid { grid-template-columns: repeat(3, 1fr); }
}

@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(47, 143, 209, 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, #2f8fd1, #1a5d8f);
    box-shadow: 0 4px 12px rgba(47, 143, 209, 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: #2f8fd1;
    background: #172230;
}

.dash-quicklink-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(47, 143, 209, 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 #2f8fd1;
    }

    .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: #2f8fd1;
        border-bottom-color: #2f8fd1;
    }

    .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: #2f8fd1; color: #2f8fd1; }

    .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: #2f8fd1; }
    .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;
    }

/* ==========================================================================
   Bandeau "Cycle du mal" (demande explicite, refonte profonde de la page
   d'accueil, puis remonté tout en haut sous le topbar -- 2e demande) : le
   fond coloré (.public-home-cycle-banner) occupe désormais TOUTE la largeur
   de l'écran (bord à bord, directement sous le topbar), mais le contenu
   (.public-home-cycle-banner-inner) reste à la même largeur que
   .public-home-columns (90%, centré, mêmes règles de largeur) -- demande
   explicite "la div (la couleur) prendra toute la largeur, mais le texte
   gardera cette largeur la". Réutilise le bleu déjà en place sur
   .officer-releases-title/.pass-releases-title/.event-news-title (même
   famille visuelle "Cycle du mal" de référence) plutôt que d'inventer un
   nouveau style. Voir renderCycleDuMalBanner() dans core/functions.php --
   ne s'affiche pas s'il n'y a aucun cycle Type='CoE' actif en ce moment
   (pas de repli fictif).
   ========================================================================== */
.public-home-cycle-banner {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #235f91;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.public-home-cycle-banner-inner {
    width: 90%;
    max-width: none;
    margin: 0 auto;
    padding: 14px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.public-home-cycle-banner-icon {
    height: 1.7em;
    width: auto;
    flex-shrink: 0;
}
.public-home-cycle-banner-label {
    font-family: 'Bangers', cursive;
    letter-spacing: 1.2px;
    font-size: 1.15em;
    font-weight: normal;
    color: #ecf0f1;
}
.public-home-cycle-banner-event {
    font-family: 'Bangers', cursive;
    letter-spacing: 1px;
    font-size: 1.1em;
    color: #2f8fd1;
}
.public-home-cycle-banner-dash {
    color: #7ec4e8;
}
.public-home-cycle-banner-countdown {
    font-size: 0.9em;
    font-weight: 600;
    color: #7ec4e8;
}

/* ==========================================================================
   2 colonnes sous le bandeau "Cycle du mal" de la page d'accueil publique
   (demande explicite, refonte profonde) : ACTUALITÉ DU MOIS (gauche, reste de
   la ligne, .public-home-col-center) puis PASS BOOM + DERNIERS CHEFS DE
   BATAILLON (droite, largeur fixe, .public-home-col-right -- avant : colonne
   gauche "Découverte aléatoire/Événements réguliers", supprimée). L'ancienne
   .public-home-col-left et ses panneaux (.discovery-card/
   .recurring-events-panel) restent définis plus bas dans ce fichier mais ne
   sont plus utilisés par aucune page -- gardés sans risque à laisser inertes
   (même principe que renderDashboardQuickCards()/#dashboard-quickcards-slot).
   ========================================================================== */
    .public-home-columns {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        width: 90%;
        max-width: none;
        margin: 20px auto 0;
        padding: 0 16px;
        box-sizing: border-box;
    }

    /* 🔥 CORRECTIF : display:flex + gap pour espacer les sections empilées
       (Actualité du mois, seule occupante désormais) --
       #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;
    }

    /* Colonne droite (Pass Boom + Derniers chefs de bataillon, demande
       explicite) : même largeur fixe et même gap vertical que l'ancienne
       .public-home-col-left qu'elle remplace côté layout. */
    .public-home-col-right {
        flex: 0 1 320px;
        width: 320px;
        min-width: 0;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* 🔥 AJOUT (demande explicite, capture Poképédia fournie en référence) :
       petite section "Accès rapide" -- pastilles arrondies claires, dégradé
       doux + flèche à droite, même esprit visuel que la capture (au lieu du
       fond bleu foncé "façon jeu" des autres panneaux de cette colonne, pour
       rester proche de la référence). */
    .public-home-quickaccess-title {
        margin: 0 0 10px;
        font-size: 0.95em;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #4d3418;
    }

    .public-home-quicklinks {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .public-home-quicklink {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-radius: 14px;
        text-decoration: none;
        color: inherit;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .public-home-quicklink:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
        text-decoration: none;
    }

    .public-home-quicklink-calc {
        background: linear-gradient(135deg, #e4f3fb, #cfe9f7);
    }
    .public-home-quicklink-tracker {
        background: linear-gradient(135deg, #e3f7ef, #cdeee0);
    }

    .public-home-quicklink-icon {
        width: 30px;
        height: 30px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .public-home-quicklink-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }
    .public-home-quicklink-label {
        font-weight: 700;
        color: #16232e;
        font-size: 0.98em;
    }
    .public-home-quicklink-desc {
        font-size: 0.8em;
        color: #5c6f79;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .public-home-quicklink-arrow {
        margin-left: auto;
        font-weight: 700;
        color: #1a7fb3;
        flex-shrink: 0;
    }

    /* 🔥 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: #2f8fd1; }

    .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: #2f8fd1;
        text-decoration: none;
        font-size: 0.85em;
        font-weight: 600;
    }
    .discovery-card-reroll:hover { border-color: #2f8fd1; }

    /* Sous 1050px : l'actualité (centre) repasse sous Pass Boom/chefs de
       bataillon (droite) plutôt que de s'écraser -- même principe que
       l'ancienne "découverte" qu'elle remplace côté layout. */
    @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-center,
        .public-home-col-right {
            width: 100%;
            max-width: none;
        }
        .public-home-cycle-banner-inner {
            width: 100%;
            padding: 12px 16px;
        }
    }

    #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;
}

/* 🔥 CORRECTIF : 1 colonne (au lieu de 3) -- la section vit désormais dans la
   colonne droite étroite (.public-home-col-right, demande explicite) et
   n'affiche plus qu'un seul chef de bataillon (le plus récent) tant que le
   suivant n'est pas sorti, voir index.php. */
.officer-releases-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    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(47, 143, 209, 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: #2f8fd1;
    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: #2f8fd1;
}

.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;
}

/* 🔥 CORRECTIF : 1 colonne (au lieu de 2) -- même raison que
   .officer-releases-grid ci-dessus (colonne droite étroite, une seule saison
   affichée tant que la suivante n'est pas sortie). */
.pass-releases-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    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: #2f8fd1;
}

/* 🔥 CORRECTIF mise en page (demande explicite, "la div du pass, ce serait
   mieux d'avoir le skin qui prend 100% et les récompenses en dessous sur 5
   colonnes") : le skin n'est plus une petite pastille carrée à côté du cumul
   des récompenses (.pass-release-top retiré) -- il prend toute la largeur de
   la carte, en bannière, et .pass-release-totals-row (plus bas) passe
   ensuite à 5 colonnes. */
.pass-release-skin {
    width: 100%;
    box-sizing: border-box;
    min-height: 110px;
    border-radius: 12px;
    background: #2a2a2a;
    border: 2px solid #2f8fd1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}
.pass-release-skin-img { max-width: 100%; max-height: 110px; width: auto; height: auto; object-fit: contain; }
/* Icône de repli (icon_skin_currency, aucun skin enregistré pour la saison) --
   affichée plus petite qu'un vrai visuel de skin pour ne pas paraître étirée
   en occupant toute la bannière. */
.pass-release-skin-placeholder-img { max-width: 64px; max-height: 64px; opacity: 0.85; }

/* 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 à 5 colonnes (demande explicite, revu suite au passage du skin
   en bannière 100% de large au-dessus -- avant : 6 colonnes) -- 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 5 récompenses
   distinctes. Une pastille "au choix" (2 icônes) occupe 2 colonnes. */
.pass-release-totals-row {
    display: grid;
    grid-template-columns: repeat(5, 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: #2f8fd1;
}

/* 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; }

/* 🔥 REFONTE (demande explicite, capture d'écran fournie en référence) : la
   grille de vignettes carrées devient une liste empilée de cartes
   horizontales "façon actu" (vignette à gauche, contenu à droite) -- voir
   .event-news-card ci-dessous. */
.event-news-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px;
}

/* 🔥 REFONTE (demande explicite, capture d'écran fournie en référence) :
   carte horizontale claire (au lieu du fond gris sombre précédent) -- image à
   gauche, titre/description/méta à droite. TOUTES les cartes sont
   cliquables désormais (avant : seul le Méga Crabe l'était), voir
   renderEventNewsSection() pour l'URL de destination selon le type
   d'événement. */
.event-news-card {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #f4f6f7;
    border: 1px solid #e1e6ea;
    border-radius: 10px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.event-news-card:hover {
    transform: translateY(-2px);
    border-color: #2f8fd1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    text-decoration: none;
}
.event-news-card:focus-visible {
    outline: 2px solid #2f8fd1;
    outline-offset: 2px;
}

/* Vignette fixe à gauche (demande explicite, capture fournie en référence) --
   object-fit: cover (remplit le cadre, contrairement à l'ancien "contain" des
   grandes vignettes carrées) : les bannières 351x161 sont assez larges pour
   rester lisibles recadrées à ce format plus compact.
   🔥 CORRECTIF (demande explicite, "plus grand et plus large") : 150px ->
   260px + min-height (la vignette s'étire de toute façon à la hauteur de la
   carte via align-items:stretch sur .event-news-card, ce plancher évite
   qu'elle ne s'écrase trop bas pour une carte à description courte/1 ligne). */
.event-news-img-wrap {
    position: relative;
    flex: 0 0 260px;
    width: 260px;
    min-height: 170px;
    background: #22303a;
}

/* 🔥 CORRECTIF (demande explicite, "remet les images de présentation comme
   avant, je veux les images trophée, skin, troupes, capa à DROITE de la div
   event-news-card") : la bannière générique (.event-news-img-wrap ci-dessus)
   redevient inchangée -- le visuel spécifique par catégorie
   (resolveEventCardVisual() -- capacité/trophée/troupes/chef/skin) est
   maintenant un bloc à PART, ajouté à droite de la carte (après
   .event-news-body) plutôt que de remplacer la bannière -- voir
   renderEventNewsSection(). N'apparaît que si la donnée existe pour cette
   occurrence, sinon la carte garde sa largeur normale (2 colonnes). */
.event-news-side-visual {
    flex: 0 0 110px;
    width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 10px 16px 10px 0;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid #e1e6ea;
    border-radius: 8px;
    overflow: hidden;
}
.event-news-side-visual .event-visual-img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}
/* Troupes à gogo (id=12) : les 2 troupes de cette occurrence côte à côte. */
.event-news-side-visual-duo .event-visual-img {
    width: 50%;
}

.event-news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* 🔥 AJOUT (demande explicite, "effet hover qui réhausse l'événement et
       zoom un peu l'image") : le zoom se déclenche via .event-news-card:hover
       (pas :hover sur l'image elle-même, la souris peut survoler n'importe
       quelle zone de la carte) -- .event-news-card a déjà overflow:hidden
       donc l'agrandissement reste bien cadré dans la vignette. */
    transition: transform 0.25s ease;
}
.event-news-card:hover .event-news-img {
    transform: scale(1.08);
}

/* 🔥 CORRECTIF (demande explicite, "le texte, en plus grand") : pastille de
   statut légèrement agrandie pour rester proportionnée à la vignette élargie
   ci-dessus (0.68em -> 0.75em). */
.event-news-status {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75em;
    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(47, 143, 209, 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; }

/* Contenu à droite de la vignette (demande explicite, capture fournie en
   référence) : titre en gras, description ("extra") sur 2 lignes max, puis
   une ligne méta discrète (date, catégorie colorée, "Lire la suite").
   🔥 CORRECTIF (demande explicite, "le texte, en plus grand") : padding
   agrandi (12px 16px -> 16px 20px) pour accompagner les tailles de police
   augmentées ci-dessous, sans que le texte ne colle aux bords de la carte. */
.event-news-body {
    flex: 1;
    min-width: 0;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}

.event-news-name {
    font-size: 1.3em;
    color: #16232e;
    font-weight: 800;
}

/* 🔥 CORRECTIF (demande explicite, "ajouter les icônes des capacités
   supplémentaire à gauche") : .event-news-desc devient un conteneur flex
   (icône + texte) quand une icône est présente (voir renderEventNewsSection())
   -- le clamp 2 lignes bascule sur le <span> texte plutôt que sur le <p>
   entier, sinon l'icône se retrouverait comprimée par le -webkit-box. */
.event-news-desc {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.event-news-desc > span {
    font-size: 1em;
    color: #6b7d89;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.event-news-desc-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 1px;
}

.event-news-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    font-size: 0.9em;
    color: #93a3ac;
}

.event-news-meta-date {
    color: #93a3ac;
}

.event-news-meta-category {
    font-weight: 700;
}

.event-news-meta-more {
    margin-left: auto;
    color: #1a7fb3;
    font-weight: 700;
}
.event-news-card:hover .event-news-meta-more {
    text-decoration: underline;
}

.event-news-hq {
    font-size: 1em;
    font-weight: 700;
    color: #1a7fb3;
    background: rgba(26, 127, 179, 0.1);
    border-radius: 6px;
    padding: 2px 7px;
    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éduites pour la vignette plus compacte de cette carte. */
.event-news-overlay {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
    z-index: 2;
}
.event-news-overlay-troop2 { right: 24px; z-index: 1; }

@media (max-width: 560px) {
    .event-news-card {
        flex-direction: column;
    }
    .event-news-img-wrap {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 351 / 161;
    }
    .event-news-side-visual {
        flex: 0 0 auto;
        width: 100%;
        height: 90px;
        margin: 0 0 12px;
    }
    .event-news-meta-more {
        margin-left: 0;
    }
}

/* 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: #2f8fd1; }

.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: #2f8fd1;
    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(47, 143, 209, 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;
}

/* 🔥 CORRECTIF (demande explicite, "la div de l'image sera à droite et
   toujours de la même taille, par rapport à une ou 2 troupes") : taille
   fixe, quelle que soit la carte -- avant, basée sur le ratio "paysage" de
   la bannière générique (351/161, trop bas pour des portraits de troupes) ;
   maintenant assez haute pour accueillir 1 ou 2 portraits de troupe côte à
   côte (voir .event-timeline-thumb-duo) sans les écraser, tout en restant
   correcte pour la bannière générique/les icônes carrées (object-fit:
   contain sur chaque image, voir .event-visual-img). */
.event-timeline-thumb {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    display: flex;
    overflow: hidden;
    border: 2px solid #3C7891;
    background: rgba(0, 0, 0, 0.05);
}

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

/* Troupes à gogo (id=12) : les 2 troupes de cette occurrence côte à côte
   dans la même vignette taille fixe, au lieu des petites incrustations coin
   de renderEventNewsSection() (voir resolveEventCardVisual()). */
.event-timeline-thumb-duo {
    gap: 1px;
}
.event-timeline-thumb-duo .event-visual-img {
    flex: 1 1 50%;
    width: 50%;
}

/* 🔥 AJOUT (demande explicite, "le lire la suite sera un peu déplacé sur la
   gauche mais toujours plaqué à droite contre l'image") : la vignette et le
   texte "Lire la suite" partagent le même bloc, collés l'un à l'autre --
   toute la carte est déjà cliquable (event-timeline-item-clickable), ce
   texte n'est qu'un indice visuel, pas un lien séparé. */
.event-timeline-side {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.event-timeline-readmore {
    font-size: 0.8em;
    font-weight: 700;
    color: #1a7fb3;
    white-space: nowrap;
}
.event-timeline-item-clickable:hover .event-timeline-readmore { text-decoration: underline; }

.event-timeline-empty {
    color: #9db2bd;
}

/* 🔥 AJOUT (demande explicite, pagination "Voir la suite" tous les 5 mois) */
.event-timeline-loadmore {
    display: block;
    margin: 22px auto 8px;
    padding: 12px 32px;
    background: #3C7891;
    color: #fff;
    border: none;
    border-radius: 24px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.event-timeline-loadmore:hover:not(:disabled) {
    background: #4a90ab;
    transform: translateY(-1px);
}

.event-timeline-loadmore:disabled {
    opacity: 0.6;
    cursor: default;
}

@media (max-width: 600px) {
    .event-timeline-item {
        flex-direction: column;
    }
    /* La vignette garde sa taille fixe (demande explicite, "toujours de la
       même taille") même en pile mobile -- seul .event-timeline-side passe
       en pleine largeur, aligné à droite, pour rester cohérent avec le
       reste de la carte. */
    .event-timeline-side {
        width: 100%;
        justify-content: flex-end;
    }
}

/* 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. */