/* =====================================================================
   affiliation.css — Page « Programme partenaires » (28 oct. 2026)
   Reprend les variables de style.css ; rien d'autre n'en dépend.
   ===================================================================== */
.aff-hero h1 { max-width: 760px; margin-top: 10px; }
.aff-hero__lead { max-width: 680px; margin-top: 14px; }
.aff-hero__lead strong { color: var(--color-heading); }
.aff-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.aff-hero__cta--center { justify-content: center; }

.aff-figures-wrap { padding-bottom: 0; }
.aff-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.aff-figure { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 22px 20px; }
.aff-figure b { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.4rem); color: var(--color-accent); line-height: 1.1; }
.aff-figure span { display: block; margin-top: 6px; color: var(--color-muted); font-size: .92rem; }
.aff-note { font-size: .85rem; margin-top: 14px; }
.aff-note.center { max-width: 720px; margin: 28px auto 0; }

.aff-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: none; }
.aff-step { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 26px 22px; position: relative; }
.aff-step__n { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); font-weight: 800; font-size: 1.05rem; margin-bottom: 14px; }
.aff-step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.aff-step code, .aff-page code { background: var(--color-surface-2); color: var(--color-heading); padding: 1px 6px; border-radius: 6px; font-size: .9em; }

.aff-example { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.aff-example h2 { margin: 8px 0 12px; }
.aff-calc { margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 10px 24px; }
.aff-calc > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.aff-calc > div:last-child { border-bottom: 0; }
.aff-calc dt { color: var(--color-muted); }
.aff-calc dd { margin: 0; font-weight: 800; color: var(--color-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aff-calc__total dt { color: var(--color-heading); font-weight: 800; }
.aff-calc__total dd { color: var(--color-accent); font-size: 1.35rem; }

.aff-page .value-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aff-page .value-card h3 { font-size: 1.05rem; margin-bottom: 8px; }

.aff-rules { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; }
.aff-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.aff-list li { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius-sm); padding: 14px 18px; color: var(--color-muted); }
.aff-list strong { color: var(--color-heading); }

.aff-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.aff-do { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--color-accent); border-radius: var(--radius); padding: 24px; }
.aff-do--dont { border-top-color: var(--color-sale); }
.aff-do h3 { margin-bottom: 12px; }
.aff-do ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--color-muted); }
.aff-do strong { color: var(--color-heading); }

.aff-faq { max-width: 820px; }
.aff-faq details { border-top: 1px solid var(--color-border); }
.aff-faq details:last-of-type { border-bottom: 1px solid var(--color-border); }
.aff-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-family: var(--font-heading); font-weight: 800; font-size: 1.02rem; color: var(--color-heading); }
.aff-faq summary::-webkit-details-marker { display: none; }
.aff-faq summary::after { content: "+"; color: var(--color-accent); font-size: 1.5rem; line-height: 1; transition: transform .2s ease; }
.aff-faq details[open] summary::after { transform: rotate(45deg); }
.aff-faq summary:hover { color: var(--color-accent); }
.aff-faq details p { margin: 0 0 20px; color: var(--color-muted); }

@media (max-width: 1000px) {
  .aff-figures, .aff-steps, .aff-page .value-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aff-example, .aff-rules { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px) {
  .aff-figures { grid-template-columns: 1fr 1fr; gap: 10px; }
  .aff-figure { padding: 16px 14px; }
  .aff-steps, .aff-page .value-cards, .aff-dos { grid-template-columns: 1fr; }
  .aff-hero__cta .btn { width: 100%; white-space: normal; text-align: center; font-size: .9rem; padding-inline: 16px; }
  .aff-calc { padding: 6px 16px; }
}
@media (prefers-reduced-motion: reduce) { .aff-faq summary::after { transition: none; } }