:root {
    --primary-dark: #0B0E2D;
    --primary: #1A237E;
    --primary-light: #534BAE;
    --secondary: #7E57C2;
    --accent: #00E5FF;
    --accent-glow: #00E5FF80;
    --danger: #FF1744;
    --warning: #FFAB00;
    --success: #00C853;
    --text-light: #E0E0FF;
    --text-primary: #FFFFFF;
    --card-bg: rgba(13, 27, 72, 0.8);
    --card-border: rgba(0, 229, 255, 0.3);
    --bp-primary: #00E5FF;
    --bp-secondary: #00B8D4;
    --bp-tertiary: #FFFFFF;
    --bp-warning: #FFAB00;
    --bp-danger: #FF1744;
    --bp-bg-card: rgba(34, 40, 61, 0.8);
    --bp-bg-dark: #0B0E2D;
    --bp-bg-medium: #1A237E;
    --bp-glow: rgba(0, 229, 255, 0.5);

    /* couleur v3 Exodus */
    --v3-fond: #212330;
    --v3-fond2: #232b40;
    --v3-fond3: #3b445c;
    --v3-bords: #2e5363;
    --v3-accent: #2b5668;
    --v3-white: #ffffff;
    --v3-glow: rgba(0, 183, 235, 0.5);
    --v3-btn-primary: #1aacbd;
    --v3-btn-secondary: #adadad;
    --v3-btn-danger: #c01a1a;
    --v3-btn-warning: #daad1d;
    --v3-btn-light: #ececec;
    --v3-btn-dark: #414141;
    --v3-btn-success: #0daf3e;
    --v3-btn-note: #466b6e;
}

.studio-logo {
    width: 128px;
    height: auto;
    border-radius: 0;

}

.btn-custom-border {
    border: 2px solid #000 !important;
    /* !important si besoin pour override Bootstrap */
}

.captcha-card {
    width: 350px;
    margin: 0 auto;
}

.captcha-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#captchaImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.alert-bold {
    font-weight: bold;
}

h1,
h2,
h3,
h4,
.navbar-brand {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}

h1 {
    color: var(--text-primary);
    text-transform: uppercase;
    text-shadow: 0 0 10px var(--accent-glow);
    position: relative;
    margin-bottom: 1.5rem;
}

h1::after {
    content: '';
    display: block;
    width: 150px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    margin: 15px auto 0;
}

.public-page-title {
    color: #ffffff;
    text-shadow:
        0 0 6px rgba(0, 183, 235, 0.42),
        0 0 14px rgba(0, 183, 235, 0.32),
        0 0 26px rgba(92, 170, 224, 0.18);
    -webkit-text-stroke: 1px rgba(92, 170, 224, 0.4);
}

.public-page-title::after {
    background: linear-gradient(90deg, transparent, rgba(92, 170, 224, 0.92), transparent);
    box-shadow: 0 0 14px rgba(0, 183, 235, 0.34);
}

.lead {
    font-weight: 300;
    letter-spacing: 0.5px;
    font-size: 1.25rem;
}

.section-header {
    text-align: center;
    margin: 3rem 0 2rem;
    position: relative;
}

.section-header::before,
.section-header::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 2px;
    background: var(--accent);
}

.section-header::before {
    left: calc(50% - 100px);
}

.section-header::after {
    right: calc(50% - 100px);
}

.public-hero-banner {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    border-radius: 24px;
    border: 1px solid rgba(120, 163, 201, 0.45);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 35px rgba(0, 229, 255, 0.12);
    background:
        linear-gradient(180deg, rgba(10, 17, 29, 0.12), rgba(10, 17, 29, 0.45)),
        rgba(10, 17, 29, 0.85);
}

.public-hero-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(7, 13, 22, 0.05), rgba(7, 13, 22, 0.38));
    pointer-events: none;
}

.public-hero-banner img {
    display: block;
    width: 100%;
    aspect-ratio: 3168 / 900;
    object-fit: cover;
}

.public-hero-dev-banner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.2rem 0rem 0.5rem;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(255, 210, 74, 0.50) 0%, rgba(224, 170, 26, 1) 100%);
    border-top: 1px solid rgba(0, 0, 0, 1);
    box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.20);
}

.public-hero-dev-copy {
    min-width: 0;
    color: #000000;
    text-align: center;
}

.public-hero-dev-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: center;
    margin-bottom: 0;
    line-height: 1;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#main-content p.public-hero-dev-text {
    margin: 0.02rem 0 0;
    color: #000000;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
}

.specialization-card {
    --specialization-color: var(--accent);
    --specialization-glow: rgba(0, 229, 255, 0.28);
    --specialization-border: rgba(0, 229, 255, 0.55);
    --specialization-tint: rgba(0, 229, 255, 0.76);
    --specialization-tint-soft: rgba(0, 90, 108, 0.38);
    --specialization-outline: rgba(0, 229, 255, 0.68);
    --specialization-shadow: rgba(8, 14, 24, 0.5);
}

#main-content .specialization-card {
    min-height: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--specialization-border);
    border-radius: 20px;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: normal;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.42),
        0 0 24px var(--specialization-glow),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

#main-content .specialization-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(12, 18, 28, 0.2) 45%, var(--specialization-shadow) 100%);
    animation: none;
}

#main-content .specialization-card::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 14px;
    border: 1px solid var(--specialization-outline);
    clip-path: polygon(0 16px, 16px 0, calc(100% - 34px) 0, 100% 34px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 34px 100%, 0 calc(100% - 34px));
    opacity: 0.95;
    box-shadow:
        0 0 18px var(--specialization-glow),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    pointer-events: none;
}

#main-content .specialization-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 24px 52px rgba(0, 0, 0, 0.5),
        0 0 30px var(--specialization-glow),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

#main-content .specialization-card .card-body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem 1.5rem 1.75rem;
}

.specialization-card-title {
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-shadow: 0 0 16px rgba(0, 0, 0, 0.75);
}

.specialization-card-title::after {
    left: 50%;
    width: 72px;
    transform: translateX(-50%);
    background: var(--specialization-color);
    box-shadow: 0 0 12px var(--specialization-glow);
}

.specialization-card-text {
    margin-bottom: 0;
    color: rgba(245, 249, 255, 1);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.82);
}

.public-features-grid {
    align-items: stretch;
}

.public-feature-item {
    height: 100%;
    padding: 1rem 0.9rem 0.95rem;
    border: 1px solid rgba(95, 128, 158, 0.16);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(20, 32, 47, 0.42), rgba(11, 19, 30, 0.56));
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

.public-feature-icon {
    font-size: 2.2rem !important;
}

.public-feature-title {
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
    line-height: 1.2;
}

.public-feature-text {
    margin-bottom: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(224, 232, 245, 0.92);
}

#main-content .specialization-card-industry {
    --specialization-color: var(--warning);
    --specialization-glow: rgba(178, 112, 0, 0.26);
    --specialization-border: rgba(178, 112, 0, 0.52);
    --specialization-tint: rgba(178, 130, 48, 0.82);
    --specialization-tint-soft: rgba(122, 78, 10, 0.40);
    --specialization-outline: rgba(178, 130, 48, 0.68);
    --specialization-shadow: rgba(36, 23, 5, 0.48);

    background-image:
        linear-gradient(135deg, 
            rgba(122, 82, 16, 0.58) 0%, 
            rgba(79, 49, 7, 0.50) 58%, 
            rgba(29, 18, 4, 0.58) 100%
        ),
        url('/img/public-website/industrial.webp');
}

#main-content .specialization-card-combat {
    --specialization-color: var(--danger);
    --specialization-glow: rgba(178, 15, 45, 0.26);
    --specialization-border: rgba(178, 15, 45, 0.52);
    --specialization-tint: rgba(178, 56, 77, 0.82);
    --specialization-tint-soft: rgba(99, 15, 33, 0.40);
    --specialization-outline: rgba(178, 70, 89, 0.68);
    --specialization-shadow: rgba(38, 7, 13, 0.48);

    background-image:
        linear-gradient(135deg, 
            rgba(122, 24, 46, 0.60) 0%, 
            rgba(79, 12, 28, 0.50) 58%, 
            rgba(28, 5, 11, 0.58) 100%
        ),
        url('/img/public-website/combat.webp');
}

#main-content .specialization-card-exploitation {
    --specialization-color: var(--success);
    --specialization-glow: rgba(0, 135, 56, 0.26);
    --specialization-border: rgba(0, 135, 56, 0.52);
    --specialization-tint: rgba(48, 150, 88, 0.80);
    --specialization-tint-soft: rgba(13, 89, 42, 0.38);
    --specialization-outline: rgba(58, 150, 98, 0.68);
    --specialization-shadow: rgba(7, 30, 15, 0.46);

    background-image:
        linear-gradient(135deg, 
            rgba(19, 99, 48, 0.58) 0%, 
            rgba(11, 64, 31, 0.48) 58%, 
            rgba(5, 22, 12, 0.54) 100%
        ),
        url('/img/public-website/exploitation.webp');
}

@media (max-width: 991.98px) {
    .specialization-card .card-body {
        min-height: 280px;
    }
}

@media (max-width: 767.98px) {
    .public-hero-banner {
        border-radius: 18px;
    }

    .specialization-card .card-body {
        min-height: 240px;
        padding: 1.75rem 1.25rem 1.5rem;
    }
}

.card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.card .card-body {
    position: relative;
    z-index: 1;
}

.card-title {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.card-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
}

.border-warning {
    border-color: var(--warning) !important;
    background: linear-gradient(135deg, rgba(33, 35, 48, 0.9), rgba(255, 171, 0, 0.1));
}

.border-warning .card-title::after {
    background: var(--warning);
}

.border-danger {
    border-color: var(--danger) !important;
    background: linear-gradient(135deg, rgba(33, 35, 48, 0.9), rgba(255, 23, 68, 0.1));
}

.border-danger .card-title::after {
    background: var(--danger);
}

.border-success {
    border-color: var(--success) !important;
    background: linear-gradient(135deg, rgba(33, 35, 48, 0.9), rgba(0, 200, 83, 0.1));
}

.border-success .card-title::after {
    background: var(--success);
}

/* Expedition foreuse */

.planet-svg {
    width: 100%;
    max-width: 450px;
    /* Légèrement plus grand pour le texte */
    margin: 0 auto;
    user-select: none;
    background-color: #0c0c1e;
    /* Fond étoilé pour le contraste */
    border-radius: 10px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 5px;
    /* Taille de police de base pour le SVG */
}

.layer-labels text {
    fill: #fff;
    font-weight: bold;
    font-size: 3.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    paint-order: stroke;
    stroke: #000;
    stroke-width: 0.5px;
    stroke-linejoin: round;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

.noyau-pulse {
    transform-origin: 50px 200px;
    animation: pulse 4s infinite ease-in-out;
}

#drillLine {
    stroke: #00ffff;
    /* Couleur froide par défaut */
    stroke-width: 2;
    transition: y2 0.1s linear, stroke 0.5s ease;
    filter: drop-shadow(0 0 2px #fff);
}

#drillLine.recalling {
    stroke: #ffffff;
}

#maxDepthLine {
    stroke: #c0392b;
    /* Rouge plus visible */
    stroke-width: 1;
    stroke-dasharray: 2;
    /* Ligne en pointillés */
}

.progress-bar {
    transition: width 0.5s ease;
}

/* FIN Expedition foreuse */

.feature-icon::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.2) 0%, rgba(0, 229, 255, 0) 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.feature-icon.text-primary {
    color: var(--accent) !important;
}

.feature-icon.text-light {
    color: var(--accent) !important;
}

.feature-icon.text-warning {
    color: var(--warning) !important;
}

.feature-icon.text-danger {
    color: var(--danger) !important;
}

.public-screenshot-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.public-screenshot-tile {
    position: relative;
    padding: 0;
    border: 1px solid rgba(95, 128, 158, 0.22);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(10, 16, 26, 0.88);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.public-screenshot-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(120, 170, 214, 0.38);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(0, 229, 255, 0.08);
}

.public-screenshot-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.public-screenshot-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background:
        linear-gradient(180deg, rgba(8, 14, 24, 0.02) 0%, rgba(8, 14, 24, 0.18) 48%, rgba(8, 14, 24, 0.78) 100%);
    color: #f2f7ff;
}

.public-screenshot-label {
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.public-screenshot-zoom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(8, 14, 24, 0.38);
    backdrop-filter: blur(3px);
}

.public-screenshot-dialog {
    margin: 0;
}

.public-screenshot-modal {
    min-height: 100vh;
    background: rgba(4, 10, 18, 0.98);
    border: 0;
    border-radius: 0;
}

.public-screenshot-modal-header {
    padding: 1rem 1.25rem 0;
    border-bottom: 0;
    background: transparent;
}

.public-screenshot-modal-title {
    color: #e9f3ff;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-screenshot-modal-close {
    filter: invert(1) grayscale(1);
    opacity: 0.85;
}

.public-screenshot-modal .modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.25rem 1.5rem;
}

.public-screenshot-modal img {
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 5.5rem);
    border-radius: 14px;
    object-fit: contain;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

@media (max-width: 767.98px) {
    .public-hero-dev-banner {
        padding: 0.06rem 0.55rem 0.08rem;
    }

    .public-screenshot-gallery {
        grid-template-columns: 1fr;
    }
}

/* News card styles */
.card-news-index,
.card-lore-index,
.card-chronicles-index {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.card-img-top {
    height: 180px;
    object-fit: cover;
    border-bottom: 2px solid rgba(0, 229, 255, 0.3);
}

.card-footer {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-square {
    border-radius: 0 !important;
    padding: 10px;
    width: 80px;
    /* Taille fixe pour un carré parfait */
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.badge {
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
}

.notification-badge {
    font-family: 'Orbitron', sans-serif;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    color: white;
    display: none;
    /* Cachés par défaut pour éviter tout affichage initial */
}

/* Styles spécifiques pour chaque badge (couleurs bleu, jaune, rouge) */
#notification-primary-count {
    background-color: #007bff;
    /* Bleu */
    right: 120px;
}

#notification-warning-count {
    background-color: #ffae00;
    /* Jaune */
    right: 90px;
}

#notification-danger-count {
    background-color: #dc3545;
    /* Rouge */
    right: 60px;
}

/* Animations */
.animate-rise {
    animation: rise 0.5s ease-out forwards;
}

@keyframes rise {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* BLUEPRINT */

/* Contenu des onglets */
.tab-content.blueprint-tab {
    background: linear-gradient(145deg, #2c3e5086, #2436476c);
    border-radius: 15px 15px 15px 15px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Liste des composants */
.component-list {
    background: linear-gradient(145deg, #2c3e5086, #2436476c);
    border: 1px solid #3498db;
    border-radius: 10px;
    padding: 20px;
    box-shadow: inset 0 0 20px rgba(52, 152, 219, 0.1);
}

.component-list h3 {
    color: #1abc9c !important;
    text-shadow: 0 0 10px rgba(26, 188, 156, 0.5);
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Accordéon style sci-fi */
.accordion-item {
    background: transparent;
    border: 1px solid #3498db;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
}

.accordion-button {
    background: linear-gradient(145deg, #4472a0, #3b6692) !important;
    color: #ecf0f1 !important;
    border: none !important;
    font-weight: 500;
    text-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
    transition: all 0.3s ease;
}

.accordion-button:hover {
    background: linear-gradient(145deg, #3498db, #2980b9) !important;
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.4);
}

.accordion-button:not(.collapsed) {
    background: linear-gradient(145deg, #3498db, #2980b9) !important;
    color: white !important;
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.6);
}

.accordion-body {
    background: linear-gradient(145deg, #2c3e5086, #2436476c);
    border-top: 1px solid #3498db;
}

/* Items de composants */
.component-item {
    background: linear-gradient(145deg, #34495e, #2c3e50);
    border: 1px solid #3498db;
    border-radius: 6px;
    margin-bottom: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #ecf0f1;
    position: relative;
    overflow: hidden;
}

.component-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(52, 152, 219, 0.2), transparent);
    transition: left 0.5s ease;
}

.component-item:hover::before {
    left: 100%;
}

.component-item:hover {
    background: linear-gradient(145deg, #3498db, #2980b9);
    color: white;
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

/* Panneau de détails */
.details-panel {
    background: linear-gradient(145deg, #2c3e50, #34495e);
    border: 2px solid #3498db;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.details-panel::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(52, 152, 219, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.details-panel>* {
    position: relative;
    z-index: 2;
}

#details-title {
    color: #ffffff !important;
    text-shadow: 0 0 15px rgba(88, 88, 88, 0.5);
    margin-bottom: 15px;
    text-align: center;
}

#details-description {
    color: #ecf0f1;
    line-height: 1.6;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    margin-top: 20px;
}

.details-panel .mb-3 {
    text-align: center;
    margin-bottom: 20px;
}

/* Image blueprint */
.blueprint-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(1.1) contrast(1.1);
}

.blueprint-image-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.blueprint-card:hover .blueprint-image-glow {
    opacity: 1;
    animation: pulse-glow 2s infinite;
}

.blueprint-image-limited {
    max-width: 512px;
    max-height: 512px;
    width: 100%;
    height: auto;
    /* Changé de height: 100% pour préserver les proportions */
    object-fit: contain;
    filter: brightness(1.1) contrast(1.1);
    display: block;
    /* Nécessaire pour margin: auto */
    margin: 0 auto;
    /* Centre horizontalement */

}

/* Label de catégorie */
.category-label {
    background: grey;
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 1.2em;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    box-shadow: 0 3px 10px rgba(255, 255, 255, 0.3);
    display: inline-block;
}

/* Message de sélection */
#no-selection {
    color: #bdc3c7 !important;
    text-align: center;
    font-size: 1.1em;
    padding: 40px 20px !important;
    background: linear-gradient(145deg, #34495e, #2c3e50);
    border: 2px dashed #3498db;
    border-radius: 15px;
    margin: 20px 0;
}

/* Effets d'éclairage */
.glow-blue {
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.5);
}

.glow-green {
    box-shadow: 0 0 20px rgba(26, 188, 156, 0.5);
}

/* Responsive amélioré */
@media (max-width: 768px) {
    #main-content {
        padding: 10px;
    }

    .component-list,
    .details-panel {
        margin-bottom: 20px;
    }

    .blueprint-image {
        max-width: 100%;
        height: auto;
    }
}

/* Container principal */
.blueprint-container {
    padding: 20px;
    background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.05) 0%, transparent 70%);
    min-height: 400px;
}

.blueprint-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 10px;
}

@media (max-width: 768px) {

    /* Cible les écrans mobiles, ajustez la valeur si besoin */
    .blueprint-grid>* {
        flex: 1 1 calc(50% - 20px);
        /* Deux éléments par ligne avec 20px de gap */
    }
}

/* Message vide */
.blueprint-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--bp-primary);
    font-size: 18px;
}

.blueprint-empty i {
    font-size: 48px;
    margin-bottom: 20px;
    display: block;
    opacity: 0.5;
}

/* Carte de blueprint */
.blueprint-card {
    position: relative;
    background: var(--bp-bg-card);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.blueprint-card:hover {
    transform: translateY(-5px);
    border-color: var(--bp-primary);
    box-shadow: var(--bp-glow), 0 8px 16px rgba(0, 0, 0, 0.4);
}

.blueprint-card-inner {
    position: relative;
    padding: 10px;
    background: linear-gradient(135deg, transparent 0%, rgba(0, 212, 255, 0.02) 100%);
}

/* Header de la carte */
.blueprint-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1);
}

.blueprint-id {
    font-size: 10px;
    color: var(--bp-primary);
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    opacity: 0.7;
}

/* Favorite checkbox */
.favorite-form {
    margin: 0;
}

.favorite-checkbox {
    display: none;
}

.favorite-label {
    cursor: pointer;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.favorite-label:hover {
    color: var(--bp-warning);
}

.favorite-checkbox:checked+.favorite-label {
    color: var(--bp-warning);
    filter: drop-shadow(0 0 5px var(--bp-warning));
}

/* Image du blueprint */
.blueprint-image-container {
    position: relative;
    width: 100%;
    height: 150px;
    margin-bottom: 10px;
    border-radius: 4px;
    overflow: hidden;
    background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.6;
    }
}

/* Scanlines effect */
.blueprint-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 212, 255, 0.03) 2px,
            rgba(0, 212, 255, 0.03) 4px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.blueprint-card:hover .blueprint-scanlines {
    opacity: 1;
    animation: scanlines 8s linear infinite;
}

@keyframes scanlines {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(10px);
    }
}

/* Nom du blueprint */
.blueprint-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status bar */
.blueprint-status-bar {
    padding-top: 10px;
    border-top: 1px solid rgba(0, 213, 255, 0.2);
    font-size: 12px;
}

