/* --- CARTE MODERNE --- */
.game-card-modern {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    background-color: var(--bs-body-bg);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
}

.game-card-modern:hover {
    transform: translateY(-8px) scale(1.01);
    z-index: 10;
}

/* --- IMAGE DU HAUT --- */
.card-cover-container {
    position: relative;
    padding-top: 120%;
    overflow: hidden;
    background-color: var(--bs-body-tertiary);
}

.card-cover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.game-card-modern:hover .card-cover-img {
    transform: scale(1.1);
}

/* Badge de statut flottant (Glassmorphism) */
.status-badge-float {
    position: absolute;
    top: 12px;
    right: 12px;
    backdrop-filter: blur(12px);
    background-color: rgba(255, 255, 255, 0.85);
    color: #111;
    font-weight: 700;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-radius: 30px;
    padding: 6px 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.status-badge-list {
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(12px);
    background-color: rgba(255, 255, 255, 0.85);
    color: #ffffff;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-radius: 30px;
    padding: 6px 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Adaptation badge en dark mode */
[data-bs-theme="dark"] .status-badge-float {
    background-color: rgba(0, 0, 0, 0.6) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* --- CONTENU DU BAS --- */
.card-content-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    /* border-top: 1px solid var(--bs-border-color-translucent); */
}

.game-title {
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 0.5rem;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--bs-body-color);
}

/* Badges (Plateforme, Note, etc.) */
.meta-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.meta-tag {
    font-size: 0.75rem;
    padding: 5px 12px;
    border-radius: 8px;
    background-color: var(--ter-color);
    color: var(--bs-secondary);
    font-weight: 600;
    /* border: 1px solid var(--bs-border-color); */
    display: flex;
    align-items: center;
}

/* --- Overlay Actions (Boutons centrés avec flou) --- */
.card-overlay-actions {
    position: absolute;
    inset: 0;
    /* Prend toute la taille de la carte (Haut/Bas/Gauche/Droite = 0) */
    background: rgba(var(--bs-body-bg-rgb), 0.6);
    /* Fond semi-transparent utilisant la couleur du thème */
    backdrop-filter: blur(8px);
    /* L'effet de flou magique */
    -webkit-backdrop-filter: blur(8px);
    /* Support Safari */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    /* Espace entre les deux boutons */

    /* Animation */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 20;
    border-radius: 24px;
    /* Même arrondi que la carte */
}

/* Apparition au survol (ou au tap sur mobile) */
.game-card-modern:hover .card-overlay-actions {
    opacity: 1;
    visibility: visible;
}

/* Petit effet de zoom sur les boutons ronds eux-mêmes */
.scale-on-hover {
    transition: transform 0.2s ease;
}

.scale-on-hover:hover {
    transform: scale(1.15);
}

/* Suppression de l'ancien style si présent */
.card-actions-wrapper {
    display: none !important;
}

#statsRow {
    scrollbar-width: none;
}

#statsRow::-webkit-scrollbar {
    display: none;
}

/*.Barre de rechercher */
.search-wrapper {
    margin: 20px auto;
}

.search-box {
    position: relative;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    border-radius: 50px;
    transition: all 0.3s ease;
}

.search-box:focus-within {
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.search-input {
    border-radius: 50px;
    padding-left: 45px;
    padding-right: 20px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    height: 42px;
}

.search-input:focus {
    border-color: #4CE5AE;
    box-shadow: none;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    z-index: 10;
}

.search-button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50px;
    padding: 8px 20px;
    transition: all 0.3s ease;
}

.search-button:hover {
    background-color: #0b5ed7;
    transform: translateY(-50%) scale(1.05);
}

/* Dark theme search box */
.search-box.dark {
    background-color: #212529;
}

.search-box.dark .search-input {
    background-color: #212529;
    color: #fff;
}

.search-box.dark .search-input::placeholder {
    color: #6c757d;
}

.search-box.dark .search-icon {
    color: #6c757d;
}

/* Transition douce pour l'icône */
.rotate-icon {
    transition: transform 0.35s ease-in-out;
}

/* La magie : quand le header a l'attribut aria-expanded="true", on tourne l'enfant .rotate-icon */
.card-header[aria-expanded="true"] .rotate-icon {
    transform: rotate(180deg);
}

/* Petit bonus : changement de curseur et fond au survol */
.accordion-trigger:hover {
    cursor: pointer;
}

/* Brand Icons */
.svg-icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 0.85rem;
    height: 0.85rem;
}

