/* Payday — outils gratuits, guide téléchargeable et cas clients (22/10/2026). S'appuie sur payday.css et guide.css.
   Outils : une carte blanche par étape (pastille numérotée), résultats en tuiles, détail repliable.
   Générateur de mise en demeure : formulaire à gauche, lettre (aperçu A4) collante à droite ; à l'impression, seule la lettre sort. */

.small { font-size: 0.875rem; }
.tool { padding-block: 48px 8px; }
.tool-card { background: var(--white); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: clamp(20px, 3vw, 36px); display: grid; gap: 32px; }
.tool-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; }
.tool-step h2, .med-form legend { font: 800 1.375rem/1.2 var(--font-display); font-style: normal; text-transform: none; letter-spacing: -0.015em; margin-bottom: 12px; }
.ts-num { width: 32px; height: 32px; border-radius: 10px; background: var(--violet); color: var(--white); display: inline-grid; place-items: center; font: 900 italic 1rem/1 var(--font-display); flex: none; }

/* Choix du taux */
.choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.opt { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; border: 1.5px solid var(--line); border-radius: 16px; padding: 16px; cursor: pointer; background: var(--bg); }
.opt:has(input:checked) { border-color: var(--violet); background: var(--lavender); }
.opt input { accent-color: var(--violet); width: 18px; height: 18px; margin-top: 2px; }
.opt b { display: block; font-weight: 650; line-height: 1.35; }
.opt small { display: block; color: var(--grey); font-size: 0.875rem; margin-top: 4px; line-height: 1.45; }
.opt-rate { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 600; }
.tool .opt-rate input { width: 90px; accent-color: auto; height: auto; margin: 0; }
.opt-rate { white-space: nowrap; }

/* Champs */
.tool input[type=text], .tool input[type=date], .tool input[type=url], .tool select, .tool textarea {
  font: 400 1rem/1.4 var(--font-body); padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--white);
  color: var(--ink); width: 100%; min-width: 0; font-variant-numeric: tabular-nums;
}
.tool textarea { resize: vertical; }
.tool input:focus, .tool select:focus, .tool textarea:focus { outline: 2px solid var(--violet); outline-offset: 0; border-color: var(--violet); }

/* Lignes de factures */
.inv-rows { display: grid; gap: 10px; margin-top: 14px; }
.inv-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr 36px; gap: 10px; align-items: end; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.inv-row label { display: grid; gap: 5px; font-size: 0.8125rem; font-weight: 600; color: var(--grey); min-width: 0; }
.inv-row label small { font-weight: 400; font-size: 0.75rem; }
.inv-out { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.9375rem; border-top: 1px dashed var(--line); padding-top: 10px; }
.inv-out b { font-variant-numeric: tabular-nums; }
.inv-del { width: 36px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); color: var(--grey); cursor: pointer; font-size: 0.9rem; align-self: end; }
.inv-del:hover { color: var(--danger); border-color: var(--danger); }
.inv-row:has(.inv-out) .inv-del { grid-row: 1; grid-column: 5; }
.inv-rows.compact .inv-row { grid-template-columns: 1fr 1fr 1fr 1fr 36px; }
.btn.add { margin-top: 12px; padding: 11px 16px; font-size: 0.9375rem; }