.status-available {
    color: var(--bp-tertiary);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-waiting {
    color: var(--bp-warning);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.status-creating {
    text-align: center;
}

.progress-label {
    color: var(--bp-primary);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rotating {
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Progress bar sci-fi */
.progress-container-scifi {
    position: relative;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar-scifi {
    height: 100%;
    background: linear-gradient(90deg, var(--bp-primary) 0%, var(--bp-secondary) 100%);
    transition: width 0.5s ease;
    position: relative;
    box-shadow: 0 0 10px var(--bp-primary);
}

.progress-bar-scifi::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: bold;
    font-size: 11px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

/* Boutons sci-fi */
.btn-cancel-scifi {
    margin-top: 5px;
    padding: 4px 10px;
    background: linear-gradient(135deg, var(--bp-danger) 0%, rgba(255, 51, 102, 0.7) 100%);
    border: 1px solid var(--bp-danger);
    color: #fff;
    border-radius: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel-scifi:hover {
    background: var(--bp-danger);
    box-shadow: 0 0 10px var(--bp-danger);
    transform: scale(1.05);
}

/* Effets de rareté */
.blueprint-card.rarity-common {
    border-color: rgb(180, 180, 180);
}

.blueprint-card.rarity-common .blueprint-image-container {
    background: rgba(127, 127, 127, 0.5);
}

.blueprint-card.rarity-common .blueprint-image {
    border-color: rgba(127, 127, 127, 0.3);
}

.blueprint-modal-scifi.rarity-common {
    border-color: rgba(127, 127, 127, 0.3);
    background: linear-gradient(135deg, var(--bp-bg-dark) 0%, rgba(127, 127, 127, 0.3) 100%);
}

.blueprint-preview-rarity.rarity-common {
    background: rgba(176, 176, 176, 0.5);
    border: 1px solid var(--rarity-common);
    color: var(--rarity-common);
}

.blueprint-card.rarity-uncommon {
    border-color: rgb(0, 255, 0);
}

.blueprint-card.rarity-uncommon .blueprint-image-container {
    background: rgba(0, 255, 0, 0.3);
}

.blueprint-card.rarity-uncommon:hover {
    box-shadow: 0 0 1px var(--rarity-uncommon), 0 8px 16px rgba(0, 0, 0, 0.4);
}

.blueprint-card.rarity-uncommon .blueprint-image {
    border-color: rgba(0, 255, 0, 0.3);
}

.blueprint-modal-scifi.rarity-uncommon {
    border-color: rgba(0, 255, 0, 0.3);
    background: linear-gradient(135deg, var(--bp-bg-dark) 0%, rgba(0, 255, 0, 0.1) 100%);
}

.blueprint-preview-rarity.rarity-uncommon {
    background: rgba(0, 255, 0, 0.5);
    border: 1px solid var(--rarity-uncommon);
    color: var(--rarity-uncommon);
}

.blueprint-card.rarity-rare {
    border-color: rgb(0, 68, 255);
    background: linear-gradient(135deg, var(--bp-bg-card) 0%, rgba(0, 68, 255, 0.05) 100%);
}

.blueprint-card.rarity-rare .blueprint-image-container {
    background: rgba(0, 68, 255, 0.5);
}

.blueprint-card.rarity-rare:hover {
    box-shadow: 0 0 5px var(--rarity-rare), 0 8px 16px rgba(0, 0, 0, 0.4);
}

.blueprint-card.rarity-rare .blueprint-image {
    border-color: rgba(0, 68, 255, 0.3);
}

.blueprint-modal-scifi.rarity-rare {
    border-color: rgba(0, 68, 255, 0.3);
    background: linear-gradient(135deg, var(--bp-bg-dark) 0%, rgba(0, 68, 255, 0.1) 100%);
}

.blueprint-preview-rarity.rarity-rare {
    background: rgba(0, 68, 255, 0.5);
    border: 1px solid var(--rarity-rare);
    color: var(--rarity-rare);
}

.blueprint-card.rarity-epic {
    border-color: rgb(153, 51, 255);
    background: linear-gradient(135deg, var(--bp-bg-card) 0%, rgba(153, 51, 255, 0.08) 100%);
}

.blueprint-card.rarity-epic .blueprint-image-container {
    background: rgba(153, 51, 255, 0.5);
}

.blueprint-card.rarity-epic:hover {
    box-shadow: 0 0 25px var(--rarity-epic), 0 8px 16px rgba(0, 0, 0, 0.4);
}

.blueprint-card.rarity-epic .blueprint-image {
    border-color: rgba(153, 51, 255, 0.4);
}

.blueprint-modal-scifi.rarity-epic {
    border-color: rgba(153, 51, 255, 0.4);
    background: linear-gradient(135deg, var(--bp-bg-dark) 0%, rgba(153, 51, 255, 0.15) 100%);
}

.blueprint-preview-rarity.rarity-epic {
    background: rgba(153, 51, 255, 0.5);
    border: 1px solid var(--rarity-epic);
    color: var(--rarity-epic);
}

.blueprint-card.rarity-legendary {
    border-color: rgb(255, 208, 0);
    background: linear-gradient(135deg, var(--bp-bg-card) 0%, rgba(255, 208, 0, 0.1) 100%);
}

.blueprint-card.rarity-legendary .blueprint-image-container {
    background: rgba(255, 208, 0, 0.5);
}

.blueprint-card.rarity-legendary:hover {
    box-shadow: 0 0 35px var(--rarity-legendary), 0 8px 16px rgba(0, 0, 0, 0.4);
}

.blueprint-card.rarity-legendary .blueprint-image {
    border-color: rgba(255, 208, 0, 0.5);
}

.blueprint-modal-scifi.rarity-legendary {
    border-color: rgba(255, 208, 0, 0.5);
    background: linear-gradient(135deg, var(--bp-bg-dark) 0%, rgba(255, 208, 0, 0.2) 100%);
}

.blueprint-preview-rarity.rarity-legendary {
    background: rgba(255, 208, 0, 0.5);
    border: 1px solid var(--rarity-legendary);
    color: var(--rarity-legendary);
    animation: legendary-pulse 6s infinite;
}

.blueprint-card.rarity-ultra-tech {
    border-color: rgb(0, 255, 255);
    background: linear-gradient(135deg, var(--bp-bg-card) 0%, rgba(173, 216, 230, 0.1) 100%);
}

.blueprint-card.rarity-ultra-tech .blueprint-image-container {
    background: rgba(0, 255, 255, 0.5);
}

.blueprint-card.rarity-ultra-tech:hover {
    box-shadow: 0 0 45px rgba(0, 255, 255, 1), 0 8px 16px rgba(0, 0, 0, 0.4);
}

.blueprint-card.rarity-ultra-tech .blueprint-image {
    border-color: rgba(0, 255, 255, 0.5);
}

.blueprint-modal-scifi.rarity-ultra-tech {
    border-color: rgba(0, 255, 255, 0.5);
    background: linear-gradient(135deg, var(--bp-bg-dark) 0%, rgba(0, 255, 255, 0.3) 100%);
}

.blueprint-preview-rarity.rarity-ultra-tech {
    background: rgba(0, 255, 255, 0.5);
    border: 10px solid var(--rarity-ultra-tech);
    color: var(--rarity-ultra-tech);
    animation: ultra-pulse 2s infinite;
}

/* Effet holographique pour cartes rares */
.holographic-effect {
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(105deg,
            transparent 40%,
            rgba(255, 255, 255, 0.2) 45%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0.2) 55%,
            transparent 60%);
    animation: holographic-sweep 5s infinite;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
}

@keyframes holographic-sweep {
    0% {
        left: -150%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    40% {
        left: 100%;
        opacity: 1;
    }

    41% {
        opacity: 0;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes legendary-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.5);
    }

    50% {
        transform: scale(1.01);
        box-shadow: 0 0 10px 5px rgba(255, 215, 0, 0.3);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.5);
    }
}

@keyframes ultra-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.5);
    }

    50% {
        transform: scale(1.01);
        box-shadow: 0 0 10px 5px rgba(0, 255, 255, 0.3);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.5);
    }
}

/* ========================================
   MODAL SCI-FI
   ======================================== */

.blueprint-modal-scifi .modal-content {
    background: linear-gradient(135deg, var(--bp-bg-dark) 0%, var(--bp-bg-medium) 100%);
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: 12px;
    box-shadow: 0 0 50px rgba(0, 212, 255, 0.2);
    color: #fff;
}

.blueprint-modal-scifi .modal-header {
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, transparent 100%);
    border-bottom: 2px solid rgba(0, 212, 255, 0.2);
    padding: 20px 30px;
}

.modal-title-container {
    flex: 1;
}

.blueprint-modal-scifi .modal-title {
    color: var(--bp-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 18px;
    margin: 0;
}

.modal-subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-family: 'Courier New', monospace;
    margin-top: 5px;
}

.btn-close-scifi {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--bp-primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-close-scifi:hover {
    background: rgba(255, 51, 102, 0.2);
    border-color: var(--bp-danger);
    color: var(--bp-danger);
    transform: rotate(90deg);
}

.blueprint-modal-scifi .modal-body {
    padding: 30px;
    max-height: 70vh;
    overflow-y: auto;
}

/* Scrollbar custom pour le modal */
.blueprint-modal-scifi .modal-body::-webkit-scrollbar {
    width: 8px;
}

.blueprint-modal-scifi .modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.blueprint-modal-scifi .modal-body::-webkit-scrollbar-thumb {
    background: var(--bp-primary);
    border-radius: 4px;
}

/* Container du modal */
.modal-blueprint-container {
    animation: fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Panel de preview */
.blueprint-preview-panel {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 8px;
    padding: 20px;
    height: 100%;
}

.blueprint-preview-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1);
}

.preview-label {
    color: var(--bp-primary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.preview-id {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-family: 'Courier New', monospace;
}

.blueprint-preview-image {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.image-frame {
    position: relative;
    width: 200px;
    height: 200px;
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    overflow: hidden;
    background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.05) 0%, transparent 70%);
}

.image-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(1.2);
}

.image-overlay {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 212, 255, 0.02) 2px,
            rgba(0, 212, 255, 0.02) 4px);
    pointer-events: none;
    animation: scanlines-slow 10s linear infinite;
}

@keyframes scanlines-slow {
    0% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(10px);
    }
}

.blueprint-preview-name {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blueprint-preview-rarity {
    text-align: center;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    display: inline-block;
    width: 100%;
}

/* Panels d'information */
.blueprint-info-panels {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-panel {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

.panel-header {
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, transparent 100%);
    padding: 12px 15px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1);
    color: var(--bp-primary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.panel-header i {
    margin-right: 8px;
}

.panel-content {
    padding: 15px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.6;
}

/* Formule display */
.formula-display {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.formula-element {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, transparent 100%);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    min-width: 60px;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: elementAppear 0.5s ease forwards;
    opacity: 0;
}

@keyframes elementAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }

    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

.formula-element:hover {
    background: rgba(0, 212, 255, 0.2);
    border-color: var(--bp-primary);
    transform: scale(1.1);
}

.element-symbol {
    font-size: 18px;
    font-weight: bold;
    color: var(--bp-primary);
    text-transform: uppercase;
}

.element-quantity {
    font-size: 12px;
    color: var(--bp-warning);
    margin-top: 2px;
}

.element-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bp-bg-dark);
    border: 1px solid var(--bp-primary);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    margin-bottom: 5px;
}

.formula-element:hover .element-tooltip {
    opacity: 1;
}

/* Formulaire de renommage sci-fi */
.rename-form-scifi {
    margin-top: 10px;
}

.input-group-scifi {
    display: flex;
    gap: 10px;
}

.input-scifi {
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
}

.input-scifi:focus {
    outline: none;
    border-color: var(--bp-primary);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
    background: rgba(0, 0, 0, 0.7);
}

.input-scifi::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.btn-submit-scifi {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--v3-btn-primary) 0%, rgba(0, 212, 255, 0.7) 100%);
    border: 1px solid var(--v3-btn-primary);
    color: var(--bp-bg-dark);
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-submit-scifi:hover {
    background: var(--v3-btn-primary);
    box-shadow: 0 0 15px var(--v3-btn-primary);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .blueprint-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }

    .blueprint-modal-scifi .modal-dialog {
        margin: 10px;
    }

    .modal-blueprint-container .row {
        flex-direction: column;
    }
}


/* FIN BLUEPRINT */

/* COLONY MANAGER */

/* Pour la barre d'efficacité en bleu clair */
#detail-efficiency-bar {
    background-color: rgb(34, 157, 198) !important;
}

.stat-bar-fill {
    background-color: rgb(34, 157, 198) !important;
}

.floor-modules {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 70%;
    margin-bottom: 5px;
}

.floor-module {
    width: 32%;
    height: 100%;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
    text-align: center;
}

.floor-module:hover {
    transform: scale(1.05);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.floor-module.empty {
    border-style: dashed;
}

.module-empty {
    font-size: 24px;
    font-weight: bold;
    color: #888;
}

.module-name {
    padding: 2px;
    font-size: 0.8rem;
    line-height: 1.1;
    overflow: hidden;
}

.detail-module {
    width: 30%;
    border-radius: 6px;
    margin-bottom: 10px;
    transition: all 0.2s;
}

.detail-module.selected {
    box-shadow: 0 0 0 3px #0d6efd;
}

.module-location {
    font-weight: bold;
    margin-bottom: 5px;
}

/* Styles spécifiques à la gestion de colonie */
.levels-visualization {
    position: relative;
    padding: 20px 0;
    height: 500px;
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* S'assurer que les conteneurs ne créent pas de scrollbar horizontale */
.levels-visualization,
.card,
.card-body {
    overflow-x: hidden;
}

.level-header {
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
}

.vertical-shaft {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 16px;
    background-color: #1e3a5a;
    transform: translateX(-50%);
    border-radius: 20px;
    opacity: 0.7;
    z-index: 0;
}

.level {
    display: flex;
    flex-direction: column;
    /* dispose les éléments en colonne */
    align-items: center;
    /* centre horizontalement */
    position: relative;
    z-index: 1;
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    transition: transform 0.3s;
    background-color: rgba(56, 41, 30, 0.364);
    border-radius: 8px;
    overflow-x: hidden;
}

.level:hover {
    transform: scale(1.02);
    background-color: rgba(97, 87, 80, 0.231);
}

.level.selected {
    transform: scale(1.05);
    background-color: rgba(97, 87, 80, 0.364);
    border: 1px solid #1e4976;
}

.level-name {
    width: 20%;
    text-align: right;
    padding-right: 1rem;
}

.level-name .name {
    font-weight: bold;
    color: #0d6efd;
}

.level.selected .level-name .name {
    color: #ffc107;
}

.level-name .depth {
    font-size: 0.875rem;
    color: #6c757d;
}

.level-visual {
    width: 60%;
    height: 64px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.health-bar,
.stat-bar {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 8px;
    background-color: #212529;
    border-radius: 4px;
}

.health-bar {
    top: 8px;
}

.health-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s, background-color 0.5s;
}

.stat-bar {
    bottom: 8px;
}

.stat-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s;
}

.level-stats {
    width: 20%;
    padding-left: 1rem;
    font-size: 0.875rem;
}

.add-level-button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #0d6efd;
    color: white;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 1.5rem auto;
    transition: all 0.3s;
    position: relative;
    /* Ajouté pour activer z-index */
    z-index: 1;
    /* Supérieur au z-index: 0 de vertical-shaft */
}

.add-level-button:hover {
    background-color: #0b5ed7;
    transform: scale(1.1);
}

/* Animation clignotante */
@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

.blinking {
    animation: blink 1s infinite;
}

/* États */
.status-optimal {
    color: #198754;
}

.status-warning {
    color: #ffc107;
}

.status-danger {
    color: #dc3545;
}

.status-critical {
    color: #dc3545;
}

/* Responsive */
@media (max-width: 768px) {
    .level-name {
        width: 35%;
    }

    .level-visual {
        width: 100%;
    }

    .level-stats {
        width: 35%;
    }

    .floor-module {
        width: 100%;
    }

    .module-name {
        font-size: 0.75rem;
    }
}

/* Styles pour les étages en destruction */
.level.under-destruction {
    opacity: 0.7;
    position: relative;
}

.level.under-destruction::after {
    content: "EN DESTRUCTION";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(220, 53, 69, 0.5);
    color: white;
    font-weight: bold;
    z-index: 10;
    border-radius: 4px;
}

.level.pending-destruction {
    border: 3px dashed #dc3545;
}

.level.pending-destruction .level-header::after {
    content: "⚠️";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #dc3545;
    font-size: 1.2rem;
}

/* Styles pour les étages en construction */
.level.under-construction {
    opacity: 0.8;
    position: relative;
}

.level.under-construction::after {
    content: "EN CONSTRUCTION";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(13, 202, 240, 0.5);
    color: white;
    font-weight: bold;
    z-index: 10;
    border-radius: 4px;
}

/* Styles pour les modules en construction */
.floor-module.under-construction {
    position: relative;
}

.floor-module.under-construction::before {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.8rem;
    z-index: 5;
}

.module-construction {
    font-size: 0.7rem;
    margin-top: 2px;
}

/* Styles pour les barres de progression */
.construction-progress,
.destruction-progress {
    padding: 0 5px;
    margin-bottom: 5px;
}

/* Animation clignotante */
.blinking {
    animation: blink 2s linear infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* Amélioration visuelle pour le détail des modules */
.detail-module {
    border-radius: 4px;
    margin: 0 5px;
    flex: 1;
    transition: all 0.3s ease;
}

.detail-module.selected {
    transform: scale(1.05);
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Style pour les modules d'étage */
.floor-modules {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.floor-module {
    width: 31%;
    text-align: center;
    border-radius: 4px;
    font-size: 0.8rem;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.floor-module:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.floor-module.empty .module-empty {
    font-size: 1.5rem;
    color: #888;
}

.module-name {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Améliorations visuelles pour les status-bars */
.status-bars {
    margin-top: 2px;
}

.health-bar,
.stat-bar {
    height: 5px;
    background-color: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 2px;
}

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

/* FIN COLONY MANAGER */

/* THEME PROFIL PLAYERS */

/* Styles responsives */
@media (max-width: 768px) {

    /* Augmente la taille du container pour l'avatar */
    .avatar-container {
        width: 150px !important;
        height: 150px !important;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    /* L'avatar occupe toute la largeur du container */
    .avatar-container .avatar-image {
        width: 100% !important;
        height: auto !important;
        display: block;
        margin: 0 auto;
    }

    /* Ajustement réactif de la taille de la police pour le nom et le titre */
    .profile-username {
        font-size: calc(1.8rem + 1vw);
        text-align: center;
    }

    .profile-title {
        font-size: calc(1.2rem + 1vw);
        text-align: center;
    }

    .stat-card,
    .rank-card {
        margin-bottom: 0.5rem;
    }

    .chart-container {
        height: 250px;
    }

    /* Cible spécifique pour le conteneur sur mobile */
    .container-fluid-no-padding.full-width-mobile {
        width: 100% !important;
        /* Prend toute la largeur disponible dans w-75 */
        padding-right: 0 !important;
        /* Supprime le padding */
        padding-left: 0 !important;
        /* Supprime le padding */
    }
}

/* Styles généraux du profil */
.container-fluid-no-padding {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
}

.avatar-container {
    position: relative;
    width: 256px;
    height: 256px;
    margin: 0 auto;
}

#externalLinkUrl {
    word-break: break-all;
    /* Assure que les mots longs sont coupés proprement */
    white-space: normal;
    /* Permet les retours à la ligne */
}

.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 4px solid var(--theme-secondary);
    box-shadow: 0 0 20px var(--theme-tertiary);
}

.profile-username {
    font-size: 2.5rem;
    font-weight: bold;
    color: #E6F0F5;
    text-shadow: 0 0 10px var(--theme-tertiary);
    margin-bottom: 0.5rem;
}

.profile-title {
    font-size: 1.5rem;
    color: #D9E8F0;
    opacity: 0.9;
    font-style: italic;
    margin-bottom: 1.5rem;
}

/* Styles pour les cartes de statistiques */
.stat-card,
.rank-card {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 1rem;
    height: 100%;
    transition: all 0.3s ease;
}

.stat-card:hover,
.rank-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.stat-icon,
.rank-icon {
    font-size: 2rem;
    margin-right: 1rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--theme-secondary);
}

.stat-info,
.rank-info {
    flex-grow: 1;
}

.stat-label,
.rank-label {
    font-size: 0.9rem;
    color: #D9E8F0;
    opacity: 0.8;
}

.stat-value,
.rank-value {
    font-size: 1.2rem;
    font-weight: bold;
    color: #E6F0F5;
}

/* Style de base pour toutes les cartes */
.stat-card,
.industry-card,
.combat-card,
.exploitation-card {
    padding: 15px;
    /* Ajoute un espacement interne */
    border-radius: 5px;
    /* Coins arrondis pour un look moderne */
    min-height: 80px;
    /* Hauteur minimale pour visibilité */
    display: flex;
    /* Pour centrer le contenu */
    align-items: center;
    /* Centrage vertical */
    justify-content: space-between;
    /* Espacement horizontal */
}

.specialization-cards .card {
    cursor: pointer;
    transition: all 0.3s ease;
    border-width: 2px;
    height: 100%;
}

.specialization-img {
    max-width: 80px;
    height: auto;
    margin: 0 auto;
    display: block;
}

.specialization-radio {
    position: absolute;
    opacity: 0;
}

.specialization-option {
    opacity: 0.7;
}

.specialization-option.selected {
    opacity: 1;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgb(142, 142, 142);
    border-width: 3px;
}

/* Styles spécifiques aux icônes de rang */
.industry-card {
    background-color: rgba(255, 255, 0, 0.2);
    color: #ffc107;
}

.combat-card {
    background-color: rgba(255, 0, 0, 0.2);
    color: #f7002d;
}

.exploitation-card {
    background-color: rgba(0, 255, 0, 0.2);
    color: #23bd76;
}

/* Optionnel : Style pour les labels et valeurs */
.stat-label,
.rank-label {
    font-weight: bold;
}

.stat-value,
.rank-value {
    font-size: 1.2em;
}

/* Styles pour les graphiques */
.chart-container {
    position: relative;
    width: 100%;
    height: 300px;
}

/* Styles pour la bannière */
.banner-image {
    max-width: 100%;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Styles pour le header des cards */
.card-header {
    font-weight: bold;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ajoute cette ligne pour centrer horizontalement */
}

/* Thème 1 – Palette spatiale élégante */
#theme-1 {
    /* Définition des variables de couleur */
    --theme-primary: #1A2A44;
    /* Bleu nuit profond pour les cards */
    --theme-secondary: #2E5C6B;
    /* Bleu-vert subtil pour les headers */
    --theme-tertiary: rgba(74, 120, 135, 0.5);
    /* Gris-bleu semi-transparent pour les ombres et accents */
}

/* Appliquer le thème aux cards */
#theme-1 .card {
    background-color: var(--theme-primary) !important;
    border: none;
    box-shadow: 0 4px 8px 0 var(--theme-tertiary);
    color: #D9E8F0;
    /* Texte clair et doux pour contraster avec le fond sombre */
}

/* Appliquer le thème aux headers des cards */
#theme-1 .card-header {
    background-color: var(--theme-secondary);
    border-bottom: 2px solid var(--theme-tertiary);
    color: #E6F0F5;
    /* Texte très clair pour un contraste net et futuriste */
}

/* Exemple pour la section des statistiques (header custom) */
#theme-1 .stats-header {
    background-color: var(--theme-secondary);
    border-bottom: 2px solid var(--theme-tertiary);
    color: #E6F0F5;
    /* Cohérence avec les headers */
}

/* Modification du fond global pour une ambiance spatiale */
#theme-1 body {
    background-color: #0F1C2E;
    /* Un bleu-noir profond pour une immersion spatiale */
}

/* Thème 2 – Palette nébuleuse désertique */
#theme-2 {
    /* Définition des variables de couleur */
    --theme-primary: #2B1E2F;
    /* Violet sombre pour les cards */
    --theme-secondary: #5C4033;
    /* Brun terreux pour les headers */
    --theme-tertiary: rgba(138, 95, 77, 0.5);
    /* Cuivre semi-transparent pour les ombres et accents */
}

/* Appliquer le thème aux cards */
#theme-2 .card {
    background-color: var(--theme-primary) !important;
    border: none;
    box-shadow: 0 4px 8px 0 var(--theme-tertiary);
    color: #E8D9C9;
    /* Texte clair avec une légère teinte chaude pour contraster */
}

/* Appliquer le thème aux headers des cards */
#theme-2 .card-header {
    background-color: var(--theme-secondary);
    border-bottom: 2px solid var(--theme-tertiary);
    color: #F5E8D8;
    /* Texte clair et doux pour un contraste élégant */
}

/* Exemple pour la section des statistiques (header custom) */
#theme-2 .stats-header {
    background-color: var(--theme-secondary);
    border-bottom: 2px solid var(--theme-tertiary);
    color: #F5E8D8;
    /* Cohérence avec les headers */
}

/* Modification du fond global pour une ambiance spatiale */
#theme-2 body {
    background-color: #1F141F;
    /* Un violet-noir profond pour une immersion cosmique */
}

/* Thème 3 – Palette technologique avancée */
#theme-3 {
    /* Définition des variables de couleur */
    --theme-primary: #0A2E38;
    /* Bleu-vert sombre pour les cards */
    --theme-secondary: #3A5F6F;
    /* Gris-bleu métallique pour les headers */
    --theme-tertiary: rgba(110, 140, 153, 0.6);
    /* Gris clair bleuté semi-transparent pour ombres et accents */
}

/* Appliquer le thème aux cards */
#theme-3 .card {
    background-color: var(--theme-primary) !important;
    border: 1px solid var(--theme-tertiary);
    /* Bordure subtile pour un effet encastré */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5),
        /* Ombre profonde */
        0 2px 4px var(--theme-tertiary);
    /* Ombre lumineuse pour relief */
    border-radius: 8px;
    /* Coins légèrement arrondis */
    color: #DCEBF0;
    /* Texte clair avec une teinte froide */
    transition: transform 0.2s ease;
    /* Animation au survol */
}

