
/* PIXELREALM SEARCH SUGGEST V1 */

header.navbar {
    overflow: visible !important;
}

header.navbar .search {
    position: relative !important;
    z-index: 30 !important;
    box-sizing: border-box !important;
    width: 212px;
    min-width: 0;
    transition:
        width 320ms cubic-bezier(.22,1,.36,1),
        border-color 200ms ease,
        box-shadow 200ms ease !important;
}

@media (min-width: 1101px) {
    header.navbar .search:focus-within,
    header.navbar .search.pr-search-open {
        width: 340px;
    }
}

header.navbar .search input {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
}

header.navbar .search button {
    flex: 0 0 auto;
    cursor: pointer;
}

.pr-search-results {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 100%;
    box-sizing: border-box;
    max-height: 390px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid rgba(183, 120, 255, .34);
    border-radius: 20px;
    background: rgba(16, 12, 36, .96);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, .38),
        0 0 25px rgba(132, 61, 220, .10);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.pr-search-results[hidden] {
    display: none !important;
}

.pr-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 12px;
    color: #f5efff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 650;
}

.pr-search-item:hover,
.pr-search-item:focus-visible {
    background: rgba(143, 77, 227, .20);
    outline: none;
}

.pr-search-item img {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 9px;
    object-fit: cover;
    background: #21163c;
}

.pr-search-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pr-search-message {
    padding: 13px;
    color: #c7b8df;
    font-size: 13px;
}

@media (max-width: 1100px) {
    header.navbar .search {
        width: min(100%, 340px);
    }
}

@media (prefers-reduced-motion: reduce) {
    header.navbar .search {
        transition: none !important;
    }
}



/* PIXELREALM SEARCH LAYER FIX V2 */

header.navbar {
    position: relative !important;
    z-index: 1000 !important;
    overflow: visible !important;
}

header.navbar .search {
    position: relative !important;
    z-index: 1001 !important;
}

header.navbar .pr-search-results {
    z-index: 1002 !important;
}

main {
    position: relative;
    z-index: 0;
}

/* END PIXELREALM SEARCH LAYER FIX V2 */

/* PIXELREALM SEARCH SCROLLBAR START */

/* Firefox : rendu simplifié */
@supports (-moz-appearance: none) {
    .pr-search-results {
        scrollbar-width: thin;
        scrollbar-color: rgba(151, 91, 212, .55) transparent;
    }
}

/* Chromium : verre violet personnalisé */
.pr-search-results {
    scrollbar-color: auto;
    scrollbar-width: auto;
}

.pr-search-results::-webkit-scrollbar {
    width: 12px;
}

.pr-search-results::-webkit-scrollbar-track {
    background: transparent;
}

.pr-search-results::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 3px solid transparent;
    background:
        linear-gradient(
            180deg,
            rgba(198, 146, 255, .30),
            rgba(119, 61, 191, .24)
        ) padding-box,
        linear-gradient(
            180deg,
            rgba(211, 165, 255, .72),
            rgba(150, 89, 218, .52)
        ) border-box;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.18),
        0 0 8px rgba(145,75,220,.12);
}

.pr-search-results::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            rgba(210, 164, 255, .48),
            rgba(138, 71, 211, .40)
        ) padding-box,
        linear-gradient(
            180deg,
            rgba(226, 190, 255, .85),
            rgba(167, 104, 238, .70)
        ) border-box;
}

/* PIXELREALM SEARCH SCROLLBAR END */


/* PIXELREALM CUSTOM GLASS SCROLLBAR V4 */

header.navbar .pr-search-results {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

header.navbar .pr-search-results::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}

header.navbar .pr-search-glass-rail {
    position: absolute;
    z-index: 1003;
    top: calc(100% + 23px);
    right: 6px;
    width: 9px;
    height: 366px;
    border-radius: 999px;
    background: rgba(16, 12, 36, .22);
    pointer-events: none;
}

header.navbar .pr-search-glass-rail[hidden] {
    display: none !important;
}

header.navbar .pr-search-glass-thumb {
    width: 100%;
    min-height: 32px;
    box-sizing: border-box;
    border: 1px solid rgba(188, 121, 255, .55);
    border-radius: 999px;
    background: linear-gradient(
        135deg,
        rgba(210, 165, 255, .32),
        rgba(119, 61, 191, .24)
    );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 0 12px rgba(135,60,225,.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
}

header.navbar .pr-search-glass-thumb:hover {
    border-color: rgba(215, 166, 255, .85);
    background: rgba(150, 83, 220, .42);
}

header.navbar .pr-search-glass-thumb:active {
    cursor: grabbing;
}

/* END PIXELREALM CUSTOM GLASS SCROLLBAR V4 */

/* PIXELREALM SEARCH SCROLL SPACING V5 */

/* Réserve un couloir à droite pour le curseur */
header.navbar .pr-search-results {
    padding-right: 22px !important;
}

/* Le fond de sélection ne touche plus la scrollbar */
header.navbar .pr-search-item {
    box-sizing: border-box;
    max-width: 100%;
}

/* END PIXELREALM SEARCH SCROLL SPACING V5 */




/* PIXELREALM SEARCH NAV STABLE V9 */

@media (min-width: 1101px) {
    header.navbar {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) 340px;
        align-items: center;
        column-gap: 28px;
    }

    header.navbar > nav {
        justify-self: center;
        width: max-content;
    }

    header.navbar .search {
        justify-self: end;
        flex: none !important;
        width: 212px !important;
        min-width: 0 !important;
        max-width: none !important;
        transition:
            width 320ms cubic-bezier(.22,1,.36,1),
            border-color 200ms ease,
            box-shadow 200ms ease !important;
    }

    header.navbar .search:focus-within,
    header.navbar .search.pr-search-open {
        width: 340px !important;
    }
}

/* END PIXELREALM SEARCH NAV STABLE V9 */

/* PIXELREALM NAV CENTER V10 */

@media (min-width: 1101px) {

    /* Trois colonnes : même largeur à gauche et à droite. */
    header.navbar {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    }

    /* Logo à gauche. */
    header.navbar > .brand {
        justify-self: start;
    }

    /* Navigation au centre exact de la page. */
    header.navbar > nav {
        justify-self: center !important;
        width: max-content;
    }

    /* Recherche à droite, avec son animation V9 intacte. */
    header.navbar > .search {
        justify-self: end !important;
    }
}

/* END PIXELREALM NAV CENTER V10 */
