/* ============================================================
   YJ SITE — Dock (menu flottant en haut, centré)
============================================================ */

.yj-dock{
    position:fixed;
    left:50%;
    top:24px;
    transform:translate(-50%, -150%);
    z-index:9999;
    opacity:0;
    visibility:hidden;
    transition:transform .9s var(--yj-ease-out), opacity .6s var(--yj-ease), visibility .9s var(--yj-ease);
    pointer-events:none;
    font-family:var(--yj-body);
    max-width:calc(100% - 32px);
}
.yj-dock.is-visible{
    transform:translate(-50%, 0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.yj-dock.is-hiding{
    transform:translate(-50%, -150%);
    opacity:0;
}

.yj-dock__inner{
    display:flex;
    align-items:center;
    gap:4px;
    padding:8px;
    background:rgba(255, 255, 255, 0.88);
    backdrop-filter:blur(20px) saturate(1.5);
    -webkit-backdrop-filter:blur(20px) saturate(1.5);
    border:1px solid rgba(255,255,255,.4);
    border-radius:14px;
    box-shadow:
        0 30px 60px -20px rgba(27, 94, 61, 0.25),
        0 18px 36px -18px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.5);
}

.yj-dock__link{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    font-family:var(--yj-body);
    font-size:13px;
    font-weight:500;
    letter-spacing:.01em;
    color:var(--yj-ink);
    text-decoration:none;
    border-radius:10px;
    transition:all .35s var(--yj-ease);
    white-space:nowrap;
    overflow:hidden;
    z-index:1;
    cursor:pointer;
    background:none;
    border:none;
    font-size:13px;
}
.yj-dock__link::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--yj-green-deep);
    border-radius:10px;
    transform:scale(.6);
    opacity:0;
    transition:transform .4s var(--yj-ease-out), opacity .35s var(--yj-ease);
    z-index:-1;
}
.yj-dock__link:hover,
.yj-dock__link.is-active{
    color:#fff;
    transform:translateY(-2px);
}
.yj-dock__link:hover::before,
.yj-dock__link.is-active::before{
    transform:scale(1);
    opacity:1;
}
.yj-dock__link.is-active{
    transform:translateY(0);
}
.yj-dock__link.is-external::after{
    content:"↗";
    font-size:11px;
    opacity:.5;
    transition:opacity .3s, transform .3s;
}
.yj-dock__link.is-external:hover::after{
    opacity:1;
    transform:translate(2px,-2px);
}

.yj-dock__sep{
    width:1px;
    height:18px;
    background:rgba(0,0,0,.08);
    margin:0 4px;
    flex-shrink:0;
}

.yj-dock__close{
    width:32px;height:32px;
    border-radius:10px;
    border:none;
    background:transparent;
    color:var(--yj-muted);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    transition:all .3s var(--yj-ease);
    flex-shrink:0;
    margin-left:4px;
}
.yj-dock__close:hover{
    background:rgba(199,93,58,.12);
    color:var(--yj-terracotta);
    transform:rotate(90deg);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
    .yj-dock__inner{padding:6px;}
    .yj-dock__link{padding:9px 12px;font-size:12px;gap:6px;}
    .yj-dock__sep{margin:0 2px;}
}
@media (max-width: 720px){
    .yj-dock{top:14px;max-width:calc(100% - 24px);}
    .yj-dock__inner{
        overflow-x:auto;
        overflow-y:hidden;
        scroll-behavior:smooth;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        padding:6px;
    }
    .yj-dock__inner::-webkit-scrollbar{display:none;}
    .yj-dock__link{flex-shrink:0;padding:10px 14px;font-size:12.5px;}
    .yj-dock__sep{display:none;}
    .yj-dock__close{
        position:sticky;right:0;
        background:rgba(255,255,255,.95);
        backdrop-filter:blur(10px);
    }
}