@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*,
::after,
::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
    scrollbar-color: var(--orDoux) transparent;
    scrollbar-width: thin;
}

:root {
    --bg: #070512;
    --bgCard: rgba(24, 25, 28, 0.7);
    --bgProfilCard: rgb(24, 25, 28);
    --contentCardSection: #121117;
    --bgCardNoOpacity: #18191C;
    --bgCardActive: rgba(255, 255, 255, 0.15);
    --borderCard: rgba(255, 255, 255, 0.1);
    --bgInput: rgba(53, 54, 58, 0.7);
    --borderRadius: 16px;
    --bgBlur: 50px;

    --text: #FFFFFF;
    --text-dim: #6D6D6D;
    --text-red: #B83939;
    --text-green: #096E00;

    --font: 'Outfit', sans-serif;

    /* Rareté esprit */

    --bgRare: rgba(16, 66, 115, 0.5);
    --bgEpique: rgb(77, 21, 102, 0.5);
    --bgLeg: rgb(116, 62, 10, 0.5);
    --bgMythique: rgb(168, 148, 66, 0.5);
    --bgOr: rgb(157, 117, 42, 0.5);
    --bgGummy: rgb(159, 69, 64, 0.5);
    --bgGalaxie: rgb(70, 59, 158, 0.5);
    --bgGemme: rgb(112, 152, 163, 0.5);
    --bgHolo: rgb(161, 66, 142, 0.5);
    --bgCube: rgb(115, 9, 116, 0.5);
    --bgQuartz: rgba(105, 65, 162, 0.5);
    --bgCheat: rgba(15, 82, 15, 0.5);
    --bgPirate: rgba(43, 41, 185, 0.5);
    --bgChasseur: rgba(230, 10, 230, 0.5);


    /* message */

    --bubble-other: #2A2A35;
    --bubble-me: rgba(0, 255, 106, 0.1);
    --text-main: #FFFFFF;
    --text-muted: #9CA3AF;
}

:root[data-theme="light"] {
    --bg: #F4F5F7;
    --bgCard: rgba(255, 255, 255, 0.7);
    --bgProfilCard: rgb(255, 255, 255);
    --contentCardSection: #dbdbdb;
    --bgCardNoOpacity: #fcfcfd;
    --bgCardActive: rgba(0, 0, 0, 0.05);
    --borderCard: rgba(0, 0, 0, 0.1);
    --bgInput: rgba(220, 221, 224, 0.7);

    --borderRadius: 16px;
    --bgBlur: 50px;

    --text: #070512;

    /* message */

    --bubble-other: #E4E6EB;
    --bubble-me: rgba(9, 110, 0, 0.15);
    --text-main: #070512;
    --text-muted: #65676B;
}

@font-face {
    font-family: 'Pricedown Bl';
    src: url('../font/Pricedown%20Bl.otf');
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
}

body::-webkit-scrollbar {
    width: 6px;
}

body::-webkit-scrollbar-track {
    background: transparent;
}

body::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* Navbar */

header {
    position: fixed;
    width: 100%;
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border-bottom: 1px solid var(--borderCard);
    z-index: 100;
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header nav .navLinks {
    display: flex;
    align-items: center;
    gap: 20px;
}

header nav .burger {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    display: none;
    justify-content: center;
    align-items: center;
    transition: .2s;
    cursor: pointer;
}

header nav .burger:hover {
    background: var(--bgCardActive);
    transition: .2s;
}

header nav .navLinks .logo {
    color: var(--text);
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

header nav .navLinks .logo img {
    border-radius: 100%;
    width: 40px;
    height: 40px;
}

header nav .navLinks .logo .logoText {
    display: none;
}

header nav .navLinks .separate {
    background: var(--borderCard);
    width: 2px;
    height: 40px;
}

header nav .navLinks ul {
    display: flex;
    align-items: center;
    gap: 10px;
}

header nav .navLinks ul li:hover>a {
    background: var(--bgCardActive);
    transition: .2s;
}

header nav .navLinks ul li a {
    display: block;
    padding: 10px 20px;
    border-radius: 6px;
    color: var(--text);
    transition: .2s;
}

header nav .navLinks ul li a.active {
    background: var(--bgCardActive);
}

header nav .navLinks ul li.dropdownContainer {
    position: relative;
}

header nav .navLinks ul li.dropdownContainer .dropdownTrigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 6px;
    color: var(--text);
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    transition: .2s;
}

header nav .navLinks ul li.dropdownContainer .dropdownTrigger:hover,
header nav .navLinks ul li.dropdownContainer .dropdownTrigger.active {
    background: var(--bgCardActive);
    transition: .2s;
}

header nav .navLinks ul li.dropdownContainer .dropdownTrigger svg {
    transition: transform 0.2s ease;
}

header nav .navLinks ul li.dropdownContainer .dropdownMenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--bgCardNoOpacity);
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    z-index: 110;
    flex-direction: column;
    padding: 5px 0;
}

header nav .navLinks ul li.dropdownContainer:hover .dropdownMenu {
    display: flex;
    animation: fadeIn 0.2s ease-in-out;
}

header nav .navLinks ul li.dropdownContainer:hover .dropdownTrigger svg {
    transform: rotate(180deg);
}

header nav .navLinks ul li.dropdownContainer .dropdownMenu a {
    padding: 10px 15px;
    white-space: nowrap;
    border-radius: 0;
}

header nav .navLinks ul li.dropdownContainer .dropdownMenu a:hover {
    background: var(--bgCardActive);
}

header nav .navLinks ul li.dropdownContainer .dropdownMenu a.active {
    background: var(--bgCardActive);
    color: var(--text);
}

header nav .login {
    border: 2px solid var(--bgCardActive);
    padding: 10px 20px;
    border-radius: 6px;
    color: var(--text);
    transition: .2s;
}

header nav .login:hover {
    background: var(--bgCardActive);
    transition: .2s;
}

header nav .connect {
    display: flex;
    align-items: center;
    gap: 30px;
}

header nav .connect .btnsNav {
    display: flex;
    align-items: center;
    gap: 10px;
}

header nav .notificationsBell {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: fit-content;
}

header nav .btnHeader {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: var(--bgCard);
    border: 1px solid var(--borderCard);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .2s;
}

header nav .btnHeader:hover {
    background: var(--bgCardActive);
    transition: .2s;
}

header nav .btnHeader svg {
    color: var(--text);
    transition: color 0.3s ease;
}

header nav .btnHeader:hover svg {
    color: #47B200;
}

header nav .notificationsBell .notifBadge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--text-red);
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 50%;
    border: 2px solid #2b2b2b;
    pointer-events: none;
}

header nav .notificationsBell .notificationsDropdown {
    display: none;
    position: absolute;
    top: 75px;
    right: 0;
    left: auto;
    transform: none;
    width: 340px;
    max-width: 340px;
    background: var(--bgCardNoOpacity);
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius, 12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    z-index: 1000;
    max-height: 450px;
    overflow-y: auto;
}

header nav .notificationsBell .notificationsDropdown.show {
    display: block;
    animation: fadeIn 0.2s ease-in-out;
}

header nav .notificationsBell .notificationsDropdown .notifItem {
    padding: 14px 18px;
    border-bottom: 1px solid var(--borderCard);
    transition: background 0.2s;
}

header nav .notificationsBell .notificationsDropdown .notifItem:last-child {
    border-bottom: none;
}

header nav .notificationsBell .notificationsDropdown .notifItem:hover {
    background: var(--bgCardActive);
}

header nav .notificationsBell .notificationsDropdown .notifItem p {
    font-size: 13px;
    color: var(--text);
    margin: 0 0 6px 0;
    line-height: 1.4;
    word-break: break-word;
}

