/* ============================================
   WAB OS — page Applications : l'approche et l'appel final
   L'approche : cinq cartes blanches, liseré d'un pixel et relief
   éclairé d'en haut, posées dans une carte de section de la teinte
   très claire (.os-card--wash, vert). Chaque carte porte sa teinte
   (data-tint) sur la touche de son icône.
   Trois puis deux sur grand écran, en rangée défilante au téléphone.
   L'appel final : le titre, une phrase, deux boutons.
   ============================================ */

.app-sky {
    margin-top: var(--section);
}

.app-ways {
    display: grid;
    gap: 14px;
    margin-top: clamp(36px, 5vw, 56px);
    list-style: none;
}

/* Téléphone : une rangée aimantée qu'on fait défiler au doigt, qui
   va jusqu'aux bords de la carte de section (son retrait : 16 px). */
@media (max-width: 699px) {
    .app-ways {
        --card-pad: 16px;
        grid-auto-flow: column;
        grid-auto-columns: var(--app-way-w);
        margin-inline: calc(-1 * var(--card-pad));
        padding: 4px var(--card-pad) 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--card-pad);
        scrollbar-width: none;
    }

    .app-ways::-webkit-scrollbar {
        display: none;
    }

    .app-way {
        scroll-snap-align: start;
        align-content: start;
    }
}

.app-way {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 14px;
    padding: 20px 22px 22px;
    border-radius: var(--r-win);
    background: var(--paper);
    box-shadow: 0 0 0 var(--hair) var(--edge), var(--relief), var(--shadow-soft);
}

/* L'icône sur une petite touche de la teinte de la carte, comme les
   touches colorées du site ; le symbole prend l'encre de la teinte
   (blanc sur les sombres, encre sur les claires). */
.app-way__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-key);
    background: var(--key-klein);
    box-shadow: 0 0 0 var(--hair) var(--key-klein-edge), var(--key-klein-relief);
    color: var(--on-klein);
}

.app-way__icon .sym {
    width: 18px;
    height: 18px;
}

.app-way__title {
    font-size: 1.05rem;
    font-weight: var(--w-medium);
    line-height: 1.3;
    letter-spacing: var(--track-optical);
    color: var(--ink);
}

.app-way__text {
    grid-column: 1 / -1;
    line-height: 1.6;
    color: var(--ink-muted);
    text-wrap: pretty;
}

@media (min-width: 700px) {
    .app-ways {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Cinq cartes : la dernière prend toute la largeur. */
    .app-way:last-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1000px) {
    .app-ways {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 18px;
    }

    .app-way {
        grid-column: span 2;
        align-content: start;
    }

    .app-way:nth-child(n + 4),
    .app-way:last-child {
        grid-column: span 3;
    }
}

/* ── L'appel final ── */
.app-end__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.app-end__title {
    max-width: 20ch;
    font-size: var(--t-app-end);
    font-weight: var(--w-medium);
    line-height: 1.1;
    letter-spacing: var(--track-optical);
    text-wrap: balance;
}

.app-end__lede {
    max-width: 52ch;
    margin-top: 18px;
    font-size: var(--t-lede);
    line-height: 1.55;
    text-wrap: pretty;
}

.app-end__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}