/* Page « Nous soutenir ». */

.sp { padding-block: var(--s-8) var(--s-9); }
.sp-eyebrow, .sp-kicker { font-family: var(--font-mono); font-size: 0.875rem; color: var(--accent); }
.sp-hero h1 { margin-top: var(--s-3); font-size: clamp(2.25rem, 5vw, 3.75rem); letter-spacing: -0.025em; }
.sp-hero h1 span { color: var(--accent-hover); }
.sp-lead { margin-top: var(--s-4); max-width: 60ch; font-size: 1.0625rem; line-height: 1.7; }
.sp-pills { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.sp-note { margin-top: var(--s-7); padding: var(--s-6); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); }
.sp-note h2 { font-size: 1.25rem; }
.sp-note p { margin-top: var(--s-3); max-width: 78ch; line-height: 1.75; }
.sp-note strong, .sp-card strong, .sp-tier strong { color: var(--text); font-weight: 600; }
.sp-tip { padding-top: var(--s-4); border-top: 1px solid var(--border); font-size: 0.9375rem; }
.sp-tip b { color: var(--text); }
.sp-tip a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

.sp-section { margin-top: var(--s-9); scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.sp-head h2 { margin-top: var(--s-2); font-size: clamp(1.625rem, 3vw, 2.25rem); letter-spacing: -0.02em; }
.sp-head p:last-child { margin-top: var(--s-2); }

/* Cartes « gratuit » : trois colonnes séparées par un filet, comme un tableau. */
.sp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s-6); border: 1px solid var(--border); }
.sp-card { display: flex; flex-direction: column; padding: var(--s-6); background: var(--surface); }
.sp-card + .sp-card { border-left: 1px solid var(--border); }
.sp-card h3 { margin-top: var(--s-4); font-size: 1.25rem; }
.sp-card > p { margin-top: var(--s-3); font-size: 0.9375rem; line-height: 1.7; }
.sp-cost { align-self: flex-start; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--border-strong); }
.sp-cost.free { color: var(--ok); border-color: var(--ok); }
.sp-cost.nitro { color: var(--accent-hover); border-color: var(--accent); }

.sp-perks { list-style: none; margin-top: var(--s-4); padding: 0; }
.sp-perks li { position: relative; padding-left: var(--s-5); color: var(--text-2); font-size: 0.9375rem; line-height: 1.6; }
.sp-perks li + li { margin-top: var(--s-2); }
.sp-perks li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 8px; height: 1px; background: var(--accent); }
.sp-how { margin-top: auto; padding-top: var(--s-5); font-size: 0.875rem; line-height: 1.6; color: var(--text-2); }
.sp-card .sp-perks { margin-bottom: var(--s-5); }
.sp-how b { color: var(--text); }
.sp-how em { font-style: normal; font-family: var(--font-mono); font-size: 0.85em; color: var(--text); }

/* Étapes du don */
.sp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s-6); padding: 0; list-style: none; counter-reset: etape; border: 1px solid var(--border); }
.sp-steps li { counter-increment: etape; padding: var(--s-5); }
.sp-steps li + li { border-left: 1px solid var(--border); }
.sp-steps li::before { content: "0" counter(etape); display: block; margin-bottom: var(--s-2); font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-hover); }
.sp-steps b { display: block; color: var(--text); }
.sp-steps span { display: block; margin-top: var(--s-1); font-size: 0.875rem; line-height: 1.6; color: var(--text-2); }

/* Niveaux */
.sp-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); align-items: stretch; }
.sp-tier { position: relative; display: flex; flex-direction: column; padding: var(--s-6); background: var(--surface); border: 1px solid var(--border); }
.sp-tier.featured { border-color: var(--accent); background: var(--surface-2); }
.sp-badge { position: absolute; top: -1px; right: var(--s-5); padding: 3px 10px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); transform: translateY(-50%); }
.sp-tier-name { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.sp-price { margin-top: var(--s-2); font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--text); line-height: 1.1; }
.sp-price small { font-size: 1rem; font-weight: 500; color: var(--text-2); letter-spacing: 0; }
.sp-tier-note { margin-top: var(--s-2); font-size: 0.9375rem; }
.sp-tier .sp-perks { margin-bottom: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.sp-tier .btn { margin-top: auto; text-align: center; }

.sp-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-5); border: 1px solid var(--border); }
.sp-use > div { padding: var(--s-5); }
.sp-use > div + div { border-left: 1px solid var(--border); }
.sp-use b { display: block; color: var(--text); }
.sp-use span { display: block; margin-top: var(--s-2); font-size: 0.9375rem; line-height: 1.7; color: var(--text-2); }
.sp-use strong { color: var(--text); font-weight: 600; }