/* Résultat */
.tool-result { display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 28px; }
.tr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tr-grid div { background: var(--bg); border-radius: 16px; padding: 16px; display: grid; gap: 4px; min-width: 0; }
.tr-grid small { color: var(--grey); font-size: 0.8125rem; }
.tr-grid b { font: 900 italic clamp(1.4rem, 2.6vw, 1.9rem)/1.1 var(--font-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tr-grid .hl { background: var(--violet); }
.tr-grid .hl small { color: rgba(255, 255, 255, 0.8); }
.tr-grid .hl b { color: var(--lemon); }
.tr-grand { font-size: 1rem; }
.tr-grand b { font-variant-numeric: tabular-nums; }
.tr-warn { border-left: 4px solid var(--warn); background: var(--warn-tint); border-radius: 0 14px 14px 0; padding: 12px 16px; font-size: 0.9375rem; display: grid; gap: 6px; }
.tr-detail summary { cursor: pointer; font-weight: 600; color: var(--violet); }
.tr-detail .tbl { margin-top: 12px; }
.tr-detail td small { color: var(--grey); }
.tr-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tr-note { font-size: 0.8125rem; color: var(--grey); }

/* Texte sous l'outil + colonne d'appels à l'action */
.tool-after { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; padding-block: 56px 24px; align-items: start; }
.tool-side { display: grid; gap: 16px; position: sticky; top: 24px; }
.side-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; display: grid; gap: 10px; justify-items: start; }
.side-card.violet { background: var(--violet); color: var(--white); border-color: var(--violet); }
.side-card.violet .eyebrow { color: var(--lemon); }
.side-card.violet p { color: rgba(255, 255, 255, 0.88); }
.side-card.violet .btn { background: var(--lemon); border-color: var(--lemon); color: var(--ink); }
.side-card.violet .btn:hover { background: #b9f04a; border-color: #b9f04a; }
.side-card .btn { padding: 12px 16px; font-size: 0.9375rem; }
.side-title { font: 800 1.3rem/1.2 var(--font-display); letter-spacing: -0.015em; }
.side-card.violet .side-title { color: var(--white); }
.side-phone { font-size: 0.875rem; }
.side-phone a { white-space: nowrap; }
.side-facts { margin: 0; display: grid; gap: 10px; font-size: 0.9375rem; }
.side-facts dt { color: var(--grey); font-size: 0.8125rem; }
.side-facts dd { margin: 0; font-weight: 600; }

/* Générateur de mise en demeure */
.med-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: start; }
.med-form { display: grid; gap: 16px; }
.med-form fieldset { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; display: grid; gap: 12px; min-width: 0; }
.med-form legend { float: left; width: 100%; display: flex; align-items: center; gap: 10px; margin: 0 0 4px; padding: 0; }
.med-form legend .ts-num { width: 28px; height: 28px; font-size: 0.9rem; }
.med-form label { display: grid; gap: 5px; font-size: 0.875rem; font-weight: 600; min-width: 0; }
.med-form label small { font-weight: 400; color: var(--grey); font-size: 0.78rem; }
.med-form label.check { grid-template-columns: 20px minmax(0, 1fr); align-items: start; font-weight: 500; font-size: 0.9375rem; }
.med-form label.check input { accent-color: var(--violet); width: 18px; height: 18px; margin-top: 2px; }
.med-form .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.med-form .sub { font-weight: 700; font-size: 0.9375rem; margin-top: 6px; }
.med-form .inv-rows { margin-top: 0; }
.med-form .inv-row { grid-template-columns: repeat(2, minmax(0, 1fr)) 36px; }
.med-form .inv-row label:nth-of-type(3) { grid-column: 1; }
.med-form .inv-row .inv-del { grid-column: 3; grid-row: 1; }
.med-imported { background: var(--ok-tint); color: var(--ok); font-weight: 600; font-size: 0.875rem; padding: 8px 12px; border-radius: 10px; }
.med-preview { position: sticky; top: 16px; display: grid; gap: 12px; min-width: 0; }
.med-bar { display: grid; gap: 10px; }
.med-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.med-actions .btn { padding: 11px 15px; font-size: 0.9375rem; }
.btn.ghost.danger:hover { color: var(--danger); border-color: var(--danger); }
.med-missing { font-size: 0.875rem; font-weight: 600; color: var(--warn); }
.med-missing.ok { color: var(--ok); }
.letter { background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: clamp(24px, 4vw, 48px); font: 400 0.9375rem/1.6 Georgia, "Times New Roman", serif; color: #1b1b25; max-height: calc(100vh - 140px); overflow: auto; }
.letter p { margin: 0 0 12px; }
.letter .l-from { margin-bottom: 18px; }
.letter .l-to { margin: 0 0 20px 50%; }
.letter .l-date { text-align: right; }
.letter .l-subj { margin: 18px 0; }
.letter .l-sign { margin-top: 24px; }
.letter mark { background: var(--lavender); color: var(--violet); border-radius: 4px; padding: 0 3px; font: 600 0.85em/1.4 var(--font-body); }

@media print {
  body { background: #fff; padding: 0; }
  body.printing-letter * { visibility: hidden; }
  body.printing-letter .letter, body.printing-letter .letter * { visibility: visible; }
  body.printing-letter .letter { position: absolute; inset: 0 auto auto 0; width: 100%; border: 0; box-shadow: none; max-height: none; overflow: visible; padding: 0; font-size: 11.5pt; }
  body.printing-letter .letter mark { background: none; color: inherit; }
  .pd-modal, .pd-rdv { display: none !important; }
  /* Version complète du guide : la page sert aussi de source au PDF (scripts/build_guides.py --pdf) */
  .doc-page .top, .doc-page footer, .doc-page .doc-bar, .doc-page .doc-toc, .doc-page .g-crumb, .doc-page .tpl-copy { display: none !important; }
  .doc-page .band-violet { box-shadow: none; clip-path: none; border-radius: 18px; padding: 36px 32px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-page .doc-layout { display: block; padding-top: 24px; }
  .doc-page .prose.doc { max-width: none; }
  .doc-page .prose h2 { break-before: page; margin-top: 0; }
  .doc-page .prose h2, .doc-page .prose h3 { break-after: avoid; }
  .doc-page .tpl, .doc-page .tbl tr, .doc-page .keybox, .doc-page .note, .doc-page .tip, .doc-page .doc-end, .doc-page .checklist { break-inside: avoid; }
  .doc-page .tpl, .doc-page .doc-end { box-shadow: none; }
  .doc-page .g-hero { display: none; }
  .doc-page .doc-cover { display: flex; flex-direction: column; justify-content: center; gap: 22px; height: 100vh; break-after: page; background: var(--violet); color: var(--white); border-radius: 18px; padding: 56px 48px; }
  .doc-cover img { width: 240px; height: auto; border-radius: 8px; }
  .dc-kicker { font: 700 0.8rem/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lemon); margin-top: 120px; }
  .dc-title { font: 900 italic 3.6rem/1.06 var(--font-display); letter-spacing: -0.03em; }
  .dc-title em { color: var(--lemon); }
  .dc-sub { font-size: 1.15rem; line-height: 1.55; max-width: 44ch; color: rgba(255, 255, 255, 0.9); }
  .dc-contact { margin-top: auto; font-weight: 600; }
}
.doc-cover { display: none; }

/* Bloc « guide gratuit » (accueil, guides, outils) */
.lm { background: var(--ink); color: var(--white); border-radius: 28px; padding: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 48px); align-items: center; margin-block: 56px 24px; position: relative; overflow: hidden; overflow: clip; }
.lm::before { content: ""; position: absolute; right: -140px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(203, 255, 99, 0.16), transparent 65%); pointer-events: none; }
.lm .eyebrow { color: var(--lemon); }
.lm h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); text-transform: none; letter-spacing: -0.03em; margin: 12px 0 14px; color: var(--white); }
.lm h2 em { color: var(--lemon); }
.lm-copy p { color: rgba(255, 255, 255, 0.8); max-width: 48ch; }
.lm-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.lm-list li { position: relative; padding-left: 26px; color: rgba(255, 255, 255, 0.92); font-size: 0.9688rem; }
.lm-list li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 13px; height: 7px; border-left: 2.5px solid var(--lemon); border-bottom: 2.5px solid var(--lemon); transform: rotate(-45deg); }
.lm-box { background: var(--white); color: var(--ink); border-radius: var(--r-card); padding: 22px; display: grid; gap: 12px; position: relative; min-width: 0; }
.lm-cover { display: flex; align-items: center; gap: 14px; }
.lm-cover .doc-ic { width: 52px; height: 66px; border-radius: 6px; background: var(--violet); color: var(--white); display: grid; place-items: end start; padding: 7px; font: 900 italic 0.68rem/1 var(--font-display); box-shadow: 4px 4px 0 var(--lemon); flex: none; text-transform: uppercase; }
.lm-cover b { display: block; font-weight: 700; line-height: 1.3; }
.lm-cover small { color: var(--grey); font-size: 0.8125rem; }
.lm form { display: grid; gap: 10px; }
.lm .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lm input { font: 400 1rem/1.4 var(--font-body); padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); width: 100%; min-width: 0; }
.lm input:focus { outline: 2px solid var(--violet); outline-offset: 0; border-color: var(--violet); }
.lm .btn { width: 100%; }
.lm .msg { font-size: 0.875rem; margin: 0; }
.lm .msg.err { color: var(--danger); }
.lm .small { font-size: 0.78rem; color: var(--grey); margin: 0; }
.lm .small a { color: inherit; }
.lm .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lm-done { display: grid; gap: 10px; }
.lm-done .lm-sent { color: var(--ok); font-weight: 600; font-size: 0.9375rem; }
.lm-done .btn.ghost { color: var(--ink); }