.ps-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a57ae'%3E%3Cpath d='M8.98,2.6v17.55l3.91,1.26V6.69c0-.69.3-1.15.79-.99.64.18.76.81.76,1.51v5.87c2.44,1.19,4.36,0,4.36-3.15s-1.13-4.68-4.44-5.83c-1.31-.45-3.73-1.19-5.39-1.5h0ZM13.64,18.84l6.3-2.27c.72-.26.83-.62.25-.82-.59-.19-1.64-.14-2.36.12l-4.2,1.5v-2.39l.24-.09s1.2-.42,2.91-.61c1.7-.18,3.78.03,5.44.66,1.85.6,2.04,1.47,1.58,2.07-.47.6-1.62,1.04-1.62,1.04l-8.54,3.11v-2.3l.02-.02ZM1.81,18.6c-1.9-.55-2.21-1.67-1.35-2.32.8-.59,2.16-1.05,2.16-1.05l5.61-2.01v2.31l-4.02,1.47c-.7.27-.83.63-.24.83.59.19,1.64.15,2.34-.12l1.94-.71v2.07c-.12.03-.26.04-.39.07-1.94.33-4,.2-6.04-.48v-.07'/%3E%3C/svg%3E");
}

.xbox-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230f780f'%3E%3Cpath d='M12,3.55c-1.51-.9-3.28-1.54-5.17-1.8h-.07c-.06-.01-.12-.01-.19-.01-.49,0-.95.13-1.35.35h.01C7.12.78,9.45,0,11.97,0h.05C14.54,0,16.88.78,18.81,2.11l-.04-.03c-.38-.22-.84-.35-1.33-.35-.07,0-.14,0-.2,0h0c-1.96.27-3.74.9-5.31,1.83l.07-.04h0ZM3.65,3.43s-.06.03-.09.04h0C1.36,5.64,0,8.66,0,12c0,2.86,1,5.49,2.68,7.56l-.02-.02c-1.4-2.61,3.58-9.95,6.08-12.91-2.82-2.81-4.22-3.25-4.81-3.25,0,0-.02,0-.03,0-.09,0-.18.02-.26.05h0s0,0,0,0ZM15.26,6.63c2.5,2.96,7.48,10.31,6.08,12.91,1.66-2.04,2.66-4.67,2.66-7.53,0-3.34-1.37-6.36-3.57-8.54h0s-.05-.03-.08-.04h0c-.08-.03-.17-.05-.27-.05h-.01,0c-.59,0-1.99.43-4.8,3.25h0ZM4.1,21.03c2.1,1.84,4.87,2.97,7.9,2.97s5.8-1.12,7.91-2.98h-.01c1.88-1.9-4.32-8.7-7.9-11.4-3.58,2.71-9.78,9.5-7.9,11.42h0Z'/%3E%3C/svg%3E");
}

.pc-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23013f7d'%3E%3Cpath d='M11.98,0C5.68,0,.51,4.86.02,11.04l6.43,2.66c.55-.37,1.2-.59,1.91-.59.06,0,.12,0,.19,0l2.86-4.14v-.06c0-2.49,2.03-4.52,4.52-4.52s4.52,2.03,4.52,4.53-2.03,4.52-4.52,4.52h-.1l-4.08,2.91c0,.05,0,.1,0,.16,0,1.88-1.52,3.4-3.39,3.4-1.64,0-3.02-1.17-3.33-2.73L.44,15.27c1.43,5.04,6.05,8.73,11.54,8.73,6.63,0,12-5.37,12-12S18.6,0,11.98,0ZM7.54,18.21l-1.47-.61c.26.54.71,1,1.31,1.25,1.3.54,2.79-.08,3.33-1.38.26-.63.26-1.32,0-1.95s-.75-1.12-1.38-1.38c-.62-.26-1.29-.25-1.88-.03l1.52.63c.96.4,1.41,1.5,1.01,2.45-.4.96-1.5,1.41-2.45,1.01,0,0,0,0,0,0ZM18.95,8.91c0-1.66-1.35-3.02-3.02-3.02s-3.02,1.35-3.02,3.02,1.35,3.02,3.02,3.02,3.02-1.35,3.02-3.02ZM13.68,8.9c0-1.25,1.01-2.27,2.27-2.27s2.27,1.01,2.27,2.27-1.02,2.27-2.27,2.27-2.27-1.01-2.27-2.27Z'/%3E%3C/svg%3E");
}

