/*!
 * services.css — page Offre (services.html, en/services.html). Préfixe sv-.
 * À charger après styles.css et content.css. Budget : fonts + styles + content + services < 80 Kio.
 * Documentation : docs/portfolio-design-system.md
 */
@layer pages {
  /* ---------- Héros : titre + sommaire des familles ---------- */
  .sv-hero { display: grid; gap: var(--space-xl); }
  .sv-hero h1 { max-inline-size: 12em; }
  @media (min-width: 64em) { .sv-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); column-gap: var(--space-2xl); align-items: end; } }
  .sv-toc ol { list-style: none; padding: 0; border-block-start: 1px solid var(--c-line-strong); }
  .sv-toc a {
    display: flex; align-items: center; gap: 0.75rem; min-block-size: 3rem; padding-block: 0.35rem;
    border-block-end: 1px solid var(--c-line); font-weight: 550; text-decoration: none;
  }
  .sv-toc a > .icon:first-child { color: var(--c-accent-text); }
  .sv-toc__go { margin-inline-start: auto; color: var(--c-text-3); transition: translate var(--dur-2) var(--ease-out), color var(--dur-2); }
  .sv-toc a:hover { color: var(--c-accent-text); }
  .sv-toc a:hover .sv-toc__go { translate: 0 3px; color: var(--c-text); }

  /* ---------- Une famille : texte | démos ---------- */
  .sv-family__grid { display: grid; gap: var(--space-xl); }
  @media (min-width: 64em) { .sv-family__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); column-gap: var(--space-2xl); align-items: center; } }
  .sv-family__body { display: grid; gap: var(--space-s); justify-items: start; }
  .sv-family__icon {
    display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; margin-block-end: var(--space-2xs);
    border: 1px solid var(--c-line-strong); border-radius: var(--radius-s); background: var(--c-raised); color: var(--c-accent-text);
  }
  .sv-family__icon .icon { inline-size: 1.4rem; block-size: 1.4rem; }
  .sv-family__title { font-size: var(--step-3); max-inline-size: 14em; }
  .sv-family__for { font-size: var(--text-lead); line-height: 1.5; color: var(--c-text-2); max-inline-size: 30em; }
  .sv-list { display: grid; gap: 0.6rem; margin-block-start: var(--space-2xs); list-style: none; padding: 0; }
  .sv-list li { display: flex; gap: 0.75rem; align-items: baseline; max-inline-size: 33em; }
  .sv-list li::before { content: ""; flex: none; inline-size: 0.45rem; block-size: 0.45rem; translate: 0 -0.12rem; border: 1px solid var(--c-accent-text); }
  .sv-receive {
    display: flex; gap: 0.75rem; align-items: baseline; margin-block-start: var(--space-xs); padding: var(--space-s) var(--space-m);
    border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-raised); max-inline-size: 34em;
  }
  .sv-receive .icon { flex: none; translate: 0 0.2em; color: var(--c-led-text); }
  .sv-receive b { font-weight: 600; }

  /* ---------- Démos liées ---------- */
  .sv-demos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m) var(--space-s); margin-block-start: var(--space-s); list-style: none; padding: 0; }
  @media (min-width: 64em) { .sv-demos { gap: var(--space-l) var(--space-m); } }
  .sv-demo { position: relative; display: grid; gap: 0.2rem; align-content: start; }
  .sv-demo .device { margin-block-end: 0.5rem; transition: translate var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
  .sv-demo:hover .device { translate: 0 -3px; box-shadow: var(--shadow-2); }
  .sv-demo .device__bar { block-size: 1.25rem; padding-inline: 0.5rem; }
  .sv-demo .device__dots span { inline-size: 0.35rem; block-size: 0.35rem; }
  .sv-demo__title { font-size: var(--step-0); font-weight: 600; letter-spacing: -0.005em; }
  .sv-demo__title a { text-decoration: none; }
  .sv-demo__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .sv-demo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.75rem; font-size: var(--step--1); color: var(--c-text-2); }
  .sv-demo__meta a { position: relative; z-index: 2; display: inline-flex; align-items: center; min-block-size: 1.75rem; color: var(--c-text-2); text-underline-offset: 0.25em; }
  .sv-demo__meta a:hover { color: var(--c-text); text-decoration-color: var(--c-accent); }
  @supports selector(:has(*)) {
    .sv-demo:has(.sv-demo__title a:focus-visible) .device { outline: 2px solid var(--c-focus); outline-offset: 3px; }
    .sv-demo__title a:focus-visible { outline: none; text-decoration: underline; }
  }
  .sv-also { margin-block-start: var(--space-m); font-size: var(--step--1); color: var(--c-text-2); max-inline-size: 40em; }
  .sv-also a { color: var(--c-text); text-underline-offset: 0.25em; text-decoration-color: var(--c-line-strong); }
  .sv-also a:hover { text-decoration-color: var(--c-accent); }

  /* Démo sans capture : bloc-lien */
  .sv-solo { position: relative; display: grid; gap: 0.35rem; margin-block-start: var(--space-s); padding: var(--space-m); border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-raised); }
  .sv-solo:hover { border-color: var(--c-line-strong); }
  .sv-solo .device { margin-block-end: var(--space-xs); }

  /* ---------- Agents IA : exemple d'échange + note honnête ---------- */
  .sv-chat { display: grid; gap: 0.6rem; margin: var(--space-s) 0 0; padding: var(--space-m); border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-raised); }
  .sv-chat__msg { max-inline-size: 80%; padding: 0.6rem 0.9rem; border-radius: var(--radius-m); font-size: var(--step--1); line-height: 1.45; }
  .sv-chat__msg--in { justify-self: start; border-end-start-radius: var(--radius-xs); background: var(--c-surface); }
  .sv-chat__msg--out { justify-self: end; border-end-end-radius: var(--radius-xs); border: 1px solid var(--c-line-strong); background: var(--c-bg); }
  .sv-chat__msg b { display: block; margin-block-end: 0.15rem; font-size: 0.8125rem; font-weight: 600; color: var(--c-text-2); }
  .sv-chat__handoff { display: flex; align-items: center; gap: 0.5rem; justify-self: center; font-size: 0.8125rem; color: var(--c-led-text); }
  .sv-chat figcaption { margin-block-start: 0.25rem; padding-block-start: 0.6rem; border-block-start: 1px dashed var(--c-line-strong); font-size: var(--step--1); color: var(--c-text-2); }
  .sv-honest { display: grid; gap: var(--space-s); justify-items: start; margin-block-start: var(--space-m); }
  .sv-honest p { max-inline-size: 34em; }

  /* ---------- Après la mise en ligne | Sur devis ---------- */
  .sv-after { display: grid; gap: var(--space-2xl); }
  @media (min-width: 64em) { .sv-after { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); } }
  .sv-after > section { display: grid; gap: var(--space-s); align-content: start; justify-items: start; }
  .sv-after h2 { font-size: var(--step-3); }
  .sv-after__lead { color: var(--c-text-2); max-inline-size: 34em; }
  .sv-levels { display: grid; inline-size: 100%; margin-block-start: var(--space-2xs); border-block-start: 1px solid var(--c-line); }
  .sv-levels > div { display: grid; gap: 0.15rem; padding-block: var(--space-s); border-block-end: 1px solid var(--c-line); }
  @media (min-width: 30em) { .sv-levels > div { grid-template-columns: 7rem minmax(0, 1fr); column-gap: var(--space-m); } }
  .sv-levels dt { font-weight: 600; }
  .sv-levels dd { color: var(--c-text-2); }
  .sv-quote { display: grid; gap: var(--space-s); margin-block: var(--space-2xs) var(--space-xs); list-style: none; padding: 0; counter-reset: q; }
  .sv-quote li { position: relative; padding-inline-start: 2.5rem; max-inline-size: 34em; counter-increment: q; }
  .sv-quote li::before {
    content: counter(q); position: absolute; inset-inline-start: 0; inset-block-start: -0.05rem;
    display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border: 1px solid var(--c-line-strong); border-radius: 50%;
    font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-accent-text);
  }

  /* ---------- Questions ---------- */
  .sv-faq .section-head__title { font-size: var(--step-3); }
  .sv-faq .accordion__body .link-arrow { margin-block-start: 0.25rem; }
}