/* Effet au survol des cards */
#theme-3 .card:hover {
    transform: translateY(-3px);
    /* Léger soulèvement */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6),
        0 3px 6px var(--theme-tertiary);
}

/* Appliquer le thème aux headers des cards */
#theme-3 .card-header {
    background-color: var(--theme-secondary);
    border-bottom: 2px solid var(--theme-tertiary);
    box-shadow: inset 0 -1px 4px rgba(0, 0, 0, 0.3);
    /* Ombre interne pour profondeur */
    color: #E8F2F5;
    /* Texte clair et net */
    border-radius: 8px 8px 0 0;
    /* Coins arrondis uniquement en haut */
}

/* Exemple pour la section des statistiques (header custom) */
#theme-3 .stats-header {
    background-color: var(--theme-secondary);
    border-bottom: 2px solid var(--theme-tertiary);
    box-shadow: inset 0 -1px 4px rgba(0, 0, 0, 0.3);
    /* Même effet d’ombre interne */
    color: #E8F2F5;
    /* Cohérence avec les headers */
}

/* Modification du fond global pour une ambiance spatiale */
#theme-3 body {
    background-color: #051A20;
    /* Bleu-noir glacial pour une immersion high-tech */
}

/* Thème 4 – Grok Theme : Palette cosmique électrique */
#theme-4 {
    /* Définition des variables de couleur */
    --theme-primary: #0D0F2B;
    /* Bleu-noir abyssal pour les cards */
    --theme-secondary: #3E1F7A;
    /* Violet électrique pour les headers */
    --theme-tertiary: rgb(0, 213, 255);
    /* Cyan éclatant semi-transparent pour ombres et accents */
    --glow-effect: #00D4FF;
    /* Cyan pur pour les effets lumineux */
}

/* Appliquer le thème aux cards */
#theme-4 .card {
    background-color: var(--theme-primary) !important;
    border: 1px solid var(--theme-tertiary);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6),
        /* Ombre profonde */
        0 0 12px var(--glow-effect);
    /* Éclat cyan pulsant */
    border-radius: 10px;
    /* Coins arrondis modernes */
    color: #B0E8FF;
    /* Texte clair avec une teinte cyan */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Transitions fluides */
    position: relative;
    overflow: hidden;
    /* Pour gérer les effets internes */
}

/* Effet de pulsation lumineuse au survol */
#theme-4 .card:hover {
    transform: translateY(-5px) scale(1.02);
    /* Déplacement vers le haut + légère expansion */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7),
        0 0 20px var(--glow-effect);
}

/* Ajout d’un effet de bordure interne lumineuse */
#theme-4 .card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 213, 255, 0.107) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

#theme-4 .card:hover::before {
    opacity: 1;
    /* Apparition au survol */
}

/* Appliquer le thème aux headers des cards */
#theme-4 .card-header {
    background-color: var(--theme-secondary);
    border-bottom: 3px solid var(--theme-tertiary);
    box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.4),
        /* Ombre interne */
        0 2px 4px var(--glow-effect);
    /* Éclat externe */
    color: #E0F7FF;
    /* Texte cyan clair pour contraste */
    border-radius: 10px 10px 0 0;
    transition: background-color 0.3s ease;
}

#theme-4 .card-header:hover {
    background-color: #4A2B8F;
    /* Violet plus clair au survol */
}

/* Exemple pour la section des statistiques (header custom) */
#theme-4 .stats-header {
    background-color: var(--theme-secondary);
    border-bottom: 3px solid var(--theme-tertiary);
    box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.4),
        0 2px 4px var(--glow-effect);
    color: #E0F7FF;
    transition: transform 0.2s ease;
}

#theme-4 .stats-header:hover {
    transform: translateX(5px);
    /* Petit décalage latéral */
}

/* Modification du fond global pour une ambiance spatiale */
#theme-4 body {
    background-color: #07091D;
    /* Bleu-noir profond avec une pointe violette */
    background-image: radial-gradient(circle at top right, rgba(0, 212, 255, 0.1), transparent 70%);
    /* Gradient subtil */
}

/* Thème 5 – Palette néon galactique */
#theme-5 {
    /* Définition des variables de couleur */
    --theme-primary: #1C0B2D;
    /* Violet-noir profond pour les cards */
    --theme-secondary: #FF2079;
    /* Rose néon pour les headers */
    --theme-tertiary: rgba(0, 245, 212, 0.6);
    /* Turquoise néon semi-transparent pour ombres et accents */
    --glow-effect: #00F5D4;
    /* Turquoise pur pour les effets lumineux */
}

/* Appliquer le thème aux cards */
#theme-5 .card {
    background-color: var(--theme-primary) !important;
    border: 2px solid var(--theme-tertiary);
    /* Bordure turquoise lumineuse */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5),
        /* Ombre sombre */
        0 0 8px var(--glow-effect);
    /* Éclat néon */
    border-radius: 12px;
    /* Coins arrondis pour un look moderne */
    color: #E0E8FF;
    /* Texte clair avec une teinte légèrement violette */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

/* Effet au survol des cards */
#theme-5 .card:hover {
    transform: translateY(-4px) rotate(1deg);
    /* Soulèvement et légère rotation */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6),
        0 0 16px var(--glow-effect);
}

/* Appliquer le thème aux headers des cards */
#theme-5 .card-header {
    background-color: var(--theme-secondary);
    border-bottom: 2px solid var(--theme-tertiary);
    box-shadow: inset 0 -1px 4px rgba(0, 0, 0, 0.3);
    /* Ombre interne */
    color: #FFFFFF;
    /* Texte blanc pour contraste maximal */
    border-radius: 12px 12px 0 0;
    position: relative;
    overflow: hidden;
}

/* Effet de ligne lumineuse animée dans le header */
#theme-5 .card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--glow-effect), transparent);
    animation: slideGlow 2s infinite ease-in-out;
}

/* Animation de la ligne lumineuse */
@keyframes slideGlow {
    0% {
        left: -100%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: -100%;
    }
}

/* Exemple pour la section des statistiques (header custom) */
#theme-5 .stats-header {
    background-color: var(--theme-secondary);
    border-bottom: 2px solid var(--theme-tertiary);
    box-shadow: inset 0 -1px 4px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
}

/* Appliquer le thème au graphique (par exemple le camembert) */
#theme-5 .chart {
    filter: drop-shadow(0 0 8px var(--glow-effect));
    /* Ombre néon sur le graphique */
}

/* Modification du fond global pour une ambiance spatiale */
#theme-5 body {
    background-color: #0F0619;
    /* Violet-noir profond */
    background-image: linear-gradient(45deg, rgba(255, 32, 121, 0.1) 0%, rgba(0, 245, 212, 0.1) 100%);
    /* Gradient subtil */
}

/* Thème 6 – Palette classique spatiale */
#theme-6 {
    /* Définition des variables de couleur */
    --theme-primary: #1E2A44;
    /* Bleu-gris foncé pour les cards */
    --theme-secondary: #4A6B88;
    /* Bleu moyen pour les headers */
    --theme-tertiary: rgba(163, 183, 195, 0.4);
    /* Gris-bleu clair semi-transparent pour ombres et accents */
}

/* Appliquer le thème aux cards */
#theme-6 .card {
    background-color: var(--theme-primary) !important;
    border: 1px solid var(--theme-tertiary);
    /* Bordure subtile */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    /* Ombre légère */
    border-radius: 6px;
    /* Coins légèrement arrondis */
    color: #D5E0EA;
    /* Texte clair pour contraste */
    transition: transform 0.2s ease;
    /* Transition douce */
}

/* Effet au survol des cards */
#theme-6 .card:hover {
    transform: translateY(-2px);
    /* Léger soulèvement */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Appliquer le thème aux headers des cards */
#theme-6 .card-header {
    background-color: var(--theme-secondary);
    border-bottom: 1px solid var(--theme-tertiary);
    color: #E8F0F5;
    /* Texte clair et doux */
    border-radius: 6px 6px 0 0;
}

/* Exemple pour la section des statistiques (header custom) */
#theme-6 .stats-header {
    background-color: var(--theme-secondary);
    border-bottom: 1px solid var(--theme-tertiary);
    color: #E8F0F5;
}

/* Appliquer le thème au graphique (par exemple le camembert) */
#theme-6 .chart {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* Ombre légère pour le graphique */
}

/* Modification du fond global pour une ambiance spatiale */
#theme-6 body {
    background-color: #0F1825;
    /* Bleu-noir discret */
}

/* Thème 7 – Palette classique sombre */
#theme-7 {
    /* Définition des variables de couleur */
    --theme-primary: #0C0F15;
    /* Noir bleuté profond pour les cards */
    --theme-secondary: #1A252F;
    /* Gris-noir pour les headers */
    --theme-tertiary: rgba(46, 58, 71, 0.5);
    /* Gris-bleu sombre semi-transparent pour ombres et accents */
}

/* Appliquer le thème aux cards */
#theme-7 .card {
    background-color: var(--theme-primary) !important;
    border: 1px solid var(--theme-tertiary);
    /* Bordure très discrète */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    /* Ombre sombre pour profondeur */
    border-radius: 4px;
    /* Coins légèrement arrondis */
    color: #A0A8B4;
    /* Texte gris clair pour contraste minimal */
    transition: transform 0.2s ease;
    /* Transition douce */
}

/* Effet au survol des cards */
#theme-7 .card:hover {
    transform: translateY(-2px);
    /* Léger soulèvement */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}

/* Appliquer le thème aux headers des cards */
#theme-7 .card-header {
    background-color: var(--theme-secondary);
    border-bottom: 1px solid var(--theme-tertiary);
    color: #B8C0CC;
    /* Texte légèrement plus clair */
    border-radius: 4px 4px 0 0;
}

/* Exemple pour la section des statistiques (header custom) */
#theme-7 .stats-header {
    background-color: var(--theme-secondary);
    border-bottom: 1px solid var(--theme-tertiary);
    color: #B8C0CC;
}

/* Appliquer le thème au graphique (par exemple le camembert) */
#theme-7 .chart {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    /* Ombre sombre pour le graphique */
}

/* Modification du fond global pour une ambiance très sombre */
#theme-7 body {
    background-color: #05070A;
    /* Noir presque absolu avec une pointe de bleu */
}

/* Thème 8 – Palette premium rose-cyan */
#theme-8 {
    /* Définition des variables de couleur */
    --theme-primary: #1B0A2A;
    /* Violet-noir profond pour les cards */
    --theme-secondary: #FF66B3;
    /* Rose vibrant pour les headers */
    --theme-tertiary: rgba(0, 204, 255, 0.6);
    /* Cyan semi-transparent pour ombres et accents */
    --glow-pink: #FF66B3;
    /* Rose pour les effets lumineux */
    --glow-cyan: #00CCFF;
    /* Cyan pour les effets lumineux */
}

/* Appliquer le thème aux cards */
#theme-8 .card {
    background-color: var(--theme-primary) !important;
    border: 2px solid var(--theme-tertiary);
    /* Bordure cyan */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5),
        /* Ombre sombre */
        0 0 8px var(--glow-cyan);
    /* Éclat cyan */
    border-radius: 10px;
    color: #E0E8FF;
    /* Texte clair avec une teinte légèrement violette */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Effet au survol des cards */
#theme-8 .card:hover {
    transform: translateY(-5px) scale(1.01);
    /* Soulèvement et légère expansion */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6),
        0 0 16px var(--glow-pink);
    /* Éclat rose au survol */
}

/* Effet de pulsation lumineuse alternée rose-cyan */
#theme-8 .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 102, 179, 0.2), rgba(0, 204, 255, 0.2));
    opacity: 0;
    transition: opacity 0.5s ease;
}

#theme-8 .card:hover::before {
    opacity: 1;
    animation: pulseGlow 2s infinite ease-in-out;
}

/* Animation de pulsation */
@keyframes pulseGlow {
    0% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 0.2;
    }
}

/* Appliquer le thème aux headers des cards */
#theme-8 .card-header {
    background-color: var(--theme-secondary);
    /* Rose vibrant */
    border-bottom: 2px solid var(--theme-tertiary);
    box-shadow: inset 0 -1px 4px rgba(0, 0, 0, 0.3);
    /* Ombre interne */
    color: #FFFFFF;
    /* Texte blanc pour contraste */
    border-radius: 10px 10px 0 0;
    position: relative;
}

/* Effet de ligne lumineuse animée dans le header */
#theme-8 .card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, var(--glow-pink), var(--glow-cyan));
    animation: slideGlow 3s infinite ease-in-out;
}

@keyframes slideGlow {
    0% {
        left: -100%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: -100%;
    }
}

/* Exemple pour la section des statistiques (header custom) */
#theme-8 .stats-header {
    background-color: var(--theme-secondary);
    border-bottom: 2px solid var(--theme-tertiary);
    box-shadow: inset 0 -1px 4px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
}

/* Appliquer le thème au graphique (par exemple le camembert) */
#theme-8 .chart {
    filter: drop-shadow(0 0 8px var(--glow-cyan));
    /* Ombre cyan */
    animation: float 4s infinite ease-in-out;
    /* Animation flottante */
}

/* Animation flottante pour le graphique */
@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

/* Modification du fond global : rose à gauche, cyan à droite */
#theme-8 body {
    background: linear-gradient(to right, #FF66B3, #00CCFF);
    /* Gradient rose à gauche, cyan à droite */
}

/* Thème 9 – Palette classique gris métallique */
#theme-9 {
    /* Définition des variables de couleur */
    --theme-primary: #2A2F36;
    /* Gris anthracite sombre pour les cards */
    --theme-secondary: #4A535C;
    /* Gris moyen pour les headers */
    --theme-tertiary: rgba(122, 135, 148, 0.5);
    /* Gris clair semi-transparent pour ombres et reflets */
}

/* Appliquer le thème aux cards */
#theme-9 .card {
    background: linear-gradient(135deg, #2A2F36 0%, #353C45 100%);
    /* Gradient subtil pour texture métallique */
    border: 1px solid var(--theme-tertiary);
    /* Bordure avec reflet métallique */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5),
        /* Ombre sombre */
        0 1px 3px rgba(255, 255, 255, 0.1) inset;
    /* Reflet interne pour effet métal */
    border-radius: 6px;
    color: #C0C8D2;
    /* Texte gris clair pour contraste */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Effet au survol des cards */
#theme-9 .card:hover {
    transform: translateY(-2px);
    /* Léger soulèvement */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6),
        0 2px 4px rgba(255, 255, 255, 0.15) inset;
    /* Reflet plus marqué au survol */
}

/* Appliquer le thème aux headers des cards */
#theme-9 .card-header {
    background: linear-gradient(135deg, #4A535C 0%, #5A656F 100%);
    /* Gradient pour texture métallique */
    border-bottom: 1px solid var(--theme-tertiary);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1),
        /* Reflet interne */
        inset 0 -1px 2px rgba(0, 0, 0, 0.3);
    /* Ombre interne */
    color: #D5DDE5;
    /* Texte légèrement plus clair */
    border-radius: 6px 6px 0 0;
}

/* Exemple pour la section des statistiques (header custom) */
#theme-9 .stats-header {
    background: linear-gradient(135deg, #4A535C 0%, #5A656F 100%);
    border-bottom: 1px solid var(--theme-tertiary);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.3);
    color: #D5DDE5;
}

/* Appliquer le thème au graphique (par exemple le camembert) */
#theme-9 .chart {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5),
        0 1px 2px rgba(255, 255, 255, 0.1) inset;
    /* Reflet métallique */
}

/* Modification du fond global pour une ambiance métallique */
#theme-9 body {
    background-color: #1C2126;
    /* Gris très sombre */
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.02) 75%, rgba(255, 255, 255, 0.02));
    /* Texture rayée subtile */
    background-size: 40px 40px;
    /* Taille de la texture */
}

/* Thème 10 – Premium Spatial */
#theme-10 {
    /* Variables de couleur */
    --theme-primary: #0A0A1F;
    /* Bleu-noir profond pour les cartes */
    --theme-secondary: #1A1A3A;
    /* Bleu sombre pour les headers */
    --theme-tertiary: rgba(255, 255, 255, 0.2);
    /* Blanc semi-transparent pour ombres */
    --star-color: #ffffff54;
    /* Blanc pour les étoiles */
}

/* Fond spatial avec étoiles */
#theme-10 body {
    background-color: #000000;
    /* Noir absolu */
    position: relative;
    overflow: hidden;
    /* Contient les étoiles */
}

/* Couches d'étoiles scintillantes pour le body */
#theme-10 body::before,
#theme-10 body::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
}

#theme-10 body::before {
    background-image: radial-gradient(circle, var(--star-color) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: twinkle 10s infinite linear;
}

#theme-10 body::after {
    background-image: radial-gradient(circle, var(--star-color) 2px, transparent 2px);
    background-size: 100px 100px;
    animation: twinkle 15s infinite linear reverse;
}

/* Animation de scintillement */
@keyframes twinkle {
    0% {
        opacity: 0.1;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Style des cartes (cards) */
#theme-10 .card {
    background-color: var(--theme-primary) !important;
    border: 1px solid var(--theme-tertiary);
    box-shadow: 0 4px 12px rgba(22, 17, 143, 0.8),
        /* Ombre sombre */
        0 0 20px rgba(0, 0, 157, 0.604);
    /* Légère lueur */
    border-radius: 8px;
    color: #D0D8E0;
    /* Texte gris clair */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: floatSpace 6s infinite ease-in-out;
    /* Flottement spatial */
    position: relative;
    /* Pour positionner le pseudo-élément */
}

/* Animation de flottement */
@keyframes floatSpace {
    0% {
        transform: translateY(+20px);
    }

    50% {
        transform: translateY(-30px);
    }

    100% {
        transform: translateY(+20px);
    }
}

/* Effet au survol des cartes */
#theme-10 .card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.9),
        0 0 30px rgba(255, 255, 255, 0.2);
}

/* Headers des cartes (effet nébuleuse) */
#theme-10 .card-header {
    background: linear-gradient(135deg, #1A1A3A 0%, #2A2A4A 100%);
    border-bottom: 2px solid var(--theme-tertiary);
    box-shadow: inset 0 -1px 4px rgba(0, 76, 255, 0.849);
    /* Reflet subtil */
    color: #E0E8F0;
    /* Texte clair */
    border-radius: 8px 8px 0 0;
    position: relative;
}

/* Particules animées dans le header */
#theme-10 .card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
    animation: drift 8s infinite linear;
}

/* Animation de dérive */
@keyframes drift {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 20px 20px;
    }
}

/* Effet d'étoiles dans le background des cards */
#theme-10 .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-image: radial-gradient(circle, var(--star-color) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: twinkle 5s infinite linear;
    pointer-events: none;
    z-index: -1;
    /* Pour placer l'effet derrière le contenu de la carte */
}

/* Thème 11 – Cosmic RGB Animation : Palette sombre avec animations RGB */
#theme-11 {
    /* Définition des variables de couleur */
    --theme-primary: #0A0A14;
    /* Noir profond pour les cards */
    --theme-secondary: #1A1A2E;
    /* Bleu très sombre pour les headers */
    --anim-duration: 10s;
    /* Durée de l'animation RGB */
}

/* Appliquer le thème aux cards */
#theme-11 .card {
    background-color: var(--theme-primary) !important;
    border: 1px solid transparent;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    color: #E0E0E0;
    /* Texte clair */
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
    animation: rgb-border var(--anim-duration) linear infinite;
}

/* Animation RGB pour les bordures */
@keyframes rgb-border {
    0% {
        border-color: rgb(255, 0, 0);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 0, 0, 0.7);
    }

    16.67% {
        border-color: rgb(255, 0, 255);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 0, 255, 0.7);
    }

    33.33% {
        border-color: rgb(0, 0, 255);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 0, 255, 0.7);
    }

    50% {
        border-color: rgb(0, 255, 255);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 255, 255, 0.7);
    }

    66.67% {
        border-color: rgb(0, 255, 0);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 255, 0, 0.7);
    }

    83.33% {
        border-color: rgb(255, 255, 0);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 255, 0, 0.7);
    }

    100% {
        border-color: rgb(255, 0, 0);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 0, 0, 0.7);
    }
}

/* Effet au survol */
#theme-11 .card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7);
    animation: rgb-border-hover var(--anim-duration) linear infinite;
}

/* Animation RGB plus intense au survol */
@keyframes rgb-border-hover {
    0% {
        border-color: rgb(255, 0, 0);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 0, 0, 0.9);
    }

    16.67% {
        border-color: rgb(255, 0, 255);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 0, 255, 0.9);
    }

    33.33% {
        border-color: rgb(0, 0, 255);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 255, 0.9);
    }

    50% {
        border-color: rgb(0, 255, 255);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 255, 255, 0.9);
    }

    66.67% {
        border-color: rgb(0, 255, 0);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 255, 0, 0.9);
    }

    83.33% {
        border-color: rgb(255, 255, 0);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 255, 0, 0.9);
    }

    100% {
        border-color: rgb(255, 0, 0);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 0, 0, 0.9);
    }
}

/* Ajout d'un effet de lueur interne */
#theme-11 .card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: rgb-glow var(--anim-duration) linear infinite;
}

/* Animation de la lueur interne */
@keyframes rgb-glow {
    0% {
        background: radial-gradient(circle, rgba(255, 0, 0, 0.07) 0%, transparent 70%);
    }

    16.67% {
        background: radial-gradient(circle, rgba(255, 0, 255, 0.07) 0%, transparent 70%);
    }

    33.33% {
        background: radial-gradient(circle, rgba(0, 0, 255, 0.07) 0%, transparent 70%);
    }

    50% {
        background: radial-gradient(circle, rgba(0, 255, 255, 0.07) 0%, transparent 70%);
    }

    66.67% {
        background: radial-gradient(circle, rgba(0, 255, 0, 0.07) 0%, transparent 70%);
    }

    83.33% {
        background: radial-gradient(circle, rgba(255, 255, 0, 0.07) 0%, transparent 70%);
    }

    100% {
        background: radial-gradient(circle, rgba(255, 0, 0, 0.07) 0%, transparent 70%);
    }
}

#theme-11 .card:hover::before {
    opacity: 1;
}

/* Appliquer le thème aux headers des cards */
#theme-11 .card-header {
    background-color: var(--theme-secondary);
    border-bottom: 2px solid transparent;
    color: #FFFFFF;
    border-radius: 10px 10px 0 0;
    transition: background-color 0.3s ease;
    animation: rgb-border-header var(--anim-duration) linear infinite;
}

/* Animation RGB pour les headers */
@keyframes rgb-border-header {
    0% {
        border-bottom-color: rgb(255, 0, 0);
        box-shadow: 0 2px 4px rgba(255, 0, 0, 0.5);
    }

    16.67% {
        border-bottom-color: rgb(255, 0, 255);
        box-shadow: 0 2px 4px rgba(255, 0, 255, 0.5);
    }

    33.33% {
        border-bottom-color: rgb(0, 0, 255);
        box-shadow: 0 2px 4px rgba(0, 0, 255, 0.5);
    }

    50% {
        border-bottom-color: rgb(0, 255, 255);
        box-shadow: 0 2px 4px rgba(0, 255, 255, 0.5);
    }

    66.67% {
        border-bottom-color: rgb(0, 255, 0);
        box-shadow: 0 2px 4px rgba(0, 255, 0, 0.5);
    }

    83.33% {
        border-bottom-color: rgb(255, 255, 0);
        box-shadow: 0 2px 4px rgba(255, 255, 0, 0.5);
    }

    100% {
        border-bottom-color: rgb(255, 0, 0);
        box-shadow: 0 2px 4px rgba(255, 0, 0, 0.5);
    }
}