/* Page du guide (formulaire en vedette) */
.lm-page { padding-block: 48px 8px; }
.lm-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
/* Pas collant (22/10/2026) : le bloc est plus haut que l'écran, son bas restait coupé. Version compacte sur cette page. */
.lm-page .lm { margin: 0; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.lm-page .lm h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 10px 0 0; }
.lm-page .lm-copy p { display: none; }
@media (max-width: 1020px) { .lm-page .lm { order: -1; } }
.lm-page .lm-copy .lm-list { display: none; }
.lm-h { font: 800 1.6rem/1.2 var(--font-display); font-style: normal; text-transform: none; letter-spacing: -0.015em; margin-bottom: 18px; }
.lm-toc { list-style: none; counter-reset: c; padding: 0; margin: 0; display: grid; gap: 10px; }
.lm-toc li { counter-increment: c; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.lm-toc li::before { content: counter(c); grid-row: span 2; width: 32px; height: 32px; border-radius: 10px; background: var(--lavender); color: var(--violet); display: grid; place-items: center; font: 900 italic 1rem/1 var(--font-display); }
.lm-toc b { font-weight: 700; }
.lm-toc span { color: var(--grey); font-size: 0.9375rem; line-height: 1.5; }

/* Version complète du guide (lecture et PDF) */
.doc-bar { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 32px; }
.doc-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; padding-block: 32px 24px; align-items: start; }
.doc-toc { position: sticky; top: 24px; }
.prose.doc { max-width: 76ch; }
.prose .checklist { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 24px; display: grid; gap: 10px; }
.checklist .kb-title { font: 700 0.75rem/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet); margin-top: 8px; }
.checklist ul { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 30px; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 16px; height: 16px; border: 2px solid var(--violet); border-radius: 4px; }
.prose .doc-end { background: var(--violet); color: var(--white); border-radius: var(--r-card); padding: 26px; display: grid; gap: 12px; margin-top: 48px; }
.doc-end .side-title { color: var(--white); }
.doc-end p { color: rgba(255, 255, 255, 0.9); }
.prose .doc-end .btn { background: var(--lemon); border-color: var(--lemon); color: var(--ink); text-decoration: none; }
.doc-contact { font-size: 0.875rem; margin-left: 10px; }

