/*
 * StreamNovo — page Affiliation (page claire), v1.10. Règles premium des pages claires (voir light.css).
 * Corail : barre du h1, bouton « Apply now », offre sélectionnée dans le simulateur (3 usages).
 * 1. En-tête et simulateur de gains  2. Fonctionnement et conditions du programme
 */

/* 1. En-tête */
.af-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.af-intro .lede { margin-top: 20px; }
.af-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.af-actions .btn { height: 52px; padding: 0 28px; }
.af-free { margin-top: 16px; font-size: 15px; line-height: 22px; }

/* Simulateur : carte blanche en relief */
.af-calc { display: grid; gap: 22px; padding: 36px; background: var(--carte); border-radius: var(--r-md); box-shadow: var(--relief); }
.sn-light main .af-calc-title { margin: 0; font: 700 20px/26px var(--font-texte); text-transform: none; }
.sn-light main .af-calc-title::before { content: none; }
.af-calc fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.af-calc legend, .af-range label { display: block; padding: 0; margin-bottom: 10px; font: 600 15px/20px var(--font-texte); }
.af-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.af-chips input, .af-seg input { position: absolute; opacity: 0; pointer-events: none; }
.af-chips label { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid rgba(16,19,28,.18); border-radius: var(--r-sm); font: 500 15px/1 var(--font-texte); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.af-chips input:not(:checked) + label:hover { border-color: var(--encre); }
.af-chips input:checked + label { background: var(--direct); border-color: var(--direct); color: var(--sur-direct); font-weight: 600; }
.af-calc-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: end; }
.af-seg { display: inline-flex; border: 1px solid rgba(16,19,28,.18); border-radius: var(--r-sm); overflow: hidden; }
.af-seg label { display: flex; align-items: center; justify-content: center; width: 44px; height: 40px; font: 700 17px/1 var(--font-texte); cursor: pointer; border-right: 1px solid rgba(16,19,28,.12); transition: background-color .15s, color .15s; }
.af-seg label:last-of-type { border-right: 0; }
.af-seg input:not(:checked) + label:hover { background: var(--papier); }
.af-seg input:checked + label { background: var(--encre); color: var(--papier); }
.af-chips input:focus-visible + label, .af-seg input:focus-visible + label { outline: 2px solid var(--encre); outline-offset: 2px; }
.af-range { margin: 0; min-width: 0; }
.af-range label { display: flex; justify-content: space-between; gap: 12px; }
.af-range output { font: 800 22px/20px var(--font-titre); font-variant-numeric: tabular-nums; }
.af-range input { --fill: 9%; width: 100%; height: 40px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.af-range input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--encre) var(--fill), rgba(16,19,28,.14) var(--fill)); }
.af-range input::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(16,19,28,.14); }
.af-range input::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--encre); }
.af-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border: 3px solid var(--carte); border-radius: 50%; background: var(--encre); box-shadow: 0 1px 4px rgba(16,19,28,.3); }
.af-range input::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid var(--carte); border-radius: 50%; background: var(--encre); box-shadow: 0 1px 4px rgba(16,19,28,.3); }
.af-range input:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.af-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 22px 24px; background: var(--papier); border-radius: var(--r-md); }
.af-result p { margin: 0; display: grid; gap: 4px; min-width: 0; }
.af-result span { font-size: 14px; line-height: 18px; color: var(--encre-douce); }
.af-result b { font: 800 44px/44px var(--font-titre); font-variant-numeric: tabular-nums; }
.af-result small { font-size: 14px; line-height: 19px; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.af-calc-note { margin: -6px 0 0; font-size: 13px; line-height: 19px; }

/* 2. Fonctionnement et conditions */
#how-it-works { border-top: 1px solid rgba(16,19,28,.12); }
.af-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.af-steps li { counter-increment: s; padding: 28px 24px; background: var(--carte); border-radius: var(--r-md); box-shadow: var(--relief); }
.af-steps li::before { content: counter(s, decimal-leading-zero); display: block; margin-bottom: 18px; font: 800 30px/30px var(--font-titre); color: var(--encre-douce); }
.af-steps h3 { margin: 0 0 8px; font: 700 19px/25px var(--font-texte); }
.af-steps p { margin: 0; font-size: 15px; line-height: 23px; }

.af-terms { margin-top: 40px; padding: 36px 40px 22px; background: var(--carte); border-radius: var(--r-md); box-shadow: var(--relief); }
.af-terms-title { margin: 0 0 12px; font: 700 20px/26px var(--font-texte); }
.af-terms dl { margin: 0; }
.af-terms dl div { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 24px; padding: 15px 0; border-top: 1px solid rgba(16,19,28,.08); }
.af-terms dl div:first-child { border-top: 0; }
.af-terms dt { font-weight: 600; font-size: 16px; line-height: 23px; }
.af-terms dd { margin: 0; font-size: 16px; line-height: 23px; color: var(--encre-douce); }
.af-terms dd .text-link { margin: 0; }
.af-help { margin: 36px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--encre-douce); }
.af-help .text-link { margin-top: 0; }

@media (max-width: 1100px) {
  .af-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) { .af-top { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 600px) {
  .af-actions .btn { flex: 1 1 100%; }
  .af-calc { padding: 24px 18px; gap: 20px; }
  .af-calc-row { grid-template-columns: 1fr; gap: 20px; }
  .af-chips label { height: 38px; padding: 0 14px; font-size: 14px; }
  .af-result { padding: 18px; gap: 12px; }
  .af-result b { font-size: 36px; line-height: 36px; }
  .af-steps { grid-template-columns: 1fr; gap: 12px; }
  .af-steps li { padding: 22px 18px; }
  .af-terms { padding: 24px 18px 12px; }
  .af-terms dl div { grid-template-columns: 1fr; gap: 2px; padding: 13px 0; }
  .af-terms dt, .af-terms dd { font-size: 15px; line-height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .af-chips label, .af-seg label { transition: none; } }

/* Téléphones (et texte agrandi par le navigateur) : les deux résultats s'empilent pour que les montants ne débordent jamais */
.af-result b { white-space: nowrap; }
@media (max-width: 480px) {
  .af-result { grid-template-columns: 1fr; gap: 0; }
  .af-result p + p { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(16,19,28,.1); }
  .af-result b { font-size: clamp(30px, 11vw, 40px); line-height: 1.05; }
}