#theme-11 .card-header:hover {
    background-color: #232339;
    /* Légèrement plus clair au survol */
}

/* Exemple pour la section des statistiques (header custom) */
#theme-11 .stats-header {
    background-color: var(--theme-secondary);
    border-bottom: 2px solid transparent;
    color: #FFFFFF;
    transition: transform 0.2s ease;
    animation: rgb-border-stats var(--anim-duration) linear infinite;
}

/* Animation RGB pour stats header */
@keyframes rgb-border-stats {
    0% {
        border-bottom-color: rgb(255, 0, 0);
        box-shadow: 0 2px 4px rgba(255, 0, 0, 0.5);
    }

    16.67% {
        border-bottom-color: rgb(255, 0, 255);
        box-shadow: 0 2px 4px rgba(255, 0, 255, 0.5);
    }

    33.33% {
        border-bottom-color: rgb(0, 0, 255);
        box-shadow: 0 2px 4px rgba(0, 0, 255, 0.5);
    }

    50% {
        border-bottom-color: rgb(0, 255, 255);
        box-shadow: 0 2px 4px rgba(0, 255, 255, 0.5);
    }

    66.67% {
        border-bottom-color: rgb(0, 255, 0);
        box-shadow: 0 2px 4px rgba(0, 255, 0, 0.5);
    }

    83.33% {
        border-bottom-color: rgb(255, 255, 0);
        box-shadow: 0 2px 4px rgba(255, 255, 0, 0.5);
    }

    100% {
        border-bottom-color: rgb(255, 0, 0);
        box-shadow: 0 2px 4px rgba(255, 0, 0, 0.5);
    }
}

#theme-11 .stats-header:hover {
    transform: translateX(5px);
}

/* Modification du fond global pour une ambiance spatiale */
#theme-11 body {
    background-color: #030308;
    /* Noir profond avec légère teinte bleue */
    background-image:
        radial-gradient(circle at top right, rgba(30, 30, 60, 0.2), transparent 70%),
        radial-gradient(circle at bottom left, rgba(60, 30, 60, 0.1), transparent 70%);
}

/* Ajout d'un léger effet de "starfield" avec un pseudo-élément */
#theme-11 body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 50px 50px, #FFFFFF, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 100px 150px, #FFFFFF, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 150px 250px, #FFFFFF, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 200px 200px, #FFFFFF, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 250px 300px, #FFFFFF, rgba(0, 0, 0, 0));
    pointer-events: none;
    opacity: 0.3;
    z-index: -1;
}

/* Thème 12 – Premium Silver & Gold Glass : Élégance luxueuse avec effet verre, argent et accents dorés */
#theme-12 {
    /* Définition des variables de couleur */
    --theme-primary: rgba(10, 15, 30, 0.75);
    /* Bleu-noir plus profond semi-transparent */
    --theme-secondary: rgba(20, 30, 45, 0.85);
    /* Bleu sombre semi-transparent */
    --theme-gold-light: #f0b95f;
    /* Or clair */
    --theme-gold-medium: #e0aa3e;
    /* Or moyen */
    --theme-gold-dark: #bf8c30;
    /* Or foncé */
    --theme-silver-light: #e8e8e8;
    /* Argent clair */
    --theme-silver-medium: #c0c0c0;
    /* Argent moyen */
    --theme-silver-dark: #a8a8a8;
    /* Argent foncé */
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Appliquer le thème aux cards avec effet verre premium amélioré */
#theme-12 .card {
    background: var(--theme-primary) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.3),
        0 2px 5px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    color: rgba(240, 240, 240, 0.95);
    transition:
        transform var(--transition-slow),
        box-shadow var(--transition-slow);
    position: relative;
    overflow: hidden;
}

/* Bordure argentée avec effet bijouterie */
#theme-12 .card {
    position: relative;
    isolation: isolate;
}

/* Superposition d'un effet brillant subtil */
#theme-12 .card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right,
            var(--theme-gold-dark),
            var(--theme-silver-light),
            var(--theme-gold-light),
            var(--theme-silver-medium),
            var(--theme-gold-medium),
            var(--theme-silver-light),
            var(--theme-gold-dark));
    box-shadow:
        0 0 10px rgba(240, 185, 95, 0.6),
        0 0 18px rgba(224, 170, 62, 0.4);
    opacity: 0.9;
    animation: precious-metal-shine 4s infinite ease-in-out;
}

/* Effet de réflexion premium amélioré */
#theme-12 .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            transparent,
            rgba(232, 232, 232, 0.08),
            rgba(255, 255, 255, 0.06),
            transparent);
    transform: skewX(-22deg);
    transition: left 1s ease;
    z-index: 1;
}

/* Animation de réflexion au survol */
#theme-12 .card:hover::before {
    left: 150%;
}

/* Effet au survol de la card amélioré */
#theme-12 .card:hover {
    transform: translateY(-7px);
    box-shadow:
        0 22px 45px rgba(0, 0, 0, 0.35),
        0 4px 10px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(232, 232, 232, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Au survol, on augmente l'effet lumineux */
#theme-12 .card:hover::after {
    opacity: 1;
    box-shadow:
        0 0 15px rgba(240, 185, 95, 0.8),
        0 0 25px rgba(224, 170, 62, 0.5);
    filter: brightness(1.2);
}

/* Animation keyframes améliorée pour l'effet scintillant bijou */
@keyframes precious-metal-shine {
    0% {
        box-shadow:
            0 0 8px rgba(240, 185, 95, 0.5),
            0 0 15px rgba(224, 170, 62, 0.3);
        filter: brightness(0.95);
    }

    25% {
        box-shadow:
            0 0 12px rgba(232, 232, 232, 0.6),
            0 0 20px rgba(192, 192, 192, 0.4);
        filter: brightness(1.05);
    }

    50% {
        box-shadow:
            0 0 18px rgba(240, 185, 95, 0.8),
            0 0 30px rgba(224, 170, 62, 0.5);
        filter: brightness(1.15);
    }

    75% {
        box-shadow:
            0 0 12px rgba(232, 232, 232, 0.6),
            0 0 20px rgba(192, 192, 192, 0.4);
        filter: brightness(1.05);
    }

    100% {
        box-shadow:
            0 0 8px rgba(240, 185, 95, 0.5),
            0 0 15px rgba(224, 170, 62, 0.3);
        filter: brightness(0.95);
    }
}

/* Appliquer le thème aux headers des cards avec effet argenté */
#theme-12 .card-header {
    background-color: var(--theme-secondary);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(232, 232, 232, 0.15);
    padding: 1.25rem 1.5rem;
    color: rgba(255, 255, 255, 0.95);
    position: relative;
    border-radius: 16px 16px 0 0;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Effet de bordure argentée pour les headers */
#theme-12 .card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right,
            transparent,
            var(--theme-silver-medium),
            var(--theme-silver-light),
            var(--theme-silver-medium),
            transparent);
    opacity: 0.5;
}

/* Effet argenté-doré entrelacé pour les titres de header */
#theme-12 .card-header h1,
#theme-12 .card-header h2,
#theme-12 .card-header h3,
#theme-12 .card-header h4,
#theme-12 .card-header h5,
#theme-12 .card-header h6 {
    background: linear-gradient(135deg,
            var(--theme-silver-light),
            var(--theme-gold-light),
            var(--theme-silver-medium),
            var(--theme-gold-medium),
            var(--theme-silver-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
    margin: 0;
    transition: transform var(--transition-slow), filter var(--transition-slow);
    animation: metal-shimmer 6s infinite alternate;
}

@keyframes metal-shimmer {
    0% {
        filter: brightness(0.95) contrast(1);
        background-position: 0% 50%;
    }

    50% {
        filter: brightness(1.15) contrast(1.05);
        background-position: 100% 50%;
    }

    100% {
        filter: brightness(0.95) contrast(1);
        background-position: 0% 50%;
    }
}

#theme-12 .card-header:hover h1,
#theme-12 .card-header:hover h2,
#theme-12 .card-header:hover h3,
#theme-12 .card-header:hover h4,
#theme-12 .card-header:hover h5,
#theme-12 .card-header:hover h6 {
    transform: scale(1.03);
    filter: brightness(1.2) contrast(1.1);
}

/* Exemple pour la section des statistiques (header custom) avec effet argenté */
#theme-12 .stats-header {
    background-color: var(--theme-secondary);
    border-bottom: 1px solid rgba(192, 192, 192, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.95);
    padding: 1rem 1.5rem;
    transition: transform var(--transition-slow);
    position: relative;
    overflow: hidden;
}

/* Animation d'accent argent et or pour stats-header */
#theme-12 .stats-header::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(to right,
            var(--theme-silver-dark),
            var(--theme-gold-light),
            var(--theme-silver-light),
            var(--theme-gold-medium),
            var(--theme-silver-medium));
    transition: width var(--transition-slow);
    box-shadow: 0 0 8px rgba(232, 232, 232, 0.5);
}

#theme-12 .stats-header:hover::after {
    width: 100%;
}

/* Modification du fond global pour une ambiance bijouterie premium */
#theme-12 body {
    background: linear-gradient(135deg,
            #0a111e 0%,
            #121a29 30%,
            #1a2436 70%,
            #0d1524 100%);
    min-height: 100vh;
    position: relative;
}

/* Ajout d'un effet de texture subtil amélioré */
#theme-12 body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E"),
        linear-gradient(45deg,
            rgba(192, 192, 192, 0.01) 0%,
            rgba(240, 185, 95, 0.01) 50%,
            rgba(192, 192, 192, 0.01) 100%);
    pointer-events: none;
    z-index: -1;
}

/* Style pour les boutons premium avec argenterie et or */
#theme-12 .btn-premium {
    background: linear-gradient(135deg,
            var(--theme-silver-dark),
            var(--theme-silver-medium),
            var(--theme-gold-medium),
            var(--theme-gold-dark));
    border: none;
    box-shadow:
        0 5px 8px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: rgba(15, 15, 25, 0.95);
    font-weight: 600;
    letter-spacing: 0.6px;
    border-radius: 8px;
    padding: 0.675rem 1.35rem;
    transition: all var(--transition-slow);
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

#theme-12 .btn-premium:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.25),
        0 4px 8px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg,
            var(--theme-silver-medium),
            var(--theme-silver-light),
            var(--theme-gold-light),
            var(--theme-gold-medium));
}

/* Effet de shine amélioré pour les boutons */
#theme-12 .btn-premium::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(255, 255, 255, 0.1) 30%,
            transparent 70%);
    transform: rotate(30deg);
    transition: transform 0.8s ease, opacity 0.6s ease;
    opacity: 0;
}

#theme-12 .btn-premium:hover::after {
    transform: rotate(30deg) translate(50%, 50%);
    opacity: 0.4;
}

/* Style pour les diviseurs premium argenterie-bijou */
#theme-12 hr {
    border: 0;
    height: 1px;
    background: linear-gradient(to right,
            transparent,
            var(--theme-silver-dark),
            var(--theme-gold-light),
            var(--theme-silver-light),
            var(--theme-gold-medium),
            var(--theme-silver-dark),
            transparent);
    margin: 1.75rem 0;
    opacity: 0.4;
    box-shadow: 0 0 8px rgba(232, 232, 232, 0.2);
}

/* Style pour les textes importants avec effet argenterie */
#theme-12 .premium-text {
    font-weight: 500;
    background: linear-gradient(135deg,
            var(--theme-silver-light),
            rgba(255, 255, 255, 0.98),
            var(--theme-gold-light),
            var(--theme-silver-medium));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
    animation: silver-gold-text 8s infinite alternate;
}

@keyframes silver-gold-text {
    0% {
        filter: brightness(0.95) contrast(1);
        background-position: 0% 50%;
    }

    50% {
        filter: brightness(1.2) contrast(1.1);
        background-position: 100% 50%;
    }

    100% {
        filter: brightness(0.95) contrast(1);
        background-position: 0% 50%;
    }
}

/* Ajouter des reflets métalliques aux éléments importants */
#theme-12 .card-title,
#theme-12 .stats-value,
#theme-12 .premium-highlight {
    position: relative;
    color: var(--theme-silver-light);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

#theme-12 .card-title::after,
#theme-12 .stats-value::after,
#theme-12 .premium-highlight::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transform: skewX(-20deg);
    animation: metal-flicker 5s infinite;
}

@keyframes metal-flicker {
    0% {
        left: -100%;
        opacity: 0;
    }

    10% {
        opacity: 0.3;
    }

    20% {
        opacity: 0.1;
    }

    30% {
        opacity: 0.5;
    }

    50% {
        left: 150%;
        opacity: 0;
    }

    100% {
        left: -100%;
        opacity: 0;
    }
}

/* FIN THEME PROFIL PLAYERS */


/* ARTICLES Website */

.news-article-title {
    text-align: center;
    margin-bottom: 20px;
    /* espace en dessous du titre */
}

.article-buttons {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 1000;
    /* Pour que la barre reste visible au-dessus des autres éléments */
}

.news-content {
    text-align: justify;
    line-height: 1.6;
}

.news-card {
    /* Propriétés de base */
    transition: transform 0.3s ease;
    /* Pour une animation fluide */
    cursor: pointer;
    /* Indique que c'est cliquable */
}

/* Effet au survol */
.news-card:hover {
    transform: translateZ(10px) translateY(10px);
    /* Déplacement 3D */
    /* Vous pouvez aussi ajouter une ombre pour renforcer l'effet 3D */
    box-shadow: 0 5px 15px rgba(0, 242, 255, 0.3);
}

/* FIN ARTICLES */

/* SETTINGS */

.settings-card {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 25px;
    border: none;
    overflow: hidden;
}

.settings-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.settings-card-header {
    background-color: #1b1e2f;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-weight: 600;
}

.settings-card-body {
    padding: 20px;
}

.settings-section {
    margin-bottom: 22px;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-title {
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}

.form-switch .form-check-input {
    width: 3em;
    height: 1.5em;
    margin-right: 10px;
}

.form-switch .form-check-label {
    padding-top: 3px;
}

.alert-dismissible {
    padding-right: 3rem;
}

.success-feedback {
    display: none;
    color: #198754;
    margin-top: 5px;
    font-size: 0.875em;
}

/* FIN SETTINGS */

/* PUBLIC Website */
.game-title {
    font-size: 1.5rem;
    font-weight: bold;
}

.game-description {
    font-size: 1.2rem;
    max-width: 800px;
    margin: auto;
}

.captcha-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 20px auto;
    border: 3px solid #233a44;
    user-select: none;
    /* Empêche la sélection du texte */
}

.captcha-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    pointer-events: none;
    /* Pour que les événements se captent sur le conteneur */
}

.stats-header {
    background-color: #2c3e50;
    /* Exemple de personnalisation */
    color: white;
    font-weight: bold;
}

/* Taille réduite pour les graphiques camembert */
.chart-pie {
    max-width: 200px;
    max-height: 200px;
    margin: 0 auto;
}

.chart-title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.card-news-index {
    /* Propriétés de base */
    transition: transform 0.3s ease;
    /* Pour une animation fluide */
    cursor: pointer;
    /* Indique que c'est cliquable */
}

/* Effet au survol */
.card-news-index:hover {
    transform: translateZ(-10px) translateY(-20px);
    /* Déplacement 3D */
    /* Vous pouvez aussi ajouter une ombre pour renforcer l'effet 3D */
    box-shadow: 0 5px 15px rgba(0, 242, 255, 0.524);
}

.card-lore-index {
    /* Propriétés de base */
    transition: transform 0.3s ease;
    /* Pour une animation fluide */
    cursor: pointer;
    /* Indique que c'est cliquable */
}

/* Effet au survol */
.card-lore-index:hover {
    transform: translateZ(-10px) translateY(-20px);
    /* Déplacement 3D */
    /* Vous pouvez aussi ajouter une ombre pour renforcer l'effet 3D */
    box-shadow: 0 5px 15px rgba(0, 64, 255, 0.778);
}

.card-chronicles-index {
    /* Propriétés de base */
    transition: transform 0.3s ease;
    /* Pour une animation fluide */
    cursor: pointer;
    /* Indique que c'est cliquable */
}

/* Effet au survol */
.card-chronicles-index:hover {
    transform: translateZ(-10px) translateY(-20px);
    /* Déplacement 3D */
    /* Vous pouvez aussi ajouter une ombre pour renforcer l'effet 3D */
    box-shadow: 0 5px 15px rgba(0, 255, 72, 0.628);
}

.card-body-neon {
    background: rgba(15, 15, 28, 0.9);
    /* Slightly lighter dark background for contrast */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 15px #59000091,
        /* Outer neon glow */
        0 0 5px #5a00008f inset;
    /* Inner neon glow */
    transition: box-shadow 0.3s ease;
}

.card-body-neon:hover {
    box-shadow: 0 0 25px #ff00008f,
        /* Enhanced glow on hover */
        0 0 10px #ff00008f inset;
}

.btn-ultra-danger {
    background: repeating-linear-gradient(45deg,
            #00000038 0,
            /* Dark gray instead of pure black */
            #00000038 10px,
            #ffcc0044 10px,
            /* Softer yellow */
            #ffcc0044 20px);
    /* Black and yellow stripes with reduced intensity */
    color: #ff3333;
    /* Red text for better contrast */
    border: 2px solid #000000;
    /* Softer yellow border */
    padding: 12px 24px;
    /* Increased padding for larger button */
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.8rem;
    /* Increased font size */
    text-shadow: 1px 1px 2px #000000;
    /* Slight shadow on text */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-ultra-danger:hover {
    box-shadow: 0 0 15px #ffeb99,
        /* Softer yellow glow on hover */
        0 0 5px rgb(0, 0, 0) inset;
    /* Inner softer orange glow */
    color: #ff0000;
    /* Lighter red on hover for emphasis */
    transform: translateY(-2px);
    /* Slight lift effect */
}

.btn-ultra-danger::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 235, 153, 0.3),
            /* Softer yellow shine */
            transparent);
}

/* FIN PUBLIC Website */

/* ROADMAP Website */

/* ROADMAP Sci-Fi Spatial Theme */

:root {
    --space-dark: #0b1021;
    --space-blue: #192042;
    --space-highlight: #2d6cdf;
    --space-accent: #64c7ff;
    --space-glow: #00aaff;
    --space-success: #0cce6b;
    --space-grid: rgba(65, 132, 220, 0.1);
    --space-item-bg: rgba(25, 40, 88, 0.7);
    --space-border: rgba(65, 132, 220, 0.25);
}

body {
    color: #fff;
    margin: 0;
    padding: 20px;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

.toggle-btn {
    cursor: pointer;
    background: rgba(30, 55, 110, 0.3);
    color: var(--space-accent);
    padding: 8px 16px;
    border: 1px solid var(--space-border);
    border-radius: 30px;
    display: inline-block;
    transition: all 0.3s ease;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.9rem;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.1);
    margin-right: 10px;
}

.toggle-btn:hover {
    background-color: rgba(30, 55, 110, 0.6);
    color: #ffffff;
    box-shadow: 0 0 20px rgba(0, 170, 255, 0.3);
    transform: translateY(-2px);
}

.toggle-btn:active {
    transform: translateY(1px);
}

.toggle-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0));
    transform: rotate(30deg);
    opacity: 0;
    transition: opacity 0.3s;
}

.toggle-btn:hover::after {
    opacity: 0.1;
}

.major-block {
    margin-bottom: 40px;
    border: 1px solid var(--space-border);
    border-radius: 10px;
    padding: 15px;
    background: rgba(15, 25, 50, 0.5);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    animation: glowPulse 8s infinite alternate;
}

@keyframes glowPulse {
    0% {
        box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
    }

    100% {
        box-shadow: 0 5px 30px rgba(0, 170, 255, 0.2);
    }
}

.major-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--space-highlight), transparent);
    opacity: 0.5;
}

.major-header {
    font-size: 1.4em;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 15px;
    position: relative;
    padding: 8px 15px;
    color: #ffffff;
    display: flex;
    align-items: center;
    border-radius: 5px;
    transition: all 0.3s ease;
    text-shadow: 0 0 15px rgba(100, 199, 255, 0.5);
}

.major-header::after {
    content: '►';
    position: absolute;
    right: 15px;
    transition: transform 0.3s ease;
    color: var(--space-accent);
    font-size: 0.9em;
    transform: rotate(90deg);
}

.major-content {
    display: block;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.roadmap-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 10px 0;
}

.version-column {
    flex: 1;
    min-width: 250px;
    padding: 15px;
    border-radius: 10px;
    background: rgba(25, 40, 88, 0.3);
    border: 1px solid var(--space-border);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.version-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right,
            rgba(100, 199, 255, 0.1),
            transparent 70%);
    z-index: 0;
}

.version-column:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.version-header {
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
    padding: 8px 5px;
    background: rgba(45, 108, 223, 0.2);
    color: var(--space-accent);
    position: relative;
    z-index: 1;
    border-bottom: 1px solid var(--space-border);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.1rem;
    border-radius: 5px;
}

.category-block {
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

.category-header {
    position: relative;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 8px;
    background-color: var(--space-item-bg);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(100, 199, 255, 0.1);
}

.category-header span {
    position: relative;
    z-index: 3;
    font-weight: 600;
    display: block;
}

.category-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--progress, 0%);
    background: linear-gradient(90deg, var(--space-highlight), var(--space-glow));
    z-index: 1;
    transition: width 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0.7;
}

.category-header:hover {
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.2);
}

.item-list {
    display: none;
    margin-left: 15px;
    margin-top: 10px;
    transition: all 0.3s ease;
}

.item {
    padding: 8px 12px;
    margin: 8px 0;
    background-color: rgba(30, 55, 110, 0.2);
    border-radius: 5px;
    position: relative;
    transition: all 0.3s ease;
    border-left: 3px solid var(--space-border);
}

.item:hover {
    background-color: rgba(30, 55, 110, 0.4);
    transform: translateX(3px);
}

.item-progress-bar-container {
    background-color: rgba(30, 55, 110, 0.3);
    height: 6px;
    width: 100%;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 5px;
}

.item-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--space-highlight), var(--space-glow));
    transition: width 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
}

.item-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    filter: blur(3px);
    transform: skewX(-30deg);
    animation: shimmer 4s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) skewX(-30deg);
    }

    100% {
        transform: translateX(500%) skewX(-30deg);
    }
}

/* Style des barres de progression selon le pourcentage */
.category-header[data-progress="100"]::before {
    background: linear-gradient(90deg, #4facfe, #00f2fe);
}

.category-header[data-progress="0"]::before {
    background: linear-gradient(90deg, #ff5f6d, #ff9966);
    width: 5% !important;
}

/* Media queries pour responsive */
@media (max-width: 768px) {
    .roadmap-container {
        flex-direction: column;
    }

    .version-column {
        width: 100%;
    }
}

/* FIN ROADMAP Website */

/* COMMUNITY Website */



/* FIN COMMUNITY Website */

/* Adaptation du thème sombre pour la barre de navigation */
.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
    color: #ccc;
    /* Texte en gris clair pour une meilleure lisibilité */
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff;
    /* Texte blanc au survol pour plus de contraste */
}

.player-profile-link {
    background-color: #2f374b;
    color: white;
    padding: 0px;
    border-radius: 20px;
    transition: background-color 0.3s ease;
    /* Ajoute une transition douce pour le changement de couleur */
}

.player-profile-link h3,
.player-profile-link p {
    color: white;
    /* Assure que le texte des enfants soit aussi en blanc */
}

.player-profile-link:hover {
    background-color: #3f4b6b;
    /* Couleur plus claire pour le survol */
    cursor: pointer;
    /* Change le curseur pour indiquer que c'est cliquable */
}

#progress-bar {
    position: relative;
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: #557b8b;
}

