/* ============================================
   WAB OS — la fenêtre (.win)
   La pièce de base de toute la page, dessinée comme un navigateur :
   une barre blanche, les trois pastilles rouge, jaune et vert à
   gauche, l'adresse en Sligoil dans un champ gris au centre, puis
   le contenu. Liseré d'un pixel, relief éclairé d'en
   haut, ombre courte. Aucune n'a de flou réel : la performance
   d'abord. Les fenêtres qui s'ouvrent : os-win.css.
   — .win--framed : la fenêtre mise en avant, dans un cadre Klein dont
     le bord intérieur se désagrège en pixels vers le contenu ;
   Le balisage reste celui des pages : .win__lights (vide) devient les
   trois pastilles, .win__title le champ d'adresse.
   ============================================ */

.win {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-win);
    background: var(--win-bg);
    box-shadow: 0 0 0 var(--hair) var(--win-edge), var(--win-shadow);
    overflow: hidden;
}

.win__bar {
    position: relative;
    flex: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    height: var(--win-bar-h);
    padding: 0 10px;
    background: var(--win-bar);
    box-shadow: inset 0 -1px 0 var(--line);
    font-family: var(--font-mono);
    color: var(--win-bar-ink);
    user-select: none;
    -webkit-user-select: none;
}

/* Les trois pastilles : fermer, réduire, agrandir. */
.win__lights {
    grid-column: 1;
    justify-self: start;
    flex: none;
    width: 48px;
    height: 12px;
    background: var(--win-lights);
}

.win__title {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: min(100%, 160px);
    max-width: 100%;
    height: 18px;
    padding: 0 12px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--panel);
    font-size: 10.5px;
    font-weight: var(--w-regular);
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--win-bar-ink);
}

/* Le nom suffit : le pictogramme ne reste que s'il est seul. */
.win__title .sym {
    display: none;
}

.win__body {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: var(--desk);
}

.win__body img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── La fenêtre mise en avant ── un cadre Klein de 12 px autour du
   contenu ; sous le contenu, une couche bleu clair tramée déborde dans
   le cadre et s'y désagrège en pixels (bandes SVG en masque). */
.win--framed {
    padding: 0 var(--win-frame) var(--win-frame);
    background: var(--win-frame-color);
    box-shadow: 0 0 0 var(--hair) var(--klein-deep), var(--win-shadow);
}

.win--framed .win__bar {
    margin-inline: calc(-1 * var(--win-frame));
    margin-bottom: var(--win-frame);
}

.win--framed > :not(.win__bar) {
    position: relative;
    z-index: 1;
    border-radius: 4px;
}

.win--framed::before {
    content: '';
    position: absolute;
    inset: var(--win-bar-h) 0 0;
    background: var(--win-frame-dither);
    pointer-events: none;
    -webkit-mask:
        var(--dither-top) left top / 8px var(--dither) repeat-x,
        var(--dither-bottom) left bottom / 8px var(--dither) repeat-x,
        var(--dither-left) left top / var(--dither) 8px repeat-y,
        var(--dither-right) right top / var(--dither) 8px repeat-y;
    mask:
        var(--dither-top) left top / 8px var(--dither) repeat-x,
        var(--dither-bottom) left bottom / 8px var(--dither) repeat-x,
        var(--dither-left) left top / var(--dither) 8px repeat-y,
        var(--dither-right) right top / var(--dither) 8px repeat-y;
}

/* Une capture de l'application de gestion : ces chiffres ne sont pas
   ceux d'un client, la fenêtre le dit. */
.win__demo {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    padding: 3px 10px;
    border-radius: var(--r-key);
    background: var(--veil);
    box-shadow: 0 0 0 1px var(--line);
    font-size: 11px;
    color: var(--ink-muted);
}

/* Le nom de fichier, sous la fenêtre, en Sligoil (os-base.css). */
.file-name {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 8px auto 0;
    padding: 1px 6px;
    border-radius: var(--r-px);
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    color: var(--ink-faint);
}