/* ============================================
   WAB OS — About : le savoir-faire, trois apps sur le gris chaud
   Un grand panneau gris chaud (--panel) au rayon des panneaux, liseré
   d'un pixel, relief éclairé d'en haut et feuille décalée dessous (la
   pile). Dedans, trois cartes blanches nettes au même gabarit, chacune
   une app dans sa teinte (bleu, vert, rose, comme les Services de
   l'accueil) : sa touche-icône, son nom, ce qu'elle couvre. Aucun flou.
   ============================================ */

.ab-skills {
    margin-top: var(--section);
}

.ab-skills__title {
    max-width: 24ch;
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: var(--w-medium);
    line-height: 1.1;
    letter-spacing: -0.05em;
    text-wrap: balance;
}

.ab-apps {
    display: grid;
    gap: 16px;
    max-width: 1040px;
    margin: clamp(32px, 5vw, 56px) auto 0;
    list-style: none;
}

/* La carte d'app : du blanc, le liseré, le relief, une ombre courte. */
.ab-app {
    height: 100%;
    overflow: hidden;
    border-radius: var(--r-win);
    background: var(--paper);
    box-shadow: 0 0 0 var(--hair) var(--edge), var(--relief), var(--shadow-soft);
}

/* La barre : celle des fenêtres, blanche, les trois pastilles à gauche. */
.ab-app__bar {
    display: flex;
    align-items: center;
    height: var(--win-bar-h);
    padding: 0 10px;
    background: var(--win-bar);
    color: var(--win-bar-ink);
}

.ab-app__body {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 18px 16px;
    align-items: center;
    padding: clamp(18px, 5vw, 22px) clamp(16px, 5vw, 22px) 26px;
}

/* L'icône d'app : une touche de clavier dans la teinte de la carte,
   l'icône dans son encre (blanc sur bleu, encre sur vert et rose). */
.ab-app__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--r-ctl);
    background: var(--key-klein);
    box-shadow: 0 0 0 var(--hair) var(--key-klein-edge), var(--key-klein-relief);
    color: var(--on-klein);
}

/* « Accompagnement » tient sur une ligne dès 320 px. */
.ab-app__name {
    font-size: clamp(1.15rem, 5vw, 1.4rem);
    font-weight: var(--w-medium);
    letter-spacing: -0.03em;
}

.ab-app__list {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    padding-top: 18px;
    box-shadow: inset 0 var(--hair) 0 var(--line);
    list-style: none;
}

.ab-app__list li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    font-size: var(--t-small);
    line-height: 1.45;
}

/* La coche, peinte en masque dans la teinte de la carte, version
   lisible sur blanc (--klein-text). */
.ab-app__list li::before {
    content: '';
    width: 18px;
    height: 18px;
    background: var(--klein-text);
    -webkit-mask: url('../assets/icons/sym-check.svg') center / contain no-repeat;
    mask: url('../assets/icons/sym-check.svg') center / contain no-repeat;
}

@media (min-width: 900px) {
    .ab-apps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}