header nav .notificationsBell .notificationsDropdown .notifItem .dateNotif,
header nav .notificationsBell .notificationsDropdown .notifItem small {
    font-size: 11px;
    color: var(--text-dim, #a0a0a0);
}

header nav .notificationsBell .notificationsDropdown .notifEmpty {
    padding: 20px;
    text-align: center;
    color: var(--text-dim, #a0a0a0);
    font-size: 14px;
}

@media screen and (max-width: 550px) {
    header nav .notificationsBell {
        position: static;
    }

    header nav .notificationsBell .notificationsDropdown {
        position: fixed;
        top: 95px;
        left: 10px;
        right: 10px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 95px);
        border-radius: 8px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

header nav .profileInfo,
.headerDashboard nav .profileInfo {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 2px;
    border-radius: 6px;
    transition: .3s;
    cursor: pointer;
}

header nav .profileInfo:hover,
.headerDashboard nav .profileInfo:hover {
    background: var(--bgCardActive);
    transition: .3s;
}

header nav .profileInfo img,
.headerDashboard nav .profileInfo img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
}

@media screen and (width <=400px) {

    header nav .profileInfo p,
    .headerDashboard nav .profileInfo p {
        display: none;
    }
}

header nav .profileSetting,
.headerDashboard nav .profileSetting {
    position: absolute;
    top: 95px;
    right: 20px;
    border: 1px solid var(--borderCard);
    background: var(--bgCardNoOpacity);
    border-radius: var(--borderRadius);
    padding: 20px;
    width: 300px;
    display: none;
}

header nav .profileSetting.profilActive,
.headerDashboard nav .profileSetting.profilActive {
    display: block;
}

header nav .profileSetting .profileSettingInfo,
.headerDashboard nav .profileSetting .profileSettingInfo {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--borderCard);
}

header nav .profileSetting .profileSettingInfo img,
.headerDashboard nav .profileSetting .profileSettingInfo img {
    width: 60px;
    height: 60px;
    border-radius: 100%;
}

header nav .profileSetting .profileSettingInfo .profilInfo,
.headerDashboard nav .profileSetting .profileSettingInfo .profilInfo {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

header nav .profileSetting .profileSettingInfo .profilInfo .certif,
.headerDashboard nav .profileSetting .profileSettingInfo .profilInfo .certif {
    display: flex;
    align-items: center;
    gap: 5px;
}

header nav .profileSetting .profileSettingInfo .profilInfo .certif p,
.headerDashboard nav .profileSetting .profileSettingInfo .profilInfo .certif p {
    font-size: 20px;
}

header nav .profileSetting .profileSettingInfo .profilInfo .role,
.headerDashboard nav .profileSetting .profileSettingInfo .profilInfo .role {
    border-radius: 100px;
    padding: 3px 15px;
    text-transform: capitalize;
    width: fit-content;
}

header nav .profileSetting .profileSettingInfo .profilInfo .roleMembre,
.headerDashboard nav .profileSetting .profileSettingInfo .profilInfo .roleMembre {
    color: var(--text-green);
    background: rgba(101, 182, 101, 0.15);
    border: 1px solid rgba(101, 182, 101, 0.30);
}

header nav .profileSetting .profileSettingInfo .profilInfo .roleDonateur,
.headerDashboard nav .profileSetting .profileSettingInfo .profilInfo .roleDonateur {
    color: #c910cf;
    background: rgba(201, 16, 207, 0.15);
    border: 1px solid rgba(201, 16, 207, 0.30);
}

header nav .profileSetting .profileSettingInfo .profilInfo .roleModo,
.headerDashboard nav .profileSetting .profileSettingInfo .profilInfo .roleModo {
    color: #1070cf;
    background: rgba(16, 112, 207, 0.15);
    border: 1px solid rgba(16, 112, 207, 0.30);
}

header nav .profileSetting .profileSettingInfo .profilInfo .roleAdmin,
.headerDashboard nav .profileSetting .profileSettingInfo .profilInfo .roleAdmin {
    color: var(--text-red);
    background: rgba(184, 57, 57, 0.15);
    border: 1px solid rgba(184, 57, 57, 0.30);
}

header nav .profileSetting .profileNavigation,
.headerDashboard nav .profileSetting .profileNavigation {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
}

header nav .profileSetting .profileNavigation a,
.headerDashboard nav .profileSetting .profileNavigation a {
    padding: 10px 20px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 6px;
    transition: .2s;
}

header nav .profileSetting .profileNavigation a:hover,
.headerDashboard nav .profileSetting .profileNavigation a:hover {
    background: var(--bgCardActive);
    transition: .2s;
}

header nav .profileSetting .profileNavigation a:last-child,
.headerDashboard nav .profileSetting .profileNavigation a:last-child {
    color: var(--text-red);
}

header nav .profileSetting .profileNavigation a:last-child:hover,
.headerDashboard nav .profileSetting .profileNavigation a:last-child:hover {
    background: rgba(184, 57, 57, 0.15);
}

@media screen and (width <=1200px) {
    header nav .burger {
        display: flex;
    }

    header nav .navLinks {
        position: fixed;
        top: 84px;
        left: 0;
        height: calc(100vh - 84px);
        padding: 20px 8px 20px 15px;
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 270px;
        transform: translateX(-270px);
        overflow-y: auto;
        overflow-x: hidden;
        background: var(--bgCardNoOpacity);
        border-right: 1px solid var(--borderCard);
        transition: transform 0.25s ease;
    }

    header nav .navLinks .logo {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding-bottom: 5px;
    }

    header nav .navLinks .logo .logoText {
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
        white-space: nowrap;
    }

    header nav .navLinks .separate {
        display: none;
    }

    header nav .navLinks.navbarActive {
        transform: translateX(0px);
    }

    header nav .navLinks ul {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 95%;
    }

    header nav .navLinks ul li {
        width: 100%;
    }

    header nav .navLinks ul li:not(:last-child) {
        border-bottom: 1px solid var(--borderCard);
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    header nav .navLinks ul li.dropdownContainer {
        width: 100%;
    }

    header nav .navLinks ul li.dropdownContainer .dropdownTrigger {
        width: 100%;
        justify-content: space-between;
        font-weight: 500;
    }

    header nav .navLinks ul li.dropdownContainer:hover .dropdownMenu {
        animation: none;
    }

    header nav .navLinks ul li.dropdownContainer:hover .dropdownTrigger svg {
        transform: none;
    }

    header nav .navLinks ul li.dropdownContainer .dropdownMenu {
        position: static;
        box-shadow: none;
        border: none;
        background: transparent;
        width: 100%;
        margin-top: 4px;
        padding-left: 10px;
        display: flex;
        gap: 4px;
    }

    header nav .navLinks ul li.dropdownContainer .dropdownMenu a {
        width: 100%;
        padding: 8px 12px;
        font-size: 13px;
        color: var(--text-dim, #a0a0a0);
        border-radius: 6px;
    }

    header nav .navLinks ul li.dropdownContainer .dropdownMenu a:hover {
        color: var(--text);
        background: var(--bgCardActive);
    }

    header nav .navLinks ul li.dropdownContainer .dropdownMenu a.active {
        color: #ffffff;
        background: var(--bgCardActive);
    }
}

/* ********************************************* */
/*                   MON ESPACE                  */
/* ********************************************* */

section .container {
    display: flex;
    align-items: start;
    gap: 20px;
}

section .container .userInfo {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section .container .userInfo .espaceInfosProfil {
    background: var(--bgProfilCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 500px;
    width: 100%;
    overflow: hidden;
}

section .container .userInfo .espaceInfosProfil .espaceImg {
    position: relative;
}

section .container .userInfo .espaceInfosProfil .espaceImg .banner {
    width: 100%;
}

section .container .userInfo .espaceInfosProfil .espaceImg .filterBanner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(to top, var(--bgProfilCard), transparent);
}

section .container .userInfo .espaceInfosProfil .espaceImg .avatar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -35px;
    border-radius: 100%;
    border: 3px solid var(--bgCard);
    width: 100px;
    height: 100px;
}

section .container .userInfo .espaceInfosProfil .espaceContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 20px 20px 20px;
}

section .container .userInfo .espaceInfosProfil .espaceContent .pseudoRole {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

section .container .userInfo .espaceInfosProfil .espaceContent .pseudoRole .certif {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 30px;
}

section .container .userInfo .espaceInfosProfil .espaceContent .pseudoRole .certif .pseudo {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

section .container .userInfo .espaceInfosProfil .espaceContent .pseudoRole .role {
    border-radius: 100px;
    padding: 3px 15px;
    text-transform: capitalize;
    width: fit-content;
}

section .container .userInfo .espaceInfosProfil .espaceContent .pseudoRole .roleMembre {
    color: var(--text-green);
    background: rgba(101, 182, 101, 0.15);
    border: 1px solid rgba(101, 182, 101, 0.30);
}

section .container .userInfo .espaceInfosProfil .espaceContent .pseudoRole .roleDonateur {
    color: #c910cf;
    background: rgba(201, 16, 207, 0.15);
    border: 1px solid rgba(201, 16, 207, 0.30);
}

section .container .userInfo .espaceInfosProfil .espaceContent .pseudoRole .roleModo {
    color: #1070cf;
    background: rgba(16, 112, 207, 0.15);
    border: 1px solid rgba(16, 112, 207, 0.30);
}

section .container .userInfo .espaceInfosProfil .espaceContent .pseudoRole .roleAdmin {
    color: var(--text-red);
    background: rgba(184, 57, 57, 0.15);
    border: 1px solid rgba(184, 57, 57, 0.30);
}

section .container .userInfo .espaceInfosProfil .espaceContent .pseudoRole .banNotice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border-radius: var(--borderRadius);
    background: rgba(184, 57, 57, 0.15);
    border: 1px solid rgba(184, 57, 57, 0.30);
}

section .container .userInfo .espaceInfosProfil .espaceContent .pseudoRole .banNotice .banTitle {
    font-weight: bold;
}

section .container .userInfo .espaceInfosProfil .espaceContent .espaceInfo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border: 1px solid var(--borderCard);
    width: fit-content;
    border-radius: 6px;
}

section .container .userInfo .espaceInfosProfil .espaceContent .espaceInfo .idDiscord {
    font-size: 14px;
    color: var(--text-dim);
}

section .container .userInfo .espaceInfosProfil .espaceContent .espaceInfo svg {
    cursor: pointer;
    transition: .2s;
}

section .container .userInfo .espaceInfosProfil .espaceContent .espaceInfo svg:hover {
    color: var(--text-green);
    transition: .2s;
}

section .container .userInfo .espaceInfosProfil {
    background: var(--bgProfilCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 500px;
    width: 100%;
    overflow: hidden;
}

section .container .userInfo .accountDetails {
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section .container .userInfo .accountDetails .titleBloc {
    color: var(--text-dim);
    text-transform: uppercase;
}

section .container .userInfo .accountDetails .accountDetail {
    display: flex;
    align-items: center;
    gap: 10px;
}

section .container .userInfo .accountDetails .accountDetail .svg {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bgCardActive);
}

section .container .userInfo .accountDetails .accountDetail .accountDetailInfo p:first-child {
    color: var(--text-dim);
}

section .container .userInfo .accountDetails .separate {
    width: 100%;
    height: 1px;
    background: var(--borderCard);
}

section .container .userInfo .accountDetails .detailDetailTheme {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
}

section .container .userInfo .accountDetails .detailDetailTheme .titleDetail {
    display: flex;
    align-items: center;
    gap: 10px;
}

section .container .userInfo .accountDetails .detailDetailTheme .titleDetail p {
    color: var(--text-dim);
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-switch {
    display: inline-block;
    height: 30px;
    position: relative;
    width: 56px;
}

.slider {
    background-color: var(--bgCard);
    border: 1px solid var(--borderCard);
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
}

.slider:before {
    background-color: var(--text);
    bottom: 3px;
    content: "";
    height: 22px;
    left: 3px;
    position: absolute;
    transition: .4s;
    width: 22px;
    z-index: 2;
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.slider .sun,
.slider .moon {
    color: var(--text);
    z-index: 1;
}

input:checked+.slider {
    background-color: var(--bgCardActive);
}

input:checked+.slider:before {
    transform: translateX(26px);
}

.toast-notification {
    visibility: hidden;
    min-width: 250px;
    background-color: #323232;
    color: var(--text);
    text-align: center;
    border-radius: 8px;
    padding: 16px;
    position: fixed;
    z-index: 1000;
    left: 20px;
    bottom: 20px;
    font-size: 14px;
    font-family: sans-serif;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.toast-notification.show {
    visibility: visible;
    opacity: 1;
}

section .container .ongletsProfilsInfo {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section .container .ongletsProfilsInfo .ongletProfilInfo {
    border: 1px solid yellow;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
}

section .container .ongletsProfilsInfo .ongletProfilInfo li {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px;
    flex: 1;
    border-radius: 6px;
    cursor: pointer;
    transition: .2s;
    min-width: 200px;
}

section .container .ongletsProfilsInfo .ongletProfilInfo li.activeOnglet {
    background: var(--bgCardActive);
}

section .container .ongletsProfilsInfo .ongletProfilInfo li:hover {
    background: var(--bgCardActive);
    cursor: pointer;
    transition: .2s;
}

section .container .ongletsProfilsInfo .listeOnglets {
    position: relative;
    min-height: 600px;
    height: 100%;
}

section .container .ongletsProfilsInfo .listeOnglets .ongletProfil {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 20px;
}

section .container .ongletsProfilsInfo .listeOnglets .ongletProfil.activeOngletProfil {
    display: flex;
}

section .container .ongletsProfilsInfo .listeOnglets .ongletProfil .blocsProfil {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

section .container .ongletsProfilsInfo .listeOnglets .ongletProfil .blocsProfil .blocProfil {
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    min-width: 220px;
}

section .container .ongletsProfilsInfo .listeOnglets .ongletProfil .blocsProfil .blocProfil .blocTitle {
    display: flex;
    align-items: center;
    gap: 10px;
}

section .container .ongletsProfilsInfo .listeOnglets .ongletProfil .blocsProfil .blocProfil svg {
    color: var(--text-green);
}

section .container .ongletsProfilsInfo .listeOnglets .ongletProfil .blocsProfil .blocProfil:last-child svg {
    color: #EAB308;
}

section .container .ongletsProfilsInfo .listeOnglets .ongletProfil .blocsProfil .blocProfil p {
    text-transform: uppercase;
    color: var(--text-dim);
}

section .container .ongletsProfilsInfo .listeOnglets .ongletProfil .blocsProfil .blocProfil .number {
    font-size: 32px;
    color: var(--text);
    font-weight: bold;
}

.reviewsSection {
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
}

.reviewsHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.reviewsHeader svg {
    color: #EAB308;
}

.reviewsHeader h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text);
}

.reviewsContainer {
    display: flex;
    align-items: center;
    gap: 40px;
}

.globalRatingBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 120px;
}

.globalRatingBox .bigRating {
    font-size: 3rem;
    font-weight: bold;
    color: var(--text);
    margin: 0 0 5px 0;
    line-height: 1;
}

.globalRatingBox .starsGlobal {
    display: flex;
    gap: 3px;
    margin-bottom: 5px;
}

.globalRatingBox .reviewCountText {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.reviewCardsList {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
    flex: 1;
    width: 100%;
}

.reviewCard {
    background: var(--contentCardSection);
    border: 1px solid var(--borderCard);
    border-radius: 12px;
    padding: 15px;
    min-width: 250px;
    display: flex;
    flex-direction: column;
}

.reviewCardHeader {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reviewCardHeader .revAvatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.revMeta {
    display: flex;
    flex-direction: column;
}

.revMeta .revUsername {
    margin: 0 0 3px 0;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
}

.revMeta .revStars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.revMeta .revNote {
    margin-left: 5px;
    font-size: 0.75rem;
    color: var(--text-dim);
}

.revDivider {
    height: 1px;
    background-color: #1F2937;
    margin: 12px 0;
    width: 100%;
}

.reviewCard .revComment {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.4;
}

.noReviewsMessage {
    color: var(--text-dim);
    font-style: italic;
    font-size: 0.9rem;
}

@media screen and (width <=492px) {

    .reviewsContainer {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 20px;
    }

}

section .history {
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    height: 100%;
}

section .history .titleBloc {
    font-size: 20px;
    font-weight: bold;
}

section .history .historyList {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
}

section .history .listTrades {
    overflow-y: auto;
    margin-top: 0px;
}

section .history .historyList .historyMessage {
    color: var(--text-dim);
    margin-top: 10px;
}

section .history .historyList .historyItem {
    padding: 20px;
    border-radius: 6px;
    border: 1px solid var(--borderCard);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section .history .historyList .historyItem .historyInfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

section .history .historyList .historyItem .historyInfo .historyStatus {
    border-radius: 100px;
    padding: 3px 15px;
}

section .history .historyList .historyItem .historyInfo .statusOrange {
    color: rgb(255, 197, 89);
    background: rgb(255, 197, 89, 0.15);
    border: 1px solid rgb(255, 197, 89, 0.30);
}

section .history .historyList .historyItem .historyInfo .statusGreen {
    color: var(--text-green);
    background: rgba(101, 182, 101, 0.15);
    border: 1px solid rgba(101, 182, 101, 0.30);
}

section .history .historyList .historyItem .historyInfo .statusRed {
    color: var(--text-red);
    background: rgba(184, 57, 57, 0.15);
    border: 1px solid rgba(184, 57, 57, 0.30);
}

section .history .historyList .historyItem .subject {
    padding: 20px;
    border: 1px solid var(--borderCard);
    background: var(--contentCardSection);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

section .history .historyList .historyItem .subject .historyLabelSujet {
    font-size: 14px;
    color: var(--text-dim);
    text-transform: uppercase;
}

section .history .historyList .historyItem .dateRequete {
    font-size: 14px;
    color: var(--text-dim);
}

@media screen and (width <=1024px) {

    section .container {
        display: flex;
        flex-direction: column;
    }

    section .container .userInfo,
    section .container .userInfo .espaceInfosProfil {
        max-width: 984px;
        width: 100%;
    }

}

.headerSpriteDexProfile {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.headerSpriteDexProfile .titleBloc {
    margin: 0;
}

.headerSpriteDexProfile .spriteDexCount {
    color: var(--text-dim);
    font-size: 0.9rem;
    font-weight: 500;
}

.profileSpriteGrid {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
    width: 100%;
}

section .container .ongletsProfilsInfo .listeOnglets .ongletProfil .history .listeEsprits {
    padding: 0;
    overflow-y: auto;
}

.profileSpriteGrid .emptyGridMessage {
    grid-column: 1 / -1;
    text-align: center;
}

.profileCard {
    width: 100%;
    cursor: default;
    display: flex;
    flex-direction: column;
    margin: 4px;
}

.profileCard .headCardEsprit {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.profileCard .imageContainer {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.profileCard .cardDescription {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 10px;
}

.profileCard .cardDescription .rarity {
    margin: 0;
    line-height: 1;
}

.profileCard .cardDescription .name {
    margin: 0;
    font-size: 0.95rem;
    text-align: center;
    line-height: 1.2;
}

/* ********************************************* */
/*                   HOME PAGE                   */
/* ********************************************* */

/* home page hero header */

.heroHeader {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    user-select: none;
}

.heroHeader .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 1;
}

.heroHeader .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(5, 10, 5, 0.85) 0%,
            rgba(0, 0, 0, 0.6) 50%,
            rgba(5, 15, 5, 0.8) 100%);
    z-index: 2;
}

.heroHeader .container {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding-top: 60px;
}

.heroHeader .hero-content {
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.heroHeader .hero-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 14px;
    background: rgba(45, 122, 0, 0.25);
    border: 1px solid rgba(76, 187, 23, 0.4);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    color: #7ef842;
    backdrop-filter: blur(8px);
}

.heroHeader .container h1 {
    font-size: 56px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -1px;
}

.heroHeader .container p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    max-width: 650px;
}

.heroHeader .cta-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.heroHeader .container .cta-buttons a {
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.25s ease;
    text-decoration: none;
}

.heroHeader .btn-primary {
    background: #2d7a00;
    box-shadow: 0 4px 20px rgba(45, 122, 0, 0.4);
}

.heroHeader .btn-primary:hover {
    background: #389c00;
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(56, 156, 0, 0.6);
}

.heroHeader .btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
}

.heroHeader .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.heroHeader .container .stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
}

.heroHeader .container .stats-bar .stat-item {
    padding: 20px 24px;
    background: var(--bgBlur);
    backdrop-filter: blur(var(--bgBlur));
    border-radius: var(--borderRadius);
    border: 1px solid var(--borderCard);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.heroHeader .container .stats-bar .stat-item:hover {
    transform: translateY(-3px);
    border-color: rgba(76, 187, 23, 0.3);
}

.heroHeader .stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.heroHeader .stat-number {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
}

.heroHeader .stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

@media screen and (max-width: 1024px) {
    .heroHeader .container h1 {
        font-size: 42px;
    }

    .heroHeader .container .stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .heroHeader {
        height: auto;
        min-height: 100vh;
        padding: 80px 0;
    }

    .heroHeader .container h1 {
        font-size: 32px;
    }

    .heroHeader .container p {
        font-size: 16px;
    }

    .heroHeader .container .stats-bar {
        grid-template-columns: 1fr;
    }

    .heroHeader .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .heroHeader .cta-buttons a {
        width: 100%;
        justify-content: center;
    }
}

/* home page Tout sur notre Serveur */

section {
    padding: 150px 20px;
    max-width: 1700px;
    margin: auto;
    border-top: 1px solid var(--borderCard);
}

.firstSection {
    border: none;
}

section .sectionTitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

section .sectionTitle h2 {
    font-size: 36px;
}

section .sectionTitle p {
    color: var(--text-dim);
}

section .cards {
    margin-top: 50px;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 20px;
}

section .cards .card {
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    min-width: 250px;
}

section .cards .card p:first-child {
    font-size: 20px;
    font-weight: bold;
}

/* home page La Communauté SCM */

section .cardContainer {
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    max-width: 700px;
    margin: 50px auto 0 auto;
}

/* home page Liens Utiles */

section .cards .cardNetwork {
    background: rgba(184, 57, 57, 0.30);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 250px;
    cursor: pointer;
    transition: .2s;
}

section .cards .cardNetwork:hover {
    background: rgba(184, 57, 57, 0.50);
    transition: .2s;
}

section .cards .cardNetwork .logoNetwork {
    width: 50px;
    height: 50px;
    color: var(--text-red);
}

section .cards .cardNetwork p {
    font-size: 20px;
    font-weight: bold;
    color: var(--text);
}

section .cards .cardNetwork span {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-red);
}

section .cards .cardNetwork:first-child {
    background: rgba(16, 66, 115, 0.30);
    transition: .2s;
}

section .cards .cardNetwork:first-child:hover {
    background: rgba(16, 66, 115, 0.50);
    transition: .2s;
}

section .cards .cardNetwork:first-child .logoNetwork {
    color: var(--bgRare);
}


section .cards .cardNetwork:first-child span {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--bgRare);
}

section .cards .cardNetwork:last-child {
    background: rgba(168, 148, 66, 0.30);
}

section .cards .cardNetwork:last-child:hover {
    background: rgba(168, 148, 66, 0.50);
}

section .cards .cardNetwork:last-child .logoNetwork {
    color: var(--bgMythique);
}

section .cards .cardNetwork:last-child span {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--bgMythique);
}

/* ********************************************* */
/*                SPRITEDEX PAGE                 */
/* ********************************************* */

/* spritedex page Stats */

.firstSection {
    padding: 150px 20px 50px 20px;
}

section .titleHeaderGenerate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

section .titleSection {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

section .titleSection h2 {
    font-size: 36px;
}

section .titleSection p {
    color: var(--text-dim);
}

section .titleHeaderGenerate .btnSpriteDex {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

section .titleHeaderGenerate .lobbyHacks {
    padding: 10px 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: 6px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: .2s;
}

section .titleHeaderGenerate .lobbyHacks:hover {
    background: var(--bgCardActive);
    transition: .2s;
}

section .titleHeaderGenerate .lobbyHacks .activePoint {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: var(--text-red);

}

section .titleHeaderGenerate .btnGenerate {
    position: relative;
    padding: 10px 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: .2s;
    z-index: 10;
}

section .titleHeaderGenerate .btnGenerate:hover {
    background: var(--bgCardActive);
    transition: .2s;
}

section .titleHeaderGenerate .btnGenerate .exportContainer {
    position: absolute;
    top: 56px;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background: var(--bgCardNoOpacity);
    border-radius: 6px;
    border: 1px solid var(--borderCard);
}

section .titleHeaderGenerate .btnGenerate .exportContainer button {
    background: var(--bgCardNoOpacity);
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-family: var(--font);
    color: var(--text);
    padding: 10px 20px;
    cursor: pointer;
    transition: .2s;
    display: flex;
    align-items: center;
    gap: 20px;
}

section .titleHeaderGenerate .btnGenerate .exportContainer button:hover {
    background: var(--borderCard);
    transition: .2s;
}

section .titleHeaderGenerate .btnGenerate .exportContainer button .point {
    width: 10px;
    height: 10px;
    border-radius: 100px;
    flex-shrink: 0;
    align-self: center;
}

section .titleHeaderGenerate .btnGenerate .exportContainer #btnExportMissing span {
    background: var(--text-red);
}

section .titleHeaderGenerate .btnGenerate .exportContainer #btnExportPossessed span {
    background: var(--text-green);
}

section .titleHeaderGenerate .btnGenerate .exportContainer #btnExportMastered span {
    background: #f1c40f;
}

section .titleHeaderGenerate .btnGenerate .exportContainer #btnExportPossessedNotMastered span {
    background: #8a2be2;
}

section .titleHeaderGenerate .btnGenerate .exportContainer #btnExportAll span {
    background: #2b9fe2;
}

section .titleHeaderGenerate .btnGenerate .exportContainer #btnExportTrade span {
    background: #e22be2;
}

section .cardsStat {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 50px;
}

section .cardsStat .card {
    padding: 20px;
    background: var(--bgCard);
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    backdrop-filter: blur(var(--bgBlur));
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-width: 250px;
}

section .cardsStat .card p:first-child {
    text-transform: uppercase;
    color: var(--text-dim);
}

section .cardsStat .card p:last-child {
    font-size: 32px;
    font-weight: bold;
}

section .cardsStat .card .possessed {
    color: var(--text-green);
}

section .cardsStat .card .missing {
    color: var(--text-red);
}

section .cardsStat .card .mastered {
    color: #f1c40f;
}

.mastery-progress-container {
    margin: 20px 0;
    padding: 20px;
    width: 100%;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: var(--text-dim);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
}

.progress-bar-bg {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    height: 14px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    background: linear-gradient(90deg, #d4af37, #f1c40f);
    height: 100%;
    border-radius: 12px;
    transition: width 0.5s ease-in-out;
}

section .searchFilter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

section .searchFilter select {
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    font-family: var(--font);
    font-size: 16px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: .2s;
}

section .searchFilter select:hover {
    background: var(--bgCardActive);
    transition: .2s;
}

section .searchFilter select option {
    background: var(--bgCard);
}

section .searchFilter .searchContainer {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

@media screen and (width <=630px) {
    section .searchFilter {
        display: flex;
        flex-direction: column;
    }

    section .searchFilter select {
        width: 100%;
    }
}

section .searchFilter .searchContainer .search {
    position: relative;
    width: 100%;
}

section .searchFilter .searchContainer .search input {
    padding: 20px 20px 20px 62px;
    width: 100%;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    font-family: var(--font);
    font-size: 16px;
    color: var(--text);
}

section .searchFilter .searchContainer .search .searchSvg {
    position: absolute;
    top: 0;
    left: 0;
    width: 62px;
    height: 62px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-dim);
}

section .searchFilter .searchContainer .filtreBtn {
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    font-family: var(--font);
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: .2s;
}

section .searchFilter .searchContainer .filtreBtn:hover {
    background: var(--bgCardActive);
    transition: .2s;
}

section .searchFilter .searchContainer .filtreBtn.btnFiltreActive {
    background: rgba(0, 255, 106, 0.3);
    color: var(--text);
}

section .blocFiltre {
    display: none;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    margin-top: 20px;
}

section .blocFiltre.blocActive {
    display: flex;
}

section .blocFiltre .filtre p {
    text-transform: uppercase;
    color: var(--text-dim);
}

section .blocFiltre .filtre .btnFiltre {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

section .blocFiltre .filtre .btnFiltre button {
    padding: 10px 20px;
    border-radius: 6px;
    font-family: var(--font);
    font-size: 16px;
    background: none;
    border: 1px solid var(--borderCard);
    color: var(--text-dim);
    cursor: pointer;
}

section .blocFiltre .filtre .btnFiltre button.filtreActive {
    color: var(--text);
    background: rgba(0, 255, 106, 0.3);
}

section .weekly-countdown-banner {
    position: fixed;
    top: 85px;
    left: 0;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #FFFFFF;
    background: rgb(8, 68, 33);
    z-index: 10;
}

section .weekly-countdown-banner #countdownDisplay {
    font-weight: bold;
}

.listeEsprits {
    padding: 50px 20px 150px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 260px));
    justify-content: center;
    gap: 20px;
}

