/* ============================================
   WAB OS — les services, quatre apps en quinconce
   Chaque bloc : une grande fenêtre posée dans son écran (bleu Klein à
   lignes d'écran, liseré bleu nuit), et collée contre elle une colonne de
   texte de 360 px — la frappe en haut, l'échange en bulles au milieu,
   le titre et une ligne calés sur le bord bas de la fenêtre. Les côtés
   alternent ; le texte s'aligne sur le bord extérieur.
   Au téléphone : la fenêtre, puis les bulles, puis le titre.
   Les bulles et la frappe vivent dans desk-chat.css, le focus qui
   suit le défilement dans js/desk/focus-scroll.js.
   ============================================ */

.section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.section-title {
    max-width: 24ch;
    font-size: var(--t-title);
    font-weight: var(--w-medium);
    line-height: 1.12;
    letter-spacing: var(--track-optical);
    text-wrap: balance;
}

.feats {
    --feat-text: 360px;
    --feat-gap: 72px;
    display: grid;
    gap: 72px;
    max-width: 1040px;
    margin: clamp(48px, 7vw, 88px) auto 0;
}

.feat {
    display: grid;
    gap: 22px;
}

/* Au téléphone, la fenêtre d'abord. */
.feat__media {
    order: -1;
    position: relative;
}

.feat__text {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.feat__title {
    font-size: clamp(1.25rem, 1.8vw, 1.45rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.feat__line {
    margin-top: 8px;
    max-width: 34ch;
    color: var(--ink-muted);
    text-wrap: pretty;
}

/* ── L'écran ── le bleu Klein à lignes d'écran, comme les médias des
   panneaux d'agentcard, puis la fenêtre posée dedans avec son retrait
   (rayon extérieur = rayon de la fenêtre + retrait). */
.screen {
    position: relative;
    padding: clamp(18px, 4vw, 40px);
    border-radius: calc(var(--r-win) + 8px);
    background: var(--klein-screen-flat);
    box-shadow: 0 0 0 var(--hair) var(--klein-deep), var(--relief), var(--sheet);
}

.screen::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--grain) 0 0 / 160px 160px;
    pointer-events: none;
}

.screen .win {
    box-shadow: 0 0 0 var(--hair) var(--klein-deep), 0 2px 4px oklch(0.12 0.06 266 / 0.3), 0 24px 48px -16px oklch(0.12 0.06 266 / 0.6);
}

.feat__media .win__body {
    aspect-ratio: 16 / 10;
    /* La fenêtre sert d'étalon à la capture qui défile (100cqh). */
    container-type: size;
}

/* ── L'application : la capture défile lentement dans la fenêtre ──
   Plus haute que la fenêtre, elle descend puis remonte. L'animation
   ne tourne que lorsque la fenêtre est à l'écran (.is-visible). */
.scroll-shot {
    position: absolute;
    inset: 0 0 auto;
    height: auto !important;
    object-fit: initial !important;
    animation: scroll-shot 16s ease-in-out infinite alternate paused;
}

.is-visible .scroll-shot {
    animation-play-state: running;
}

@keyframes scroll-shot {
    0%,
    12% {
        transform: translateY(0);
    }

    88%,
    100% {
        transform: translateY(calc(-100% + 100cqh));
    }
}

/* ── Ordinateur : fenêtre et colonne côte à côte ── */
@media (min-width: 900px) {
    .feats {
        gap: clamp(120px, 11vw, 150px);
    }

    .feat {
        grid-template-columns: var(--feat-text) minmax(0, 1fr);
        column-gap: var(--feat-gap);
        align-items: stretch;
    }

    .feat__media {
        order: 0;
    }

    .feat__text {
        justify-content: space-between;
        gap: 24px;
        padding-top: clamp(18px, 4vw, 40px);
    }

    .feat--flip {
        grid-template-columns: minmax(0, 1fr) var(--feat-text);
    }

    .feat--flip .feat__text {
        order: 2;
        align-items: flex-end;
        text-align: right;
    }

    .feat--flip .feat__text .feat__line {
        margin-left: auto;
    }
}