/* Accueil et page Récupérer vos impayés (15/10/2026) : dossier d'exemple, offre en deux temps, canaux de relance.
   Chargé après assets/payday.css et assets/pages.css. */

/* Un dossier suivi sur une semaine (héros de l'accueil) */
.dossier { margin: 0; background: var(--white); color: var(--ink); border-radius: 20px; padding: 24px 24px 12px; box-shadow: 0 40px 80px -40px rgba(8, 6, 60, 0.7); min-width: 0; }
.d-head { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.d-eyebrow { font: 700 0.75rem/1.4 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet); }
.d-head > b { font-size: 1.25rem; }
.d-meta { font-size: 0.9375rem; color: var(--grey); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.d-meta b { color: var(--ink); }
.d-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.d-steps li { display: grid; grid-template-columns: 92px 74px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.4; align-items: baseline; }
.d-steps li:last-child { border-bottom: 0; }
.d-ch { font: 700 0.6875rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--violet); background: var(--lavender); padding: 6px 8px; border-radius: 7px; justify-self: start; }
.d-when { color: var(--grey); font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.d-what i { font-style: normal; color: var(--ok); font-weight: 600; }
.d-paid .d-ch { background: var(--ok-tint); color: var(--ok); }
.d-paid .d-what { font-weight: 600; }
@media (max-width: 560px) {
  .dossier { padding: 20px 18px 8px; }
  .d-steps li { grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; }
  .d-what { grid-column: 1 / -1; }
}

/* D'abord on récupère, ensuite la machine */
.two-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.ts { border-radius: var(--r-card); padding: 34px 32px; display: grid; gap: 18px; grid-template-rows: auto auto auto 1fr auto auto; overflow: hidden; border: 1px solid var(--line); background: var(--white); min-width: 0; }
.ts-1 { background: var(--violet); color: var(--white); border-color: var(--violet); box-shadow: 0 40px 80px -40px rgba(60, 51, 224, 0.85); }
.ts-n { font: 700 0.75rem/1.4 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet); }
.ts-1 .ts-n { color: var(--lemon); }
.ts h3 { font-size: var(--step-2); line-height: 1.15; }
.ts ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; align-content: start; }
.ts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; }
.ts li::before { content: "✓"; font-weight: 700; color: var(--violet); }
.ts-1 li::before { color: var(--lemon); }
.ts-1 .price { border-top-color: rgba(255, 255, 255, 0.3); }
.ts-1 .price small { color: rgba(255, 255, 255, 0.8); }
.ts .btn { justify-self: start; }
.ts-1 .btn { background: var(--white); color: var(--violet); border-color: var(--white); }
.ts-1 .btn:hover { background: var(--lavender); border-color: var(--lavender); color: var(--violet-hover); }
.ts-free { margin-top: 24px; text-align: center; color: var(--grey); font-size: 0.9375rem; }
.ts-free a { color: var(--violet); font-weight: 600; }
@media (max-width: 860px) { .two-steps { grid-template-columns: minmax(0, 1fr); } .ts { padding: 28px 22px; } }

/* Tous les canaux */
.channels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.channels li { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.channels b { font-size: var(--step-1); }
.channels span { color: var(--grey); font-size: 0.9375rem; line-height: 1.45; }
.ch-note { margin-top: 22px; font-size: 0.9375rem; }
@media (max-width: 1000px) { .channels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .channels { grid-template-columns: minmax(0, 1fr); } }

/* Illustrations dans les pages (20/10/2026) : en tête des deux cartes de l'accueil, et du bloc « Et après ? » */
.ts-img { display: block; width: calc(100% + 64px); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: -34px -32px 4px; background: var(--lavender); }
.ts-1 .ts-img { border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
@media (max-width: 860px) { .ts-img { width: calc(100% + 44px); margin: -28px -22px 4px; } }

.ts-more { justify-self: start; font-weight: 600; font-size: .9375rem; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ts-1 .ts-more { color: var(--white); }

/* Lien vers le cas client sous le chiffre Morning (22/10/2026) */
.proof .proof-link { color: var(--lemon); font-weight: 600; text-decoration: none; margin-top: 6px; }
.proof .proof-link:hover { text-decoration: underline; }
#outils .lm { margin-top: 40px; }

/* Tunnel en 3 étapes (22/10/2026) : le test, le bilan, la machine */
@media (min-width: 1000px) { .three-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 861px) and (max-width: 999px) { .three-steps { grid-template-columns: minmax(0, 1fr); } }
.ts-kpi { display: grid; align-content: center; gap: 12px; aspect-ratio: 16 / 9; max-width: none; width: calc(100% + 64px); margin: -34px -32px 4px; padding: 20px 28px; background: var(--lavender); border-bottom: 1px solid var(--line); }
.ts-kpi .k-h { font: 700 0.6875rem/1.4 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet); }
.ts-kpi .k-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 0.875rem; }
.ts-kpi .k-row b { font-weight: 600; }
.ts-kpi .k-row i { display: block; height: 10px; border-radius: 5px; background: var(--violet); width: var(--w); }
.ts-kpi .k-row:nth-of-type(2) i { background: #8f88ff; }
.ts-kpi .k-row:nth-of-type(3) i { background: #c9c5ff; }
@media (max-width: 860px) { .ts-kpi { width: calc(100% + 44px); margin: -28px -22px 4px; } }