.listeEsprits .cardEsprit {
    border: 1px solid yellow;
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.listeEsprits .cardEsprit .badgeUnavailable {
    position: absolute;
    top: 16px;
    left: 6px;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(126, 4, 0, 0.7);
    border: 1px solid var(--borderCard);
    width: fit-content;
    transform: rotate(-10deg);
}

.listeEsprits .cardEsprit .infoModal {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .2s;
    z-index: 100;
}

.listeEsprits .cardEsprit .infoModal:hover {
    background: var(--bgCard);
    transition: .2s;
}

.listeEsprits .cardRare {
    background: linear-gradient(to top, var(--bgCard), var(--bgRare));
}

.listeEsprits .cardEpique {
    background: linear-gradient(to top, var(--bgCard), var(--bgEpique));
}

.listeEsprits .cardLegendaire {
    background: linear-gradient(to top, var(--bgCard), var(--bgLeg));
}

.listeEsprits .cardMythique {
    background: linear-gradient(to top, var(--bgCard), var(--bgMythique));
}

.listeEsprits .cardSpecialOr {
    background: linear-gradient(to top, var(--bgCard), var(--bgOr));
}

.listeEsprits .cardSpecialGummy {
    background: linear-gradient(to top, var(--bgCard), var(--bgGummy));
}

.listeEsprits .cardSpecialGalaxie {
    background: linear-gradient(to top, var(--bgCard), var(--bgGalaxie));
}

.listeEsprits .cardSpecialIridescent {
    background: linear-gradient(to top, var(--bgCard), var(--bgHolo));
}

.listeEsprits .cardSpecialGemme {
    background: linear-gradient(to top, var(--bgCard), var(--bgGemme));
}

.listeEsprits .cardSpecialCube {
    background: linear-gradient(to top, var(--bgCard), var(--bgCube));
}

.listeEsprits .cardSpecialQuack {
    background: linear-gradient(to top, var(--bgCard), var(--bgQuartz));
}

.listeEsprits .cardSpecialCheat {
    position: relative;
    overflow: hidden;
    background: var(--bgCard);
}

.listeEsprits .cardSpecialCheat>* {
    position: relative;
    z-index: 2;
}

.listeEsprits .cardSpecialCheat::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 200%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.10;
    background-image:
        linear-gradient(180deg, transparent 0%, #00ff41 20%, transparent 40%, #0f0 60%, transparent 80%, #00ff41 100%),
        repeating-linear-gradient(90deg, transparent 0px, transparent 4px, rgba(0, 255, 65, 0.3) 5px, transparent 6px);
    background-size: 100% 50px, 12px 100%;
    animation: matrixFallListeEsprits 4s linear infinite;
}

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

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

.listeEsprits .cardSpecialPirate {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.listeEsprits .cardSpecialPirate::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background-image: url('../images/sprites/rarities/hacker.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: deplacementHacker 15s ease-in-out infinite;
}

.listeEsprits .cardSpecialPirate::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--bgCard), transparent);
}

@keyframes deplacementHacker {
    0% {
        filter: hue-rotate(0deg) brightness(1);
        transform: translate(0, 0);
    }

    50% {
        filter: hue-rotate(45deg) brightness(1.1);
        transform: translate(0, 0);
    }

    100% {
        filter: hue-rotate(0deg) brightness(1);
        transform: translate(0, 0);
    }
}

.listeEsprits .cardSpecialChasseur {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.listeEsprits .cardSpecialChasseur::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: url('../images/sprites/rarities/reaper.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: rotationLente 30s linear infinite;
}

.listeEsprits .cardSpecialChasseur::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--bgCard), transparent);
}

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

    100% {
        transform: rotate(360deg);
    }
}

.listeEsprits .cardEsprit.possessed-card {
    outline: 3px solid #4CAF50;
    border-radius: 15px;
    transition: border 0.2s ease-in-out;
}

.listeEsprits .cardEsprit.mastered-card {
    outline: 3px solid #FFD700;
}

