/* Affacturage : mise en page seulement (tokens et composants dans site.css). */
[hidden] { display: none !important; }

.aff-hero { padding: var(--sp-10) 0 var(--sp-8); }
.aff-hero h1 { max-width: 16ch; }
.aff-hero .hero-copy { padding-top: var(--sp-8); }
/* Bureau : le texte (promesse + trois puces) est centré verticalement face à la carte du simulateur, plus haute */
@media (min-width: 960px) {
  .aff-hero .hero-grid { grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". card" "copy card" "more card" ". card"; row-gap: 0; }
  .aff-hero .hero-copy { padding-top: 0; }
  .aff-hero .hero-more { padding-top: var(--sp-6); }
}
.aff-hero .card-sim { padding: var(--sp-6) var(--sp-8) var(--sp-5); }
.aff-foot { margin-top: var(--sp-3); }
.aff-export { text-align: center; margin-top: var(--sp-1); }
.aff-export .field { text-align: left; }
.aff-hero .lead { margin-bottom: 0; }
.aff-hero .hero-more .check-list { margin-bottom: 0; }

.chips-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.chips-4 .chip-btn { width: 100%; padding: 0 6px; }
.chips-4 .chip-btn[aria-pressed="true"] { padding: 0 5px; }
#dso-other { margin-top: var(--sp-2); }

.aff-export > summary { cursor: pointer; font-weight: 600; color: var(--brand); min-height: 44px; display: inline-flex; align-items: center; font-size: var(--fs-small); }
.aff-export > summary:hover { text-decoration: underline; color: var(--brand-hover); }
.aff-export .field { margin-bottom: 0; }

.aff-result { margin-top: var(--sp-5); transition: opacity .15s; }
.aff-result.is-busy { opacity: .6; }
.aff-result .sim-figure span { color: var(--ink-3); }
.aff-result #a-warning { margin: var(--sp-2) 0; }
.aff-detail { margin: 0 0 var(--sp-3); }
.aff-detail > summary { cursor: pointer; font-weight: 600; color: var(--brand); font-size: var(--fs-small); min-height: 32px; display: inline-flex; align-items: center; }
.aff-detail > summary:hover { text-decoration: underline; color: var(--brand-hover); }
.aff-list { margin: var(--sp-2) 0 0; display: grid; }
.aff-list > div { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.aff-list dt { color: var(--ink-3); }
.aff-list dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.aff-how { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-16); align-items: center; }
.aff-how h2 { margin-bottom: var(--sp-6); }
.aff-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); }
.aff-steps li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.aff-steps h3 { font-size: var(--fs-h4); margin: 4px 0 var(--sp-2); }
.aff-steps p { color: var(--ink-3); margin: 0; }
.aff-photo { margin: 0; }
.aff-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); }

.aff-who { margin-top: var(--sp-6); gap: var(--sp-12); }
.aff-who h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-4); }
.aff-who .check-list li { font-weight: 400; }

.aff-sec { padding: var(--sp-12) 0; }
#ai-invoices-slot.aff-sec { padding-bottom: 0; }
.aff-hero + .container .facts { padding: var(--sp-6) 0; }
.aff-faq .accordion { margin-top: var(--sp-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-12); align-items: start; }
.aff-legal { margin: var(--sp-6) 0 0; font-size: var(--fs-small); color: var(--muted); max-width: 760px; }
.aff-legal a { font-weight: 600; }

@media (max-width: 1023px) {
  .aff-how { gap: var(--sp-8); }
}
@media (max-width: 767px) {
  .aff-hero .hero-copy { padding-top: 0; }
  .aff-how { grid-template-columns: minmax(0, 1fr); }
  .aff-how h2 { margin-bottom: var(--sp-6); }
  .aff-who { gap: var(--sp-8); margin-top: var(--sp-6); }
  .aff-sec { padding: var(--sp-10) 0; }
  .aff-hero { padding: var(--sp-8) 0 var(--sp-10); }
  .aff-hero .card-sim { padding: var(--sp-5); }
  .aff-faq .accordion { grid-template-columns: minmax(0, 1fr); }
  .facts.facts-3 { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .facts.facts-3 .facts-item { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--sp-3); align-items: baseline; }
  .facts.facts-3 .facts-item strong { font-size: 1.125rem; white-space: nowrap; }
  .facts.facts-3 .facts-item span { margin: 0; }
}