#progress-bar::after {
    content: attr(aria-valuenow) '%';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.table>:not(caption)>*>* {
    color: rgb(255, 255, 255);
}

.table-striped {
    font-size: 0.8rem;
    /* Ajustez la taille du texte selon vos besoins */
    text-align: left;
}

.table-hover>tbody>tr:hover>* {
    --bs-table-accent-bg: var(--bs-table-hover-bg);
    color: #ffffff;
}

.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #13242c;
    border-radius: .25rem;
}

.background {
    background-color: #10171e;
}

.img-thumbnail {
    padding: .05rem;
    background-color: #557b8b;
    border: 1px solid #233a44;
    border-radius: .25rem;
    max-width: 100%;
    height: auto;
}

.energy-high {
    color: rgb(151, 0, 0);
}

.energy-normal {
    color: inherit;
}

.energy-bar {
    width: 100%;
    height: 20px;
    background-color: rgba(10, 18, 29, 0.82);
    border: 1px solid rgba(98, 127, 152, 0.3);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    /* Centrer verticalement le texte dans la barre */
    justify-content: center;
    /* Centrer horizontalement le texte dans la barre */
    position: relative;
    /* Pour positionner le texte correctement */
}

.energy-bar-fill {
    height: 100%;
    background-color: red;
    /* couleur de base qui sera modifiée par JS */
    border-radius: 999px;
    transition: width 2.5s ease-in-out, background-color 2.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    /* Par défaut, la largeur est 0% */
}

.energy-bar-percentage {
    color: #e6f1ff;
    font-weight: bold;
    /* Style du texte */
    position: absolute;
    /* Positionnement absolu pour rester centré */
    width: 100%;
    /* Pour couvrir toute la barre */
    text-align: center;
    /* Centrer le texte horizontalement */
}

/* CSS pour les boutons de package Relic Coin */
.package-btn {
    padding: 20px;
    border: 2px solid #ffd700;
    border-radius: 8px;
    background-color: #14233f;
    text-align: left;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.package-btn:hover {
    background-color: #153c86;
    border-color: #ffd700;
}

.package-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.package-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: #28a745;
}

.package-info {
    font-size: 1.2rem;
    color: #ffffff;
}

.package-bonus {
    color: #7dd3fc;
    font-weight: bold;
}

.package-ratio {
    font-size: 0.9rem;
    color: #fffddb;
}

/* FIN CSS pour les boutons de package Relic Coin */

.navbar-brand-custom {
    background-color: #1a1a1a;
    /* Couleur de fond personnalisée */
    padding: 10px 15px;
    /* Ajoutez du rembourrage pour améliorer l'apparence */
    border-radius: 5px;
    /* Ajoutez une bordure arrondie */
}

.sector-resource-group,
.ship-list-group,
.set-destination-group,
.sector-cargo-group {
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 10px;
    text-align: center;
}

.sector-resource-group ul,
.ship-list-group ul,
.set-destination-group ul,
.sector-cargo-group ul {
    list-style-type: none;
    /* Supprime les puces */
    padding: 0;
    /* Supprime le padding par défaut à gauche */
    margin: 0;
    /* Ajuste les marges si nécessaire */
    text-align: center;
    /* Alignement du texte à gauche pour un aspect naturel */
}

.sector-resource-group li,
.ship-list-group li,
.set-destination-group li,
.sector-cargo-group li {
    padding: 1px 0;
    /* Ajoute un peu d'espace vertical entre les éléments */
}

.fleet-container {
    position: relative;
    display: inline-block;
    /* Permet de gérer plusieurs vaisseaux côte à côte */
    width: 100px;
    /* Taille fixe pour toutes les images pour uniformité */
    height: 100px;
    /* Hauteur fixe pour maintenir le ratio */
    margin-right: 10px;
    /* Espacement entre les vaisseaux */
}

.fleet-quantity {
    position: absolute;
    top: 10;
    right: 10;
    background-color: #007bff;
    /* Couleur de fond (Bootstrap primary color) */
    color: white;
    /* Couleur du texte */
    padding: 3px 6px;
    /* Padding pour donner de l'espace au texte à l'intérieur du badge */
    font-size: 0.75em;
    /* Petite taille de texte pour le badge */
}

.fleet-cargo-capacity {
    position: absolute;
    top: 45px;
    left: 72px;
    padding: 5px;
    font-size: 0.75rem;
    background-color: rgba(52, 208, 235, 0.7);
    background-color: rgba(52, 208, 235, 0.7) !important;
    color: white;
    white-space: nowrap;
    display: inline-block;
    transform: translateX(calc(-100% + 28px)) !important;
}

.fleet-distortium-consumption {
    position: absolute;
    top: 23px;
    left: 72.2px;
    padding: 5px;
    font-size: 0.75rem;
    background-color: rgba(235, 95, 52, 0.7);
    background-color: rgba(235, 95, 52, 0.7) !important;
    color: white;
    white-space: nowrap;
    display: inline-block;
    transform: translateX(calc(-100% + 28px)) !important;
}

.fleet-name {
    position: absolute;
    bottom: 0;
    /* Positionne en bas de l'image */
    left: 0;
    width: 100%;
    /* Assure que le texte ne dépasse pas de l'image */
    background-color: rgba(0, 0, 0, 0.5);
    /* Fond noir transparent */
    color: white;
    /* Texte blanc pour contraste */
    font-size: 0.75em;
    /* Taille réduite pour s'adapter à l'espace */
    text-align: center;
    /* Centre le texte horizontalement */
    padding: 2px 0;
    /* Padding vertical pour détacher légèrement du bord */
    word-wrap: break-word;
    /* Permet au texte de retourner à la ligne si nécessaire */
    overflow-wrap: break-word;
    /* Assure la cassure des mots pour éviter le débordement */
}

.badge.bg-dark.fleet-ship {
    position: absolute;
    top: 0;
    /* Positionné juste sous l'image */
    left: 22;
    /* Centré horizontalement par rapport au conteneur */
    transform: translateX(-50%);
    /* Décalage pour centrer exactement le badge */
    border-radius: 10%;
    padding: 5px;
    font-size: 0.75rem;
    color: white;
    /* Assure que le texte est blanc */
    background-color: rgba(0, 0, 0, 0.5);
    /* Fond noir semi-transparent pour améliorer la visibilité */
}

/* MENU SIDEBAR ET NAV LINK V3 */

/* ========================================
   SIDEBAR - MENU SCI-FI EXODUS V3
   ======================================== */

/* Sidebar principale */
#sidebar {
    background: linear-gradient(180deg, var(--v3-fond2) 0%, var(--v3-fond) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    border-right: 2px solid var(--v3-bords);
    box-shadow:
        inset -5px 0 20px rgba(0, 183, 235, 0.1),
        4px 0 15px rgba(0, 0, 0, 0.8);
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Effet de particules d'arrière-plan animées */
#sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(26, 172, 189, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 183, 235, 0.03) 0%, transparent 50%);
    animation: pulse-glow 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* Section profil modernisée */
.profil-section {
    background: linear-gradient(135deg, var(--v3-fond3) 0%, var(--v3-fond2) 100%);
    padding: 0;
    margin-bottom: 1.5rem;
    text-align: center;
    border-radius: 0 0 1.5rem 1.5rem;
    border: 1px solid var(--v3-bords);
    border-top: none;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.9),
        inset 0 -2px 10px rgba(26, 172, 189, 0.2);
    position: relative;
    overflow: hidden;
}

.public-sidebar-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
}

.public-mobile-menu-header,
.profil-section,
.language-section,
.menu-footer {
    flex-shrink: 0;
}

.nav {
    min-height: 0;
}

.public-mobile-menu-toggle,
.public-mobile-menu-backdrop,
.public-mobile-menu-header,
.public-mobile-menu-close {
    display: none;
}

/* Username styling */
.profil-section h3 {
    color: var(--v3-white);
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 1rem 0 0.5rem;
    text-shadow:
        0 0 10px var(--v3-glow),
        0 0 20px rgba(26, 172, 189, 0.3);
    animation: glow-text 2s ease-in-out infinite alternate;
}

@keyframes glow-text {
    from {
        filter: brightness(1);
    }

    to {
        filter: brightness(1.1);
    }
}

.profil-section img {
    max-width: 100%;
    height: auto;
}

/* Avatar avec bordure holographique */
.profil-section img[alt="Avatar"] {
    transition: all 0.6s ease;
}

.profil-section img[alt="Avatar"]:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow:
        0 0 30px var(--v3-glow-intense),
        0 0 50px rgba(26, 172, 189, 0.4);
}

/* Level display */
.profil-section p {
    color: var(--v3-btn-primary);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

/* Boutons modernisés avec effet sci-fi */
.btn-note,
.btn-profile,
.btn-settings,
.btn-logout {
    position: relative;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    overflow: hidden;
    text-decoration: none;
}

.btn-note {
    background: linear-gradient(135deg, var(--v3-btn-note) 0%, #3a5a5d 100%);
    border-color: var(--v3-btn-primary);
    color: var(--v3-white);
}

.btn-profile {
    background: linear-gradient(135deg, var(--v3-accent) 0%, var(--v3-bords) 100%);
    border-color: var(--v3-btn-primary);
    color: var(--v3-white);
}

.btn-settings {
    background: linear-gradient(135deg, var(--v3-fond3) 0%, var(--v3-accent) 100%);
    border-color: var(--v3-btn-secondary);
    color: var(--v3-white);
}

.btn-logout {
    background: linear-gradient(135deg, var(--v3-btn-danger) 0%, #8b1414 100%);
    border-color: #ff3333;
    color: var(--v3-white);
}

/* Effet hover uniforme pour tous les boutons */
.btn-note:hover,
.btn-profile:hover,
.btn-settings:hover,
.btn-logout:hover {
    transform: translateY(-2px);
    box-shadow:
        0 5px 15px rgba(26, 172, 189, 0.4),
        0 0 20px var(--v3-glow);
    color: var(--v3-white);
}

/* Effet de scan au hover */
.btn-note::before,
.btn-profile::before,
.btn-settings::before,
.btn-logout::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-note:hover::before,
.btn-profile:hover::before,
.btn-settings:hover::before,
.btn-logout:hover::before {
    left: 100%;
}

/* Music controls styling */
.music-controls {
    padding: 0.5rem;
    margin: 0.5rem 0;
}

.btn-music {
    color: var(--v3-btn-primary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--v3-bords);
    border-radius: 1rem;
    background: rgba(46, 83, 99, 0.2);
}

.btn-music:hover {
    color: var(--v3-white);
    background: rgba(26, 172, 189, 0.3);
    box-shadow: 0 0 15px var(--v3-glow);
    transform: scale(1.05);
}

/* Cycle information avec animation */
#turn-info {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(26, 172, 189, 0.1) 0%, rgba(46, 83, 99, 0.2) 100%);
    border: 1px solid var(--v3-bords);
    border-radius: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Navigation principale modernisée */
.nav {
    flex-grow: 1;
    flex-wrap: nowrap;
    flex-shrink: 0;
    align-content: flex-start;
    padding: 0 0.5rem;
}

.nav-link {
    color: var(--v3-white);
    width: 100%;
    flex: 0 0 auto;
    margin-bottom: 0.5rem;
    padding: 0.8rem 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 1rem;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, transparent 0%, transparent 100%);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.nav-link img {
    width: 30px;
    height: 30px;
    margin-right: 12px;
    filter: brightness(0.9);
    transition: all 0.3s ease;
}

/* Effet de bordure animée au hover */
.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 1rem;
    padding: 1px;
    background: linear-gradient(45deg, var(--v3-btn-primary), var(--v3-glow), var(--v3-btn-primary));
    mask-composite: exclude;
    opacity: 0.1;
    transition: opacity 0.3s ease;
}

.nav-link:hover {
    color: var(--v3-white);
    background: linear-gradient(90deg, rgba(26, 172, 189, 0.1) 0%, rgba(46, 83, 99, 0.2) 100%);
    transform: translateX(8px);
    box-shadow:
        inset 0 0 20px rgba(26, 172, 189, 0.1),
        0 0 20px rgba(0, 183, 235, 0.2);
}

.nav-link:hover::before {
    opacity: 1;
}

.nav-link:hover img {
    filter: brightness(1.2) drop-shadow(0 0 5px var(--v3-glow));
    transform: rotate(10deg) scale(1.1);
}

/* État actif avec animation */
.nav-link.active {
    color: var(--v3-white);
    background: linear-gradient(90deg, rgba(26, 172, 189, 0.3) 0%, rgba(46, 83, 99, 0.4) 100%);
    border-color: var(--v3-btn-primary);
    box-shadow:
        inset 0 0 30px rgba(26, 172, 189, 0.2),
        0 0 30px rgba(0, 183, 235, 0.3),
        0 0 60px rgba(26, 172, 189, 0.1);
    animation: active-pulse 2s ease-in-out infinite;
}

@keyframes active-pulse {

    0%,
    100% {
        box-shadow:
            inset 0 0 30px rgba(26, 172, 189, 0.2),
            0 0 30px rgba(0, 183, 235, 0.3),
            0 0 60px rgba(26, 172, 189, 0.1);
    }

    50% {
        box-shadow:
            inset 0 0 40px rgba(26, 172, 189, 0.4),
            0 0 40px rgba(0, 183, 235, 0.4),
            0 0 80px rgba(26, 172, 189, 0.3);
    }
}

.nav-link.active img {
    filter: brightness(1.3) drop-shadow(0 0 8px var(--v3-glow));
}

/* Notification futuristes */


#notification-primary-count {
    background: var(--v3-btn-primary);
    right: 10px;
}

#notification-warning-count {
    background: var(--v3-btn-warning);
    right: 35px;
}

#notification-danger-count {
    background: var(--v3-btn-danger);
    right: 60px;
}

/* Footer modernisé */
.menu-bottom-separator {
    margin: 0 0 0.85rem;
    border: 0;
    border-top: 1px solid rgba(46, 83, 99, 0.45);
    box-shadow: 0 0 10px rgba(0, 183, 235, 0.08);
}

.menu-social-section {
    padding: 0 0 0.95rem;
    background: transparent;
}

.menu-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 999px;
    border: 1px solid rgba(46, 83, 99, 0.85);
    background: linear-gradient(135deg, rgba(59, 68, 92, 0.78) 0%, rgba(35, 43, 64, 0.92) 100%);
    color: var(--v3-btn-light);
    text-decoration: none;
    font-size: 1rem;
    transition: transform 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.menu-social-link:hover {
    color: var(--v3-white);
    border-color: var(--v3-btn-primary);
    background: linear-gradient(135deg, rgba(43, 86, 104, 0.95) 0%, rgba(35, 43, 64, 0.96) 100%);
    box-shadow:
        0 0 18px rgba(0, 183, 235, 0.2),
        inset 0 0 14px rgba(26, 172, 189, 0.12);
    transform: translateY(-2px);
}

.menu-footer {
    padding: 0 0.75rem 0.75rem;
    background: linear-gradient(180deg, transparent 0%, rgba(33, 35, 48, 0.8) 100%);
    font-size: 0.75rem;
    color: var(--v3-btn-secondary);
}

.menu-footer a {
    color: var(--v3-btn-primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.menu-footer a:hover {
    color: var(--v3-white);
    text-shadow: 0 0 10px var(--v3-glow);
}

.studio-logo {
    transition: all 0.3s ease;
}

.studio-logo:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px var(--v3-glow));
}

/* Modal modernisée */
.modal-content.bg-modal {
    background: linear-gradient(135deg, var(--v3-fond2) 0%, var(--v3-fond) 100%);
    border: 2px solid var(--v3-bords);
    border-radius: 1rem;
    box-shadow:
        0 0 50px rgba(0, 183, 235, 0.3),
        0 20px 60px rgba(0, 0, 0, 0.9);
}

.modal-header {
    border-bottom: 1px solid var(--v3-bords) !important;
    background: rgba(46, 83, 99, 0.2);
}

.modal-title {
    color: var(--v3-btn-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px var(--v3-glow);
}

/* Calculator futuriste */
.calculator {
    background: linear-gradient(135deg, var(--v3-fond3) 0%, var(--v3-fond2) 100%);
    border: 1px solid var(--v3-bords);
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: inset 0 0 20px rgba(0, 183, 235, 0.1);
}

.calculator-screen {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--v3-btn-primary);
    color: var(--v3-btn-primary);
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    text-align: right;
    box-shadow: inset 0 0 10px rgba(26, 172, 189, 0.3);
}

.calculator-keys button {
    background: linear-gradient(135deg, var(--v3-fond3) 0%, var(--v3-accent) 100%);
    border: 1px solid var(--v3-bords);
    color: var(--v3-white);
    transition: all 0.2s ease;
    margin: 0.2rem;
}

.calculator-keys button:hover {
    background: linear-gradient(135deg, var(--v3-accent) 0%, var(--v3-btn-primary) 100%);
    box-shadow: 0 0 15px var(--v3-glow);
    transform: scale(1.05);
}

.calculator-keys button:active {
    transform: scale(0.95);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Responsive design pour mobile - menu repliable */
@media (max-width: 768px) {
    #sidebar {
        position: relative;
        width: 0;
        min-width: 0;
        min-height: 0;
        padding: 0;
        background: transparent;
        border-right: none;
        border-bottom: none;
        box-shadow: none;
        overflow: visible;
    }

    body.public-menu-open {
        overflow: hidden;
    }

    .public-sidebar-shell {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(86vw, 23rem);
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
        background: linear-gradient(180deg, var(--v3-fond2) 0%, var(--v3-fond) 100%);
        border-right: 1px solid var(--v3-bords);
        box-shadow:
            inset -5px 0 20px rgba(0, 183, 235, 0.08),
            14px 0 34px rgba(0, 0, 0, 0.7);
        transform: translateX(-100%);
        transition: transform 0.28s ease, box-shadow 0.28s ease;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        z-index: 1060;
    }

    .profil-section {
        overflow: visible;
    }

    .nav {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
    }

    @supports (height: 100dvh) {
        .public-sidebar-shell {
            height: 100dvh;
            min-height: 100dvh;
            max-height: 100dvh;
        }
    }

    body.public-menu-open .public-sidebar-shell {
        transform: translateX(0);
    }

    .public-mobile-menu-toggle {
        position: fixed;
        top: 0.9rem;
        left: 0.9rem;
        z-index: 1070;
        width: 3.1rem;
        height: 3.1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(95, 128, 158, 0.55);
        border-radius: 1rem;
        background: linear-gradient(135deg, rgba(17, 27, 40, 0.96) 0%, rgba(24, 39, 56, 0.96) 100%);
        color: var(--v3-white);
        box-shadow:
            0 10px 24px rgba(0, 0, 0, 0.48),
            inset 0 0 14px rgba(26, 172, 189, 0.1);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .public-mobile-menu-toggle:hover,
    .public-mobile-menu-toggle:focus-visible,
    .public-mobile-menu-close:hover,
    .public-mobile-menu-close:focus-visible {
        color: var(--v3-white);
        border-color: var(--v3-btn-primary);
        box-shadow:
            0 0 18px rgba(0, 183, 235, 0.24),
            inset 0 0 18px rgba(26, 172, 189, 0.12);
    }

    .public-mobile-menu-toggle i,
    .public-mobile-menu-close i {
        font-size: 1.45rem;
        line-height: 1;
    }

    .public-mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1050;
        display: block;
        border: 0;
        padding: 0;
        background: rgba(4, 10, 18, 0.62);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    body.public-menu-open .public-mobile-menu-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .public-mobile-menu-header {
        display: flex;
        justify-content: flex-end;
        padding: 0.9rem 0.9rem 0;
    }

    .public-mobile-menu-close {
        width: 2.7rem;
        height: 2.7rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(95, 128, 158, 0.45);
        border-radius: 0.9rem;
        background: rgba(17, 27, 40, 0.72);
        color: var(--v3-btn-light);
    }

    .nav-link {
        font-size: 0.95rem;
        padding: 0.8rem 1rem;
    }

    .nav-link img {
        width: 24px;
        height: 24px;
    }

    .profil-section h3 {
        font-size: 1rem;
    }

    .language-section {
        margin: 0 0.5rem 1rem;
    }

    .public-menu-tool {
        padding: 0.75rem 0.8rem;
    }

    .public-menu-tool-text {
        font-size: 0.77rem;
    }

    .public-menu-tool-tag {
        font-size: 0.68rem;
    }

    .public-menu-language {
        padding: 0.6rem 0.5rem;
    }

    .public-menu-language-label {
        font-size: 0.74rem;
    }

    .menu-footer {
        padding-bottom: 1rem;
    }
}

.public-sidebar-shell::-webkit-scrollbar {
    width: 6px;
}

.public-sidebar-shell::-webkit-scrollbar-track {
    background: rgba(11, 19, 30, 0.92);
}

.public-sidebar-shell::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--v3-btn-primary) 0%, var(--v3-bords) 100%);
    border-radius: 999px;
}

.public-sidebar-shell::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--v3-glow-intense) 0%, var(--v3-btn-primary) 100%);
}

/* Animations supplémentaires pour les éléments interactifs */
@keyframes data-stream {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

/* Scrollbar personnalisée */
#sidebar::-webkit-scrollbar {
    width: 6px;
}

#sidebar::-webkit-scrollbar-track {
    background: var(--v3-fond);
}

#sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--v3-btn-primary) 0%, var(--v3-bords) 100%);
    border-radius: 3px;
}

#sidebar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--v3-glow-intense) 0%, var(--v3-btn-primary) 100%);
}

/* Effet de chargement pour le turn info */
#turn-info.text-warning {
    animation: loading-pulse 1s ease-in-out infinite;
}

@keyframes loading-pulse {

    0%,
    100% {
        opacity: 0.5;
        box-shadow: 0 0 10px var(--v3-btn-warning);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 20px var(--v3-btn-warning);
    }
}

/* États de danger et succès */
#turn-info.text-danger {
    color: var(--v3-btn-danger) !important;
    animation: danger-flash 0.5s ease-in-out infinite;
}

@keyframes danger-flash {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

#turn-info.text-white {
    color: var(--v3-white) !important;
}

/* FIN MENU SIDEBAR ET NAV LINK V3 */

.module {
    background-color: #212330;
    margin-bottom: 2rem;
    padding: 0;
    /* Removed padding */
    border: 2px solid #233a45;
}

.module-header {
    background-color: #232b40;
    padding: 0.1rem 1rem;
    margin-bottom: -1px;
    /* Negative margin to pull the header up to cover the module border */
    border-radius: 0.5rem 0.5rem 0 0;
}

/* MAIN CONTENT (FOND) V3 */

