#lien-bio {
        position: absolute;
        left: calc(38% - 189px/2 - 0.5px);
        z-index: 98 !important;
        transition: 250ms;
        transition-timing-function: ease;
        border-radius: 8px;
        top: 4vh;
        height: 40px;
    }

    #lien-portfolio {
        top: 4vh;
        position: absolute;
        height: 45px;
        right: calc(38% - 189px/2 - 0.5px);
        z-index: 98 !important;
        border-radius: 8px;
        transition: 250ms;
        transition-timing-function: ease;
    }

    #logo {
        --logo-height: 40px;
        position: relative;
        z-index: 99 !important;
        display: block;
        height: var(--logo-height);
        width: calc(var(--logo-height) * 143 / 46);
        background: var(--theme-accent);
        -webkit-mask: url('/ASSETS/icon/vscuderi_logo.svg?v=2') center / contain no-repeat;
        mask: url('/ASSETS/icon/vscuderi_logo.svg?v=2') center / contain no-repeat;
        transition: 250ms;
        transition-timing-function: ease;
    }

    .cote {
        position: relative;
        z-index: 99 !important;
        height: 40px;
        backdrop-filter: blur(6px);
        border-radius: 8px;
        transition: 250ms;
        transition-timing-function: ease;
    }

    #logobox:hover #logo {
        --logo-height: 41px;
    }

    #logobox:hover~#lien-bio {
        opacity: 1;
        transform: translateX(-15px);
    }

    #logobox:hover~#lien-portfolio {
        opacity: 1;
        transform: translateX(15px);
    }

    #logobox {
        position: relative;
        top: 3vh;
        padding: 6px 18px;
        border-radius: 8px;
        border: 2px solid #ffffff;
        background: rgba(255, 255, 255, 0.7);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.2);
        transition: transform 260ms ease, opacity 220ms ease;
    }

    #navig {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        z-index: 95 !important;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transition:
            transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 220ms ease,
            visibility 0s linear 0s;
    }

    body[data-project-source] #navig,
    body#contact-page #navig {
        position: absolute;
    }

    .theme-switch-wrap {
        display: none !important;
    }

    html.debug-show-theme-mode-button .theme-switch-wrap {
        display: flex !important;
    }

    .theme-switch-wrap {
        position: absolute;
        top: 2.3vh;
        right: 3vw;
        z-index: 140;
        pointer-events: auto;
    }

    .theme-switch {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0;
        padding: 6px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.92);
        background: rgba(255, 255, 255, 0.62);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
        cursor: pointer;
        user-select: none;
        transition:
            border-color 320ms ease,
            background-color 320ms ease,
            box-shadow 320ms ease;
    }

    .theme-switch input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        pointer-events: none;
    }

    .theme-switch-track {
        position: relative;
        width: 52px;
        height: 32px;
        border-radius: 999px;
        background: rgba(16, 16, 16, 0.2);
        transition: background-color 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1.2, 0.36, 1);
        overflow: hidden;
        display: grid;
        place-items: center;
    }

    .theme-switch input:checked+.theme-switch-track {
        background: var(--theme-accent);
    }

    .theme-switch.is-pop .theme-switch-track {
        animation: theme-track-pop 520ms cubic-bezier(0.16, 1.05, 0.32, 1);
    }

    .theme-switch-icons {
        position: relative;
        width: 22px;
        height: 22px;
    }

    .theme-switch-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 22px;
        height: 22px;
        transform-origin: 50% 50%;
        opacity: 0;
        transition: transform 560ms cubic-bezier(0.22, 1.28, 0.36, 1), opacity 320ms ease;
    }

    .theme-switch-icon-sun {
        color: #111111;
        transform: translate(-50%, -50%) translateY(130%) scale(0.72);
    }

    .theme-switch-icon-moon {
        color: var(--theme-accent);
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0) scale(1);
    }

    .theme-switch input:checked+.theme-switch-track .theme-switch-icon-sun {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0) scale(1);
    }

    .theme-switch input:checked+.theme-switch-track .theme-switch-icon-moon {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(130%) scale(0.72);
    }

    .theme-switch-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    @keyframes theme-track-pop {
        0% { transform: translateY(0) scale(1); }
        45% { transform: translateY(1.5px) scale(0.94); }
        100% { transform: translateY(0) scale(1); }
    }

    #navig a {
        transition-duration: 1s;
    }

    .cote:hover {
        height: 41px;
        transition-duration: .7s;
    }


    .mobile-visible {
        visibility: hidden !important;
    }

    /* Smartphone Portrait and Landscape */
    @media only screen and (min-device-width : 100px) and (max-device-width : 890px) {
        .mobile-visible {
            visibility: visible !important;
        }
    }

    .mobile-masque {
        visibility: visible !important;
    }

    /* Smartphone Portrait and Landscape */
    @media only screen and (min-device-width : 100px) and (max-device-width : 890px) {
        .mobile-masque {
            visibility: hidden !important;
        }
    }









    /***********MEDIA QUERIES********* -------------------------------*/
    /* TABLET */

    @media only screen and (max-width: 1024px) {
        body[data-project-source] #navig {
            top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
            min-height: 56px;
            align-items: center;
        }

        body[data-project-source] #navig,
        body#contact-page #navig {
            min-height: 56px;
            align-items: center;
        }

        body[data-project-source] #navig #logobox,
        body#contact-page #navig #logobox {
            top: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        body[data-project-source] #navig .theme-switch-wrap {
            top: 0 !important;
            bottom: 0 !important;
            transform: none;
            display: flex;
            align-items: center;
        }

        body#contact-page #navig .theme-switch-wrap {
            top: 50% !important;
            transform: translateY(-50%);
        }
    }

    @media only screen and (max-width: 890px) {
        body[data-project-source] #navig {
            top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
            min-height: 52px;
        }

        #lien-bio {
            top: 5vh;
            height: 45px;
            left: calc(28% - 189px/2 - 0.5px);
            transition: 0ms;
        }

        #lien-portfolio {
            top: 5vh;
            height: 45px;
            right: calc(30% - 189px/2 - 0.5px);
            transition: 0ms;
        }

        #navig a {
            transition-duration: 0ms;
        }

        .theme-switch-wrap {
            top: 12px;
            right: 4vw;
        }

        body[data-project-source] #navig .theme-switch-wrap,
        body#contact-page #navig .theme-switch-wrap {
            top: 0 !important;
            bottom: 0 !important;
            right: 4vw;
            transform: none;
            display: flex;
            align-items: center;
        }

        .theme-switch {
            padding: 5px;
            gap: 0;
        }

        #logo {
            --logo-height: 40px;
            top: 0;
        }

        #logobox {
            transition-delay: 0s;
        }

    }

    /* DESKTOP */

    @media only screen and (min-width: 890px) and (max-width: 1500px) {


        #lien-bio {
            top: 5vh;
            height: 45px;
            left: calc(33% - 189px/2 - 0.5px);
        }

        #lien-portfolio {
            top: 5vh;
            height: 45px;
            right: calc(34% - 189px/2 - 0.5px);
        }

        #logo {
            --logo-height: 40px;
        }

    }


    /* MAX MAX */

    @media only screen and (min-width: 1500px) {



    }