/* Cas clients */
.case-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-block: 48px 0; }
.case-stats div { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; display: grid; gap: 6px; }
.case-stats b { font: 900 italic clamp(2rem, 4vw, 2.9rem)/1 var(--font-display); color: var(--violet); letter-spacing: -0.02em; }
.case-stats span { color: var(--grey); font-size: 0.9375rem; line-height: 1.45; }
.case-method { font-size: 0.875rem; color: var(--grey); margin-top: 12px; }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; padding-block: 48px 24px; }
.case-card { background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 28px; display: grid; gap: 12px; align-content: start; justify-items: start; text-decoration: none; color: var(--ink); transition: border-color .15s ease, transform .15s ease; }
a.case-card:hover { border-color: var(--violet); transform: translateY(-2px); }
.case-card h2 { font-size: clamp(2rem, 4vw, 2.8rem); text-transform: none; }
.case-big { font: 900 italic 1.5rem/1.2 var(--font-display); color: var(--violet); }
.case-card p { color: var(--grey); }
.case-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.case-tags li { background: var(--lavender); color: var(--violet); font-weight: 600; font-size: 0.8125rem; padding: 5px 10px; border-radius: 999px; }
.case-card .more { font-weight: 600; color: var(--violet); }
.case-card.next { background: var(--lavender); border-color: transparent; }

/* Bloc « Outils gratuits » (accueil, ressources) */
.tools-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tool-tile { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; display: grid; gap: 10px; align-content: start; text-decoration: none; color: var(--ink); transition: border-color .15s ease, transform .15s ease; }
.tool-tile:hover { border-color: var(--violet); transform: translateY(-2px); }
.tool-tile .k { font: 700 0.75rem/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet); }
.tool-tile h3 { font: 700 1.1875rem/1.3 var(--font-body); }
.tool-tile p { color: var(--grey); font-size: 0.9375rem; line-height: 1.55; }
.tool-tile .more { font-weight: 600; color: var(--violet); font-size: 0.9375rem; }

@media (max-width: 1020px) {
  .med-grid { grid-template-columns: minmax(0, 1fr); }
  .med-preview { position: static; }
  .letter { max-height: none; }
  .tool-after, .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tool-side { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .doc-toc { display: none; }
  .lm-page-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .lm { grid-template-columns: minmax(0, 1fr); }
  .tr-grid, .case-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools-row { grid-template-columns: minmax(0, 1fr); }
  .inv-row, .inv-rows.compact .inv-row { grid-template-columns: repeat(2, minmax(0, 1fr)) 36px; }
  .inv-row label:nth-of-type(3) { grid-column: 1; }
  .inv-row .inv-del, .inv-row:has(.inv-out) .inv-del { grid-column: 3; grid-row: 1; }
}
@media (max-width: 520px) {
  .inv-row, .inv-rows.compact .inv-row, .med-form .inv-row { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 48px; }
  .inv-row label:nth-of-type(3) { grid-column: auto; }
  .inv-row .inv-del, .inv-row:has(.inv-out) .inv-del, .med-form .inv-row .inv-del { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; }
}
@media (max-width: 620px) {
  .choice, .med-form .two, .lm .two { grid-template-columns: minmax(0, 1fr); }
  .tool-step { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .letter .l-to { margin-left: 0; }
}