.listeEsprits .cardEsprit .headCardEsprit {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.listeEsprits .cardEsprit .headCardEsprit .imageContainer {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.listeEsprits .cardEsprit .headCardEsprit .imageContainer .crown {
    position: absolute;
    top: 5px;
    right: 70px;
    height: 22px;
    display: none;
}

.listeEsprits .cardEsprit.mastered-card .headCardEsprit .imageContainer .crown {
    display: block;
    animation: popIn 0.3s ease-out forwards;
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    80% {
        transform: scale(1.2);
        opacity: 1;
    }

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

.cardEsprit .ghost-icon {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    z-index: 10;
    pointer-events: none;
}

.cardEsprit .ghost-icon svg {
    color: var(--text-dim);
}

.cardEsprit.lost-card .ghost-icon {
    display: block;
    animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translate(-50%, -50%);
    }

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

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

.cardEsprit.lost-card {
    outline: 3px dashed var(--text-dim) !important;
}

.cardEsprit.lost-card .infoModal,
.cardEsprit.lost-card .cardDescription,
.cardEsprit.lost-card .btnsCardEsprit,
.cardEsprit.lost-card .imageContainer>img {
    opacity: 0.2;
    transition: opacity 0.3s ease;
}

.cardEsprit.lost-card:hover .infoModal,
.cardEsprit.lost-card:hover .cardDescription,
.cardEsprit.lost-card:hover .btnsCardEsprit,
.cardEsprit.lost-card:hover .imageContainer>img {
    opacity: 0.8;
}

.lost-toggle-container {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    cursor: pointer;
    margin-top: 5px;
}

.listeEsprits .cardEsprit .headCardEsprit .imageContainer .sprite {
    width: 150px;
    height: 150px;
}

.listeEsprits .cardEsprit .headCardEsprit .cardDescription {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.listeEsprits .cardEsprit .headCardEsprit .cardDescription .name {
    font-size: 20px;
}

.listeEsprits .cardEsprit .headCardEsprit .cardDescription .cardInfo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.listeEsprits .cardEsprit .headCardEsprit .cardDescription .cardInfo .rarityRare {
    background: #00458A;
    color: #00FFFB;
    padding: 2px 5px;
    border-radius: 3px;
}

.listeEsprits .cardEsprit .headCardEsprit .cardDescription .cardInfo .rarityEpic {
    background: #4C197B;
    color: #EC27FF;
    padding: 2px 5px;
    border-radius: 3px;
}

.listeEsprits .cardEsprit .headCardEsprit .cardDescription .cardInfo .rarityLegendary {
    background: #8A3C1E;
    color: #FBC363;
    padding: 2px 5px;
    border-radius: 3px;
}

.listeEsprits .cardEsprit .headCardEsprit .cardDescription .cardInfo .rarityMythic {
    background: #7C5D26;
    color: #FFF0A6;
    padding: 2px 5px;
    border-radius: 3px;
}

.listeEsprits .cardEsprit .headCardEsprit .cardDescription .cardInfo .raritySpecial {
    background: linear-gradient(15deg, #5dffe4 0, #8dff9a 8%, #fff36a 16%, #60dfff 24%, #7b7cff 32%, #ff77d8 40%, #ffc45f 48%, #5dffe4 56%, #8dff9a 64%, #fff36a 72%, #60dfff 80%, #7b7cff 88%, #ff77d8 96%, #ffc45f 100%);
    background-size: 430% 100%;
    color: #000000;
    padding: 2px 5px;
    border-radius: 3px;
}

.listeEsprits .cardEsprit .headCardEsprit .cardDescription .cardInfo .pourcentage {
    background: var(--bgCard);
    border: 1px solid var(--borderCard);
    color: var(--text);
    padding: 2px 5px;
    border-radius: 3px;
}

.listeEsprits .cardEsprit .btnsCardEsprit {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.listeEsprits .cardEsprit .btnsCardEsprit .btn,
.listeEsprits .cardEsprit .btnsCardEsprit .mastery {
    background: var(--bgCardActive);
    border: 1px solid var(--borderCard);
    border-radius: 6px;
    color: var(--text);
    padding: 6px 10px;
}

.listeEsprits .cardEsprit .btnsCardEsprit .btn:hover,
.listeEsprits .cardEsprit .btnsCardEsprit .mastery:hover {
    background: #ffffff4b;
}

.listeEsprits .cardEsprit .btnsCardEsprit .btn {
    text-align: center;
    width: 100%;
    cursor: pointer;
    transition: .2s;
}

.listeEsprits .cardEsprit.possessed-card .btnsCardEsprit .btn {
    background: #4caf4f7a;
    color: var(--text);
    border-color: #4CAF50;
    transition: all 0.2s ease-in-out;
}

.listeEsprits .cardEsprit.possessed-card .btnsCardEsprit .btn:hover {
    background: #4CAF50;
}

.listeEsprits .cardEsprit .btnsCardEsprit .mastery {
    cursor: pointer;
    transition: .2s;
}

.listeEsprits .cardEsprit.mastered-card .btnsCardEsprit .mastery {
    background: #ffd9007e;
    border-color: #FFD700;
}

.listeEsprits .cardEsprit.mastered-card .btnsCardEsprit .mastery:hover {
    background: #FFD700;
}

.listeEsprits .cardEsprit.mastered-card .btnsCardEsprit .btn {
    background: #FFD7007a;
    color: var(--text);
    border-color: #FFD700;
}

.listeEsprits .cardEsprit .btnsCardEsprit .mastery img {
    height: 14px;
}

.btnsCardEsprit .lost-btn {
    background: var(--bgCardActive);
    border: 1px solid var(--borderCard);
    border-radius: 6px;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    color: #888;
}

.btnsCardEsprit .lost-btn:hover {
    background: #ffffff4b;
}

.cardEsprit.lost-card .lost-btn {
    color: #ff4d4d;
}

.cardEsprit.lost-card .infoModal,
.cardEsprit.lost-card .cardDescription,
.cardEsprit.lost-card .btnsCardEsprit .btn,
.cardEsprit.lost-card .btnsCardEsprit .mastery,
.cardEsprit.lost-card .imageContainer>img {
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.cardEsprit.lost-card:hover .infoModal,
.cardEsprit.lost-card:hover .cardDescription,
.cardEsprit.lost-card:hover .btnsCardEsprit .btn,
.cardEsprit.lost-card:hover .btnsCardEsprit .mastery,
.cardEsprit.lost-card:hover .imageContainer>img {
    opacity: 0.8;
}

.modal.cardSpecialCheat {
    position: fixed;
    overflow: visible;
    background: linear-gradient(to bottom, var(--bgCheat), var(--bgCard));
}

.modal.cardSpecialCheat::before {
    content: none;
    animation: none;
}

.modal.cardSpecialPirate {
    position: fixed;
    overflow: visible;
    background: linear-gradient(to bottom, var(--bgPirate), var(--bgCard));
}

.modal.cardSpecialPirate::before {
    content: none;
    animation: none;
}

.modal.cardSpecialChasseur {
    position: fixed;
    overflow: visible;
    background: linear-gradient(to bottom, var(--bgChasseur), var(--bgCard));
}

.modal.cardSpecialChasseur::before {
    content: none;
    animation: none;
}

.modal {
    position: fixed;
    top: 145px;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    max-width: 700px;
    width: 90%;
    height: auto;
    max-height: min(750px, calc(100vh - 140px));
    display: none;
    flex-direction: column;
    z-index: 10;
}

.modal .scroll {
    display: flex;
    flex-direction: column;
    gap: 40px;
    overflow-y: auto;
    width: 100%;
    flex: 1;
}

.modal .scroll .closeModalSpriteInfo {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .2s;
}

.modal .scroll .closeModalSpriteInfo:hover {
    background: var(--bgCard);
    transition: .2s;
}

.modal .scroll .badgeUnavailable {
    position: absolute;
    top: 30px;
    left: 20px;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(126, 4, 0, 0.7);
    border: 1px solid var(--borderCard);
    width: fit-content;
    transform: rotate(-10deg);
}

.modal .scroll .imageContainer {
    width: 100%;
    text-align: center;
}

.modal .scroll .imageContainer img {
    width: 400px;
    height: 400px;
}

.modal .scroll .nameEsprit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.modal .scroll .nameEsprit .name {
    font-size: 32px;
}

.modal .scroll .nameEsprit .category {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal .scroll .nameEsprit .category .rarity .rarityRare {
    background: #00458A;
    color: #00FFFB;
    padding: 2px 5px;
    border-radius: 3px;
}

.modal .scroll .nameEsprit .category .rarity .rarityEpic {
    background: #4C197B;
    color: #EC27FF;
    padding: 2px 5px;
    border-radius: 3px;
}

.modal .scroll .nameEsprit .category .rarity .rarityLegendary {
    background: #8A3C1E;
    color: #FBC363;
    padding: 2px 5px;
    border-radius: 3px;
}

.modal .scroll .nameEsprit .category .rarity .rarityMythic {
    background: #7C5D26;
    color: #FFF0A6;
    padding: 2px 5px;
    border-radius: 3px;
}

.modal .scroll .nameEsprit .category .rarity .raritySpecial {
    background: linear-gradient(15deg, #5dffe4 0, #8dff9a 8%, #fff36a 16%, #60dfff 24%, #7b7cff 32%, #ff77d8 40%, #ffc45f 48%, #5dffe4 56%, #8dff9a 64%, #fff36a 72%, #60dfff 80%, #7b7cff 88%, #ff77d8 96%, #ffc45f 100%);
    background-size: 430% 100%;
    color: #000000;
    padding: 2px 5px;
    border-radius: 3px;
}

.modal .scroll .nameEsprit .category .pourcentage {
    background: var(--bgCard);
    border: 1px solid var(--borderCard);
    color: var(--text);
    padding: 2px 5px;
    border-radius: 3px;
}

.modal .scroll .special {
    background: linear-gradient(15deg, #5dffe4 0, #8dff9a 8%, #fff36a 16%, #60dfff 24%, #7b7cff 32%, #ff77d8 40%, #ffc45f 48%, #5dffe4 56%, #8dff9a 64%, #fff36a 72%, #60dfff 80%, #7b7cff 88%, #ff77d8 96%, #ffc45f 100%);
    background-size: 430% 100%;
    color: #000000;
    padding: 2px 5px;
    border-radius: 3px;
    width: fit-content;
}

.modal .scroll .infos {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.modal .scroll .infos .abilitys {
    display: flex;
    gap: 20px;
}

.modal .scroll .infos .abilitys .ability {
    flex: 1;
    padding: 20px;
    background: var(--bgCard);
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal .scroll .infos .abilitys .ability p:first-child {
    text-transform: uppercase;
    color: var(--text-dim);
}

.modal .scroll .variantes {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.modal .scroll .variantes .cardVariantes {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.modal .scroll .variantes .cardVariantes .cardVariante {
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
}

.modal .scroll .variantes .cardVariantes .cardVariante .image {
    width: 150px;
    height: 150px;
    overflow: hidden;
}

.modal .scroll .variantes .cardVariantes .cardVariante .image img {
    width: 100%;
    height: 100%;
    transition: 0.2s;
}

.modal .scroll .variantes .cardVariantes .cardVariante:hover .image img {
    transform: scale(1.2);
    transition: 0.2s;
}

.modal .scroll .variantes .cardVariantes .cardVariante p {
    text-align: center;
}

@media screen and (width <=490px) {

    .modal .scroll .imageContainer img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .modal .scroll .infos .abilitys {
        display: flex;
        flex-direction: column;
    }

}

/* ********************************************* */
/*                      Code                     */
/* ********************************************* */

section .titleHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 50px;
}

section .titleHeader .codeFilters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

section .titleHeader .codeFilters .btnFilter {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 16px;
    background: none;
    border: 1px solid var(--borderCard);
    color: var(--text-dim);
    cursor: pointer;
    transition: .2s;
}

section .titleHeader .codeFilters .btnFilter:hover {
    background: #161616;
    transition: .2s;
}

section .titleHeader .codeFilters .btnFilter.btnFilterActive {
    color: var(--text);
    background: rgba(0, 255, 106, 0.3);
    pointer-events: none;
}

section .codesContainer .rewardTypeSection {
    margin-bottom: 50px;
}

section .codesContainer .rewardTypeSection h3 {
    color: var(--text);
    font-size: 22px;
    font-weight: bold;
}

section .codesContainer .rewardTypeSection .codeList {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 30px;
}

section .codesContainer .rewardTypeSection .codeList .cardCode {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    padding: 20px;
    max-width: 400px;
    width: 100%;
    min-width: 200px;
}

section .codesContainer .rewardTypeSection .codeList .cardCode .formToggleCode {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}

section .codesContainer .rewardTypeSection .codeList .cardCode .switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

section .codesContainer .rewardTypeSection .codeList .cardCode .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

section .codesContainer .rewardTypeSection .codeList .cardCode .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #2a2a2a;
    border: 2px solid #3d3d3d;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 24px;
}

section .codesContainer .rewardTypeSection .codeList .cardCode .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: #888;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
}

section .codesContainer .rewardTypeSection .codeList .cardCode .switch input:checked+.slider {
    background-color: var(--text-green);
    border-color: var(--text-green);
}

section .codesContainer .rewardTypeSection .codeList .cardCode .switch:hover .slider:before {
    background-color: #fff;
}

section .codesContainer .rewardTypeSection .codeList .cardCode .switch input:checked+.slider:before {
    transform: translateX(20px);
    background-color: #fff;
}

section .codesContainer .rewardTypeSection .codeList .cardCode.usedCode {
    opacity: 0.65;
    border: 1px solid var(--text-green);
}

section .codesContainer .rewardTypeSection .codeList .cardCode .headCardCode {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
}

section .codesContainer .rewardTypeSection .codeList .cardCode .headCardCode .sectionHeaderCardCode .title {
    color: var(--text-dim);
    font-size: 14px;
    margin-bottom: 5px;
}

section .codesContainer .rewardTypeSection .codeList .cardCode .headCardCode .sectionHeaderCardCode .code {
    font-size: 20px;
    font-weight: bold;
}

section .codesContainer .rewardTypeSection .codeList .cardCode .headCardCode .sectionCardWarning {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 6px;
    background: rgba(184, 57, 57, 0.15);
    border: 1px solid var(--borderCard);
}

section .codesContainer .rewardTypeSection .codeList .cardCode .headCardCode .sectionCardWarning svg {
    color: var(--text-red);
}

section .codesContainer .rewardTypeSection .codeList .cardCode .headCardCode .sectionCardWarning .warning {
    font-size: 14px;
}

section .codesContainer .rewardTypeSection .codeList .cardCode .copyCode {
    padding: 10px;
    border: 1px solid var(--borderCard);
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    transition: .2s;
}

section .codesContainer .rewardTypeSection .codeList .cardCode .copyCode:hover {
    padding: 10px;
    border: 1px solid var(--borderCard);
    background: var(--bgCardActive);
    border-radius: 6px;
    text-align: center;
    transition: .2s;
}

/* ********************************************* */
/*                     Trade                     */
/* ********************************************* */

section .titleHeaderGenerate .btnCreates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

section .titleHeaderGenerate .btnCreates .btnCreate {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 6px;
    background: #255c00;
    color: #FFFFFF;
    cursor: pointer;
    transition: .2s;
}

section .titleHeaderGenerate .btnCreates .btnCreate:hover {
    background: #398f00;
    transition: .2s;
}

section .titleHeaderGenerate .btnCreates .btnCreate:last-child {
    background: #004fb6;
    transition: .2s;
}

section .titleHeaderGenerate .btnCreates .btnCreate:last-child:hover {
    background: #187cff;
    transition: .2s;
}

section .tabsSelection {
    margin-top: 50px;
    display: flex;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid var(--borderCard);
    overflow-x: auto;
    scrollbar-width: none;
}

section .tabsSelection::-webkit-scrollbar {
    display: none;
}

section .tabsSelection button {
    padding: 10px 20px;
    background: none;
    border: none;
    font-size: 16px;
    color: var(--text);
    font-family: var(--font);
    cursor: pointer;
    transition: .2s;
    white-space: nowrap;
    flex-shrink: 0;
}

section .tabsSelection button:hover {
    background: var(--bgCardActive);
    transition: .2s;
}

section .tabsSelection button.tabActive {
    background: var(--bgCardActive);
}

section .filterTrade {
    padding-top: 30px;
}

section .statFilterTrade {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 50px;
    z-index: 10;
}

section .statFilterTrade .filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

section .statFilterTrade .filter .btnFilter {
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: .2s;
}

section .statFilterTrade .filter .btnFilter:hover {
    background: var(--bgCardActive);
    transition: .2s;
}

section .statFilterTrade .filter .btnFilter .blocFilterTrades {
    position: absolute;
    top: 70px;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 10px;
    background: var(--bgCardNoOpacity);
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    padding: 10px;
    z-index: 10;
}

section .statFilterTrade .filter .btnFilter .blocFilterTrades .blocFilterTrade {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: .2s;
}

section .statFilterTrade .filter .btnFilter .blocFilterTrades .blocFilterTrade:hover {
    background: var(--bgCardActive);
}

section .statFilterTrade .filter .btnFilter .blocFilterTrades .blocFilterTrade.filterTradeActive {
    background: var(--bgCardActive);
    transition: .2s;
}

section .listTrades {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

section .listTrades .cardTradeBox {
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

section .listTrades .cardTradeBox .separate {
    width: 100%;
    height: 1px;
    background: var(--borderCard);
}

section .listTrades .cardTradeBox .cardTradeHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

section .listTrades .cardTradeBox .cardTradeHeader .userInfo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

section .listTrades .cardTradeBox .cardTradeHeader .userInfo img {
    width: 50px;
    height: 50px;
    border-radius: 100px;
}

section .listTrades .cardTradeBox .cardTradeHeader .userInfo .userMeta {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

section .listTrades .cardTradeBox .cardTradeHeader .userInfo .userMeta .certif {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

section .listTrades .cardTradeBox .cardTradeHeader .userInfo .userMeta .certifProfil {
    display: flex;
    align-items: center;
    gap: 5px;
}

section .listTrades .cardTradeBox .cardTradeHeader .userInfo .userMeta .certif .userCertif {
    display: flex;
    align-items: center;
    gap: 5px;
}

section .listTrades .cardTradeBox .cardTradeHeader .userInfo .userMeta .certif .username,
section .listTrades .cardTradeBox .cardTradeHeader .userInfo .userMeta .certifProfil .username {
    font-size: 20px;
}

section .listTrades .cardTradeBox .cardTradeHeader .userInfo .userMeta .certif .userCertif .userLink {
    text-decoration: none;
    color: var(--text);
}

section .listTrades .cardTradeBox .cardTradeHeader .userInfo .userMeta .certif .userCertif .userLink:hover {
    text-decoration: underline;
}

section .listTrades .cardTradeBox .cardTradeHeader .userInfo .userMeta .certif .authorTradesCount {
    font-size: 14px;
    color: var(--text-dim);
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--borderCard);
}

section .listTrades .cardTradeBox .cardTradeHeader .userInfo .userMeta .ratingBlock {
    display: flex;
    align-items: center;
    gap: 10px;
}

section .listTrades .cardTradeBox .cardTradeHeader .userInfo .userMeta .ratingBlock .ratingNumber {
    color: var(--text-dim);
    font-size: 14px;
}

section .listTrades .cardTradeBox .cardTradeHeader .timeAgo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px;
    background: var(--contentCardSection);
    color: var(--text-dim);
    border-radius: 6px;
}

section .listTrades .cardTradeBox .cardTradeBody {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section .listTrades .cardTradeBox .cardTradeBody .tradeSection {
    padding: 20px;
    background: var(--contentCardSection);
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section .listTrades .cardTradeBox .cardTradeBody .tradeSection .itemsGrid {
    display: flex;
    align-items: center;
    gap: 10px;
}

section .listTrades .cardTradeBox .cardTradeBody .tradeSection .itemsGrid .itemThumbnail {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid var(--borderCard);
    border-radius: 6px;
}

section .listTrades .cardTradeBox .cardTradeBody .tradeSection .itemsGrid .moreItemsCard {
    background: var(--bgCardActive);
    color: var(--text);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 100px;
    height: 100px;
}

section .listTrades .cardTradeBox .cardTradeBody .tradeSection .itemsGrid .itemThumbnail .spriteImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

section .listTrades .cardTradeBox .cardTradeBody .tradeSection .itemsGrid .itemThumbnail .badgeMastered {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: #EAB308;
    color: #000;
    font-size: 0.6rem;
    padding: 1px 4px;
    border-radius: 4px;
}

section .listTrades .cardTradeBox .cardTradeBody .tradeDivider {
    display: flex;
    align-items: center;
    gap: 20px;
}

section .listTrades .cardTradeBox .cardTradeBody .tradeDivider .line {
    width: 100%;
    height: 1px;
    background: var(--borderCard);
}

section .listTrades .cardTradeBox .cardTradeBody .tradeDivider .lineCenter {
    min-width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: var(--borderCard);
}

section .listTrades .cardTradeBox .cardTradeFooter {
    display: flex;
    align-items: center;
    gap: 10px;
}

section .listTrades .cardTradeBox .cardTradeFooter .btnDeleteTrade {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    color: var(--text-red);
    cursor: pointer;
    transition: .2s;
}

section .listTrades .cardTradeBox .cardTradeFooter .btnDeleteTrade:hover {
    background: rgba(184, 57, 57, 0.15);
    transition: .2s;
}

section .listTrades .cardTradeBox .cardTradeFooter .btnReport {
    padding: 10px 20px;
    border-radius: 6px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dim);
    cursor: pointer;
    transition: .2s;
}

section .listTrades .cardTradeBox .cardTradeFooter .btnReport:hover {
    color: var(--text-red);
    background: rgba(184, 57, 57, 0.15);
    transition: .2s;
}

section .listTrades .cardTradeBox .cardTradeFooter .btnView {
    padding: 10px 20px;
    flex: 1;
    border-radius: 6px;
    background: #255c00;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: .2s;
}

section .listTrades .cardTradeBox .cardTradeFooter .btnView:hover {
    background: #398f00;
    transition: .2s;
}

.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 32px;
    margin-bottom: 32px;
    font-family: inherit;
}

.pagination-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.pagination-container .page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    min-width: 38px;
    height: 38px;
    background: #232328;
    color: var(--text-dim);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
}

.pagination-container .page-btn:hover:not(.disabled) {
    background: #2D2D34;
    color: var(--text);
}

.pagination-container .page-btn.active {
    background: #255c00;
    color: #000000;
    border-color: #255c00;
    font-weight: 600;
}

.pagination-container .page-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-container .page-ellipsis {
    color: var(--text-dim);
    padding: 0 4px;
    font-weight: 500;
    display: flex;
    align-items: end;
    height: 38px;
    padding-bottom: 8px;
}

.mobile-numbers {
    display: none;
}

@media (max-width: 500px) {
    .desktop-numbers {
        display: none;
    }

    .mobile-numbers {
        display: flex;
    }

    .pagination-container .page-btn {
        padding: 8px 10px;
        font-size: 0.85rem;
    }
}

section .confirmModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

section .confirmModal .modalBox {
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    padding: 20px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

section .confirmModal h3 {
    color: white;
    margin-bottom: 12px;
    font-size: 1.2rem;
    font-weight: 600;
}

section .confirmModal p {
    color: #9CA3AF;
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.4;
}

section .confirmModal .modalButtons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

section .confirmModal .modalButtons button {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s;
    flex: 1;
}

section .confirmModal .modalButtons button:hover {
    background: rgba(255, 255, 255, 0.15);
}

section .confirmModal .modalButtons button:last-child {
    padding: 8px 16px;
    background: #EF4444;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s;
}

section .confirmModal .modalButtons button:last-child:hover {
    background: #DC2626;
}

/* ********************************************* */
/*                  Create Post                  */
/* ********************************************* */

section .btnReturn {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dim);
    margin-bottom: 30px;
    transition: .2s;
    width: fit-content;
}

section .btnReturn:hover {
    display: flex;
    align-items: center;
    color: var(--text);
    gap: 10px;
    transition: .2s;
}

section .blocs {
    display: flex;
    align-items: start;
    gap: 20px;
}

section .blocs .blocUser {
    max-width: 405px;
    width: 100%;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section .blocs .blocUser .blocUserHeader {
    display: flex;
    align-items: center;
    gap: 20px;
}

section .blocs .blocUser .blocUserHeader img {
    width: 50px;
    height: 50px;
    border-radius: 100px;
}

section .blocs .blocUser .blocUserHeader .certif {
    display: flex;
    align-items: center;
    gap: 5px;
}

section .blocs .blocUser .blocUserHeader .certif p {
    font-size: 20px;
}

section .blocs .blocUser .blocUserHeader .certif .authorTradesCount {
    font-size: 14px;
    color: var(--text-dim);
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--borderCard);
}

section .blocs .blocUser .blocUserHeader .blocUserInfo {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

section .blocs .blocUser .blocUserHeader .blocUserInfo .ratingBlock {
    display: flex;
    align-items: center;
    gap: 5px;
}

section .blocs .blocUser .blocUserHeader .blocUserInfo .ratingBlock p {
    color: var(--text-dim);
    font-size: 14px;
}

section .blocs .separate {
    width: 100%;
    height: 1px;
    background: var(--borderCard);
}

section .blocs .blocUser .blocStat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

section .blocs .blocUser .blocStat .blocStatPseudo {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: rgba(0, 0, 0, 0.61);
    border-radius: 6px;
}

section .blocs .blocUser .blocStat .blocStatPseudo img {
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

section .blocs .blocUser .blocStat .blocStatNote {
    display: flex;
    align-items: center;
    gap: 5px;
}

section .blocs .blocUser .blocStat .blocStatNote span {
    color: #EAB308;
}

section .blocs .blocUser .blocStat p:first-child {
    color: var(--text-dim);
}

section .blocs .blocUser .blocUserFooter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

section .blocs .blocUser .blocUserFooter button {
    padding: 10px 20px;
    border-radius: 6px;
    width: 100%;
    border: none;
    background: #255c00;
    font-size: 16px;
    color: #FFFFFF;
    cursor: pointer;
    transition: .2s;
}

section .blocs .blocUser .blocUserFooter button:hover {
    background: #398f00;
    transition: .2s;
}

section .blocs .blocUser .blocUserFooter .btnView {
    padding: 10px 20px;
    border-radius: 6px;
    width: 100%;
    border: 1px solid var(--borderCard);
    background: none;
    text-align: center;
    font-size: 16px;
    color: var(--text);
    cursor: pointer;
    transition: .2s;
}

section .blocs .blocUser .blocUserFooter .btnView:hover {
    background: var(--bgCardActive);
    transition: .2s;
}

section .blocs .blocUser .blocUserFooter p {
    font-size: 14px;
    color: var(--text-dim);
}

section .blocs .blocTradeInfo {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

section .blocs .blocTradeInfo .blocTrade {
    width: 100%;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section .blocs .blocTradeInfo .blocTrade .blocTradeHeader {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

section .blocs .blocTradeInfo .blocTrade .blocTradeHeader p {
    color: var(--text-dim);
}

section .blocs .blocTradeInfo .blocTrade .blocTradeHeaderView {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    gap: 20px;
}

section .blocs .blocTradeInfo .blocTrade .blocTradeHeaderView .actif {
    color: var(--text-green);
    background: rgba(101, 182, 101, 0.15);
    padding: 4px 10px;
    border-radius: 100px;
}

section .blocs .blocTradeInfo .blocTrade .blocTradeHeaderView .prisEnCharge {
    color: rgb(255, 197, 89);
    background: rgba(255, 197, 89, 0.15);
    padding: 4px 10px;
    border-radius: 100px;
}

section .blocs .blocTradeInfo .blocTrade .blocTradeHeaderView .termine {
    color: var(--text-red);
    background: rgba(184, 57, 57, 0.15);
    padding: 4px 10px;
    border-radius: 100px;
}

section .blocs .blocTradeInfo .blocTrade .trades {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section .blocs .blocTradeInfo .blocTrade .trades .trade {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section .blocs .blocTradeInfo .blocTrade .trades .trade span {
    color: var(--text-red);
}

section .blocs .blocTradeInfo .blocTrade .trades .trade .tradeSprite {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 20px;
}

section .blocs .blocTradeInfo .blocTrade .trades .trade .addSprite {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 170px;
    height: 200px;
    border: 1px dashed var(--text-dim);
    border-radius: var(--borderRadius);
    cursor: pointer;
    transition: .2s;
}

section .blocs .blocTradeInfo .blocTrade .trades .trade .addSprite:hover {
    background: var(--borderCard);
    transition: .2s;
}

section .blocs .blocTradeInfo .blocTrade .trades .trade .addSprite svg {
    color: var(--text-dim);
}

section .blocs .blocTradeInfo .blocTrade .trades .trade .tradeSprite .tradeAddedSprite {
    position: relative;
    width: 170px;
    min-height: 250px;
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    transition: .2s;
    padding-bottom: 45px;
}

section .blocs .blocTradeInfo .blocTrade .trades .trade .tradeSprite .tradeAddedSprite img {
    width: 100%;
    margin-top: 15px;
}

section .blocs .blocTradeInfo .blocTrade .trades .trade .tradeSprite .tradeAddedSprite p {
    padding: 10px;
    font-size: 14px;
    text-align: center;
}

.mastery-toggle {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-dim);
    z-index: 5;
}

.mastery-toggle .is-mastered-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.mastery-switch-slider {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    background-color: #2a2a2a;
    border: 1px solid var(--borderCard);
    border-radius: 20px;
    transition: 0.3s;
    cursor: pointer;
}

.mastery-switch-slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: #888;
    border-radius: 50%;
    transition: 0.3s;
}

.is-mastered-checkbox:checked+.mastery-switch-slider {
    background-color: var(--text-green);
    border-color: var(--text-green);
}

.is-mastered-checkbox:checked+.mastery-switch-slider:before {
    transform: translateX(16px);
    background-color: #fff;
}

.mastery-toggle label {
    cursor: pointer;
    user-select: none;
}

section .blocs .blocTradeInfo .blocTrade .trades .trade .tradeSprite .tradeSpriteCard {
    position: relative;
    width: 190px;
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transition: .2s;
}

section .blocs .blocTradeInfo .blocTrade .trades .trade .tradeSprite .tradeSpriteCard img {
    width: 100%;
}

section .blocs .blocTradeInfo .blocTrade .trades .trade .tradeSprite .tradeSpriteCard .rarityRare {
    background: #00458A;
    color: #00FFFB;
    padding: 2px 5px;
    border-radius: 3px;
}

section .blocs .blocTradeInfo .blocTrade .trades .trade .tradeSprite .tradeSpriteCard .rarityEpic {
    background: #4C197B;
    color: #EC27FF;
    padding: 2px 5px;
    border-radius: 3px;
}

section .blocs .blocTradeInfo .blocTrade .trades .trade .tradeSprite .tradeSpriteCard .rarityLegendary {
    background: #8A3C1E;
    color: #FBC363;
    padding: 2px 5px;
    border-radius: 3px;
}

section .blocs .blocTradeInfo .blocTrade .trades .trade .tradeSprite .tradeSpriteCard .rarityMythic {
    background: #7C5D26;
    color: #FFF0A6;
    padding: 2px 5px;
    border-radius: 3px;
}

section .blocs .blocTradeInfo .blocTrade .trades .trade .tradeSprite .tradeSpriteCard .raritySpecial {
    background: linear-gradient(15deg, #5dffe4 0, #8dff9a 8%, #fff36a 16%, #60dfff 24%, #7b7cff 32%, #ff77d8 40%, #ffc45f 48%, #5dffe4 56%, #8dff9a 64%, #fff36a 72%, #60dfff 80%, #7b7cff 88%, #ff77d8 96%, #ffc45f 100%);
    background-size: 430% 100%;
    color: #000000;
    padding: 2px 5px;
    border-radius: 3px;
}

section .blocs .blocTradeInfo .blocTrade .trades .trade .tradeSprite .tradeSpriteCard .spriteName {
    text-align: center;
    color: var(--text);
}

.btnRemoveSprite {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.4);
    color: var(--text-dim);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    transition: .2s;
    backdrop-filter: blur(4px);
}

section .blocs .blocTradeInfo .blocTrade .trades .trade .tradeSprite .tradeAddedSprite:hover .btnRemoveSprite {
    opacity: 1;
}

.btnRemoveSprite:hover {
    background: rgba(255, 60, 60, 0.8);
    color: #fff;
}

section .blocs .blocTradeInfo .blocTrade .trades .separateTrade {
    display: flex;
    align-items: center;
    gap: 20px;
}

section .blocs .blocTradeInfo .blocTrade .trades .separateTrade .line {
    width: 100%;
    height: 1px;
    background: var(--borderCard);
}

section .blocs .blocTradeInfo .blocTrade .trades .separateTrade .lineCenter {
    min-width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: var(--borderCard);
}

section .blocs .blocTradeInfo .tradeDetails {
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section .blocs .blocTradeInfo .tradeDetails p {
    color: var(--text-dim);
}

section .blocs .blocTradeInfo .tradeDetails .inputSection {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

section .blocs .blocTradeInfo .tradeDetails .inputSection label span {
    color: var(--text-red);
}

section .blocs .blocTradeInfo .tradeDetails .inputSection input,
section .blocs .blocTradeInfo .tradeDetails .inputSection textarea {
    padding: 10px;
    background: var(--bgInput);
    border: 1px solid var(--borderCard);
    border-radius: 6px;
    font-size: 16px;
    color: var(--text);
    font-family: var(--font);
    resize: none;
}

@media screen and (width<=900px) {

    section .blocs {
        display: flex;
        flex-direction: column-reverse;
    }

    section .blocs .blocUser {
        max-width: 860px;
    }

}

section .modalSprite {
    position: fixed;
    top: 105px;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 760px;
    width: 90%;
    height: auto;
    max-height: calc(100vh - 125px);
    padding: 20px;
    display: none;
    flex-direction: column;
    gap: 15px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    box-sizing: border-box;
    z-index: 1000;
    overflow: hidden;
}

section .modalSprite .separate {
    width: 100%;
    height: 1px;
    background: var(--borderCard);
    flex-shrink: 0;
}

section .modalSprite .filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

section .modalSprite .filter button {
    padding: 8px 16px;
    border-radius: 6px;
    font-family: var(--font);
    font-size: 14px;
    background: none;
    border: 1px solid var(--borderCard);
    color: var(--text-dim);
    cursor: pointer;
    flex: 1;
    min-width: 90px;
}

section .modalSprite .filter button.filtreActive {
    color: var(--text);
    background: rgba(0, 255, 106, 0.3);
}

section .modalSprite .search {
    position: relative;
    width: 100%;
    flex-shrink: 0;
}

section .modalSprite .search input {
    padding: 10px 10px 10px 42px;
    width: 100%;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: 6px;
    font-family: var(--font);
    font-size: 16px;
    color: var(--text);
    box-sizing: border-box;
}

section .modalSprite .search .searchSvg {
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-dim);
}

section .modalSprite .cardsSprites {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
    overflow-y: auto;
    flex-grow: 1;
    min-height: 0;
    padding-right: 5px;
}

section .modalSprite .cardsSprites .cardSprites {
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--borderCard);
    cursor: pointer;
    transition: .2s;
}

section .modalSprite .cardsSprites .cardSprites:hover {
    border: 1px solid var(--text);
    transition: .2s;
}

.cardRare {
    background: linear-gradient(to top, var(--bgCard), var(--bgRare));
}

.cardEpique {
    background: linear-gradient(to top, var(--bgCard), var(--bgEpique));
}

.cardLegendaire {
    background: linear-gradient(to top, var(--bgCard), var(--bgLeg));
}

.cardMythique {
    background: linear-gradient(to top, var(--bgCard), var(--bgMythique));
}

.cardSpecialOr {
    background: linear-gradient(to top, var(--bgCard), var(--bgOr));
}

.cardSpecialGummy {
    background: linear-gradient(to top, var(--bgCard), var(--bgGummy));
}

.cardSpecialGalaxie {
    background: linear-gradient(to top, var(--bgCard), var(--bgGalaxie));
}

.cardSpecialIridescent {
    background: linear-gradient(to top, var(--bgCard), var(--bgHolo));
}

.cardSpecialGemme {
    background: linear-gradient(to top, var(--bgCard), var(--bgGemme));
}

.cardSpecialCube {
    background: linear-gradient(to top, var(--bgCard), var(--bgCube));
}

.cardSpecialQuack {
    background: linear-gradient(to top, var(--bgCard), var(--bgQuartz));
}

.cardSpecialCheat {
    position: relative;
    overflow: hidden;
    background: var(--bgCard);
}

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

.cardSpecialCheat::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 200%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.10;
    background-image:
        linear-gradient(180deg, transparent 0%, #00ff41 20%, transparent 40%, #0f0 60%, transparent 80%, #00ff41 100%),
        repeating-linear-gradient(90deg, transparent 0px, transparent 4px, rgba(0, 255, 65, 0.3) 5px, transparent 6px);
    background-size: 100% 50px, 12px 100%;
    animation: matrixFall 4s linear infinite;
}

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

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

.cardSpecialPirate {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.cardSpecialPirate::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background-image: url('../images/sprites/rarities/hacker.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: deplacementHacker 15s ease-in-out infinite;
}

.cardSpecialPirate::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--bgCard), transparent);
}

@keyframes deplacementHacker {
    0% {
        filter: hue-rotate(0deg) brightness(1);
        transform: translate(0, 0);
    }

    50% {
        filter: hue-rotate(45deg) brightness(1.1);
        transform: translate(0, 0);
    }

    100% {
        filter: hue-rotate(0deg) brightness(1);
        transform: translate(0, 0);
    }
}

.cardSpecialChasseur {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.cardSpecialChasseur::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: url('../images/sprites/rarities/reaper.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: rotationLente 30s linear infinite;
}

.cardSpecialChasseur::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--bgCard), transparent);
}

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

    100% {
        transform: rotate(360deg);
    }
}

section .modalSprite .cardsSprites .cardSprites.selected {
    border: 3px solid #4CAF50;
    transform: scale(0.95);
    opacity: 0.8;
    transition: all 0.2s ease;
}

section .modalSprite .cardsSprites .cardSprites img {
    width: 100%;
    display: block;
}

section .modalSprite .cardsSprites .cardSprites p {
    padding: 8px;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

section .modalSprite .modalFooter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    padding-top: 5px;
}

section .modalSprite .modalFooter button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    color: var(--text);
    background: #4CAF50;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    section .modalSprite {
        width: 95%;
        height: 90vh;
        padding: 12px;
        gap: 10px;
    }

    section .modalSprite .cardsSprites {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    }

    section .modalSprite .cardsSprites .cardSprites p {
        font-size: 10px;
        padding: 5px;
    }
}

/* ********************************************* */
/*                   View trade                  */
/* ********************************************* */

section .sectionMore {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

section .sectionMore .more {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dim);
    cursor: pointer;
    transition: .2s;
}

section .sectionMore .more:hover {
    color: var(--text);
    transition: .2s;
}

/* ********************************************* */
/*                    Message                    */
/* ********************************************* */

section .sectionMessages {
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border-top: 1px solid var(--borderCard);
    border-radius: 0;
    display: flex;
    gap: 20px;
    position: fixed;
    top: 85px;
    left: 0;
    transform: none;
    height: calc(100dvh - 85px);
    max-width: 100vw;
    width: 100vw;
    box-sizing: border-box;
    z-index: 10;
}

section .sectionMessages .messageLeft {
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
}

section .sectionMessages .messageLeft .titleMessage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

section .sectionMessages .messageLeft .titleMessage .title {
    display: flex;
    align-items: center;
    gap: 15px;
}

section .sectionMessages .messageLeft .titleMessage .title svg {
    color: #255c00;
}

section .sectionMessages .messageLeft .titleMessage .title p {
    font-size: 20px;
}

section .sectionMessages .messageLeft .separate,
section .sectionMessages .messageRight .separate {
    width: 100%;
    height: 1px;
    background: var(--borderCard);
}

section .sectionMessages .messageLeft .search {
    position: relative;
    width: 100%;
}

section .sectionMessages .messageLeft .search input {
    padding: 10px 10px 10px 42px;
    width: 100%;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: 6px;
    font-family: var(--font);
    font-size: 16px;
    color: var(--text);
    box-sizing: border-box;
}

section .sectionMessages .messageLeft .search .searchSvg {
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-dim);
}

section .sectionMessages .messageLeft .ListsMessages {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    flex: 1;
}

.closedConversationsSection {
    margin-top: auto;
    border-top: 1px solid var(--borderCard);
    padding-top: 15px;
}

#toggleClosedBtn {
    width: 100%;
    background: transparent;
    border: 1px solid var(--borderCard);
    color: var(--text-dim);
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 0.2s;
    box-sizing: border-box;
}

#toggleClosedBtn:hover {
    color: #fff;
    border-color: #398f00;
}

#closedChevron {
    transition: transform 0.3s;
}

#closedConversationsList {
    display: none;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
}

#closedConversationsList>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    gap: 8px;
}

#closedConversationsList .reopen-conv-btn {
    background: #398f00;
    border: none;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: 0.2s;
}

#closedConversationsList .reopen-conv-btn:hover {
    background: #255c00;
}

section .sectionMessages>.separate {
    width: 1px;
    height: 100%;
    background: var(--borderCard);
    flex-shrink: 0;
}

section .sectionMessages .messageRight {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

section .sectionMessages .messageRight .headerMessage {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    flex: 0 0 auto;
}

section .sectionMessages .messageRight .headerMessage img {
    width: 50px;
    height: 50px;
    border-radius: 100px;
}

section .sectionMessages .messageRight .headerMessage .headerMessageUser {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

section .sectionMessages .messageRight .headerMessage .headerMessageUser p:last-child {
    font-size: 14px;
    color: var(--text-dim);
}

section .sectionMessages .messageRight .messageContent {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-y: auto;
}

section .sectionMessages .messageRight .messageFooter {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    flex: 0 0 auto;
}

#replyIndicator {
    display: none;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    padding: 8px 45px 8px 12px;
    margin-bottom: 8px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
}

#replyIndicator .reply-content {
    font-size: 0.85rem;
    color: #D1D5DB;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

#cancelReplyBtn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    height: 100%;
    background: transparent;
    border: none;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    color: #9CA3AF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

#cancelReplyBtn:hover {
    color: #ffffff;
}

section .sectionMessages .messageRight .messageFooter form {
    display: flex;
    width: 100%;
    align-items: flex-end;
    gap: 10px;
}

section .sectionMessages .messageRight .messageFooter textarea {
    width: 100%;
    padding: 20px 75px 20px 20px;
    background: var(--bgCard);
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    font-size: 16px;
    color: var(--text);
    outline: none;
    font-family: var(--font);
    resize: none;
    max-height: 120px;
    overflow-y: auto;
    line-height: 1.4;
    box-sizing: border-box;
}

section .sectionMessages .messageRight .messageFooter textarea:focus {
    border-color: #255c00;
}

section .sectionMessages .messageRight .messageFooter button[type="submit"] {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 55px;
    height: 55px;
    background: #398f00;
    border: none;
    border-radius: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text);
    cursor: pointer;
    transition: .2s;
}

section .sectionMessages .messageRight .messageFooter button[type="submit"]:hover {
    background: #255c00;
}

#deleteModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

#deleteModal .modal-content {
    background: #2b2d31;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 24px;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    text-align: center;
    box-sizing: border-box;
}