/* Main Content Principal */
#main-content {
    background: var(--v3-fond);
    border: 2px solid var(--v3-bords);
    border-radius: 1rem;
    max-width: 100%;
    padding: 2rem;
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow:
        inset 0 0 30px rgba(0, 183, 235, 0.1),
        0 0 40px rgba(0, 0, 0, 0.5),
        0 4px 20px rgba(26, 172, 189, 0.1);
    transition: all 0.3s ease;
}

/* Ligne animée sous les titres */
#main-content h1::after,
#main-content h2::after {
    content: '';
    bottom: -1px;
    left: 0;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--v3-btn-primary), transparent);
    animation: expand-line 5s ease-in-out infinite;
}

@keyframes expand-line {

    0%,
    100% {
        width: 100px;
    }

    50% {
        width: 400px;
    }
}

/* Paragraphes et texte */
#main-content p {
    color: var(--v3-white);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Tables futuristes */
#main-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(35, 43, 64, 0.3);
    border: 1px solid var(--v3-bords);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 183, 235, 0.1);
}

#main-content th {
    background: linear-gradient(135deg, var(--v3-accent) 0%, var(--v3-fond3) 100%);
    color: var(--v3-white);
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--v3-btn-primary);
}

#main-content td {
    padding: 0.8rem 1rem;
    color: var(--v3-white);
    border-bottom: 1px solid rgba(46, 83, 99, 0.3);
    transition: all 0.3s ease;
}

#main-content tr:hover td {
    background: rgba(26, 172, 189, 0.1);
    box-shadow: inset 0 0 20px rgba(0, 183, 235, 0.1);
}

/* Cards et boîtes */
#main-content .card {
    border: 1px solid var(--v3-bords);
    border-radius: 0.5rem;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(0, 183, 235, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

#main-content .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--v3-btn-primary), transparent);
    animation: card-scan 3s linear infinite;
}

@keyframes card-scan {
    to {
        left: 100%;
    }
}

#main-content .card:hover {
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.7),
        0 0 30px rgba(26, 172, 189, 0.2),
        inset 0 0 30px rgba(0, 183, 235, 0.1);
}

/* Formulaires futuristes */
#main-content input[type="text"],
#main-content input[type="email"],
#main-content input[type="password"],
#main-content input[type="number"],
#main-content select,
#main-content textarea {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--v3-bords);
    border-radius: 0.5rem;
    color: var(--v3-white);
    padding: 0.8rem 1rem;
    width: 100%;
    transition: all 0.3s ease;
    font-family: inherit;
}

#main-content select:focus,
#main-content textarea:focus {
    outline: none;
    border-color: var(--v3-btn-primary);
    background: rgba(0, 0, 0, 0.6);
    box-shadow:
        0 0 20px rgba(26, 172, 189, 0.3),
        inset 0 0 10px rgba(0, 183, 235, 0.1);
}

/* Ajouter des styles pour les <option> */
#main-content select option {
    background: rgb(37, 79, 95);
    /* Fond du menu déroulant */
    color: var(--v3-white);
    /* Couleur du texte */
}

/* Scrollbar personnalisée pour tout le site */
html::-webkit-scrollbar {
    width: 12px;
}

html::-webkit-scrollbar-track {
    background: var(--v3-fond);
    border-radius: 5px;
}

html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--v3-btn-primary) 0%, var(--v3-bords) 100%);
    border-radius: 5px;
    border: 1px solid var(--v3-fond);
}

html::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--v3-glow-intense) 0%, var(--v3-btn-primary) 100%);
    box-shadow: 0 0 10px var(--v3-glow);
}

/* Main Content Quadrant (pour les vues spéciales) */
#main-content-quadrant {
    background:
        radial-gradient(ellipse at center, var(--v3-fond2) 0%, var(--v3-fond) 100%),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="rgba(26, 172, 189, 0.1)"/></svg>') repeat;
    background-size: 100% 100%, 20px 20px;
    border: 2px solid var(--v3-bords);
    border-radius: 1rem;
    max-width: 100%;
    max-height: 100vh;
    overflow: hidden;
    position: relative;
    box-shadow:
        inset 0 0 40px rgba(0, 183, 235, 0.15),
        0 0 50px rgba(0, 0, 0, 0.7);
}

/* Effet de bordure pulsante pour quadrant */
#main-content-quadrant::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg,
            var(--v3-btn-primary),
            transparent,
            var(--v3-btn-primary),
            transparent,
            var(--v3-btn-primary));
    border-radius: 1rem;
    opacity: 0.5;
    z-index: -1;
}

/* Alertes futuristes */
#main-content .alert {
    background: linear-gradient(135deg, rgba(35, 43, 64, 0.8) 0%, rgba(33, 35, 48, 0.8) 100%);
    border: 1px solid;
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    position: relative;
    overflow: hidden;
    color: var(--v3-white);
}

#main-content .alert::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

#main-content .alert-primary {
    border-color: var(--v3-btn-primary);
    color: var(--v3-btn-primary);
}

#main-content .alert-danger {
    border-color: var(--v3-btn-danger);
    color: var(--v3-btn-danger);
}

#main-content .alert-warning {
    border-color: var(--v3-btn-warning);
    color: var(--v3-btn-warning);
}

#main-content .alert-success {
    border-color: var(--v3-btn-success);
    color: var(--v3-btn-success);
}

/* Effet de chargement pour le contenu */
.content-loading {
    position: relative;
    overflow: hidden;
}

.content-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(26, 172, 189, 0.2),
            transparent);
    animation: loading-sweep 1.5s linear infinite;
}

@keyframes loading-sweep {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    #main-content {
        max-height: 100vh;
        overflow-y: auto;
        padding: 1rem;
        border-radius: 0.5rem;
    }

    #main-content h1,
    #main-content h2 {
        font-size: 1.5rem;
    }

    #main-content-quadrant {
        border-radius: 0.5rem;
    }
}

/* Classes utilitaires pour animations */
.pulse-glow {
    animation: pulse-glow-effect 2s ease-in-out infinite;
}

@keyframes pulse-glow-effect {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(26, 172, 189, 0.4);
    }

    50% {
        box-shadow: 0 0 40px rgba(26, 172, 189, 0.8);
    }
}

.scan-line {
    position: relative;
    overflow: hidden;
}

.scan-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(26, 172, 189, 0.4),
            transparent);
    animation: scan-pass 2s linear infinite;
}

@keyframes scan-pass {
    to {
        left: 100%;
    }
}

/* FIN MAIN CONTENT (FOND) V3 */

.module-content {
    padding: 1rem;
    /* Padding moved here from .module */
}

#notifications {
    height: 100px;
}

.filter-btn {
    width: 100px;
    /* Largeur fixe pour les boutons de couleur */
}

.filter-btn2 {
    width: auto;
    /* Largeur auto pour le champ de date et son bouton */
}

.construction-item {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(95, 128, 158, 0.24);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(15, 23, 36, 0.94) 0%, rgba(10, 17, 28, 0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.construction-item + .construction-item {
    margin-top: 8px;
}

.construction-item-main {
    flex: 1 1 auto;
    min-width: 0;
}

.construction-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.construction-kind,
.construction-status,
.construction-item-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.construction-kind {
    padding: 6px 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid rgba(95, 128, 158, 0.28);
    background: rgba(18, 29, 44, 0.82);
    color: #bfdcff;
}

.construction-kind-building {
    color: #92caff;
}

.construction-kind-defense {
    color: #7de2c4;
}

.construction-kind-fleet {
    color: #ffd57c;
}

.construction-kind-production {
    color: #8fe0ff;
}

.construction-kind-assembly {
    color: #ffdea1;
}

.construction-status {
    padding: 6px 9px;
    border: 1px solid rgba(120, 158, 191, 0.24);
}

.construction-status-pending {
    background: rgba(86, 103, 124, 0.18);
    color: #c4d4e4;
}

.construction-status-active {
    background: rgba(33, 104, 163, 0.2);
    color: #80cfff;
    border-color: rgba(92, 168, 226, 0.35);
}

.construction-status-stalled {
    background: rgba(125, 68, 22, 0.22);
    color: #ffd39a;
    border-color: rgba(212, 146, 79, 0.34);
}

.construction-item-title {
    color: #edf6ff;
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.construction-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.construction-item-chip {
    padding: 6px 9px;
    background: rgba(12, 20, 31, 0.82);
    border: 1px solid rgba(95, 128, 158, 0.22);
    color: #a7c4df;
}

.construction-item-chip i {
    color: #7ebeff;
}

.button-build-cancel {
    flex: 0 0 auto;
    width: 100%;
}

.construction-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid rgba(220, 53, 69, 0.42);
    background: linear-gradient(180deg, rgba(120, 30, 40, 0.95) 0%, rgba(88, 22, 31, 0.98) 100%);
    color: #ffe0e3;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.construction-cancel-btn:hover,
.construction-cancel-btn:focus {
    color: #fff4f5;
    border-color: rgba(255, 110, 110, 0.54);
    box-shadow: 0 8px 18px rgba(92, 18, 29, 0.34);
}

.construction-cancel-btn span {
    white-space: nowrap;
}

.construction-cancel-modal .modal-content {
    background: linear-gradient(180deg, rgba(20, 30, 44, 0.98) 0%, rgba(11, 19, 30, 0.98) 100%);
    color: #e6f1ff;
    border: 1px solid rgba(95, 128, 158, 0.42);
}

.construction-cancel-modal .modal-header {
    border-bottom: 1px solid rgba(95, 128, 158, 0.28);
}

.construction-cancel-modal .modal-footer {
    border-top: 1px solid rgba(95, 128, 158, 0.28);
}

.construction-cancel-modal .btn-close {
    filter: invert(1);
}

@media (max-width: 767.98px) {
    .construction-item-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .button-build-cancel,
    .construction-cancel-btn {
        width: 100%;
    }
}

#actions {
    height: 100px;
}

.icon {
    width: 40px;
    /* ajustez ceci selon la taille désirée */
    height: 40px;
    /* ajustez ceci selon la taille désirée */
}

.badge {
    transform: translate(50%, -50%);
}

#cell-info {
    position: absolute;
    z-index: 1000;
    background-color: #000;
    opacity: 0.90;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    display: none;
    /* Masquée par défaut */
}

#cell-info.show {
    display: block;
    /* Montrer la bulle d'information */
}

.beta-version {
    font-weight: bold;
    /* Exemple : met le texte en gras */
    color: #ad4646;
    /* Exemple : change la couleur du texte */
    font-size: 0.8em;
    /* Exemple : réduit la taille du texte */
}

.language-section {
    margin: 0 0.75rem 1.25rem;
}

.public-menu-tools {
    display: grid;
    gap: 0.45rem;
}

.public-menu-tool {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.72rem 0.9rem;
    border-radius: 1rem;
    border: 1px solid transparent;
    background: linear-gradient(90deg, transparent 0%, transparent 100%);
    color: var(--v3-white);
    text-decoration: none;
    box-shadow: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.public-menu-tool-icon {
    flex: 0 0 2.2rem;
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    border: 1px solid var(--v3-bords);
    background: linear-gradient(135deg, rgba(59, 68, 92, 0.72) 0%, rgba(43, 86, 104, 0.68) 100%);
    color: var(--v3-btn-primary);
    font-size: 1rem;
    box-shadow: inset 0 0 10px rgba(0, 183, 235, 0.08);
}

.public-menu-tool-text {
    min-width: 0;
    flex: 1 1 auto;
    color: var(--v3-white);
    font-size: 0.83rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.public-menu-tool-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0.32rem 0.58rem;
    border-radius: 999px;
    border: 1px solid rgba(46, 83, 99, 0.85);
    background: rgba(33, 35, 48, 0.92);
    color: var(--v3-btn-light);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.public-menu-language-row {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.15rem;
}

.public-menu-language {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-height: 2.55rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.95rem;
    border: 1px solid transparent;
    background: linear-gradient(90deg, transparent 0%, transparent 100%);
    color: var(--v3-btn-light);
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.public-menu-language:hover {
    color: var(--v3-white);
    transform: translateY(-1px);
    border-color: var(--v3-btn-primary);
    background: linear-gradient(90deg, rgba(26, 172, 189, 0.1) 0%, rgba(46, 83, 99, 0.2) 100%);
    box-shadow:
        inset 0 0 20px rgba(26, 172, 189, 0.1),
        0 0 20px rgba(0, 183, 235, 0.16);
}

.public-menu-language.is-active {
    color: var(--v3-white);
    border-color: var(--v3-btn-primary);
    background: linear-gradient(90deg, rgba(26, 172, 189, 0.24) 0%, rgba(46, 83, 99, 0.34) 100%);
    box-shadow:
        inset 0 0 24px rgba(26, 172, 189, 0.16),
        0 0 22px rgba(0, 183, 235, 0.2);
}

.public-menu-language-flag {
    font-size: 1rem;
    line-height: 1;
}

.public-menu-language-label {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

#move-fleet-btn {
    background-color: #0b2744;
    /* Couleur de fond bleu Bootstrap */
    color: white;
    /* Texte blanc */
    border: none;
    /* Pas de bordure */
    padding: 5px 10px;
    /* Padding intérieur */
    margin: 5px 0;
    /* Marge extérieure */
    cursor: pointer;
    /* Curseur en forme de pointeur pour indiquer que c'est cliquable */
    border-radius: 5px;
    /* Bordures arrondies */
}

#move-fleet-btn:hover {
    background-color: #0e3252;
    /* Couleur de fond plus foncée au survol */
}

.btn-custom {
    background-color: #0b2744;
    border-color: #174777;
}

.btn-custom:hover {
    background-color: #0e3252;
    border-color: #0e3252;
}

#universe-grid {
    display: grid;
    grid-template-columns: repeat(50, 80px);
    /* 50 colonnes de 40px de large */
    grid-template-rows: repeat(50, 80px);
    /* 50 lignes de 40px de haut */
    gap: 1px;
    /* Espacement entre les cellules */
    border-collapse: separate;
    border-spacing: 0;
    user-select: none;
    background-color: #000;
    /* Fond noir pour l'espace */
    border: 1px solid #174777;
    /* Bordure bleu foncé */
    padding: 10px;
    border-radius: 0px;
    max-width: 100%;
    overflow: auto;
    /* Permet le défilement */
    width: auto;
    max-height: 80vh;
}

body {
    background-color: #10171e;
    color: #ececec;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0px;
    box-sizing: border-box;
}

/* Informations sur la piste en cours */
.music-track-info {
    margin-top: 10px;
    text-align: center;
}

/* Barre de progression (remplissage) */
.music-progress-bar {
    height: 100%;
    background: #3c8dbc;
    width: 0%;
    border-radius: 4px;
}

/* Informations sur le temps */
.music-time-info {
    display: flex;
    justify-content: space-between;
    width: 300px;
    font-size: 14px;
    margin-top: 5px;
}

/* Image de pochette */
.music-cover-image {
    width: 300px;
    height: 300px;
    margin-top: 10px;
    object-fit: cover;
    /* si on utilise une vraie image */
}

.music-player-container {
    width: 300px;
    margin: auto;
    text-align: center;
}

.music-progress-container {
    width: 100%;
    height: 20px;
    background: #ddd;
    margin: 10px 0;
    cursor: pointer;
    position: relative;
}

.music-progress-bar {
    height: 100%;
    width: 0%;
    background: #2196F3;
}

.music-time-info {
    display: flex;
    justify-content: space-between;
}

#visualizerCanvas {
    background: transparent;
}

.nav-tabs .nav-item {
    margin-right: 8px;
    /* Espace horizontal entre les onglets */
}

.nav-tabs .nav-link {
    background-color: #2c344c;
    /* Fond des onglets inactifs */
    border: 1px solid #ffffff;
    /* Bordure blanche pour contraste */
    color: #ffffff;
    /* Texte blanc */
    font-weight: 500;
    /* Texte légèrement gras */
    padding: 12px 20px;
    /* Padding généreux pour des onglets plus grands */
    border-radius: 6px 6px 0 0;
    /* Arrondi en haut */
    transition: all 0.3s ease;
    /* Animation fluide */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* Ombre subtile */
}

.nav-tabs .nav-link:hover {
    background-color: #3b4463;
    /* Couleur au survol */
    border-color: #ffffff;
    color: #ffffff;
}

.nav-tabs .nav-link.active {
    background-color: #0056b3;
    /* Couleur vive pour l'onglet actif */
    border: 1px solid #ffffff;
    border-bottom: none;
    /* Pas de bordure inférieure pour l'onglet actif */
    color: #ffffff;
    font-weight: 600;
    /* Texte plus gras */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    /* Ombre plus marquée */
}

.nav-tabs .nav-link:active {
    transform: scale(0.98);
    /* Effet de pression au clic */
    background-color: #0056b3;
    /* Couleur plus foncée au clic */
}

/* PAGINATION */

/* Réinitialisation et style de base */
.pagination {
    --transition-speed: 0.3s;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 20px 0;
}

/* Style des éléments de la pagination */
.page-item {
    list-style: none;
}

/* Style des liens de pagination */
.page-link {
    background: var(--v3-fond);
    color: var(--v3-white);
    border: 1px solid var(--v3-accent);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    transition: all var(--transition-speed) ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 183, 235, 0.2);
    text-decoration: none;
}

/* Effet de survol */
.page-link:hover {
    background: var(--sci-fi-accent);
    color: var(--sci-fi-blue);
    box-shadow: 0 0 20px var(--sci-fi-glow);
    transform: translateY(-2px);
}

/* Élément actif */
.page-item.active .page-link {
    background: var(--sci-fi-accent);
    color: var(--sci-fi-blue);
    border-color: var(--sci-fi-white);
    box-shadow: 0 0 15px var(--sci-fi-glow), inset 0 0 5px var(--sci-fi-white);
    z-index: 1;
}

/* Élément désactivé */
.page-item.disabled .page-link {
    background: var(--sci-fi-blue);
    color: rgba(230, 240, 250, 0.5);
    border-color: rgba(0, 183, 235, 0.3);
    cursor: not-allowed;
    box-shadow: none;
}

/* Animation de pulsation pour l'élément actif */
.page-item.active .page-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    opacity: 0;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

/* Style pour les flèches (précédent/suivant) */
.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 8px;
    font-size: 1.2rem;
    padding: 8px 12px;
}

/* Responsive : ajuste la taille pour les petits écrans */
@media (max-width: 576px) {
    .page-link {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}

/* FIN PAGINATION */




form {
    max-width: 500px;
    margin: 5px auto;
    border-radius: 5px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input[type="text"],
.form-group input[type="password"] {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: none;
    border-radius: 4px;
    background-color: #333;
    /* Fond plus clair pour les inputs */
    color: #ddd;
    /* Texte en gris plus clair pour les inputs */
}

.button-launch-order {
    background-color: #333;
    background-image: repeating-linear-gradient(45deg,
            #333,
            #333 10px,
            #fdd835 10px,
            #fdd835 20px);
    color: white;
    border: none;
    padding: 2px 20px;
    font-weight: bold;
    font-size: 24px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    background-size: auto;
    text-shadow:
        0px 0px 8px rgba(0, 0, 0, 1),
        0px 0px 8px rgba(0, 0, 0, 1),
        0px 0px 5px rgba(0, 0, 0, 1);
}

.button-launch-order:hover {
    background-color: #333;
    color: #ff0000;
    /* Changement de la couleur du texte au survol */
    background-image: repeating-linear-gradient(45deg,
            #333,
            #333 10px,
            #8b0000 10px,
            #8b0000 20px);
}

button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    /* Une couleur bleue pour le bouton */
    color: white;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
    /* Assombrir le bouton au survol */
}

.h-captcha {
    margin-bottom: 15px;
    /* Espacement pour le captcha */
}



h1 {
    color: #519ae2;
    /* Couleur pour les titres */
}

h2 {
    color: #519ae2;
    /* Couleur pour les titres */
}

.emoji-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 1rem;
}

.exodus-border {
    border: 2px solid #233a44 !important;
    /* Définit la couleur de la bordure en jaune */
}

/* Nouveau bouton Theme V3 */

.btn-primary {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--v3-btn-primary) 0%, rgba(0, 212, 255, 0.7) 100%);
    border: 1px solid var(--v3-btn-primary);
    color: var(--v3-white);
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: var(--v3-btn-primary);
    box-shadow: 0 0 15px var(--v3-glow);
    transform: translateY(-2px);
}

.btn-primary:disabled {
    background: var(--v3-fond);
    border: 1px solid var(--v3-fond);
    color: var(--v3-btn-secondary);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Bouton danger V3 inspiré du style sci-fi */
.btn-danger {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--v3-btn-danger) 0%, rgba(192, 26, 59, 0.7) 100%);
    border: 1px solid var(--v3-btn-danger);
    color: var(--v3-white);
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-danger:hover {
    background: var(--v3-btn-danger);
    box-shadow: 0 0 15px var(--v3-btn-danger);
    transform: translateY(-2px);
}

.btn-danger:disabled {
    background: var(--v3-fond);
    border: 1px solid var(--v3-fond);
    color: var(--v3-btn-secondary);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Bouton warning V3 inspiré du style sci-fi */
.btn-warning {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--v3-btn-warning) 0%, rgba(211, 151, 32, 0.7) 100%);
    border: 1px solid var(--v3-btn-warning);
    color: var(--v3-white);
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-warning:hover {
    background: var(--v3-btn-warning);
    box-shadow: 0 0 15px var(--v3-btn-warning);
    transform: translateY(-2px);
}

.btn-warning:disabled {
    background: var(--v3-fond);
    border: 1px solid var(--v3-fond);
    color: var(--v3-btn-secondary);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Bouton light V3 inspiré du style sci-fi */
.btn-light {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--v3-btn-light) 0%, rgba(236, 236, 236, 0.7) 100%);
    border: 1px solid var(--v3-btn-light);
    color: var(--v3-fond);
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-light:hover {
    background: var(--v3-btn-light);
    box-shadow: 0 0 15px var(--v3-btn-light);
    transform: translateY(-2px);
}

.btn-light:disabled {
    background: var(--v3-fond);
    border: 1px solid var(--v3-fond);
    color: var(--v3-btn-secondary);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-secondary {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--v3-btn-secondary) 0%, rgba(173, 173, 173, 0.7) 100%);
    border: 1px solid var(--v3-btn-secondary);
    color: var(--v3-fond);
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: var(--v3-btn-secondary);
    box-shadow: 0 0 15px var(--v3-btn-secondary);
    transform: translateY(-2px);
}

.btn-secondary:disabled {
    background: var(--v3-fond);
    border: 1px solid var(--v3-fond);
    color: var(--v3-btn-secondary);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Bouton success V3 inspiré du style sci-fi */
.btn-success {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--v3-btn-success) 0%, rgba(26, 189, 71, 0.7) 100%);
    border: 1px solid var(--v3-btn-success);
    color: var(--v3-white);
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-success:hover {
    background: var(--v3-btn-success);
    box-shadow: 0 0 15px var(--v3-btn-success);
    transform: translateY(-2px);
}

.btn-success:disabled {
    background: var(--v3-fond);
    border: 1px solid var(--v3-fond);
    color: var(--v3-btn-secondary);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-note {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--v3-btn-note) 0%, rgba(70, 107, 110, 0.7) 100%);
    border: 1px solid var(--v3-bords);
    color: var(--v3-white);
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-note:hover {
    background: var(--v3-btn-note);
    box-shadow: 0 0 15px var(--v3-glow);
    transform: translateY(-2px);
}

