/* ============================================
   Services — les deux familles en quinconce
   Chaque bloc : une grande fenêtre posée dans son écran (l'aplat de la
   teinte du bloc, data-tint, à lignes d'écran, son liseré profond, la
   feuille décalée dessous), et contre elle une colonne de
   360 px — la frappe en haut, l'échange en bulles (os-bubbles.css),
   puis les apps du bloc calées sur le bord bas de la fenêtre. Les côtés
   alternent d'un bloc à l'autre ; le texte s'aligne sur le bord
   extérieur. Au téléphone : la fenêtre, les bulles, les apps.
   Chaque bloc se pose en entrant dans l'écran, au rythme du défilement.
   ============================================ */

.svc-family {
    padding-top: var(--section);
}

.svc-feats {
    display: grid;
    gap: 72px;
    max-width: calc(1040px + 2 * var(--gutter));
    margin-top: clamp(40px, 6vw, 72px);
}

.svc-feat {
    display: grid;
    gap: 22px;
    /* Une ancre du Launchpad s'arrête sous la barre de menus. */
    scroll-margin-top: calc(var(--bar-h) + 24px);
}

.svc-feat__media {
    order: -1;
    position: relative;
}

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

/* ── Les apps du bloc ── une icône, le nom, une ligne. Au téléphone,
   la ligne reste à l'encre : aucune pile de petits textes gris. */
.svc-apps {
    display: grid;
    gap: 16px;
    list-style: none;
}

.svc-app {
    display: grid;
    grid-template-columns: var(--app-size) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.svc-app__name {
    font-size: clamp(1.1rem, 1.6vw, 1.25rem);
    font-weight: var(--w-medium);
    line-height: 1.25;
    letter-spacing: var(--track-optical);
}

.svc-app__line {
    margin-top: 2px;
    font-size: var(--t-small);
    line-height: 1.45;
    text-wrap: pretty;
}

/* ── L'écran ── l'aplat de la teinte, sa lumière en halo, ses lignes
   nodales animées (os-nodal.css), un liseré profond, la feuille
   décalée dessous ; la fenêtre flotte dedans. */
.svc-screen {
    position: relative;
    padding: var(--screen-pad);
    border-radius: calc(var(--r-win) + var(--screen-pad));
    background: radial-gradient(80% 70% at 30% 20%, color-mix(in oklch, var(--klein-hi) 50%, transparent), oklch(0 0 0 / 0) 70%), var(--klein);
    box-shadow: 0 0 0 var(--hair) var(--klein-deep), var(--sheet), var(--shadow-object);
    isolation: isolate;
}

/* Les caractères des lignes nodales prennent l'encre de la teinte :
   blancs sur le bleu et le rouge, encre sur les teintes claires. */
.svc-screen .nodal-field {
    color: color-mix(in oklch, var(--on-klein) 55%, transparent);
}

.svc-screen .win {
    box-shadow: 0 0 0 var(--hair) var(--klein-deep), var(--relief), var(--shadow-lift);
}

/* La fenêtre suit le format des captures du studio (16:10). */
.svc-shot {
    aspect-ratio: 16 / 10;
    container-type: size;
}

/* L'application : la capture (1280 × 840) garde son haut. */
.svc-shot--top img {
    object-position: top left;
}

/* LAZIZZE : la fenêtre prend le format natif de l'image (900 × 495),
   rien n'est rogné. */
.svc-shot--brand {
    aspect-ratio: 900 / 495;
}

/* ── L'arrivée de chaque bloc ── liée au défilement, pas au temps :
   la fenêtre monte et se pose pendant qu'elle entre dans l'écran, la
   colonne de texte la suit avec un temps de retard. Une fois posé, le
   bloc reste entièrement net (l'ancien estompage à 40 % virait au
   lilas sur le Klein). Sans scroll-driven animations ou sous
   « réduire les animations » : tout est simplement en place. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .svc-feat__media,
        .svc-feat__text {
            animation: svc-arrive linear both;
            animation-timeline: view();
        }

        .svc-feat__media {
            animation-range: entry 0% cover 40%;
        }

        .svc-feat__text {
            animation-range: entry 20% cover 48%;
        }
    }
}

@keyframes svc-arrive {
    0% {
        opacity: 0;
        translate: 0 64px;
        scale: 0.96;
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

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

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

    .svc-feat__media {
        order: 0;
    }

    /* Sur grand écran, la fenêtre prend de l'air dans son écran bleu ;
       la colonne de texte suit (elle s'aligne sur le haut de la fenêtre). */
    .svc-feat {
        --screen-pad: 24px;
    }

    .svc-feat__text {
        justify-content: space-between;
        gap: 24px;
        padding-top: calc(var(--screen-pad) + 6px);
    }

    .svc-app__line {
        color: var(--ink-muted);
    }

    /* Texte à droite : tout se lit en miroir, contre le bord extérieur. */
    .svc-feat--flip {
        grid-template-columns: minmax(0, 1fr) var(--feat-text);
    }

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

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

    .svc-feat--flip .svc-app .app {
        order: 2;
    }

    .svc-feat--flip .chat__ask {
        justify-self: end;
        border-radius: 16px 16px 4px 16px;
    }

    .svc-feat--flip .chat__reply {
        justify-self: start;
        border-radius: 14px 14px 14px 4px;
    }
}