#deleteModal h3 {
    color: white;
    margin-top: 0;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

#deleteModal p {
    color: #9CA3AF;
    font-size: 0.9rem;
    margin-bottom: 24px;
    line-height: 1.4;
}

#deleteModal .modal-actions {
    display: flex;
    gap: 12px;
    width: 100%;
}

#cancelDeleteBtn {
    flex: 1;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
}

#cancelDeleteBtn:hover {
    background: rgba(255, 255, 255, 0.05);
}

#confirmDeleteBtn {
    flex: 1;
    background: #EF4444;
    border: none;
    color: white;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    transition: opacity 0.2s;
}

#confirmDeleteBtn:hover {
    opacity: 0.9;
}

.mobileToggleOpen,
.mobileToggleClose {
    display: none;
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 5px;
}

#typingIndicatorContainer {
    display: none;
    padding: 0 10px 8px 10px;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #a1a1aa;
    font-weight: 500;
    flex: 0 0 auto;
}

#typingIndicatorContainer p {
    margin: 0;
}

#typingIndicatorContainer strong {
    color: #fff;
}

.typing-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    background-color: #a1a1aa;
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typingBounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

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

#tradeInfoContainer {
    width: 320px;
    display: none;
    flex-direction: column;
    overflow-y: auto;
}

@media (max-width: 1250px) {
    #tradeInfoContainer {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        background: #1a1a24;
        z-index: 50;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
        padding: 20px 15px;
    }
}

@media (max-width: 768px) {

    .mobileToggleOpen,
    .mobileToggleClose {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    section .sectionMessages>.separate {
        display: none;
    }

    section .sectionMessages {
        height: calc(100dvh - 85px);
        padding: 10px;
    }

    section .sectionMessages .messageLeft,
    section .sectionMessages .messageRight {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        background: var(--bgCard);
        border-radius: 0;
    }

    section .sectionMessages .messageLeft {
        opacity: 0;
        transform: translateX(-30px);
        pointer-events: none;
        z-index: 1;
    }

    section .sectionMessages .messageRight {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
        z-index: 2;
    }

    section .sectionMessages.show-conversations .messageLeft {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
        z-index: 2;
    }

    section .sectionMessages.show-conversations .messageRight {
        opacity: 0;
        transform: translateX(30px);
        pointer-events: none;
        z-index: 1;
    }
}

/* ********************************************* */
/*               Boutique Fortnite               */
/* ********************************************* */

.timerBox {
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
}

.timerBox p {
    font-family: 'Kanit', sans-serif;
    font-size: 20px;
    color: var(--text);
}

.timerBox #timeLeft {
    color: #ffdd00;
    font-weight: bold;
    font-size: 20px;
    margin-left: 10px;
}

section #shopContainer {
    padding-top: 50px;
}

section #shopContainer .categoryTitle {
    font-size: 40px;
    word-wrap: break-word;
}

.gridContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    padding: 20px 0;
}

