/* ============================================
   WAB OS — le dock
   Demandé par Eliott le 3.10 (« comme sur les Mac »). Sur ordinateur
   seulement (souris, 900 px et plus) : une pilule de verre blanc en
   bas de l'écran, comme la barre du haut, les apps du studio en
   touches (sur l'accueil, le sommaire de la page : os-dock-toc.css). Au survol, la touche grandit sur un ressort et
   ses voisines la suivent à moitié. Un point blanc marque une app
   ouverte ; les fenêtres réduites se rangent après le
   séparateur. Il reste affiché en permanence (demande d'Eliott, 6.10).
   Au téléphone, pas de dock : le menu du haut suffit.
   ============================================ */

.dock {
    display: none;
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    /* Le pied de page réserve sous lui la place du dock (le bleu va
       jusqu'en bas de l'écran), et un élément qui prend le focus au
       clavier s'arrête au-dessus de lui. */
    .foot {
        padding-bottom: calc(28px + var(--dock-space));
    }

    :root:has(body.os) {
        scroll-padding-bottom: var(--dock-space);
    }

    .dock {
        position: fixed;
        z-index: var(--z-dock);
        left: 50%;
        bottom: 14px;
        translate: -50% 0;
        display: flex;
        align-items: flex-end;
        gap: 6px;
        padding: 5px 6px;
        border-radius: 22px;
        background: var(--glass-strong);
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        box-shadow:
            0 0 0 var(--hair) var(--glass-edge),
            inset 0 1px 0 var(--glass-rim),
            0 10px 30px -14px oklch(0.18 0.005 265 / 0.28);
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .dock {
        background: var(--paper);
    }
}

.dock__apps,
.dock__shelf {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    list-style: none;
}

/* Le séparateur, avant les fenêtres réduites. */
.dock__shelf {
    padding-left: 10px;
    margin-left: 4px;
    box-shadow: inset 1px 0 0 var(--line);
}

.dock__shelf[hidden] {
    display: none;
}

.dock__item {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: var(--r-ctl);
    background: none;
    cursor: pointer;
    transform-origin: 50% 100%;
    transition: scale var(--dur-3) var(--ease-spring), translate var(--dur-3) var(--ease-spring);
}

.dock__item .app-icon {
    width: 46px;
    height: 46px;
}

/* Le nom de l'app : une étiquette blanche au-dessus, au survol
   et au focus. Toujours dans le document : les lecteurs d'écran le
   lisent. */
.dock__label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    translate: -50% 4px;
    padding: 5px 9px;
    border-radius: var(--r-key);
    background: var(--paper);
    box-shadow: 0 0 0 var(--hair) var(--edge), var(--relief), var(--shadow-soft);
    font-size: 12px;
    font-weight: var(--w-medium);
    line-height: 1.3;
    white-space: nowrap;
    color: var(--glass-ink);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-1) var(--ease-out), translate var(--dur-1) var(--ease-out);
}

.dock__item:hover .dock__label,
.dock__item:focus-visible .dock__label {
    opacity: 1;
    translate: -50% 0;
}

/* Le grossissement : l'icône survolée, puis ses voisines immédiates. */
.dock li:has(> .dock__item:hover) > .dock__item {
    scale: 1.24;
    translate: 0 -6px;
}

.dock li:has(+ li > .dock__item:hover) > .dock__item,
.dock li:has(> .dock__item:hover) + li > .dock__item {
    scale: 1.08;
    translate: 0 -2px;
}

.dock__item:active {
    scale: 0.94;
}

/* Le point : une fenêtre de cette app est ouverte (ou réduite). */
.dock__item::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 1px;
    background: var(--ink);
    opacity: 0;
    transition: opacity var(--dur-1) var(--ease-out);
}

.dock__item.is-open::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .dock li > .dock__item {
        scale: 1 !important;
        translate: 0 !important;
    }
}