/* ============================================
   Services — le Launchpad du premier écran
   La fenêtre mise en avant de l'écran, blanche, sans cadre, range les neuf services en apps, par famille. Sur
   ordinateur, les deux familles tiennent sur une ligne, séparées par
   un filet ; au téléphone, elles s'empilent en grilles de trois.
   Chaque icône descend au bloc qui la présente.
   ============================================ */

/* ── Le Launchpad ── */
.svc-pad {
    position: relative;
    z-index: 2;
    max-width: 1040px;
    margin: clamp(48px, 7vw, 80px) auto 0;
}

.svc-pad__win {
    box-shadow: 0 0 0 var(--hair) var(--win-edge), var(--shadow-lift);
}

.svc-pad__body {
    display: grid;
    gap: 28px;
    padding: 24px 16px 20px;
    background: var(--paper);
}

.svc-pad__label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-inline: 4px;
    font-size: var(--t-small);
    font-weight: var(--w-medium);
}

.svc-pad__label span {
    font-family: var(--font-mono);
    font-size: var(--t-cap);
    font-weight: var(--w-regular);
    color: var(--ink-faint);
}

.svc-pad__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 14px;
    list-style: none;
}

.svc-pad__app {
    --app-size: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 10px 2px 8px;
    border-radius: var(--r-ctl);
    text-align: center;
    transition: background-color 0.2s var(--ease-out);
}

/* « Intelligence » : 12 signes, soit 79 px à 11 px — la colonne la
   plus étroite (320 px) en offre 85. Sur ordinateur, « Automatisation »
   (14 signes, 101 px à 12 px) tient dans les 107 px d'une colonne. */
.svc-pad__name {
    font-size: 11px;
    line-height: 1.3;
    text-wrap: balance;
}

.svc-pad__app .app {
    transition: scale 0.25s var(--ease-spring);
}

@media (hover: hover) {
    .svc-pad__app:hover {
        background: var(--hover-tint);
    }

    .svc-pad__app:hover .app {
        scale: 1.06;
    }
}

.svc-pad__app:active .app {
    scale: 0.94;
}

/* Sous 380 px, « Automatisation » (14 signes) passe à 10 px : 84 px,
   dans une colonne de 85. */
@media (max-width: 379px) {
    .svc-pad__name {
        font-size: 10px;
    }

    .svc-pad__grid {
        gap: 2px;
    }
}

@media (min-width: 600px) {
    .svc-pad__body {
        padding: 28px 24px 24px;
    }

    .svc-pad__name {
        font-size: var(--t-cap);
    }

    .svc-pad__app {
        --app-size: 64px;
    }
}

/* Ordinateur : les neuf apps sur une ligne, six puis trois. */
@media (min-width: 900px) {
    .svc-pad__body {
        grid-template-columns: 6fr 3fr;
        gap: 0;
    }

    .svc-pad__group + .svc-pad__group {
        padding-left: 20px;
        margin-left: 20px;
        box-shadow: inset 1px 0 0 var(--line);
    }

    .svc-pad__grid {
        grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr));
    }

    .svc-pad__group + .svc-pad__group .svc-pad__grid {
        --cols: 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .svc-pad__app,
    .svc-pad__app .app {
        transition: none;
    }
}