.shopItem {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 3 / 4;
    background: linear-gradient(180deg, #0d5e75 0%, #3e2692 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.shopItem:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.itemBgImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

.modalShop {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.hidden {
    display: none;
}

.modalContent {
    background-color: #1e1e1e;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    max-width: 400px;
    position: relative;
}

.modalContent img {
    width: 100%;
    margin: 15px 0;
}

.closeButton {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
}

.priceTag {
    font-weight: bold;
    color: #ffdd00;
}

.regularPrice {
    text-decoration: line-through;
    color: #b0b0b0;
    font-family: 'Kanit', sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: 14px;
    margin-left: 4px;
}

.finalPrice {
    font-family: 'Kanit', sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: 18px;
    color: white;
}

.itemInfo {
    position: relative;
    z-index: 2;
    padding: 15px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.discountBadge {
    background-color: white;
    color: black;
    font-family: 'Kanit', sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}

.itemName {
    font-family: 'Kanit', sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: 20px;
    color: white;
    margin: 0;
    line-height: 1.1;
    text-transform: uppercase;
}

.itemPrice {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.vbuckIcon {
    width: 18px;
    height: 18px;
}

/* ********************************************* */
/*                  INFORMATION                  */
/* ********************************************* */

section .cardInfos {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 50px;
}

section .cardInfos .cardInfo {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    max-width: 350px;
    width: 100%;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border-radius: var(--borderRadius);
    border: 1px solid var(--borderCard);
}

section .cardInfos .cardInfo .headCardInfo {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
}

section .cardInfos .cardInfo .headCardInfo .nameInfo {
    font-size: 20px;
    font-weight: bold;
}

section .cardInfos .cardInfo .headCardInfo .descriptionInfo {
    color: var(--text-dim);
}

section .cardInfos .cardInfo .openContenuInfoModal {
    padding: 10px;

}

section .cardInfos .cardInfo .openContenuInfoModal {
    background: #255c00;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    transition: .2s;
}

section .cardInfos .cardInfo .openContenuInfoModal:hover {
    background: #398f00;
    transition: .2s;
}

section .modalInfoContenu {
    position: fixed;
    top: 105px;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    max-width: 700px;
    width: 90%;
    height: auto;
    max-height: min(800px, calc(100vh - 140px));
    display: none;
    flex-direction: column;
}

section .modalInfoContenu .headModalInfo {
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--borderCard);
}

section .modalInfoContenu .headModalInfo svg {
    color: var(--text-dim);
    cursor: pointer;
    transition: .2s;
}

section .modalInfoContenu .headModalInfo svg:hover {
    color: var(--text);
    transition: .2s;
}

section .modalInfoContenu .scroll {
    overflow-y: auto;
    margin-top: 20px;
}

/* ********************************************* */
/*                   VIDEO SCM                   */
/* ********************************************* */

section .lastVideo {
    padding: 50px 0;
    border-bottom: 1px solid var(--borderCard);
}

section .lastVideo .titleLast {
    display: flex;
    align-items: center;
    gap: 15px;
}

section .lastVideo .titleLast span {
    display: block;
    width: 12px;
    height: 12px;
    background-color: #ff0000;
    border-radius: 50%;
    animation: pulse-animation 1.5s infinite;
}

@keyframes pulse-animation {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
    }

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

section .lastVideo .blocVideo {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 50px;
}

section .lastVideo .blocVideo iframe {
    width: 900px;
    aspect-ratio: 16/9;
    border-radius: var(--borderRadius);
}

section .lastVideo .blocVideo .infoVideo {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding: 20px;
}

section .lastVideo .blocVideo .infoVideo .flexgrow {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
}

section .lastVideo .blocVideo .infoVideo .flexgrow .videoDescription {
    color: var(--text-dim);
}

section .lastVideo .blocVideo .infoVideo .videoMeta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    color: var(--text-dim);
    padding-top: 20px;
    border-top: 1px solid var(--borderCard);
}

section .lastVideo .blocVideo .infoVideo .videoMeta .view {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media screen and (width <=1440px) {

    section .lastVideo .blocVideo {
        flex-direction: column;
    }

    section .lastVideo .blocVideo iframe {
        width: 100%;
        aspect-ratio: 16/9;
    }

}

section .otherVideo {
    padding-top: 50px;
}

section .otherVideo .videoItems {
    padding-top: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 300px));
    justify-content: center;
    gap: 20px;
}

section .otherVideo .videoItems .videoItem {
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    overflow: hidden;
    height: 400px;
}

section .otherVideo .videoItems .videoItem iframe {
    width: 300px;
    aspect-ratio: 16/9;
}

section .otherVideo .videoItems .videoItem .videoDescription {
    padding: 20px;
    height: 225px;
    display: flex;
    flex-direction: column;
}

section .otherVideo .videoItems .videoItem .videoDescription .flexgrow {
    flex-grow: 1;
}

section .otherVideo .videoItems .videoItem .videoDescription .videoMeta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    color: var(--text-dim);
    padding-top: 20px;
    border-top: 1px solid var(--borderCard);
}

section .otherVideo .videoItems .videoItem .videoDescription .videoMeta .view {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ********************************************* */
/*                    TUTORIEL                   */
/* ********************************************* */

section .cardTutos {
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section .cardTutos .cardTuto {
    width: 100%;
    display: flex;
    gap: 20px;
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
}

section .cardTutos .cardTuto video {
    width: 500px;
    aspect-ratio: 16/9;
    border-radius: 6px;
}

section .cardTutos .cardTuto .descriptionCardTuto {
    width: 100%;
    display: flex;
    flex-direction: column;
}

section .cardTutos .cardTuto .descriptionCardTuto .flexgrow {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px;
}

section .cardTutos .cardTuto .descriptionCardTuto .flexgrow .description {
    color: var(--text-dim);
}

section .cardTutos .cardTuto .descriptionCardTuto .durationVideo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dim);
    padding-top: 20px;
    border-top: 1px solid var(--borderCard);
}

@media screen and (width <=1024px) {

    section .cardTutos .cardTuto {
        flex-direction: column;
    }

    section .cardTutos .cardTuto video {
        width: 100%;
    }

}

/* ********************************************* */
/*                  RECRUTEMENT                  */
/* ********************************************* */

section .ongletForms {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 50px;
}

section .ongletForms .ongletForm {
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 400px;
    width: 100%;
    min-width: 250px;
    cursor: pointer;
}

section .ongletForms .ongletForm.formActive {
    border: none;
    outline: 4px solid var(--text-green);
}

section .ongletForms .ongletForm .svg {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background: var(--bgCardActive);
    display: flex;
    justify-content: center;
    align-items: center;
}

section .ongletForms .ongletForm .ongletFormInfo {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

section .ongletForms .ongletForm .ongletFormInfo .ongletFormName {
    font-size: 20px;
    font-weight: bold;
}

section .ongletForms .ongletForm .ongletFormInfo .status {
    border-radius: 100px;
    padding: 3px 15px;
    font-size: 14px;
    width: fit-content;
}

section .ongletForms .ongletForm .ongletFormInfo .statusOpen {
    color: var(--text-green);
    background: rgba(101, 182, 101, 0.15);
    border: 1px solid rgba(101, 182, 101, 0.30);
}

section .ongletForms .ongletForm .ongletFormInfo .statusClose {
    color: var(--text-red);
    background: rgba(184, 57, 57, 0.15);
    border: 1px solid rgba(184, 57, 57, 0.30);
}

section .contentForm {
    margin-top: 50px;
    padding-top: 50px;
    border-top: 1px solid var(--borderCard);
    display: none;
    flex-direction: column;
    gap: 20px;
}

section .contentForm.contentActive {
    display: flex;
}

section .contentForm .blocs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

section .contentForm .blocs .bloc {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 10px;
    padding: 20px;
    min-width: 250px;
    width: 100%;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
}

section .contentForm .blocs .bloc p:first-child {
    text-transform: uppercase;
    color: var(--text-dim);
}

section .contentForm .blocs .bloc p:last-child {
    font-size: 32px;
    font-weight: bold;
}

section .contentForm .blocs .bloc .statusOpen {
    color: var(--text-green);
}

section .contentForm .blocs .bloc .statusClose {
    color: var(--text-red);
}

section .contentForm .content .heads {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 500px;
    width: 100%;
}

section .contentForm .content .heads .blocHeads {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section .contentForm .content .heads .blocHeads .blocHead {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: 6px;
    padding: 20px;
}

section .contentForm .content .heads .blocHeads .blocHead svg {
    color: #22D3EE;
}

section .contentForm .content .heads .blocInfo {
    margin-top: 30px;
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section .contentForm .content .heads .blocInfo .headBlocInfo {
    display: flex;
    align-items: center;
    gap: 10px;
}

section .contentForm .content .heads .blocInfo .headBlocInfo svg {
    color: #FABE23;
}

section .contentForm .content .heads .blocInfo .headBlocInfo p {
    font-weight: blod;
}

section .contentForm .content .heads .blocInfo ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section .contentForm .content .heads .blocInfo ul li {
    list-style-type: decimal;
    margin-left: 20px;
}

section .contentForm .content .textFormNone {
    margin: 0 auto;
}

@media screen and (width <=1024px) {

    section .contentForm .content .heads {
        max-width: 984px;
        width: 100%;
    }

}

/* ********************************************* */
/*                     DEBAN                     */
/* ********************************************* */

section .content {
    margin-top: 50px;
    padding-top: 50px;
    border-top: 1px solid var(--borderCard);
    display: flex;
    align-items: start;
    gap: 20px;
}

section .content .head {
    padding: 20px;
    background: linear-gradient(to right, rgb(40, 31, 18, 0.7), var(--bgCard));
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 500px;
    width: 100%;
}

section .content .head .headInfos {
    display: flex;
    align-items: center;
    gap: 10px;
}

section .content .head .headInfos svg {
    color: #FABE23;
}

section .content .head .headInfos p {
    font-weight: bold;
}

section .content .head ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section .content .head ul li {
    list-style-type: disc;
    margin-left: 20px;
}

section .content form {
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

section .content .formWrapper {
    position: relative;
    width: 100%;
}

section .content .formWrapper.locked form {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

section .content .formWrapper .formOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    z-index: 10;
    border-radius: var(--borderRadius);
    text-align: center;
    padding: 20px;
}

section .content .formWrapper .formOverlay p {
    color: var(--text);
    font-size: 18px;
    font-weight: 500;
    max-width: 400px;
}

section .content .formWrapper .formOverlay .loginBtn {
    padding: 12px 24px;
    background: #255c00;
    color: var(--text);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: .2s;
}

section .content .formWrapper .formOverlay .loginBtn:hover {
    background: #398f00;
    transition: .2s;
}

section .content form .headForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--borderCard);
}

section .content form .headForm p span {
    color: var(--text-red);
}

section .content form .inputSectionRow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

section .content form .inputSectionRow .inputSection {
    flex: 1;
}

section .content form .inputSectionRow .inputSection input {
    min-width: 222px;
    color: var(--text-dim);
    cursor: not-allowed;
}

section .content form .inputSection {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

section .content form .inputSection label span {
    color: var(--text-red);
}

section .content form .inputSection input,
section .content form .inputSection select,
section .content form .inputSection textarea {
    padding: 10px;
    background: var(--bgInput);
    border: 1px solid var(--borderCard);
    border-radius: 6px;
    font-size: 16px;
    color: var(--text);
}

section .content form .inputSection textarea {
    resize: none;
    font-family: var(--font);
}

section .content form button {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #255c00;
    color: #FFFFFF;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: .2s;
}

section .content form button:hover {
    background: #398f00;
    transition: .2s;
}

@media screen and (width <=1024px) {

    section .content {
        flex-direction: column;
    }

    section .content .head {
        max-width: 984px;
        width: 100%;
    }

}

@media screen and (width <=425px) {

    section .content form .inputSectionRow .inputSection input {
        min-width: 100px;
        width: 100%;
    }

}

/* ********************************************* */
/*                    GTA VI                     */
/* ********************************************* */

.gtavi {
    background: linear-gradient(190deg, #3360D2, #F44BAD, #E08A45);
}

.GTAVI {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.GTAVI .video-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 1;
}

.GTAVI .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(5, 10, 5, 0.85) 0%,
            rgba(0, 0, 0, 0.6) 50%,
            rgba(5, 15, 5, 0.8) 100%);
    z-index: 2;
}

.GTAVI .content {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding-top: 60px;
}

.GTAVI .content .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bgCard);
    backdrop-filter: blur(5px);
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    max-width: 600px;
    width: 100%;
}

.GTAVI .content .container img {
    width: 200px;
}

#countdown {
    font-family: 'Pricedown Bl', arial;
    font-size: 3em;
    font-weight: bold;
}

#countdown span {
    font-size: 30px;
    margin-left: 2px;
    margin-right: 10px;
    text-transform: lowercase;
}

/* ********************************************* */
/*                   DASHBOARD                   */
/* ********************************************* */

/* message dashboard */

.message__success {
    color: var(--text-green);
    font-weight: bold;
}

.message__error {
    color: var(--text-red);
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

/* navbar dashboard */

.headerDashboard {
    position: fixed;
    width: 100%;
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border-bottom: 1px solid var(--borderCard);
    z-index: 100;
}

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

.headerDashboard nav .navLinks {
    display: flex;
    align-items: center;
    gap: 20px;
}

.headerDashboard nav .burger {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    display: none;
    justify-content: center;
    align-items: center;
    transition: .2s;
    cursor: pointer;
    z-index: 1000;
    pointer-events: auto;
}

.headerDashboard nav .burger:hover {
    background: var(--bgCardActive);
    transition: .2s;
}

.headerDashboard nav .navLinks .logo {
    color: var(--text);
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 208px;
}

.headerDashboard nav .navLinks .logo img {
    border-radius: 100%;
    width: 40px;
    height: 40px;
}

.headerDashboard nav .navLinks .separate {
    background: var(--borderCard);
    width: 2px;
    height: 40px;
}

.headerDashboard nav .navLinks ul {
    position: fixed;
    top: 84px;
    left: 0;
    height: calc(100vh - 84px);
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border-right: 1px solid var(--borderCard);
    padding: 20px;
    overflow-y: auto;
}

.headerDashboard nav .navLinks ul .separete {
    width: 100%;
    height: 1px;
    background: var(--borderCard);
}

.headerDashboard nav .navLinks ul .bloc {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.headerDashboard nav .navLinks ul .bloc p {
    text-transform: uppercase;
    color: var(--text-dim);
    font-size: 12px;
}

.headerDashboard nav .navLinks ul .bloc .blocPage {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.headerDashboard nav .navLinks ul .bloc .blocPage li {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: .2s;
}

.headerDashboard nav .navLinks ul .bloc .blocPage li:hover {
    background: var(--bgCardActive);
    transition: .2s;
}

.headerDashboard nav .navLinks ul .bloc .blocPage li.pageDashboardActive {
    background: var(--bgCardActive);
}

.headerDashboard nav .navLinks ul .blocLogo {
    display: none;
}

.headerDashboard nav .navLinks ul .blocLogo .logoResp {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
}

.headerDashboard nav .navLinks ul .blocLogo .logoResp img {
    border-radius: 100%;
    width: 40px;
    height: 40px;
}

.headerDashboard nav .navLinks ul .blocLogo .logoResp p {
    font-size: 20px;
    color: var(--text);
}

.headerDashboard nav .navLinks ul .separeteLogo {
    width: 100%;
    height: 1px;
    background: var(--borderCard);
    display: none;
}

@media screen and (width <=1000px) {

    /* navbar dashboard */

    .headerDashboard nav .burger {
        display: flex;
    }

    .headerDashboard nav .navLinks .logo,
    .headerDashboard nav .navLinks .separate {
        display: none;
    }

    .headerDashboard nav .navLinks ul {
        transform: translateX(-250px);
        transition: .2s;
        background: var(--bgCardNoOpacity);
    }

    .headerDashboard nav .navLinks ul.navbarDashboardActive {
        transform: translateX(0px);
        transition: .2s;
    }

    .headerDashboard nav .navLinks ul .separeteLogo {
        display: block;
    }

    .headerDashboard nav .navLinks ul .blocLogo {
        display: block;
    }

}

/* Onglets du dashboard */

.onglets {
    position: fixed;
    top: 104px;
    left: 270px;
    bottom: 20px;
    right: 20px;
}

.onglet {
    position: relative;
    width: 100%;
    height: 100%;
    display: none;
    overflow-y: auto;
}

.onglet.ongletActive {
    display: block;
}

@media screen and (width <=1000px) {

    /* Onglet du dashboard */

    .onglets {
        position: fixed;
        left: 20px;
        bottom: 20px;
        right: 20px;
        position: 20px;
        transition: .2s;
    }

}

/* Onglet Accueil */

.onglets .onglet .blocs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 50px;
}

.onglets .onglet .blocs .bloc {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 10px;
    padding: 20px;
    min-width: 250px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
}

.onglets .onglet .blocs .bloc p:first-child {
    text-transform: uppercase;
    color: var(--text-dim);
}

.onglets .onglet .blocs .bloc p:last-child {
    font-size: 32px;
    font-weight: bold;
}

.onglets .onglet .statsLogs {
    margin-top: 50px;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 20px;
}

.onglets .onglet .statsLogs .statsLogsBloc {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    min-width: 250px;
    width: 100%;
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
}

.onglets .onglet .statsLogs .statsLogsBloc ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.onglets .onglet .statsLogs .statsLogsBloc ul li {
    padding: 10px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    gap: 20px;
    border-radius: 6px;
}

.onglets .onglet .statsLogs .statsLogsBloc ul li span:last-child {
    font-size: 12px;
    color: var(--text-dim);
}

.onglets .onglet .statsLogs .logs {
    max-height: 458px;
}

.onglets .onglet .statsLogs .logs .logListe {
    overflow-y: auto;
}

/* Onglet Utilisateurs */

.onglets .onglet .searchUser {
    padding: 0;
    margin-top: 50px;
    background: none;
    border: none;
    border-radius: 0;
}

.onglets .onglet .searchUser .searchFilter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.onglets .onglet .searchUser .searchFilter .search {
    position: relative;
    max-width: 400px;
}

.onglets .onglet .searchUser .searchFilter .search input {
    padding: 20px 82px 20px 62px;
    width: 100%;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    font-family: var(--font);
    font-size: 16px;
    color: var(--text);
}

.onglets .onglet .searchUser .searchFilter .search .searchSvg {
    position: absolute;
    top: 0;
    left: 0;
    width: 62px;
    height: 62px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-dim);
}

.onglets .onglet .searchUser .searchFilter .search .approuver {
    position: absolute;
    right: 0;
    top: 0;
    width: 62px;
    height: 62px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--borderRadius);
    color: var(--text);
    background: #255c00;
    border: none;
    cursor: pointer;
    transition: .2s;
}

.onglets .onglet .searchUser .searchFilter .search .approuver:hover {
    background: #398f00;
    transition: .2s;
}

.onglets .onglet .searchUser .searchFilter .search .rejeter {
    position: absolute;
    top: 0;
    right: 62px;
    height: 62px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-dim);
    cursor: pointer;
    transition: .2s;
}

.onglets .onglet .searchUser .searchFilter .search .rejeter:hover {
    color: var(--text);
    transition: .2s;
}

.onglets .onglet .searchUser .searchFilter .filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.onglets .onglet .searchUser .searchFilter .filters select {
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--blur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    color: var(--text);
    font-size: 16px;
    cursor: pointer;
    transition: .2s;
}

.onglets .onglet .searchUser .searchFilter .filters select:hover {
    background: var(--bgCardActive);
    transition: .2s;
}

.onglets .onglet .searchUser .searchFilter .filters select option {
    background: var(--bgCard);
}

.onglets .onglet .table {
    margin-top: 50px;
    padding: 20px;
    width: 100%;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    overflow-x: auto;
}

.onglets .onglet .table .thead,
.onglets .onglet .table .tbody {
    width: 100%;
    display: flex;
    align-items: center;
}

.onglets .onglet .table .thead {
    border-bottom: 1px solid #6d6d6d;
}

.onglets .onglet .table .tbody {
    border-bottom: 1px solid var(--borderCard);
}

.onglets .onglet .table .thead .th,
.onglets .onglet .table .tbody .td {
    padding: 20px 10px;
    min-width: 300px;
    max-width: 300px;
    word-wrap: break-word;
}

.onglets .onglet .table .tbody .td .pseudoLink {
    color: var(--text);
}

.onglets .onglet .table .tbody .td .pseudoLink:hover {
    text-decoration: underline;
}

.onglets .onglet .table .thead .idUser,
.onglets .onglet .table .tbody .idUser {
    min-width: 100px;
}

.onglets .onglet .table .tbody .accountDiscord {
    padding: 20px 10px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.onglets .onglet .table .tbody .accountDiscord img {
    width: 50px;
    height: 50px;
    border-radius: 100%;
}

.onglets .onglet .table .tbody .accountDiscord a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    color: var(--text);
}

.onglets .onglet .table .tbody .accountDiscord a:hover {
    text-decoration: underline;
}

.onglets .onglet .table .tbody .accountDiscord a svg {
    width: 16px;
    height: 16px;
    color: var(--text-red);
}

.onglets .onglet .table .tbody .accountDiscord .discordId {
    font-size: 14px;
    color: var(--text-dim);
}

.onglets .onglet .table .tbody .accountRole {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
}

.onglets .onglet .table .tbody .accountRole .pseudoRole {
    display: flex;
    align-items: center;
    gap: 20px;
}

.onglets .onglet .table .tbody .accountRole .pseudoRole .role {
    padding: 3px 10px;
    border-radius: 100px;
}

.onglets .onglet .table .tbody .accountRole .modoId {
    color: var(--text-dim);
}

.onglets .onglet .table .tbody .activeSanction .activeSanctionBadge {
    padding: 3px 10px;
    border-radius: 100px;
    width: fit-content;
}

.onglets .onglet .table .tbody .activeSanction .activeVert {
    color: var(--text-green);
    background: rgba(101, 182, 101, 0.15);
}