.btn-note:disabled {
    background: var(--v3-fond);
    border: 1px solid var(--v3-fond);
    color: var(--v3-btn-secondary);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Bouton settings V3 inspiré du style sci-fi */
.btn-settings {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--v3-btn-primary) 0%, rgba(0, 212, 255, 0.7) 100%);
    border: 1px solid var(--v3-bords);
    color: var(--v3-white);
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-settings:hover {
    background: var(--v3-btn-primary);
    box-shadow: 0 0 15px var(--v3-glow);
    transform: translateY(-2px);
}

.btn-settings:disabled {
    background: var(--v3-fond);
    border: 1px solid var(--v3-fond);
    color: var(--v3-btn-secondary);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Bouton logout V3 inspiré du style sci-fi */
.btn-logout {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--v3-btn-danger) 0%, rgba(192, 26, 26, 0.7) 100%);
    border: 1px solid var(--v3-bords);
    color: var(--v3-white);
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-logout:hover {
    background: var(--v3-btn-danger);
    box-shadow: 0 0 15px var(--v3-btn-danger);
    transform: translateY(-2px);
}

.btn-logout:disabled {
    background: var(--v3-fond);
    border: 1px solid var(--v3-fond);
    color: var(--v3-btn-secondary);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Bouton profile V3 inspiré du style sci-fi */
.btn-profile {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--v3-btn-secondary) 0%, rgba(173, 173, 173, 0.7) 100%);
    border: 1px solid var(--v3-bords);
    color: var(--v3-fond);
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-profile:hover {
    background: var(--v3-btn-secondary);
    box-shadow: 0 0 15px var(--v3-btn-secondary);
    transform: translateY(-2px);
}

.btn-profile:disabled {
    background: var(--v3-fond);
    border: 1px solid var(--v3-fond);
    color: var(--v3-btn-secondary);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-music {
    display: inline-block;
    font-weight: 600;
    line-height: 1.5;
    color: var(--v3-white);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(135deg, var(--v3-btn-dark) 0%, rgba(65, 65, 65, 0.7) 100%);
    border: 1px solid var(--v3-bords);
    padding: 0.375rem 0.75rem;
    font-size: 0.6rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-music:hover {
    background: var(--v3-btn-dark);
    color: var(--v3-white);
    box-shadow: 0 0 15px var(--v3-glow);
    transform: translateY(-2px);
}

.btn-music:disabled {
    background: var(--v3-fond);
    border: 1px solid var(--v3-fond);
    color: var(--v3-btn-secondary);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* FIN Nouveau bouton Theme V3 */

.calculator {
    border: 1px solid #233a44;
    border-radius: 5px;
    width: 480px;
}

.calculator-screen {
    width: 100%;
    height: 80px;
    border: none;
    background-color: #212330;
    color: #fff;
    text-align: right;
    padding-right: 20px;
    padding-left: 10px;
    font-size: 4rem;
}

.equal-sign {
    height: 100%;
    grid-area: 2 / 4 / 6 / 5;
}

.calculator-keys {
    display: grid;
    background-color: #3b3d4d;
    /* Fond blanc pour l'input */

    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    padding: 20px;
}

.accordion-body {
    margin: 5px auto;
    background-color: #232b40;
    /* Fond blanc pour l'input */
    color: #ffffff;
    /* Texte foncé pour une bonne visibilité */
    border: 2px solid #233a44;
    /* Bordure subtile */
}

.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
    background-color: #334369;
    border: 2px solid #233a44;
    /* Bordure subtile */
    color: #ffffff;
}

.accordion-item:first-of-type {
    border-top-left-radius: .50rem;
    border-top-right-radius: .50rem;
    background-color: #334369;
    border: 2px solid #233a44;
    /* Bordure subtile */
}

.accordion-item:last-of-type .accordion-button.collapsed {
    border-top-left-radius: .50rem;
    border-top-right-radius: .50rem;
    background-color: #334369;
    border: 2px solid #233a44;
    /* Bordure subtile */
    color: #ffffff;
}

.accordion-item:last-of-type {
    background-color: #334369;
    border: 2px solid #233a44;
    /* Bordure subtile */
}

.accordion-button:not(.collapsed) {
    border-top-left-radius: .50rem;
    border-top-right-radius: .50rem;
    background-color: #334369;
    border: 2px solid #233a44;
    /* Bordure subtile */
    color: #ffffff;
}

.form-control {
    margin: 5px auto;
    background-color: #3b3d4d;
    /* Fond blanc pour l'input */
    color: #ffffff;
    /* Texte foncé pour une bonne visibilité */
    border: 2px solid #233a44;
    /* Bordure subtile */
}

.form-control:focus {
    margin: 5px auto;
    background-color: #2c2e3b;
    /* Fond blanc pour l'input */
    color: #ffffff;
    /* Texte foncé pour une bonne visibilité */
    border: 2px solid #233a44;
    /* Bordure subtile */
}

.form-select {
    background-color: #3b3d4d;
    /* Fond blanc pour l'input */
    color: #ffffff;
    /* Texte foncé pour une bonne visibilité */
    border: 2px solid #233a44;
    /* Bordure subtile */
}

.form-control[readonly] {
    margin: 5px auto;
    background-color: #3b3d4d;
    /* Fond blanc pour l'input */
    color: #ffffff;
    /* Texte foncé pour une bonne visibilité */
    border: 2px solid #233a44;
    /* Bordure subtile */
}

.planet-table {
    background-color: #232b40;
}

.planet-table img {
    width: 150px;
    height: auto;
}

.planet-table th,
.planet-table td {
    color: white;
}

.fleet-table {
    background-color: #232b40;
}

.fleet-table img {
    width: 60px;
    height: auto;
}

.fleet-table th,
.fleet-table td {
    color: white;
}

.message-table {
    background-color: #232b40;
    /* La même couleur de fond que .planet-table */
}

.message-table th,
.message-table td {
    color: white;
    /* La même couleur de texte que .planet-table */
}

.message-read {
    background-color: #232b40;
    /* Couleur pour les messages lus */
}

.message-unread {
    background-color: #304166;
    /* Couleur pour les messages non lus */
}

.notification-table {
    background-color: #232b40;
    /* La même couleur de fond que pour .message-table */
}

.notification-table th,
.notification-table td {
    color: white;
    /* La même couleur de texte que pour .message-table */
}

.notification-table th,
.notification-table td {
    color: white;
    /* Couleur de texte pour les notifications */
    border: 2px solid transparent;
    /* Préparation pour une bordure potentielle */
}

.notification-table th,
.notification-table td {
    color: white;
}

.notification-primary {
    background-color: #2a3f5f;
    /* Bleu pour les notifications "Primary" */
}

.notification-warning {
    background-color: #a99132;
    /* Jaune pour les notifications "Warning" */
}

.notification-danger {
    background-color: #963434;
    /* Rouge pour les notifications "Danger" */
}

.notification-unread {
    border-color: #ffffff;
    /* Bordure pour les notifications non lues */
    border-width: 3px;
}

.research-card {
    position: relative;
    text-align: center;
}

.research-card img {
    width: 100%;
    height: auto;
}

.research-card .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
}

.research-card .card-title {
    margin-bottom: 0;
}

.research-card .current-level {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px;
    border-radius: 0;
}

.acquired-level {
    background-color: rgba(14, 71, 36, 0.5);
}

.building-info {
    margin: 0 0 0.5rem;
    /* Pas de marge en haut, une petite marge en bas */
    line-height: 1.5;
    /* Optionnel : pour un espacement plus agréable entre les lignes */
}

.list-colony-building-group-item {
    border: 1px solid #6c757d;
    /* Bordure bleu Bootstrap */
    border-radius: 0.5rem;
    /* Coins arrondis */
    padding: 1rem;
    /* Espacement interne */
    margin-bottom: 1rem;
    /* Espacement entre les éléments */
    background-color: #1b1e2f;
    /* Fond légèrement gris */
    transition: background-color 0.3s, transform 0.3s;
    /* Animations */
}

.list-colony-building-group-item:hover {
    background-color: #303653;
    /* Fond plus clair au survol */
    transform: scale(1.02);
    /* Légère mise en relief */
}

.list-colony-building-group-item h5 {
    color: #ffffff;
    /* Titre en bleu Bootstrap */
}

.list-colony-building-group-item p.building-info {
    margin-bottom: 0.5rem;
    /* Espacement entre les informations */
    color: #e0e0e0;
    /* Texte gris foncé */
}

.colony-info {
    display: flex;
    align-items: center;
    font-size: 1.2em;
}

.colony-info img {
    margin-right: 10px;
}

.colony-img-modal {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.research-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.96rem;
    text-align: left;
    background: #232b40;
    border: 1px solid rgba(98, 127, 152, 0.3);
    border-radius: 10px;
    padding: 10px 11px;
    margin-bottom: 8px;
    min-height: 58px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24);
}

.research-info span {
    color: #dbeafe;
    font-weight: 600;
    line-height: 1.25;
}

.research-info img,
.research-info-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
}

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

.research-info.specialization-info {
    border-color: rgba(148, 163, 184, 0.4);
}

.research-info.specialization-info.text-warning {
    border-color: rgba(245, 158, 11, 0.45);
    background: linear-gradient(180deg, rgba(102, 73, 30, 0.6) 0%, #232b40 100%);
}

.research-info.specialization-info.text-danger {
    border-color: rgba(239, 68, 68, 0.45);
    background: linear-gradient(180deg, rgba(120, 45, 45, 0.58) 0%, #232b40 100%);
}

.research-info.specialization-info.text-success {
    border-color: rgba(34, 197, 94, 0.45);
    background: linear-gradient(180deg, rgba(37, 98, 61, 0.58) 0%, #232b40 100%);
}

.research-progress {
    height: 12px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(79, 121, 158, 0.45);
    border-radius: 10px;
    background: rgba(8, 14, 24, 0.95);
}

.research-progress-bar {
    height: 100%;
    border-radius: 10px;
    background-size: 40px 40px;
    background-image: linear-gradient(90deg,
            rgba(1, 194, 231) 25%,
            rgba(1, 194, 231) 25%,
            rgba(1, 194, 231) 50%,
            rgba(0, 0, 0, 0) 50%,
            rgba(0, 0, 0, 0) 75%,
            rgba(1, 194, 231) 75%,
            rgba(1, 194, 231) 100%);
    animation: move-stripes 1s linear infinite;
    transition: width 0.3s ease;
}

/* Animation pour déplacer les bandes */
@keyframes move-stripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 40px 0;
    }
}

.current-research .card {
    border: 1px solid rgba(98, 127, 152, 0.35);
    background: #232b40;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.33);
}

.current-research .card-body {
    padding: 10px 12px;
}

.current-research .card-title {
    margin: 0;
    font-size: 0.92rem;
    color: #e6f2ff;
    font-weight: 700;
    line-height: 1.35;
}

.flops-remaining,
.turns-remaining {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #d6e8ff;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid rgba(98, 127, 152, 0.28);
    background: rgba(35, 43, 64, 0.88);
}

.research-status-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.blueprint-progress {
    height: 10px;
    border-radius: 999px;
    background: rgba(35, 43, 64, 0.88);
    border: 1px solid rgba(98, 127, 152, 0.3);
    overflow: hidden;
}

.blueprint-progress .progress-bar {
    background: linear-gradient(90deg, #2f5377 0%, #4f77a3 100%);
}

.card-main .card {
    border: 1px solid #233a44;
    border-radius: 100px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}

.card-main .card-body {
    padding: 5px;/
}

.modal-footer .btn {
    width: 100%;
    height: 100%;
}

#universeGrid {
    background-color: #000000;
    background-image:
        linear-gradient(#212330 1px, transparent 1px),
        linear-gradient(90deg, #212330 1px, transparent 1px),
        url('../img/space_background.png');
    background-size: 60px 60px, 60px 60px, 2048px 2048px;
    background-position: -1px -1px, -1px -1px, 0 0;
    background-repeat: repeat, repeat, repeat;
    position: relative;
    overflow: hidden;
    cursor: crosshair;
    transform-origin: top left;
    touch-action: none;
}

#zoomControls {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

.action-planet-btn {
    width: 100%;
    /* Ou toute autre largeur appropriée */
}

.action-fleet-btn {
    width: 100%;
    /* Ou toute autre largeur appropriée */
}

.form-fleet {
    display: flex;
    flex-direction: column;
    background-color: #212330;
}

.form-fleet button {
    margin-top: auto;
    /* pousse le bouton vers le bas */
}

.fleet-container {
    margin-bottom: 30px;
    /* Espacement entre les vaisseaux */
    display: flex;
    /* Utilisation de Flexbox pour mieux contrôler l'agencement */
    flex-direction: column;
    align-items: center;
    /* Centrer les éléments verticalement */
    justify-content: start;
    /* Alignement horizontal au début */
}

.fleet-container img {
    width: 100px;
    /* Largeur fixe pour l'image */
    height: 100px;
    /* Hauteur fixe pour l'image */
}

.fleet-container input[type="number"] {
    width: 80px;
    /* Largeur de l'input */
}

.fleet-container input[type="number"] {
    width: 100px;
    height: 28px;
    background-color: #212330;
    /* Fond blanc pour l'input */
    color: #ffffff;
    /* Texte foncé pour une bonne visibilité */
    border: 2px solid #233a44;
    /* Bordure subtile */
}

.fleet-container input[type="number"]::placeholder {
    color: #ffffff;
    /* Couleur plus claire pour le texte du placeholder */
}

.fleet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    /* Crée autant de colonnes que possible avec au moins 120px de large */
    gap: 10px;
    /* Espacement entre les grilles */
}

.cell {
    width: 60px;
    height: 60px;
    position: absolute;
    background-size: cover;
    contain: strict;
}

.selected-cell {
    box-shadow: 0 0 10px #fff;
    /* Ajoute un halo blanc autour de la cellule */
    z-index: 2;
    /* Assure que la cellule sélectionnée se trouve au-dessus des autres */
}

@keyframes blink {
    0% {
        background-color: none;
    }

    50% {
        background-color: rgb(55, 182, 255);
    }

    100% {
        background-color: none;
    }
}

.blink-cell {
    animation: blink 1s linear infinite;
}

#zoomControls button {
    opacity: 0.9;
}

#zoomControls button:hover {
    opacity: 1;
}

#zoomIndicator {
    display: inline-block;
    margin-left: 8px;
    padding: 4px 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
    vertical-align: middle;
}

#scrollToTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background-color: #0d6efd;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s;
}

#scrollToTopBtn:hover,
#scrollToTopBtn:active {
    opacity: 1;
}

#actionText {
    margin: 0;
    /* Réinitialisation des marges pour le texte à l'intérieur */
}

.ec-common-bg-modal {
    background-color: #1b1e2f;
    color: #ffffff;
}

.ec-special-bg-modal {
    background-color: #ffd90081;
    color: #ffffff;
}



/* Modal V3 */
.modal-content {
    background: linear-gradient(135deg, var(--v3-fond) 0%, var(--v3-fond2) 100%);
    border: 2px solid var(--v3-bords);
    border-radius: 12px;
    box-shadow: 0 0 50px var(--v3-glow);
    color: var(--v3-white);
}

.modal-header {
    background: linear-gradient(90deg, rgba(0, 183, 235, 0.1) 0%, transparent 100%);
    border-bottom: 2px solid var(--v3-bords);
    padding: 20px 30px;
}

.modal-title-container {
    flex: 1;
}

.modal-title {
    color: var(--v3-btn-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 18px;
    margin: 0;
}

.modal-subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-family: 'Courier New', monospace;
    margin-top: 5px;
}

.btn-close {
    background: transparent;
    background-image: none !important;
    /* Supprime toute icône SVG par défaut */
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--v3-btn-primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    opacity: 1;
    filter: none !important;
    /* Supprime tout filtre Bootstrap */
}

.btn-close::before {
    content: '×';
    font-size: 24px;
    color: var(--v3-btn-primary);
    line-height: 1;
}

.btn-close:hover {
    background: rgba(192, 26, 26, 0.6);
    /* Opacité augmentée pour un rouge plus saturé */
    border-color: var(--v3-btn-danger);
    color: var(--v3-btn-danger);
    transform: rotate(90deg);
}

.btn-close:hover::before {
    color: var(--v3-btn-danger);
}

.btn-close:disabled {
    background: transparent;
    border: 1px solid var(--v3-fond);
    color: var(--v3-btn-secondary);
    cursor: not-allowed;
    opacity: 0.5;
}

.btn-close:disabled::before {
    color: var(--v3-btn-secondary);
}

.modal-body {
    background: var(--v3-fond2);
    color: var(--v3-white);
    padding: 30px;
    max-height: auto;
    overflow-y: auto;
}

/* Scrollbar custom pour le modal */
.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: var(--v3-btn-primary);
    border-radius: 4px;
}

/* Container du modal */
.modal {
    animation: fadeInUp 0.5s ease;
}

.bg-modal {
    background-color: #1b1e2f;
    border: 2px solid #233a44;
    border-radius: 15px;
    color: #ffffff;
}

/* Limiter la taille des images dans modal-image */
.modal-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    /* Centrer l'image si nécessaire */
}

/* Optionnel : Ajouter une bordure sci-fi et un léger glow */
.modal-image img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--v3-bords);
    border-radius: 4px;
    box-shadow: 0 0 10px var(--v3-glow);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* FIN Optimisation affichage sur smartphone */

.user-territory {
    background-color: rgba(59, 59, 184, 0.4);
}

.other-player-territory {
    background-color: rgba(156, 15, 15, 0.4);

}

#main-content .resource-group,
#main-content .fleet-info {
    background-color: #232b40;
    border: 1px solid rgba(95, 128, 158, 0.35);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.resource-title {
    margin-bottom: 12px;
}

.resource-grid {
    gap: 10px;
}

.resource-stat {
    min-width: 120px;
    background: linear-gradient(180deg, rgba(18, 29, 44, 0.92) 0%, rgba(12, 20, 32, 0.98) 100%);
    border: 1px solid rgba(98, 127, 152, 0.3);
    border-radius: 10px;
    padding: 10px 8px;
    justify-content: center;
}

.pm-resource-icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

.pm-resource-value {
    color: #d8eaff;
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.2;
}

.resource-action {
    flex: 1 1 180px;
    min-width: 180px;
    display: flex;
}

.d-flex.justify-content-start {
    justify-content: center;
    /* Centrer les icônes de ressources et textes associés */
}

.resource-action-btn {
    width: 100%;
    min-height: 96px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-width: 1px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.resource-action-btn i {
    font-size: 1.25rem;
}

.resource-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34);
}

.resource-action-expedition {
    background: linear-gradient(180deg, #2b5f9a 0%, #204c80 100%);
    border-color: #5d8fc5;
}

.resource-action-expedition:hover {
    background: linear-gradient(180deg, #316cae 0%, #25578f 100%);
}

.resource-action-warehouse {
    background: linear-gradient(180deg, #1f7f97 0%, #196a7f 100%);
    border-color: #5da7bb;
}

.resource-action-warehouse:hover {
    background: linear-gradient(180deg, #2391ac 0%, #1d778f 100%);
}

.resource-energy-wrap {
    margin-top: 12px;
}

.planetary-storage-modal .modal-content {
    background-color: #1a1d2e;
    color: #fff;
    border: 1px solid #2c3e50;
}

.planetary-storage-modal .modal-header {
    border-bottom: 1px solid #2c3e50;
}

.planetary-storage-modal .modal-footer {
    border-top: 1px solid #2c3e50;
}

.planetary-storage-modal .btn-close {
    filter: invert(1);
}

.modal.modal-draggable .modal-header {
    cursor: grab;
    user-select: none;
}

.modal.modal-draggable .modal-header .btn-close,
.modal.modal-draggable .modal-header button {
    cursor: pointer;
}

.modal.modal-draggable.is-dragging .modal-header {
    cursor: grabbing;
}

.modal.modal-draggable.is-dragging .modal-dialog {
    transition: none !important;
}

.modal.modal-maximized .modal-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    margin: 0;
    transform: none !important;
}

.modal.modal-maximized .modal-content {
    height: 100vh;
    border-radius: 0;
}

.modal.modal-maximized .modal-body {
    overflow-y: auto;
}

.planetary-storage-item-modal .modal-content {
    background: linear-gradient(180deg, rgba(22, 31, 46, 0.98) 0%, rgba(13, 21, 33, 0.98) 100%);
    color: #e6f1ff;
    border: 1px solid rgba(95, 128, 158, 0.55);
}

.planetary-storage-item-modal .modal-dialog {
    width: min(calc(100vw - 1rem), 100%);
    max-width: 100%;
    margin: 0.75rem auto;
}

.planetary-storage-item-modal .modal-header {
    border-bottom: 1px solid rgba(95, 128, 158, 0.35);
}

.planetary-storage-item-modal .modal-body {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

.planetary-storage-item-modal .modal-footer {
    border-top: 1px solid rgba(95, 128, 158, 0.35);
}

.planetary-storage-item-modal .btn-close {
    filter: invert(1);
}

.modal-floating-window {
    pointer-events: none;
}

.modal-floating-window .modal-dialog {
    pointer-events: auto;
}

.storage-capacity-progress {
    height: 20px;
    background-color: #0f1219;
    border: 1px solid #2c3e50;
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.8);
}

.storage-empty-icon {
    font-size: 3rem;
    opacity: 0.5;
}

.storage-filter-console {
    border: 1px solid rgba(95, 128, 158, 0.38);
    border-radius: 10px;
    padding: 10px;
    background:
        linear-gradient(180deg, rgba(20, 31, 47, 0.95) 0%, rgba(12, 21, 35, 0.96) 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 26px);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.36);
}

.storage-filter-label {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94b9e2;
    font-weight: 700;
}

.storage-filter-addon {
    border-color: rgba(95, 128, 158, 0.45);
    background: linear-gradient(180deg, rgba(38, 55, 80, 0.85) 0%, rgba(26, 42, 64, 0.88) 100%);
    color: #7fc7ff;
}

.storage-filter-input,
.storage-filter-select {
    border-color: rgba(95, 128, 158, 0.45);
    background-color: rgba(11, 18, 29, 0.9);
    color: #e4eeff;
}

.storage-filter-input:focus,
.storage-filter-select:focus {
    border-color: rgba(111, 185, 255, 0.9);
    box-shadow: 0 0 0 0.2rem rgba(65, 129, 183, 0.3);
    background-color: rgba(11, 18, 29, 0.95);
    color: #e4eeff;
}

.storage-filter-select option {
    background-color: #0f1624;
    color: #e4eeff;
}

.storage-filter-ops {
    gap: 8px;
}

.storage-filter-reset {
    border: 1px solid rgba(92, 132, 173, 0.5);
    color: #bcd8f3;
    background: linear-gradient(180deg, rgba(30, 47, 70, 0.9) 0%, rgba(21, 35, 53, 0.92) 100%);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.34rem 0.7rem;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 5px 12px rgba(0, 0, 0, 0.25);
    transition: all 0.16s ease;
}

.storage-filter-reset:hover {
    border-color: rgba(115, 168, 216, 0.9);
    color: #e8f4ff;
    background: linear-gradient(180deg, rgba(36, 58, 88, 0.95) 0%, rgba(24, 43, 67, 0.96) 100%);
    transform: translateY(-1px);
    box-shadow: 0 9px 16px rgba(0, 0, 0, 0.35), 0 0 10px rgba(89, 169, 235, 0.26);
}

.storage-filter-reset:focus-visible {
    outline: 2px solid rgba(116, 190, 255, 0.9);
    outline-offset: 2px;
}

.storage-filter-summary {
    min-height: 20px;
    font-size: 0.78rem;
    color: #9ec3ea;
    letter-spacing: 0.03em;
}

.inventory-filter-empty {
    color: #ffbe8f;
}

.inventory-grid {
    padding: 6px;
    border: 1px solid rgba(95, 128, 158, 0.32);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(12, 20, 32, 0.92) 0%, rgba(9, 15, 25, 0.96) 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 40px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 40px);
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.4);
}

