/* vpages.css — pages libre-service (v0.55) : assistant de dépannage, guide, centre de téléchargement. S'appuie sur apps.css (ap-*). */

/* ---- Assistant de dépannage ---- */
.ts{ max-width: 860px; }
.ts__stage{ min-height: 320px; }
.ts__crumbs{ display: flex; flex-direction: column; gap: 8px; margin: 0 0 28px; padding: 0 0 22px; list-style: none; border-bottom: 1px solid var(--ap-line); }
.ts__crumbs li{ margin: 0; font-size: 14px; color: var(--ap-steel); }
.ts__crumb-q{ display: block; }
.ts__crumb-a{ display: block; font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif; font-weight: normal; color: var(--ap-ink); }
.ts__title{ margin: 0 0 24px; font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif; font-weight: normal; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; letter-spacing: -.01em; outline: 0; }
.ts__options{ display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ts__options li{ margin: 0; padding: 0; }
.ts__option{ display: block; width: 100%; padding: 20px 24px; text-align: left; font: inherit; font-size: 17px; line-height: 1.35; color: var(--ap-ink); background: #fff; border: 1px solid #C9C9CF; border-left: 3px solid var(--ap-red); border-radius: 0; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
.ts__option:hover, .ts__option:focus-visible{ transform: translate(calc(var(--hv-shift, 3px) * -1), calc(var(--hv-shift, 3px) * -1)); box-shadow: var(--hv-offset, 4px) var(--hv-offset, 4px) 0 0 var(--ap-red); }
.ts__text{ margin: 0 0 22px; font-size: 18px; line-height: 1.6; color: var(--ap-steel); }
.ts__sub{ margin: 0 0 14px; font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif; font-weight: normal; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ap-red); }
.ts__steps{ margin: 0 0 22px; padding: 0 0 0 22px; }
.ts__steps li{ margin: 0 0 12px; padding-left: 6px; font-size: 17px; line-height: 1.55; }
.ts__note{ margin: 0 0 26px; padding: 14px 18px; font-size: 14px; line-height: 1.5; color: var(--ap-steel); background: var(--ap-surface); border-left: 3px solid #C9C9CF; }
.ts__links{ display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px; }
.ts__bar{ display: flex; flex-wrap: wrap; gap: 20px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--ap-line); }
.ts__back, .ts__restart{ padding: 0; font: inherit; font-size: 15px; color: var(--ap-ink); background: none; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; cursor: pointer; }
.ts__back:hover, .ts__restart:hover{ color: var(--ap-red); }

/* ---- Guide ---- */
.guide__safety{ max-width: 720px; margin: 24px 0 0; padding: 16px 20px; font-size: 16px; line-height: 1.5; background: #fff; border-left: 3px solid var(--ap-red); }
.guide__steps{ display: grid; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: guide; max-width: 860px; }
.guide__step{ position: relative; margin: 0; padding: 0 0 30px 74px; counter-increment: guide; }
.guide__step::before{ content: counter(guide); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif; font-size: 20px; color: #fff; background: var(--ap-red); }
.guide__step::after{ content: ""; position: absolute; left: 23px; top: 58px; bottom: 10px; width: 2px; background: var(--ap-line); }
.guide__step:last-child::after{ display: none; }
.guide__step h3{ margin: 6px 0 6px; font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif; font-weight: normal; font-size: 20px; line-height: 1.25; }
.guide__step p{ margin: 0; font-size: 16px; line-height: 1.6; color: var(--ap-steel); }
.guide__actions{ margin-top: 28px; }

/* ---- Centre de téléchargement ---- */
.dl__bar{ display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 16px; }
.dl__bar label{ display: block; margin: 0 0 8px; font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif; font-weight: normal; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ap-steel); }
.dl__bar input, .dl__bar select{ width: 100%; height: 52px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--ap-ink); background: #fff; border: 1px solid #C9C9CF; border-radius: 0; }
.dl__chips{ display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; }
.dl__chip{ padding: 10px 18px; font: inherit; font-size: 15px; color: var(--ap-ink); background: #fff; border: 1px solid #C9C9CF; border-radius: 0; cursor: pointer; }
.dl__chip.is-active{ color: #fff; background: var(--ap-ink); border-color: var(--ap-ink); }
.dl__count{ margin: 18px 0 14px; font-size: 14px; color: var(--ap-steel); }
.dl__list{ display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ap-line); }
.dl__item{ display: flex; align-items: center; gap: 18px; margin: 0; padding: 18px 4px; border-bottom: 1px solid var(--ap-line); }
.dl__item[hidden]{ display: none; }
.dl__icon{ flex: 0 0 24px; display: inline-flex; color: var(--ap-red); }
.dl__main{ flex: 1 1 auto; min-width: 0; }
.dl__main b{ display: block; font-family: "Lato Bold", -apple-system, "Segoe UI", sans-serif; font-weight: normal; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.dl__main small{ display: block; margin-top: 4px; font-size: 13px; color: var(--ap-steel); }
.dl__get{ flex: 0 0 auto; }
.dl__empty{ margin: 24px 0 0; font-size: 17px; color: var(--ap-steel); }
.ap--vpage .screen-reader-text{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 760px){
  .dl__bar{ grid-template-columns: minmax(0, 1fr); }
  .dl__item{ flex-wrap: wrap; }
  .dl__get{ margin-left: 42px; }
  .guide__step{ padding-left: 62px; }
  .guide__step::before{ width: 42px; height: 42px; font-size: 18px; }
  .guide__step::after{ left: 20px; top: 52px; }
}
@media (prefers-reduced-motion: reduce){ .ts__option{ transition: none; } .ts__option:hover, .ts__option:focus-visible{ transform: none; } }