.onglets .onglet .table .tbody .activeSanction .activeRouge {
    color: var(--text-red);
    background: rgba(184, 57, 57, 0.15);
}

.onglets .onglet .table .tbody .td .role {
    padding: 5px 10px;
    border-radius: 100px;
}

.onglets .onglet .table .tbody .td .statut {
    padding: 3px 10px;
    border-radius: 50px;
}

.onglets .onglet .table .tbody .td .debanni {
    color: var(--text-green);
    background: rgba(101, 182, 101, 0.15);
}

.onglets .onglet .table .tbody .td .refuse {
    color: var(--text-red);
    background: rgba(184, 57, 57, 0.15);
}

.onglets .onglet .table .tbody .td .en-attente {
    color: rgb(255, 197, 89);
    background: rgb(255, 197, 89, 0.15);
}

.onglets .onglet .table .tbody .btnActions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.onglets .onglet .table .tbody .td .btnView {
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(53, 54, 58, 0.7);
    cursor: pointer;
    transition: .2s;
}

.onglets .onglet .table .tbody .td .btnView:hover {
    background: rgba(70, 71, 75, 0.7);
    transition: .2s;
}

.onglets .onglet .table .tbody .btnActions .openModalBan {
    background: var(--text-red);
}

.onglets .onglet .table .tbody .btnActions .openModalBan:hover {
    background: #e45454;
}

.onglets .onglet .table .tbody .btnActions .openModalUnban {
    background: #255c00;
}

.onglets .onglet .table .tbody .btnActions .openModalUnban:hover {
    background: #398f00;
}

.onglets .onglet .table .tbody .reason {
    max-height: 150px;
    overflow-y: auto;
    margin: 20px;
}

.onglets .onglet .table .pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.onglets .onglet .table .pagination a {
    padding: 5px 10px;
    background: #6D6D6D;
    color: var(--text);
    border-radius: 6px;
}

.onglets .onglet .table .currentPage {
    padding: 5px 10px;
    background: #47B200;
    color: var(--text);
    border-radius: 6px;
}

.onglets .onglet .table .none {
    padding: 20px;
    text-align: center;
}