.switch-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff4554'%3E%3Cpath d='M9.27,22.91h-2.73c-3.01,0-5.45-2.45-5.45-5.45V5.45C1.09,2.45,3.54,0,6.55,0h2.73c1.2,0,2.18.98,2.18,2.18v18.55c0,1.2-.98,2.18-2.18,2.18ZM6.55,2.18c-1.8,0-3.27,1.47-3.27,3.27v12c0,1.8,1.47,3.27,3.27,3.27h2.73V2.18s-2.73,0-2.73,0ZM17.45,24h-3.27c-1.2,0-2.18-.98-2.18-2.18V3.27c0-1.2.98-2.18,2.18-2.18h3.27c3.01,0,5.45,2.45,5.45,5.45v12c0,3.01-2.45,5.45-5.45,5.45ZM14.18,3.27v18.55h3.27c1.8,0,3.27-1.47,3.27-3.27V6.55c0-1.8-1.47-3.27-3.27-3.27h-3.27ZM6.27,15.27h0c.75,0,1.36.61,1.36,1.36h0c0,.75-.61,1.36-1.36,1.36h0c-.75,0-1.36-.61-1.36-1.36h0c0-.75.61-1.36,1.36-1.36ZM17.45,6.55h0c.75,0,1.36.61,1.36,1.36h0c0,.75-.61,1.36-1.36,1.36h0c-.75,0-1.36-.61-1.36-1.36h0c0-.75.61-1.36,1.36-1.36ZM8.18,8.18c0-.6-.49-1.09-1.09-1.09h-1.64c-.6,0-1.09.49-1.09,1.09s.49,1.09,1.09,1.09h1.64c.6,0,1.09-.49,1.09-1.09ZM19.09,14.73h-.55v-.55c0-.6-.49-1.09-1.09-1.09s-1.09.49-1.09,1.09v.55h-.55c-.6,0-1.09.49-1.09,1.09s.49,1.09,1.09,1.09h.55v.55c0,.6.49,1.09,1.09,1.09s1.09-.49,1.09-1.09v-.55h.55c.6,0,1.09-.49,1.09-1.09s-.49-1.09-1.09-1.09Z'/%3E%3C/svg%3E");
}

.metacritic-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ed9c01'%3E%3Cpath d='M11.99,0C5.36,0,0,5.38,0,12.01c0,6.63,5.38,12,12.01,11.99,6.62,0,11.99-5.38,11.99-12h0C23.99,5.36,18.62,0,11.99,0ZM11.93,2.56c5.19,0,9.4,4.2,9.41,9.39h0c0,5.2-4.21,9.41-9.4,9.41S2.54,17.15,2.54,11.96c0-5.19,4.2-9.39,9.39-9.4h0ZM10.32,19.76l2.05-2.05-3.94-3.94c-.16-.17-.35-.37-.44-.61-.22-.47-.32-1.2.22-1.74.66-.66,1.55-.39,2.41.47l3.79,3.79,2.05-2.05-3.95-3.95c-.18-.18-.34-.39-.46-.62-.26-.54-.25-1.22.23-1.7.68-.68,1.56-.43,2.54.55l3.68,3.68,2.05-2.05-3.98-3.98c-2.02-2.02-3.91-1.95-5.21-.65-.5.5-.8,1.02-.95,1.62-.14.55-.16,1.13-.06,1.69l-.03.03c-1-.41-2.13-.17-3,.7-1.16,1.16-1.12,2.39-.98,3.11l-.04.04-1.01-.82-1.77,1.77c.75.68,1.49,1.38,2.21,2.1l4.6,4.6Z'/%3E%3C/svg%3E");
}

/* Trophy icons */
.trophy-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    /* Empêche l'image de s'écraser */
}

#trophyDropdownBtn {
    background-image: none !important;
    padding-right: 12px;
    /* Ajustement car on a plus besoin de la place pour l'image de fond */
}

#trophyDropdownBtn::after {
    display: inline-block !important;
    /* On la force à s'afficher */
    content: "";

    /* Dessin du chevron */
    border-right: 2px solid #6c757d;
    /* Gris standard Bootstrap */
    border-bottom: 2px solid #6c757d;
    width: 8px;
    height: 8px;

    /* Positionnement initial (pointe vers le bas) */
    transform: rotate(45deg);

    /* C'est ici que la magie de l'animation opère */
    transition: transform 0.2s ease-in-out;

    /* Pour bien la caler */
    margin-left: auto;
    /* La pousse tout à droite */
    margin-bottom: 2px;
    /* Petit ajustement vertical */
}

#trophyDropdownBtn.show::after {
    transform: rotate(225deg);
}

.modal-header .nav-tabs {
    --bs-nav-tabs-border-width: 0 !important;
}

/* --- LIBRARY TOGGLE SWITCH --- */
.custom-tabs-container {
    display: flex;
    position: relative;
    background-color: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.03));
    border-radius: 50px;
    padding: 6px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.custom-tab-input {
    display: none;
}

.custom-tab-label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--bs-secondary);
    cursor: pointer;
    z-index: 2;
    transition: color 0.3s ease;
}

.custom-tab-input:checked+.custom-tab-label {
    color: var(--bs-body-bg);
}

.custom-tab-slider {
    position: absolute;
    top: 6px;
    left: 6px;
    width: calc(50% - 6px);
    height: calc(100% - 12px);
    background-color: var(--bs-primary);
    border-radius: 50px;
    transition: transform 0.4s cubic-bezier(0.68, -0.15, 0.265, 1.25);
    z-index: 1;
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3);
}

