/* ============================================
   Services — socle de la page (WAB OS)
   Les quelques valeurs propres à cette page, l'icône d'app en carré arrondi
   (le composant de la page : chaque service est une « app »), les
   en-têtes de section et le lien fléché. Toutes les couleurs viennent
   des jetons partagés (os-tokens.css).
   ============================================ */

.svc {
    /* La tuile d'app : trois matières de touche, comme le clavier du
       système. Teinte : la touche de couleur (--key-klein, lue sur
       place pour suivre le data-tint du bloc), pictogramme à l'encre de
       la teinte (--on-klein). Encre : le noir du système, pictogramme
       blanc. Blanc : la touche claire, pictogramme encre. */
    --app-ink: linear-gradient(180deg, color-mix(in oklch, var(--ink) 82%, var(--paper)), var(--ink) 60%);
    --app-clear: var(--key-light);
    --app-shade: color-mix(in oklch, var(--ink) 14%, transparent);
    /* La forme des icônes partagées (assets/icons) : un carré aux coins
       à peine arrondis (14 %), en masque, net à toute taille. */
    --icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14 0H86A14 14 0 0 1 100 14V86A14 14 0 0 1 86 100H14A14 14 0 0 1 0 86V14A14 14 0 0 1 14 0Z'/%3E%3C/svg%3E");
    --app-size: 44px;
    --feat-text: 360px;
    --feat-gap: 72px;
}

/* Le sprite des pictogrammes n'occupe aucune place. */
.svc-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ── L'icône d'app ──
   L'ombre est portée par la boîte (filter), la matière par la tuile
   masquée en carré arrondi : un masque couperait une box-shadow. */
.app {
    --glyph: var(--glass-ink);
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: var(--app-size);
    height: var(--app-size);
    filter: drop-shadow(0 1px 1px var(--app-shade)) drop-shadow(0 4px 8px var(--app-shade));
    color: var(--glyph);
}

.app::before,
.app::after {
    content: '';
    position: absolute;
    inset: 0;
    -webkit-mask: var(--icon-shape) center / 100% 100% no-repeat;
    mask: var(--icon-shape) center / 100% 100% no-repeat;
}

/* La matière, cernée d'un liseré d'un pixel, en relief de touche :
   arête haute éclairée, pénombre en bas. */
.app::before {
    background: var(--app-clear);
    box-shadow: inset 0 0 0 var(--hair) var(--edge), var(--relief);
}

/* Le reflet : la moitié haute s'éclaire à peine. */
.app::after {
    background: linear-gradient(180deg, color-mix(in oklch, var(--paper) 40%, transparent), transparent 50%);
}

.app--klein {
    --glyph: var(--on-klein);
}

.app--klein::before {
    background: var(--key-klein);
    box-shadow: inset 0 0 0 var(--hair) var(--klein-deep), inset 0 1px 0 color-mix(in oklch, var(--paper) 34%, transparent);
}

.app--klein::after {
    opacity: 0.4;
}

.app--ink {
    --glyph: var(--paper);
}

.app--ink::before {
    background: var(--app-ink);
}

.app--ink::after {
    opacity: 0.35;
}

.app svg {
    position: relative;
    z-index: 1;
    width: calc(var(--app-size) * 0.5);
    height: calc(var(--app-size) * 0.5);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── En-tête de section ── le badge, puis le titre. */
.svc-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

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

/* ── Le lien fléché ── souligné fin, la flèche avance au survol. */
.svc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: var(--t-small);
    font-weight: var(--w-medium);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    text-decoration-color: var(--line-strong);
    color: var(--ink);
    transition: text-decoration-color 0.2s var(--ease-out);
}

.svc-link svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: translate 0.2s var(--ease-out);
}

@media (hover: hover) {
    .svc-link:hover {
        text-decoration-color: var(--accent);
    }

    .svc-link:hover svg {
        translate: 2px -2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .svc-link svg {
        transition: none;
    }
}