/* ============================================
   Services — les aperçus dans les fenêtres
   Là où il n'y a pas de capture : les intégrations branchées sur le
   site, les automatisations qui tombent comme des notifications, les
   objets imprimés. Aucun chiffre, aucun nom de client.
   Les tailles suivent la hauteur de la fenêtre (cqh, .svc-shot est un
   conteneur) : l'aperçu garde ses proportions du téléphone à l'écran.
   ============================================ */

/* Le fond des aperçus : le bureau et sa trame de points. */
.svc-notifs,
.svc-objects {
    position: absolute;
    inset: 0;
    background-color: var(--desk);
    background-image: radial-gradient(circle at center, var(--desk-dot) 1px, transparent 1.5px);
    background-size: 16px 16px;
}

/* ── Intégrations : un panneau gris chaud posé sur la capture, en
   relief, ses trois lignes sur du blanc ── */
.svc-sync {
    position: absolute;
    right: calc(var(--screen-pad) + 10px);
    bottom: calc(var(--screen-pad) + 10px);
    display: grid;
    gap: 2px;
    width: min(38%, 200px);
    padding: 8px;
    border-radius: var(--r-ctl);
    background: var(--panel);
    box-shadow: 0 0 0 var(--hair) var(--edge), var(--relief), var(--shadow-lift);
    font-size: 10px;
    line-height: 1.2;
    color: var(--ink);
}

/* Au téléphone, le panneau se réduit à ses trois lignes : il ne
   couvre pas la capture. Le titre revient dès 600 px. */
.svc-sync .svc-sync__head {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 2px 4px 6px;
    font-family: var(--font-mono);
    color: var(--ink-muted);
}

.svc-sync__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 6px;
    border-radius: var(--r-key);
    background: var(--paper);
    box-shadow: 0 0 0 var(--hair) var(--line), var(--relief);
}

.svc-sync__row svg,
.svc-notif__state svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (min-width: 600px) {
    .svc-sync .svc-sync__head {
        display: flex;
    }

    .svc-sync {
        gap: 4px;
        padding: 12px;
        font-size: var(--t-cap);
    }
}

/* ── Automatisations : des notifications façon macOS ── */
.svc-notifs {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: clamp(6px, 2.4cqh, 12px);
    padding: 6% 8%;
}

.svc-notif {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: min(100%, 400px);
    padding: clamp(6px, 2.4cqh, 12px) 12px;
    border-radius: var(--r-win);
    background: var(--paper);
    box-shadow: 0 0 0 var(--hair) var(--edge), var(--relief), var(--shadow-soft);
    font-size: clamp(11px, 3.6cqh, 14px);
    line-height: 1.2;
}

.svc-notif__icon {
    display: grid;
    place-items: center;
    width: clamp(22px, 8cqh, 30px);
    aspect-ratio: 1;
    border-radius: var(--r-key);
    background: var(--ink);
    color: var(--paper);
}

.svc-notif__icon svg {
    width: 58%;
    height: 58%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.svc-notif__name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.svc-notif__state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ink-muted);
}

/* La demande faite à l'IA : la bulle de la teinte du bloc, texte à
   son encre (--on-klein), l'icône en touche blanche à pictogramme de
   la teinte. */
.svc-notif--ask {
    grid-template-columns: auto minmax(0, 1fr);
    background: var(--klein);
    box-shadow: 0 0 0 var(--hair) var(--klein-deep), inset 0 1px 0 color-mix(in oklch, var(--on-klein) 28%, transparent), var(--shadow-soft);
    color: var(--on-klein);
}

.svc-notif--ask .svc-notif__icon {
    background: var(--paper);
    color: var(--klein-ink);
}

/* L'arrivée : les notifications tombent l'une après l'autre quand la
   fenêtre entre à l'écran (data-watch, js/desk/watch.js), une fois le
   script prêt (.is-armed) : sans lui, elles restent visibles. */
html.js .svc-notifs.is-armed .svc-notif {
    opacity: 0;
    translate: 0 -10px;
    transition: opacity 0.45s var(--ease-out), translate 0.45s var(--ease-out);
}

html.js .svc-notifs.is-armed .svc-notif:nth-child(2) { transition-delay: 0.25s; }
html.js .svc-notifs.is-armed .svc-notif:nth-child(3) { transition-delay: 0.5s; }
html.js .svc-notifs.is-armed .svc-notif:nth-child(4) { transition-delay: 0.85s; }

html.js .svc-notifs.is-armed.is-visible .svc-notif {
    opacity: 1;
    translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
    html.js .svc-notifs.is-armed .svc-notif {
        opacity: 1;
        translate: none;
        transition: none;
    }
}