#btnLibPhys:checked~.custom-tab-slider {
    transform: translateX(0);
}

#btnLibDigi:checked~.custom-tab-slider {
    transform: translateX(100%);
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

.pulse-animation {
    animation: pulse-red 1.5s infinite;
    background-color: #dc3545 !important;
    /* Rouge Bootstrap */
    color: white !important;
    border: none !important;
}

/* JAQUETTE JEUX DIGITAUX */
.card-cover-container.ratio-digital {
    padding-top: 0 !important;

    aspect-ratio: 460 / 215;

    height: auto;
}

.card-cover-container.ratio-digital .card-cover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- TROPHEES PSN --- */
.psn-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 12px;
    background: linear-gradient(145deg, #1e1e24, #16161a) !important;
}

.psn-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4) !important;
}

.psn-card-img-wrapper {
    width: 100px;
    min-width: 100px;
    overflow: hidden;
}

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

.psn-trophies-grid {
    display: flex;
    gap: 10px;
}

.psn-t-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #a0a0a0;
}

.psn-progress-bar {
    height: 5px !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px;
}

.stat-widget img {
    opacity: 0.8;
}

#psnTrophyList::-webkit-scrollbar {
    width: 8px;
}

#psnTrophyList::-webkit-scrollbar-track {
    background: transparent;
}

#psnTrophyList::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.drop-shadow {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

#psnTrophyModal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

#psnTrophyModal .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* --- FILTRES MOBILES (Scroll horizontal uniquement sur mobile) --- */
@media (max-width: 767.98px) {
    .filters-scroll-container {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        gap: 10px;
        padding-bottom: 5px;
        scrollbar-width: none;
        mask-image: linear-gradient(to right, black 90%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
    }

    .filters-scroll-container::-webkit-scrollbar {
        display: none;
    }

    .filters-scroll-container .form-select {
        flex: 0 0 auto;
        width: auto;
        min-width: 140px;
        background-color: var(--bs-body-bg);
    }
}

/* --- FILTRES TABLETTE & DESKTOP (Pleine largeur) --- */
@media (min-width: 768px) {
    .filters-scroll-container {
        display: flex;
        width: 100%;
        gap: 10px;
        justify-content: space-between;
        /* Distribue l'espace */
    }

    /* Les selects s'étirent équitablement */
    .filters-scroll-container .form-select {
        flex: 1 1 0;
        /* Prend tout l'espace disponible */
        width: 100%;
        min-width: 0;
        text-align: left;
        /* <--- CHANGEMENT ICI : Force l'alignement à gauche */
    }

    /* --- UNIFORMISATION VIEW TOGGLE (GRID/LIST) --- */
    .view-toggle-tabs {
        display: flex;
        position: relative;
        background-color: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.03));
        border-radius: 50px;
        padding: 4px;
        /* Un peu plus compact que le switch principal */
        width: 100px;
        height: 42px;
    }

    .view-tab-input {
        display: none;
    }

    .view-tab-label {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        cursor: pointer;
        z-index: 2;
        color: var(--bs-secondary);
        transition: color 0.3s ease;
    }

    .view-tab-input:checked+.view-tab-label {
        color: var(--bs-body-bg) !important;
    }

    .view-tab-slider {
        position: absolute;
        top: 4px;
        left: 4px;
        width: calc(50% - 4px);
        height: calc(100% - 8px);
        background-color: var(--bs-primary);
        border-radius: 50px;
        transition: transform 0.4s cubic-bezier(0.68, -0.15, 0.265, 1.25);
        z-index: 1;
    }

    /* Animation du slider selon l'input coché */
    #btnGridInput:checked~.view-tab-slider {
        transform: translateX(0);
    }

    #btnListInput:checked~.view-tab-slider {
        transform: translateX(100%);
    }
}

/* --- BOUTON FLOTTANT (FAB) --- */
.fab-view-toggle {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--main-color);
    color: #111;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    transition: transform 0.2s;
    cursor: pointer;
}

.fab-view-toggle:active {
    transform: scale(0.90);
}

.fab-view-toggle i {
    font-size: 28px;
}

@media (min-width: 768px) {
    .fab-view-toggle {
        display: none !important;
    }
}

/* RESPONSIVE */
/* Stats dashboard fixes */
@media (min-width:991.98px) and (max-width:1150px) {
    h2.dashboard-welcome {
        font-size: 1.25rem !important;
    }
}

@media (max-width: 575.98px) {

    .btn:not(.d-none),
    .btn-icon-action:not(.d-none),
    .status-badge-float:not(.d-none) {
        padding: 15px;
    }
}