.sp-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); margin-top: var(--s-9); padding: var(--s-7); border: 1px solid var(--border-strong); background: var(--surface); }
.sp-cta h2 { font-size: 1.75rem; }
.sp-cta p { margin-top: var(--s-2); }
.sp-cta-btns { display: flex; flex-wrap: wrap; gap: var(--s-3); }

@media (max-width: 960px) {
  .sp-grid3, .sp-tiers { grid-template-columns: minmax(0, 1fr); }
  .sp-card + .sp-card { border-left: 0; border-top: 1px solid var(--border); }
  .sp-tier.featured { order: -1; }
  .sp-badge { right: var(--s-4); }
}
@media (max-width: 700px) {
  .sp-steps, .sp-use { grid-template-columns: minmax(0, 1fr); }
  .sp-steps li + li, .sp-use > div + div { border-left: 0; border-top: 1px solid var(--border); }
  .sp-cta { padding: var(--s-5); }
}

/* Textes à copier pour le statut Discord */
.sp-copy { list-style: none; margin-top: var(--s-4); padding: 0; border: 1px solid var(--border); background: var(--bg); }
.sp-copy li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); }
.sp-copy li + li { border-top: 1px solid var(--border); }
.sp-copy code { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text); overflow-wrap: anywhere; background: none; border: 0; padding: 0; }
.sp-copy-btn { flex: none; padding: 4px 10px; font: inherit; font-size: 0.8125rem; color: var(--text-2); background: none; border: 1px solid var(--border); border-radius: 6px !important; cursor: pointer; }
.sp-copy-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface); }
.sp-copy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-card .sp-perks { margin-bottom: 0; }
.sp-perks a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

/* Mur des soutiens */
.sp-wall { margin-top: var(--s-6); border: 1px solid var(--border); background: var(--surface); }
.sp-wall-empty { padding: var(--s-6); text-align: center; font-size: 0.9375rem; }
.sp-wall-empty a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.sp-wall-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); list-style: none; margin: 0; padding: 0; }
.sp-wall-list li { display: flex; flex-direction: column; gap: 2px; padding: var(--s-4) var(--s-5); border: 0 solid var(--border); border-width: 0 1px 1px 0; }
.sp-wall-list b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.sp-wall-list span { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.sp-wall-list li[data-n="mecene"] span { color: var(--accent-hover); }
.sp-wall-list li[data-n="soutien"] span { color: var(--ok); }

/* Offre de personnalisation (seule option payante) */
.sp-offer { display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.4fr); margin-top: var(--s-6); border: 1px solid var(--accent); background: var(--surface-2); }
.sp-offer-price { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-6); border-right: 1px solid var(--border); }
.sp-offer-price .sp-price { margin-top: var(--s-3); }
.sp-offer-price .btn { margin-top: var(--s-4); }
.sp-badge-inline { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--accent); color: var(--accent-hover); }
.sp-offer-body { padding: var(--s-6); }
.sp-offer-body h3 { font-size: 1.125rem; }
.sp-offer + .sp-steps { margin-top: var(--s-4); }
@media (max-width: 760px) {
  .sp-offer { grid-template-columns: minmax(0, 1fr); }
  .sp-offer-price { border-right: 0; border-bottom: 1px solid var(--border); }
}

/* Tactile (13/10/2026) : boutons Copier à 40 px ; étiquettes lisibles. */
@media (pointer: coarse) {
  .sp-copy-btn { min-height: 40px; padding-inline: 14px; }
  .sp-badge-inline, .sp-cost { font-size: 0.75rem; }
}

/* Tactile (13/10/2026, suite) : badge « Populaire » lisible (12 px). */
@media (pointer: coarse) { .sp-badge { font-size: 0.75rem; } }