.modal.modal-maximized .inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 1rem;
    margin: 0;
}

.modal.modal-maximized .inventory-grid>.inventory-slot {
    width: auto;
    max-width: none;
    padding: 0;
}

.inventory-slot {
    position: relative;
}

.inventory-card-trigger {
    cursor: pointer;
}

.inventory-card-trigger:focus-visible {
    outline: 2px solid rgba(99, 180, 255, 0.9);
    outline-offset: 2px;
}

.inventory-card {
    background: linear-gradient(155deg, #2a3148 0%, #1d2538 100%);
    border: 1px solid rgba(95, 128, 158, 0.5);
    aspect-ratio: 1 / 1;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 10px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 6px 14px rgba(0, 0, 0, 0.3);
}

.inventory-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    pointer-events: none;
}

.inventory-card:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.42), inset 0 0 20px rgba(0, 0, 0, 0.3), 0 0 16px rgba(66, 162, 255, 0.35);
    border-color: rgba(99, 180, 255, 0.9);
    z-index: 1;
}

.inventory-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.85rem;
    font-weight: bold;
    background-color: rgba(13, 15, 20, 0.9);
    border: 1px solid rgba(88, 120, 149, 0.6);
    padding: 2px 6px;
    border-radius: 4px;
    color: #8fe8ff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
    z-index: 5;
    backdrop-filter: blur(2px);
}

.packaging-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 5;
    font-size: 0.7rem;
    opacity: 0.95;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

.inventory-image-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 100%;
    min-height: 0;
}

.inventory-image-container img {
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.inventory-card:hover .inventory-image-container img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(77, 166, 255, 0.6));
}

.inventory-title-container {
    background: linear-gradient(180deg, rgba(8, 12, 20, 0.72) 0%, rgba(5, 9, 15, 0.92) 100%);
    padding: 5px 6px;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    min-height: 40px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.inventory-title {
    font-size: 0.68rem;
    line-height: 1.2;
    margin: 0;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    max-height: 40px;
    overflow: hidden;
    color: #e6efff;
    text-shadow: 1px 1px 2px black;
}

.inventory-detail-header {
    text-align: center;
    margin-bottom: 14px;
}

.inventory-detail-image {
    width: min(100%, 360px);
    aspect-ratio: 1 / 1;
    max-height: min(42vh, 360px);
    padding: 16px;
    background: linear-gradient(180deg, rgba(16, 27, 41, 0.95) 0%, rgba(10, 17, 28, 0.98) 100%);
    border: 1px solid rgba(95, 128, 158, 0.35);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 10px 18px rgba(0, 0, 0, 0.3);
    object-fit: contain;
    margin: 0 auto 14px;
    display: block;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}

@media (min-width: 992px) {
    .planetary-storage-item-modal .modal-dialog {
        width: calc(100vw - 3rem);
        max-width: 920px;
        margin: 1.25rem auto;
    }

    .inventory-detail-image {
        width: min(100%, 340px);
        max-height: 360px;
    }
}

.inventory-detail-name {
    margin: 0 0 8px;
    color: #f3f8ff;
    font-weight: 700;
}

.inventory-detail-description {
    margin: 0 auto;
    max-width: 720px;
    color: #c9dbf3;
    line-height: 1.4;
    font-size: 0.93rem;
}

.inventory-detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.inventory-detail-chip {
    background: rgba(13, 22, 34, 0.85);
    border: 1px solid rgba(95, 128, 158, 0.35);
    border-radius: 10px;
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inventory-detail-chip-label {
    font-size: 0.73rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9fc0e6;
    font-weight: 700;
}

.inventory-detail-stats-wrap {
    background: rgba(10, 18, 29, 0.8);
    border: 1px solid rgba(95, 128, 158, 0.35);
    border-radius: 10px;
    padding: 10px;
}

.inventory-detail-stats-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #d8eaff;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inventory-detail-stats-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inventory-detail-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    background: rgba(20, 30, 46, 0.82);
    border: 1px solid rgba(95, 128, 158, 0.25);
}

.inventory-detail-stat-key {
    color: #c8def8;
    font-weight: 600;
}

.inventory-detail-stat-label-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.inventory-detail-stat-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex: 0 0 16px;
}

.inventory-detail-stat-bi-icon {
    font-size: 0.9rem;
    color: #9fc0e6;
}

.inventory-detail-stat-value {
    color: #f6fbff;
    font-weight: 700;
}

.inventory-detail-no-stats {
    color: #a9b9cc;
    font-style: italic;
}

.inventory-detail-components-wrap {
    background: linear-gradient(180deg, rgba(18, 32, 49, 0.96), rgba(9, 17, 28, 0.96));
    border: 1px solid rgba(126, 171, 214, 0.34);
    border-radius: 14px;
    padding: 12px 14px 14px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 10px 24px rgba(0, 0, 0, 0.22);
}

.inventory-detail-components-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    padding: 12px 14px;
    color: #eef6ff;
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 12px;
    border: 1px solid rgba(124, 170, 214, 0.28);
    background:
        linear-gradient(180deg, rgba(42, 66, 94, 0.96), rgba(24, 41, 61, 0.96)),
        radial-gradient(circle at top left, rgba(126, 215, 255, 0.14), transparent 48%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 18px rgba(0, 0, 0, 0.22);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.inventory-detail-components-summary::-webkit-details-marker {
    display: none;
}

.inventory-detail-components-summary::marker {
    content: '';
}

.inventory-detail-components-summary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent 35%, transparent 65%, rgba(255, 255, 255, 0.04));
    pointer-events: none;
}

.inventory-detail-components-summary:hover {
    border-color: rgba(145, 196, 239, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 10px 24px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(126, 215, 255, 0.08);
}

.inventory-detail-components-summary:focus-visible {
    outline: 2px solid rgba(126, 215, 255, 0.5);
    outline-offset: 3px;
}

.inventory-detail-components-summary-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.inventory-detail-components-summary-main i {
    color: #7ed7ff;
    font-size: 1.08rem;
    width: 20px;
    text-align: center;
}

.inventory-detail-components-summary-aside {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.inventory-detail-components-summary-count {
    min-width: 38px;
    padding: 5px 11px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(49, 79, 111, 0.95), rgba(27, 48, 72, 0.95));
    border: 1px solid rgba(130, 180, 228, 0.38);
    color: #f3f8ff;
    text-align: center;
    box-shadow: 0 0 16px rgba(88, 160, 214, 0.18);
}

.inventory-detail-components-summary-chevron {
    color: #8ebce7;
    font-size: 0.96rem;
    transition: transform 0.18s ease, color 0.18s ease;
}

.inventory-detail-components-wrap[open] .inventory-detail-components-summary-chevron {
    transform: rotate(180deg);
    color: #d7ecff;
}

.inventory-detail-components-wrap[open] .inventory-detail-components-summary {
    border-color: rgba(145, 196, 239, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 12px 28px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(126, 215, 255, 0.09);
}

.inventory-detail-components-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.inventory-detail-components-group {
    background: linear-gradient(180deg, rgba(16, 24, 37, 0.92), rgba(10, 18, 29, 0.96));
    border: 1px solid rgba(95, 128, 158, 0.28);
    border-radius: 14px;
    padding: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.inventory-detail-components-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    color: #cfe3fb;
    font-weight: 700;
}

.inventory-detail-components-group-heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #edf6ff;
    letter-spacing: 0.4px;
}

.inventory-detail-components-group-heading i {
    color: #7ed7ff;
}

.inventory-detail-components-group-count {
    color: #8db6e2;
    font-size: 0.82rem;
    background: rgba(17, 31, 48, 0.9);
    border: 1px solid rgba(99, 136, 168, 0.28);
    border-radius: 999px;
    padding: 3px 8px;
}

.inventory-detail-components-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.inventory-detail-component-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 205px;
    padding: 14px 12px 12px;
    border-radius: 14px;
    background:
        radial-gradient(circle at top center, rgba(126, 215, 255, 0.08), transparent 44%),
        linear-gradient(180deg, rgba(28, 43, 64, 0.96), rgba(14, 23, 35, 0.98));
    border: 1px solid rgba(102, 140, 173, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 18px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.inventory-detail-component-card-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    margin-bottom: 12px;
    padding-top: 6px;
}

.inventory-detail-component-image {
    width: 68px;
    height: 68px;
    object-fit: contain;
    flex: 0 0 68px;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.42));
}

.inventory-detail-component-text {
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
}

.inventory-detail-component-name {
    color: #f3f8ff;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 10px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-detail-component-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    color: #9fc0e6;
    font-size: 0.78rem;
}

.inventory-detail-component-meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(12, 20, 31, 0.72);
    border: 1px solid rgba(95, 128, 158, 0.2);
}

@media (max-width: 576px) {
    .inventory-detail-components-groups {
        grid-template-columns: 1fr;
    }

    .inventory-detail-components-summary {
        padding: 11px 12px;
    }

    .inventory-detail-components-group {
        padding: 12px;
    }

    .inventory-detail-components-list {
        grid-template-columns: 1fr;
    }

    .inventory-detail-component-card {
        min-height: 0;
    }
}

.player-profil-group {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.player-team-group {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.card {
    background-color: #232b40;
    border-radius: 8px;
    margin-bottom: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}

.staff-card {
    background-color: #232b40;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(255, 200, 0, 0.7);
}

/* Partie bouton et modal pour Relic Coin */
.btn-ec-purchase {
    background-color: #14233f;
    /* Violet foncé pour un effet premium/scifi */
    color: #ffd700;
    /* Doré pour rappeler une monnaie rare/précieuse */
    border: 1px solid #ffd700;
    /* Liseré doré pour démarquer */
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    transition: all 0.2s ease-in-out;
}

.btn-ec-purchase:hover {
    background-color: #ffd700;
    /* Un violet plus clair au survol */
    color: #14233f;
    /* Texte blanc au hover */
    border: 1px solid #14233f;
    /* Liseré doré pour démarquer */
}

.btn-ec-purchase:disabled {
    background-color: #333;
    border-color: #666;
    color: #999;
    cursor: not-allowed;
}

/* Modal pour les achats RC */
.modal-ec-purchase .modal-content {
    background-color: #14233f;
    /* Même fond que le bouton */
    color: #ffd700;
    /* Même couleur de texte */
    border: 1px solid #ffd700;
    /* Bordure dorée */
}

.modal-ec-purchase .modal-header {
    border-bottom: 1px solid #ffd700;
    /* Bordure inférieure en doré */
    background-color: #14233f;
    /* Conserver le fond du modal */
    color: #ffd700;
}

.modal-ec-purchase .modal-title {
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.modal-ec-purchase .modal-footer {
    border-top: 1px solid #ffd700;
    /* Bordure supérieure en doré */
    background-color: #14233f;
}

/* Optionnel : bouton de fermeture en mode sombre/doré */
.modal-ec-purchase .btn-close {
    filter: invert(1);
}

.modal-ec-body {
    background-color: #14233f;
    color: #fff;
}

/* Mise en page du récapitulatif d'achat */
.purchase-summary dl {
    margin: 0;
    padding: 0;
}

.purchase-summary dt,
.purchase-summary dd {
    padding: 5px 0;
}

.purchase-summary dt {
    font-weight: bold;
    color: #ffd700;
}

.purchase-summary dd {
    color: #fff;
    text-align: right;
    border-bottom: 1px dotted #ffd700;
    margin-bottom: 5px;
}

.legal-text p {
    font-size: 0.9rem;
    margin-bottom: 0;
}



/* Notification Relic Coin */

/* Conteneur global */
#global-notifications {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}

/* Style de base pour chaque notification */
.global-notification {
    background-color: #14233f;
    border: 1px solid #ffd700;
    color: #ffd700;
    padding: 15px 30px;
    margin-bottom: 10px;
    border-radius: 5px;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Variation en fonction du type (optionnel) */
.global-notification.success {
    background-color: #14233f;
}

.global-notification.error {
    background-color: #6e030e;
}

.global-notification.info {
    background-color: #00282e;
}

/* Classe pour afficher la notification */
.global-notification.show {
    opacity: 1;
    transform: translateY(0);
}

/* FIN Notification Relic Coin */

/* Conteneur pour le canvas et l'image fallback */
#planetContainer {
    width: 100%;
    position: relative;
}

/* Le canvas et l'image fallback occuperont toute la largeur avec une hauteur auto.
   L'ajout d'un aspect-ratio garantit que le canvas reste carré */
#planetCanvas,
#fallbackImage {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1;
}

.planet-group {
    background-color: #232b40;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}

.planet-group img {
    width: 100%;
    /* Taille fixe pour l'image */
    height: auto;
    /* Hauteur automatique pour maintenir l'aspect ratio */
}

.btn-group .btn {
    margin-right: 10px;
}

.btn-larger {
    min-width: 100px;
    /* Ajustez cette valeur selon la largeur souhaitée */
}

#startMusicButton {
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 5px;
}

.music-group {
    background-color: #232b40;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}

.music-player-group {
    background-color: #232b40;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}

.flops-group {
    background-color: #232b40;
    border: 1px solid rgba(95, 128, 158, 0.35);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    text-align: left;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.research-group {
    background-color: #232b40;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}

.buildings-group {
    background-color: #232b40;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}

#colonyGrid {
    display: block;
    margin: 0 auto;
    border: 3px solid #233a44;
    width: 100%;
    /* Prendre toute la largeur de son conteneur */
    height: auto;
    /* Garder une proportion dynamique */
    max-width: 1400px;
    /* Limite maximale de taille */
}

.colony-info-group {
    background-color: #15120f;
    border-radius: 8px;
    padding: 0;
    /* Suppression du padding */
    margin: 0;
    /* Suppression du margin */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}

.colony-info-group,
.colony-action-group {
    padding: 0;
    /* Ajustement pour harmoniser */
}

.background-info-group img {
    width: 100%;
    /* Taille fixe pour l'image */
    height: auto;
    /* Hauteur automatique pour maintenir l'aspect ratio */
}

.colony-action-group {
    background-color: #232b40;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}

.buildings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    /* Ajuster en fonction de la largeur souhaitée pour chaque bâtiment */
    gap: 20px;
    /* Espacement entre les éléments du grid */
}

.building {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centre les éléments verticalement */
    text-align: left;
}

.building-img-wrapper {
    position: relative;
    width: 100%;
    /* Assure que l'image occupe toute la largeur disponible */
    padding-top: 100%;
    /* Ratio 1:1 pour garder l'image carrée */
}

.building-img-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* S'assure que l'image couvre l'espace sans déformation */
}

.building-img-modal {
    max-width: 100%;
    /* Assure que l'image ne dépasse pas son conteneur */
    height: auto;
    /* Maintient l'aspect ratio de l'image */
    margin-bottom: 20px;
    /* Ajoute un espace entre l'image et le texte suivant */
}

.defenses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    /* Ajuster en fonction de la largeur souhaitée pour chaque bâtiment */
    gap: 20px;
    /* Espacement entre les éléments du grid */
}

.defenses {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centre les éléments verticalement */
    text-align: left;
}

.defense-img-wrapper {
    position: relative;
    width: 100%;
    /* Assure que l'image occupe toute la largeur disponible */
    padding-top: 100%;
    /* Ratio 1:1 pour garder l'image carrée */
}

.defense-img-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* S'assure que l'image couvre l'espace sans déformation */
}

.defense-img-modal {
    max-width: 100%;
    /* Assure que l'image ne dépasse pas son conteneur */
    height: auto;
    /* Maintient l'aspect ratio de l'image */
    margin-bottom: 20px;
    /* Ajoute un espace entre l'image et le texte suivant */
}

.badge.bg-primary.defense-quantity {
    position: absolute;
    top: 8px;
    right: 8px;
    transform: translate(0, 0);
    border-radius: 10%;
    padding: 5px;
    font-size: 0.75rem;
    background-color: rgba(46, 99, 245, 0.8);
    background-color: rgba(46, 99, 245, 0.8) !important;
}

@keyframes blinker {
    50% {
        opacity: 0.6;
        /* Un peu moins agressif que 0.5 */
    }
}

.blinking-button {
    animation: blinker 1.5s linear infinite;
    font-weight: bold;
    /* Pour attirer l'attention */
}

.new-report-highlight {
    border: 2px solid var(--bs-primary);
    /* Mettre en évidence la carte du nouveau rapport */
}

.representative-reports-container img.rounded-circle {
    /* Style pour les avatars */
    border: 2px solid #dee2e6;
    /* Petite bordure pour l'avatar */
}

.ships-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    /* Ajuster en fonction de la largeur souhaitée pour chaque bâtiment */
    gap: 20px;
    /* Espacement entre les éléments du grid */
}

.ships {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centre les éléments verticalement */
    text-align: left;
}

.ships-img-wrapper {
    position: relative;
    width: 100%;
    /* Assure que l'image occupe toute la largeur disponible */
    padding-top: 100%;
    /* Ratio 1:1 pour garder l'image carrée */
}

.ships-img-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* S'assure que l'image couvre l'espace sans déformation */
}

.ships-img-modal {
    max-width: 100%;
    /* Assure que l'image ne dépasse pas son conteneur */
    height: auto;
    /* Maintient l'aspect ratio de l'image */
    margin-bottom: 20px;
    /* Ajoute un espace entre l'image et le texte suivant */
}

.badge.bg-primary.ships-quantity {
    position: absolute;
    top: 8px;
    right: 8px;
    transform: translate(0, 0);
    border-radius: 10%;
    padding: 5px;
    font-size: 0.75rem;
    background-color: rgba(46, 99, 245, 0.8);
    background-color: rgba(46, 99, 245, 0.8) !important;
}

.badge.bg-primary.cargo-capacity {
    position: absolute;
    top: 115px;
    right: 0px;
    transform: translate(0, 0);
    padding: 5px;
    font-size: 0.75rem;
    background-color: rgba(52, 208, 235, 0.7);
    background-color: rgba(52, 208, 235, 0.7) !important;
}

.badge.bg-danger.distortium-consumption {
    position: absolute;
    top: 92px;
    right: 0px;
    transform: translate(0, 0);
    padding: 5px;
    font-size: 0.75rem;
    background-color: rgba(235, 95, 52, 0.7);
    background-color: rgba(235, 95, 52, 0.7) !important;
}

.badge.bg-dark.size-ship {
    position: absolute;
    bottom: 115px;
    left: 8px;
    transform: translate(0, 0);
    border-radius: 10%;
    padding: 5px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.badge.bg-primary.building-level {
    position: absolute;
    top: 8px;
    right: 8px;
    transform: translate(0, 0);
    border-radius: 10%;
    padding: 5px;
    font-size: 0.75rem;
    background-color: rgba(46, 99, 245, 0.8);
    background-color: rgba(46, 99, 245, 0.8) !important;
}

.badge.bg-primary.building-colony-level {
    position: absolute;
    top: 16px;
    /* Ajustement de la position pour la taille plus grande */
    right: 16px;
    /* Ajustement de la position pour la taille plus grande */
    transform: translate(0, 0);
    border-radius: 10%;
    /* Maintien des coins arrondis */
    padding: 20px;
    /* Taille du badge augmentée */
    font-size: 2rem;
    /* Police plus grande pour la lisibilité */
    background-color: rgba(46, 99, 245, 0.8);
    /* Couleur primaire translucide */
    background-color: rgba(46, 99, 245, 0.8) !important;
    /* Forcer la couleur si nécessaire */
    color: white;
    /* Texte en blanc */
}

.badge.bg-secondary.construction-time {
    position: absolute;
    bottom: 8px;
    left: 8px;
    transform: translate(0, 0);
    border-radius: 10%;
    padding: 5px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    background-color: rgba(175, 175, 175, 0.8);
    background-color: rgba(175, 175, 175, 0.8) !important;
}

.badge.bg-info.production-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    transform: translate(0, 0);
    border-radius: 10%;
    padding: 5px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
}

.badge.bonus-production {
    position: absolute;
    bottom: 115px;
    left: 8px;
    transform: translate(0, 0);
    border-radius: 10%;
    padding: 5px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    background-color: rgba(60, 141, 65, 0.7);
    background-color: rgba(60, 141, 65, 0.7) !important;
}

.badge.bg-info.malus-energy {
    position: absolute;
    top: 95px;
    right: 8px;
    transform: translate(0, 0);
    border-radius: 10%;
    padding: 5px;
    font-size: 0.75rem;
    background-color: rgba(235, 156, 52, 0.7);
    background-color: rgba(235, 156, 52, 0.7) !important;
}

.bi-stopwatch {
    margin-right: 5px;
}

.grayscale {
    filter: grayscale(100%);
    pointer-events: none;
    /* Désactive les interactions de la souris */
    opacity: 0.5;
    /* Rend l'élément semi-transparent */
}

.resource-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    /* Arrondit le bouton */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #007bff;
    /* Une teinte bleue, peut-être à ajuster */
    border: none;
    /* Enlève la bordure par défaut */
    box-shadow: 0 4px 8px 0 rgba(0, 123, 255, .5);
    /* Ajoute un ombrage doux */
}

.resource-btn:hover {
    background-color: #0056b3;
    /* Assombrir légèrement au survol */
}

.badge.bg-success.energy-percentage {
    position: absolute;
    bottom: 8px;
    right: 8px;
    transform: translate(0, 0);
    /* Ajustement pour positionner à l'intérieur */
    border-radius: 10%;
    padding: 5px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
}

.badge.bg-warning.energy-percentage {
    position: absolute;
    bottom: 8px;
    right: 8px;
    transform: translate(0, 0);
    /* Ajustement pour positionner à l'intérieur */
    border-radius: 10%;
    padding: 5px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
}

.badge.bg-danger.energy-percentage {
    position: absolute;
    bottom: 8px;
    right: 8px;
    transform: translate(0, 0);
    /* Ajustement pour positionner à l'intérieur */
    border-radius: 10%;
    padding: 5px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
}

.building-info h4 {
    margin: 0;
    text-align: left;
}

.cost-info {
    display: flex;
    align-items: center;
    gap: 5px;
}

.resource-icon {
    width: 24px;
    height: auto;
}

.resource-modal-icon {
    width: 32px;
    height: auto;
}

.constructions-group {
    border: 1px solid #ccc;
    /* Couleur de bordure légère */
    border-radius: 8px;
    /* Bords arrondis */
    padding: 10px;
    /* Espacement à l'intérieur du cadre */
    margin-bottom: 10px;
    /* Espacement entre les cadres */
    text-align: center;
    /* Centrer le contenu du groupe */
}

.constructions-group img {
    width: 20%;
    /* Taille fixe pour l'image */
    height: auto;
    /* Hauteur automatique pour maintenir l'aspect ratio */
}

.list-group-item {
    background-color: #232b40;
    color: #ffffff;
    padding: 5px;
    margin-bottom: 1rem;
    text-align: center;
    border-radius: 0 0 2rem 2rem;
}