.onglets .onglet .modalFormUserView .scroll .blocReponses .blocReponse {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.onglets .onglet .modalFormUserView .scroll .blocReponses .blocReponse select {
    padding: 10px;
    background: rgba(53, 54, 58, 0.7);
    border: 1px solid var(--borderCard);
    border-radius: 6px;
    font-size: 16px;
    color: var(--text);
}

.onglets .onglet .modalFormBanReason .scroll .inputSection {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.onglets .onglet .modalFormBanReason .scroll .inputSection label span {
    color: var(--text-red);
}

.onglets .onglet .modalFormBanReason .scroll .inputSection textarea {
    padding: 10px;
    background: var(--bgInput);
    border: 1px solid var(--borderCard);
    border-radius: 6px;
    font-size: 16px;
    color: var(--text);
    resize: none;
}

.onglets .onglet .modalFormBanReason .btns {
    border-top: 1px solid var(--borderCard);
    display: flex;
    align-items: center;
    gap: 20px;
}

.onglets .onglet .modalFormBanReason .btns p,
.onglets .onglet .modalFormBanReason .btns button {
    flex: 1;
    margin-top: 20px;
    padding: 10px;
    border-radius: 6px;
    font-size: 16px;
    font-family: var(--font);
    text-align: center;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
}

.onglets .onglet .modalFormBanReason .btns p {
    background: rgba(53, 54, 58, 0.7);
    transition: .2s;
}

.onglets .onglet .modalFormBanReason .btns p:hover {
    background: rgba(70, 71, 75, 0.7);
    transition: .2s;
}

.onglets .onglet .modalFormBanReason .btns button.nextToConfirmModal,
.onglets .onglet .modalFormBanConfirm .btns button.approuverBan {
    background: var(--text-red);
    transition: .2s;
}

.onglets .onglet .modalFormBanReason .btns button.nextToConfirmModal:hover,
.onglets .onglet .modalFormBanConfirm .btns button.approuverBan:hover {
    background: #e45454;
    transition: .2s;
}

.onglets .onglet .modalFormBanConfirm .scroll,
.onglets .onglet .modalFormUnbanConfirm .scroll {
    text-align: center;
}

.onglets .onglet .modalFormBanConfirm .scroll p:last-child,
.onglets .onglet .modalFormUnbanConfirm .scroll p:last-child {
    font-size: 14px;
    color: var(--text-red);
}

/* Onglet Option */

.onglets .onglet .formAddOption {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 20px;
}

.onglets .onglet .formAddOption form {
    max-width: 500px;
}

/* Onglet SpriteDex */

.onglets .onglet .titleOnglet {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.onglets .onglet .btn {
    padding: 10px 20px;
    border-radius: 6px;
    background: #255c00;
    width: fit-content;
    cursor: pointer;
    transition: .2s;
}

.onglets .onglet .btn:hover {
    background: #398f00;
    transition: .2s;
}

.onglets .onglet .ongletSpriteDexTabs {
    margin-top: 50px;
    display: flex;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid var(--borderCard);
}

.onglets .onglet .ongletSpriteDexTabs .ongletSaison {
    padding: 10px 20px;
    cursor: pointer;
    transition: .2s;
}

.onglets .onglet .ongletSpriteDexTabs .ongletSaison:hover {
    background: var(--bgCardActive);
    transition: .2s;
}

.onglets .onglet .ongletSpriteDexTabs .ongletSaison.ongletSaisonActive {
    background: var(--bgCardActive);
}

.onglets .onglet form {
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    width: 100%;
    display: flex;
    flex-direction: column;
}

.onglets .onglet form.modalForm,
.onglets .onglet form.modalFormEdit,
.onglets .onglet form#modal-delete {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 600px;
    max-height: 700px;
    height: 100%;
    width: 100%;
    display: none;
    flex-direction: column;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.onglets .onglet form h2 {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--borderCard);
}

.onglets .onglet form .scroll {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    width: 100%;
    flex: 1;
    margin-top: 20px;
    margin-bottom: 20px;
}

.onglets .onglet form .scroll .inputSection {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.onglets .onglet form .scroll .inputSection label span {
    color: var(--text-red);
}

.onglets .onglet form .scroll .inputSection input,
.onglets .onglet form .scroll .inputSection select,
.onglets .onglet form .scroll .inputSection textarea {
    padding: 10px;
    background: var(--bgInput);
    border: 1px solid var(--borderCard);
    border-radius: 6px;
    font-size: 16px;
    color: var(--text);
}

.onglets .onglet form .scroll .inputSection textarea {
    resize: none;
    font-family: var(--font);
}

.onglets .onglet form .btns {
    border-top: 1px solid var(--borderCard);
    display: flex;
    align-items: center;
    gap: 20px;
}

.onglets .onglet form .btns p,
.onglets .onglet form .btns button {
    flex: 1;
    margin-top: 20px;
    padding: 10px;
    border-radius: 6px;
    font-size: 16px;
    font-family: var(--font);
    text-align: center;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
}

.onglets .onglet form .btns p {
    background: rgba(53, 54, 58, 0.7);
    transition: .2s;
}

.onglets .onglet form .btns p:hover {
    background: rgba(70, 71, 75, 0.7);
    transition: .2s;
}

.onglets .onglet form .btns button {
    background: #255c00;
    transition: .2s;
}

.onglets .onglet form .btns button:hover {
    background: #398f00;
    transition: .2s;
}

.onglets .onglet .cardsEsprits,
.onglets .onglet .cardsInfos {
    margin-top: 20px;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 20px;
}

.onglets .onglet .cardsEsprits .cardEsprit,
.onglets .onglet .cardsInfos .cardsInfo {
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    max-width: 300px;
    min-width: 250;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.onglets .onglet .cardsEsprits .cardEsprit .flexgrow,
.onglets .onglet .cardsInfos .cardsInfo .flexgrow {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
}

.onglets .onglet .cardsInfos .cardsInfo .flexgrow .warning {
    padding: 10px;
    background: rgba(184, 57, 57, 0.15);
    border: 1px solid var(--borderCard);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.onglets .onglet .cardsInfos .cardsInfo .flexgrow .warning svg {
    color: var(--text-red);
}

.onglets .onglet .cardsInfos .cardsInfo .flexgrow .warning span {
    flex: 1;
    font-size: 14px;
}

.onglets .onglet .cardsEsprits .cardEsprit .flexgrow .headCard {
    display: flex;
    align-items: center;
    gap: 20px;
}

.onglets .onglet .cardsEsprits .cardEsprit .flexgrow .headCard img {
    width: 100px;
    height: 100px;
}

.onglets .onglet .cardsEsprits .cardEsprit .flexgrow .headCard .headCardInfos {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.onglets .onglet .cardsEsprits .cardEsprit .flexgrow .headCard .headCardInfos .headCardInfo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.rarityRare {
    background: #00458A;
    color: #00FFFB;
    padding: 2px 5px;
    border-radius: 3px;
}

.rarityEpic {
    background: #4C197B;
    color: #EC27FF;
    padding: 2px 5px;
    border-radius: 3px;
}

.rarityLegendary {
    background: #8A3C1E;
    color: #FBC363;
    padding: 2px 5px;
    border-radius: 3px;
}

.rarityMythic {
    background: #7C5D26;
    color: #FFF0A6;
    padding: 2px 5px;
    border-radius: 3px;
}

.raritySpecial {
    background: linear-gradient(15deg, #5dffe4 0, #8dff9a 8%, #fff36a 16%, #60dfff 24%, #7b7cff 32%, #ff77d8 40%, #ffc45f 48%, #5dffe4 56%, #8dff9a 64%, #fff36a 72%, #60dfff 80%, #7b7cff 88%, #ff77d8 96%, #ffc45f 100%);
    background-size: 430% 100%;
    color: #000000;
    padding: 2px 5px;
    border-radius: 3px;
}

.onglets .onglet .cardsEsprits .cardEsprit .flexgrow .headCard .headCardInfos .headCardInfo .pourcentage {
    background: var(--bgCard);
    border: 1px solid var(--borderCard);
    color: var(--text);
    padding: 2px 5px;
    border-radius: 3px;
}

.onglets .onglet .cardsEsprits .cardEsprit .flexgrow .headCard .headCardInfos .name {
    font-size: 32px;
    font-weight: bold;
}

.onglets .onglet .cardsEsprits .cardEsprit .infoCard {
    display: flex;
    align-items: center;
    gap: 30px;
}

.onglets .onglet .cardsEsprits .cardEsprit .btns,
.onglets .onglet .cardsInfos .cardsInfo .btns {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.onglets .onglet .cardsEsprits .cardEsprit .btns .btnOption,
.onglets .onglet .cardsInfos .cardsInfo .btns .btnOption {
    flex: 1;
    padding: 10px 20px;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
}

.onglets .onglet .cardsEsprits .cardEsprit .btns .btnOption:first-child,
.onglets .onglet .cardsInfos .cardsInfo .btns .btnOption:first-child {
    background: rgba(53, 54, 58, 0.7);
    transition: .2s;
}

.onglets .onglet .cardsEsprits .cardEsprit .btns .btnOption:first-child:hover,
.onglets .onglet .cardsInfos .cardsInfo .btns .btnOption:first-child:hover {
    background: rgba(70, 71, 75, 0.7);
    transition: .2s;
}

.onglets .onglet .cardsEsprits .cardEsprit .btns .btnOption:last-child,
.onglets .onglet .cardsInfos .cardsInfo .btns .btnOption:last-child {
    background: var(--text-red);
    transition: .2s;
}

.onglets .onglet .cardsEsprits .cardEsprit .btns .btnOption:last-child:hover,
.onglets .onglet .cardsInfos .cardsInfo .btns .btnOption:last-child:hover {
    background: #e45454;
    transition: .2s;
}

/* Onglet Recrutement */

.onglets .onglet .ongletRecrutements {
    border-bottom: 1px solid var(--borderCard);
    display: flex;
    align-items: center;
    margin-top: 50px;
}

.onglets .onglet .ongletRecrutements .ongletRecrutement {
    padding: 10px;
    cursor: pointer;
    transition: .2s;
}

.onglets .onglet .ongletRecrutements .ongletRecrutement:hover {
    background: var(--bgCardActive);
    transition: .2s;
}

.onglets .onglet .ongletRecrutements .ongletRecrutement.ongletRecrutementActive {
    border-bottom: 2px solid var(--text-green);
}

.onglets .onglet .ongletContentRecrutements {
    display: none;
    flex-direction: column;
}

.onglets .onglet .ongletContentRecrutements.ongletContentRecrutementActive {
    display: flex;
}

.onglets .onglet .ongletContentRecrutements .modalFormOpenRecrutement .scroll .blocReponses .blocReponse {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.onglets .onglet .ongletContentRecrutements .modalFormOpenRecrutement .scroll .blocReponses .blocReponse input {
    padding: 10px;
    background: rgba(53, 54, 58, 0.7);
    border: 1px solid var(--borderCard);
    border-radius: 6px;
    font-size: 16px;
    color: var(--text);
}

.onglets .onglet .ongletContentRecrutements .headTable .filterButtons .openModalRecrutement {
    background: #238bda;
    color: white;
    cursor: pointer;
    transition: .2s;
}

.onglets .onglet .ongletContentRecrutements .headTable .filterButtons .openModalRecrutement:hover {
    background: #69b8f5;
    transition: .2s;
}

/* Onglet Deban */

.onglets .onglet .headTable {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 50px;
}

.onglets .onglet .headTable p {
    font-size: 20px;
    font-weight: bold;
}

.onglets .onglet .headTable .filterButtons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.onglets .onglet .headTable .filterButtons .btnFilter {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 16px;
    border: 1px solid var(--borderCard);
    color: var(--text-dim);
    cursor: pointer;
    transition: .2s;
}

.onglets .onglet .headTable .filterButtons .btnFilter:hover {
    background: #161616;
    transition: .2s;
}

.onglets .onglet .headTable .filterButtons .btnFilter.btnFilterActive {
    color: var(--text);
    background: rgba(0, 255, 106, 0.3);
    pointer-events: none;
}

.onglets .onglet .headTable .filterButtons .separeteVertical {
    width: 1px;
    height: 30px;
    background: var(--borderCard);
}

.onglets .onglet .tableDeban {
    margin-top: 20px;
}

.onglets .onglet .blocs .blocGreen p:last-child {
    color: var(--text-green);
}

.onglets .onglet .blocs .blocRed p:last-child {
    color: var(--text-red);
}

.onglets .onglet .modalFormView {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    max-width: 600px;
    width: 100%;
    max-height: 700px;
    height: 100%;
    display: none;
    flex-direction: column;
}

.onglets .onglet .modalFormView h2 {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--borderCard);
}

.onglets .onglet .modalFormView .scroll {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    width: 100%;
    flex: 1;
    margin-top: 20px;
    margin-bottom: 20px;
}

.onglets .onglet .modalFormView .scroll .users {
    border-bottom: 1px solid var(--borderCard);
    padding: 0 0 20px 0;
}

.onglets .onglet .modalFormView .scroll .users p:first-child {
    font-size: 20px;
    font-weight: bold;
}

.onglets .onglet .modalFormView .scroll .users p:last-child {
    color: var(--text-dim);
}

.onglets .onglet .modalFormView .scroll .BlocBanContext {
    padding: 10px;
    border: 1px solid rgb(165, 55, 55);
    color: rgb(218, 27, 27);
    background: rgba(184, 57, 57, 0.15);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.onglets .onglet .modalFormView .scroll .BlocBanContext .banContextTitle {
    display: flex;
    align-items: center;
    gap: 10px;
}

.onglets .onglet .modalFormView .scroll .BlocBanContext .banContext {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.onglets .onglet .modalFormView .scroll .BlocBanContext .banContext p:last-child {
    word-wrap: break-word;
    max-width: 300px;
}

.onglets .onglet .modalFormView .scroll .blocReponses {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.onglets .onglet .modalFormView .scroll .blocReponses .blocReponse {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.onglets .onglet .modalFormView .scroll .blocReponses .blocReponse p:last-child {
    padding: 10px;
    border: 1px solid var(--borderCard);
    border-radius: 6px;
}

.modalFormTradeView .scroll {
    max-height: 65vh;
    overflow-y: auto;
}

.modalFormTradeView .users {
    margin-bottom: 15px;
    text-align: left;
}

.modalFormTradeView .blocReponse {
    margin-bottom: 15px;
    text-align: left;
}

.modalFormTradeView .blocReponse label-title,
.modalFormTradeView .blocReponse p[style*="color: #9CA3AF"] {
    color: #9CA3AF;
    font-size: 0.9rem;
}

.modalFormTradeView .trade-description {
    background: rgba(255, 255, 255, 0.03);
    padding: 10px;
    border-radius: 6px;
    margin-top: 5px;
}

.modalFormTradeView .sprites-title-propose {
    color: #47B200;
    font-weight: bold;
    margin-bottom: 5px;
}

.modalFormTradeView .sprites-title-recherche {
    color: #3B82F6;
    font-weight: bold;
    margin-bottom: 5px;
}

.modalFormTradeView .sprites-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.modalFormTradeView .sprite-badge {
    background: rgba(255, 255, 255, 0.05);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.modalFormTradeView .sprite-badge img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.modalFormTradeView .no-sprites {
    font-size: 0.85rem;
    color: #9CA3AF;
}

.onglets .onglet .modalFormView .btns {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.onglets .onglet .modalFormView .btns p,
.onglets .onglet .modalFormView .btns a {
    flex: 1;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    color: var(--text);
}

.onglets .onglet .modalFormView .btns .closeModalView,
.onglets .onglet .modalFormView .btns .closeModalSupportView,
.onglets .onglet .modalFormView .btns .closeModalDonateurView,
.onglets .onglet .modalFormView .btns .closeModalGuideView {
    background: rgba(53, 54, 58, 0.7);
    transition: .2s;
}

.onglets .onglet .modalFormView .btns .closeModalView:hover,
.onglets .onglet .modalFormView .btns .closeModalSupportView:hover,
.onglets .onglet .modalFormView .btns .closeModalDonateurView:hover,
.onglets .onglet .modalFormView .btns .closeModalGuideView:hover {
    background: rgba(70, 71, 75, 0.7);
    transition: .2s;
}

.onglets .onglet .modalFormView .btns .rejeter {
    background: var(--text-red);
    transition: .2s;
}

.onglets .onglet .modalFormView .btns .rejeter:hover {
    background: #e45454;
    transition: .2s;
}

.onglets .onglet .modalFormView .btns .approuver {
    background: #255c00;
    transition: .2s;
}

.onglets .onglet .modalFormView .btns .approuver:hover {
    background: #398f00;
    transition: .2s;
}

.onglets .onglet .modalFormView .btns .rejeterDisabled {
    background: var(--text-red);
    opacity: 0.5;
    cursor: not-allowed;
}

.onglets .onglet .modalFormView .btns .approuverDisabled {
    background: #255c00;
    opacity: 0.5;
    cursor: not-allowed;
}

/* Onglet Logs */

.logsHeaderContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.logsSearchWrapper {
    position: relative;
    min-width: 250px;
}

.logsSearchInput {
    width: 100%;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s;
}

.logsSearchInput:focus {
    border-color: rgba(75, 192, 192, 0.5);
}

.statsLogsContainer {
    margin-top: 50px;
    padding: 20px;
    background: var(--bgCard);
    backdrop-filter: var(blur(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
}

.logsListContainer {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 600px;
    overflow-y: auto;
}

.logItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-radius: 8px;
    border-top: 1px solid var(--borderCard);
    border-right: 1px solid var(--borderCard);
    border-bottom: 1px solid var(--borderCard);
    transition: transform 0.2s, background 0.2s;
}

.logItem:hover {
    background: var(--borderCard);
}

.logInscription {
    border-left: 4px solid #4bc0c0;
}

.logConnexion {
    border-left: 4px solid #36a2eb;
}

.logItemLeft {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logIconWrapper {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.logMessage {
    color: var(--text);
    font-size: 0.95rem;
}

.logBadge {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.logInscription .logBadge {
    background: rgba(75, 192, 192, 0.15);
    color: #4bc0c0;
}

.logConnexion .logBadge {
    background: rgba(54, 162, 235, 0.15);
    color: #36a2eb;
}

.logUserAvatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--borderCard);
}

.logSubInfo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.logDiscordId {
    font-size: 14px;
    color: var(--text-dim);
}

.logDate {
    color: var(--text-dim);
    font-size: 14px;
    white-space: nowrap;
    margin-left: 15px;
}

.logEmpty {
    text-align: center;
    padding: 30px;
    color: var(--text-dim);
}

#loadingIndicator {
    text-align: center;
    color: var(--text-dim);
    padding: 10px;
    font-size: 0.85rem;
    display: none;
}

/* Onglet Serveurs */

.serverSelectionContainer {
    padding-top: 40px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.serverGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.serverCard {
    background: var(--bgCard);
    backdrop-filter: blur(var(--bgBlur));
    border: 1px solid var(--borderCard);
    border-radius: var(--borderRadius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, border-color 0.2s;
    position: relative;
}

.serverCard:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
}

.serverCardBanner {
    height: 120px;
    background: rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.serverCardBanner .blurBg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
    filter: blur(15px);
    transform: scale(1.1);
}

.serverCardIcon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 4px solid var(--bgCard);
    background: #36393f;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    position: absolute;
    top: 85px;
    left: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.serverCardIcon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.serverCardBody {
    padding: 50px 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.serverCardInfo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.serverCardInfo h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.serverCardInfo p {
    font-size: 14px;
    color: var(--text-dim);
    margin: 0;
}

.serverCardBtn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
}

.btnBlue {
    background: #448cfc;
    color: #ffffff;
    border: none;
}

.btnBlue:hover {
    background: #3273db;
}

.btnGrey {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
    border: 1px solid var(--borderCard);
}

.btnGrey:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ========================================= */
/*                  Serveur                  */
/* ========================================= */

.dbLayout {
    position: fixed;
    top: 85px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    color: #dbdee1;
    overflow: hidden;
    z-index: 5;
    font-family: 'gg sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.dbServerList {
    width: 72px;
    min-width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 8px;
    overflow-y: auto;
}

.dbServerList::-webkit-scrollbar {
    display: none;
}

.dbServerItem {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.dbServerIcon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #313338;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #dbdee1;
    font-weight: bold;
    font-size: 16px;
    overflow: hidden;
    transition: all 0.2s ease;
}

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

.dbServerItem:hover .dbServerIcon,
.dbServerActive .dbServerIcon {
    border-radius: 16px;
}

.dbServerDisabled .dbServerIcon {
    filter: grayscale(100%);
    opacity: 0.3;
}

.dbServerDisabled:hover .dbServerIcon {
    opacity: 0.8;
}

.dbServerPill {
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 40px;
    background-color: white;
    border-radius: 0 4px 4px 0;
}

.dbModuleList {
    width: 250px;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    background: var(--bgCardNoOpacity);
    border-right: 1px solid var(--borderCard);
}

.dbServerHeader {
    height: 222px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--borderCard);
    padding: 20px;
}

.dbServerHeaderIcon {
    width: 150px;
    height: 150px;
    border-radius: 100px;
    background-color: #1e1f22;
    margin-bottom: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
}

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

.dbServerHeader h3 {
    margin: 0;
    font-size: 16px;
    color: #f2f3f5;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.dbMenuItems {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    flex-grow: 1;
    overflow-y: auto;
}

.dbMenuItem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 2px;
    border-radius: 4px;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: background 0.1s, color 0.1s;
}

.dbMenuItem:hover {
    background: var(--bgCardActive);
    color: var(--text);
}

.dbMenuItem.active {
    background: var(--bgCardActive);
    color: var(--text);
}

.dbConfigContent {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
}

.dbContentHeader {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 50px;
}

.dbContentHeader h2 {
    color: var(--text);
    font-size: 24px;
    font-weight: 600;
}

.dbContentHeader p {
    font-size: 14px;
    color: var(--text-dim);
}

.dbConfigSection {
    background-color: var(--bgCard);
    backdrop-filter: blur(var(--blur));
    border-radius: var(--borderRadius);
    padding: 20px;
    margin-bottom: 20px;
}

.dbSectionHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.dbSectionTexts h3 {
    color: var(--text);
    font-size: 18px;
    margin: 0 0 5px 0;
}

.dbSectionTexts p {
    color: var(--text-dim);
    font-size: 14px;
    margin: 0;
}

.dbSectionBody {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dbInputGroup label {
    display: block;
    color: #b5bac1;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
}

.dbSelect,
.dbTextarea {
    width: 100%;
    background: var(--bgInput);
    border: none;
    border-radius: 4px;
    color: #dbdee1;
    padding: 12px;
    font-size: 14px;
    outline: none;
    font-family: inherit;
    resize: vertical;
}

.dbSwitch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.dbSwitch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.dbSlider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--text-dim);
    transition: .2s;
    border-radius: 24px;
}

.dbSlider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #FFFFFF;
    transition: .2s;
    border-radius: 50%;
}

input:checked+.dbSlider {
    background: var(--text-green);
}

input:checked+.dbSlider:before {
    transform: translateX(20px);
}

.dbCommandRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.dbDivider {
    border: 0;
    height: 1px;
    background: var(--borderCard);
    margin: 0;
}

.dbCmdBadge {
    background: var(--bgCardActive);
    color: var(--text);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 15px;
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
}

.dbCommandRow h3 {
    display: flex;
    align-items: center;
}

.dbLayout .burger {
    display: none;
}

@media screen and (max-width: 900px) {
    .dbLayout .burger {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 25px;
        left: 20px;
        z-index: 100;
        cursor: pointer;
        color: var(--text);
        background-color: var(--bgCard);
        border: 1px solid var(--borderCard);
        padding: 8px;
        border-radius: 8px;
    }

    .dbServerList {
        position: fixed;
        top: 85px;
        left: -72px;
        height: calc(100vh - 85px);
        background: var(--bgCardNoOpacity, #1e1f22);
        z-index: 99;
        transition: left 0.3s ease-in-out;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
    }

    .dbServerList.dbServerListActive {
        left: 0;
    }

    .dbModuleList {
        position: fixed;
        top: 85px;
        left: -322px;
        width: 250px;
        height: calc(100vh - 85px);
        z-index: 98;
        transition: left 0.3s ease-in-out;
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);
    }

    .dbModuleList.dbModuleListActive {
        left: 72px;
    }
}

@media screen and (max-width: 600px) {

    .dbServerList.dbServerListActive {
        left: 0;
    }

    .dbModuleList.dbModuleListActive {
        left: 72px;
        width: calc(100% - 72px) !important;
    }
}

/* Onglet Messages */

.msgGridContainer {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

@media screen and (max-width: 1024px) {
    .msgGridContainer {
        grid-template-columns: 1fr;
    }
}

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

.dbInputGroup label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-dim);
}

.dbTextarea {
    width: 100%;
    border: 1px solid var(--bgInput);
    border-radius: 6px;
    padding: 12px;
    color: #f2f3f5;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
    resize: vertical;
    font-family: inherit;
}

.dbTextarea:focus {
    border-color: #5865f2;
}

.dbTextarea::placeholder {
    color: var(--text-dim);
}

.custom-select-container {
    position: relative;
    width: 100%;
    user-select: none;
    font-size: 14px;
}

.custom-select-trigger {
    background-color: var(--bgInput, #1e1f22);
    border: 1px solid var(--borderInput, #383a40);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--text, #dbdee1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.2s;
}

.custom-select-container.open .custom-select-trigger {
    border-color: #255c00;
}

.custom-options-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bgCardNoOpacity);
    border: 1px solid var(--borderCard);
    border-radius: 8px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 99;
    display: none;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.custom-select-container.open .custom-options-list {
    display: block;
}

.custom-option {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: var(--text);
    transition: background 0.15s;
}

.custom-option:hover {
    background: #35373c;
    color: var(--text);
}

.custom-option.selected {
    background: #404249;
}

.custom-option .channel-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.custom-option .channel-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.custom-option .channel-category {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 0.5px;
}

.discord-preview-box {
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--borderCard);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.discord-msg-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.discord-message-content-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.discord-bot-avatar-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.discord-bot-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.discord-bot-mini-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background-color: #398f00;
    color: #398f00;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bgCardNoOpacity);
}

.discord-msg-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 20px;
}

.discord-bot-name {
    font-weight: 600;
    font-size: 15px;
}

.discord-bot-tag {
    background-color: #5865f2;
    color: #FFFFFF;
    font-size: 10px;
    padding: 0px 5px;
    border-radius: 4px;
    font-weight: 600;
}

.discord-msg-time {
    color: var(--text-dim);
    font-size: 12px;
    margin-left: 2px;
}

.msgSidebarList {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.msgActiveCard {
    background: var(--bgCardActive);
    padding: 12px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--borderCard, transparent);
}

.dbErrorServer {
    color: red;
    text-align: center;
    padding: 50px;
    padding-top: 85px;
}

.dbTabActiveBlock {
    display: block;
}

.dbTabHidden {
    display: none;
}

.dbConfigSectionPadding {
    padding: 0 24px;
}

.dbEmptyNative {
    padding: 20px;
    color: #b5bac1;
}

.dbMarginBottom20 {
    margin-bottom: 20px;
}

.dbFormErrorAlert {
    display: none;
    background-color: rgba(237, 66, 69, 0.15);
    border: 1px solid #ed4245;
    color: #ed4245;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 15px;
}

.dbSelectedChannelText {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dbChannelLoadError {
    padding: 12px 16px;
    color: var(--text-dim);
}

.dbTextareaWrapper {
    width: 100%;
    margin-top: 4px;
}

.dbTextInput {
    width: 100%;
    padding: 10px;
    background: var(--bgInput);
    border: 1px solid var(--borderCard);
    border-radius: 8px;
    color: var(--text);
}

.dbFormButtonsRow {
    display: flex;
    justify-content: end;
    gap: 10px;
    margin-top: 15px;
}

.dbBtnCancel {
    color: var(--text);
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 20px;
    font-weight: 600;
    border-radius: 8px;
}

.dbBtnCancel:hover {
    background: var(--bgCardActive);
}

.dbBtnSave {
    background: #255c00;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    padding: 12px 20px;
    font-weight: 600;
    border-radius: 8px;
}

.dbBtnSave:hover {
    background: #398f00;
}

.dbBtnSend {
    background: #255c00;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    padding: 12px 20px;
    font-weight: 600;
    border-radius: 8px;
}

.dbBtnSend:hover {
    background: #398f00;
}

.dbConfigSectionNoMargin {
    margin-bottom: 0;
}

.dbActiveMsgsTitle {
    color: var(--text);
    font-size: 16px;
    margin-bottom: 15px;
}

.dbActiveMsgsContainer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dbActiveCardContentWrapper {
    margin-bottom: 8px;
}

.dbActiveCardTitle {
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 2px 0;
}

.dbActiveCardText {
    color: var(--text-dim);
    font-size: 12px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.dbActiveCardButtons {
    display: flex;
    gap: 6px;
}

.dbBtnEdit {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    color: var(--text);
    border: none;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: .2s;
}

.dbBtnEdit:hover {
    background: rgba(47, 143, 0, 0.30);
    transition: .2s;
}

.dbBtnDelete {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    color: var(--text-red);
    border: none;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: .2s;
}

.dbBtnDelete:hover {
    background: rgba(184, 57, 57, 0.30);
    transition: .2s;
}

.dbNoActiveMsgs {
    color: var(--text-dim);
    font-size: 13px;
    text-align: center;
    margin: 10px 0;
}

.dbGlobalNotification {
    border: 1px solid transparent;
}

.dbNotificationSuccess {
    background-color: rgba(45, 125, 70, 0.15);
    border-color: #2d7d46;
    color: #43b581;
}

.dbAlertError {
    display: block;
    background-color: rgba(237, 66, 69, 0.15);
    border: 1px solid #ed4245;
    color: #ed4245;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 15px;
}

.discord-typing-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 20px;
}

.discord-typing-loader span {
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
    animation: discordTypingBounce 1.4s infinite ease-in-out both;
}

.discord-typing-loader span:nth-child(1) {
    animation-delay: -0.32s;
}

.discord-typing-loader span:nth-child(2) {
    animation-delay: -0.16s;
}

.discord-typing-loader span:nth-child(3) {
    animation-delay: 0s;
}

@keyframes discordTypingBounce {

    0%,
    80%,
    100% {
        transform: scale(0);
        opacity: 0.4;
    }

    40% {
        transform: scale(1.0);
        opacity: 1;
    }
}

/* Onglet Messages Récurrents */

.rec-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media screen and (max-width: 768px) {
    .rec-grid-2 {
        grid-template-columns: 1fr;
    }
}

.rec-mode-slider-container {
    position: relative;
    display: flex;
    background: var(--bgCardNoOpacity);
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 12px;
    border: 1px solid var(--borderCard);
}

.rec-slider-bg {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: #255c00;
    border-radius: 6px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rec-mode-btn {
    position: relative;
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-dim);
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    z-index: 1;
    transition: color 0.3s;
}

.rec-mode-btn.active {
    color: #FFFFFF;
}

.rec-anim-container {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.rec-plage-box {
    background: var(--bgCardNoOpacity);
    border: 1px solid var(--borderCard);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 75px;
}

.rec-plage-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--text);
}

.rec-plage-inputs {
    display: flex;
    gap: 10px;
    align-items: center;
}

.rec-plage-inputs input[type="range"] {
    width: 50%;
    accent-color: #255c00;
}

.rec-days-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.recDayBtn {
    flex: 1;
    min-width: 65px;
    background: var(--bgCardNoOpacity);
    border: 1px solid var(--borderCard);
    color: var(--text-dim);
    padding: 10px 0;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    font-size: 13px;
    transition: 0.2s;
}

.recDayBtn:hover {
    background: rgba(37, 92, 0, 0.15);
}

.recDayBtn.active {
    background: #255c00;
    color: #FFFFFF;
    border-color: #255c00;
}

.rec-toggles-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.rec-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bgCardNoOpacity);
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--borderCard);
}

.rec-toggle-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

#globalNotification {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
}

.dbCmdInputWrapper {
    position: relative;
}

.dbCmdPrefix {
    position: absolute;
    left: 14px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    color: var(--text-dim);
    font-size: 15px;
    font-weight: 600;
    pointer-events: none;
    line-height: 1;
}

.dbCmdInput {
    padding-left: 26px !important;
}

.discord-gradient-text {
    background-size: 300% 100%;
    color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    animation: roleGradientAnimation 6s linear infinite;
}

@keyframes roleGradientAnimation {
    0% {
        background-position: 0% 50%;
    }

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

/* ********************************************* */
/*                    FOOTER                     */
/* ********************************************* */

/* Footer */

footer {
    padding: 50px 20px 0 20px;
    border-top: 1px solid var(--borderCard);
    max-width: 1700px;
    margin: auto;
}

footer .footerHeader {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 0 50px 0;
    border-bottom: 1px solid var(--borderCard);
}

footer .footerHeader .footerDescription {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 600px;
}

footer .footerHeader .footerDescription img {
    width: 70px;
    height: 70px;
    border-radius: 100%;
}

footer .footerHeader .footerSection {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

footer .footerHeader .footerSection .navigation {
    width: 250px;
}

footer .footerHeader .footerSection .navigation p {
    font-size: 20px;
    text-transform: uppercase;
}

footer .footerHeader .footerSection .pages ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

footer .footerHeader .footerSection .pages ul li a {
    color: var(--text-dim);
    transition: .2s;
}

footer .footerHeader .footerSection .pages ul li a:hover {
    color: var(--text);
    transition: .2s;
}

footer .footerHeader .footerSection .networks ul {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

footer .footerHeader .footerSection .networks ul li a {
    padding: 10px;
    border-radius: 6px;
    color: var(--text-dim);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .2s;
}

footer .footerHeader .footerSection .networks ul li a:hover {
    background: var(--bgCardActive);
    color: var(--text);
    transition: .2s;
}

footer .footerInfos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 0;
    color: var(--text-dim);
}

/* ********************************************* */
/*                      404                      */
/* ********************************************* */

.section404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

.section404 .image404 {
    width: 200px;
    height: 200px;
    border-radius: 100%;
}

.section404 .title404 {
    font-size: 56px;
}


.sortable-ghost {
    opacity: 0.4;
    background-color: #f4f4f4;
}

.cardEsprit:active {
    cursor: grabbing !important;
}