/* =====================================================
   AFOO AFFILIATION — Premium CSS
   Polices : Outfit (display) + DM Sans (body)
   Chargées via wp_enqueue_style dans class-aff-dashboard.php
===================================================== */

:root {
  --aff-forest:   #1a2e0e;
  --aff-olive:    #8FA632;
  --aff-lime:     #b5d433;
  --aff-gold:     #C8971A;
  --aff-amber:    #F5A623;
  --aff-surface:  #f4f6f0;
  --aff-white:    #ffffff;
  --aff-ink:      #111810;
  --aff-muted:    #6b7561;
  --aff-border:   #dde5c8;
  --aff-success:  #2e7d32;
  --aff-warn:     #e65100;
  --aff-info:     #1565c0;
  --aff-radius:   16px;
  --aff-radius-sm:10px;
  --aff-shadow:   0 4px 24px rgba(26,46,14,.10);
  --aff-shadow-lg:0 12px 48px rgba(26,46,14,.18);
  font-family: 'DM Sans', sans-serif;
}

/* ── Animations ────────────────────────────────── */
@keyframes aff-fadein  { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes aff-scalein { from{opacity:0;transform:scale(.94)}       to{opacity:1;transform:none} }
@keyframes aff-shimmer { 0%{background-position:200% center} 100%{background-position:-200% center} }
@keyframes aff-pulse   { 0%,100%{box-shadow:0 0 0 0 rgba(143,166,50,.4)} 50%{box-shadow:0 0 0 10px rgba(143,166,50,0)} }
@keyframes aff-spin    { to{transform:rotate(360deg)} }
@keyframes afoo-spin-cw { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes aff-progress-in { from{width:0} to{width:var(--pct,0%)} }

/* ── Reset scope ───────────────────────────────── */
.afoo-aff-dashboard *,
.afoo-aff-register-wrap * {
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════
   PAGE INSCRIPTION AFFILIÉ
══════════════════════════════════════════════════ */
.afoo-aff-register-wrap {
  margin: 0 auto;
  animation: aff-fadein .5s ease both;
  /* Permet au macaron de déborder vers le haut/droite */
  position: relative;
}

/* Hero card */
.afoo-aff-hero {
  background: linear-gradient(135deg, var(--aff-forest) 0%, #2d5218 60%, #3e6b24 100%);
  border-radius: var(--aff-radius) var(--aff-radius) 0 0;
  padding: 40px 36px 32px;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.afoo-aff-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238FA632' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: .5;
}
.afoo-aff-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(143,166,50,.25);
  border: 1px solid rgba(143,166,50,.4);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--aff-lime);
  letter-spacing: .04em;
  margin-bottom: 16px;
  position: relative;
}
.afoo-aff-hero h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.2;
  position: relative;
}
.afoo-aff-hero p {
  color: rgba(255,255,255,.75);
  font-size: 14px;
  margin: 0;
  position: relative;
  line-height: 1.6;
}

/* Avantages */
.afoo-aff-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
  position: relative;
}
.afoo-aff-benefit-item {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--aff-radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.afoo-aff-benefit-rate {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--aff-lime);
  line-height: 1;
}
.afoo-aff-benefit-label {
  font-size: 11px;
  color: rgba(255,255,255,.65);
  font-weight: 500;
}

/* Formulaire d'inscription */
.afoo-aff-form-body {
  background: var(--aff-white);
  border: 1px solid var(--aff-border);
  border-top: none;
  border-radius: 0 0 var(--aff-radius) var(--aff-radius);
  padding: 32px 36px 36px;
}
.afoo-aff-form-body h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--aff-ink);
  margin: 0 0 20px;
}
.afoo-aff-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--aff-ink);
  margin-bottom: 8px;
}
.afoo-aff-field select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--aff-border);
  border-radius: var(--aff-radius-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--aff-ink);
  background: var(--aff-surface);
  outline: none;
  transition: border-color .2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238FA632' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.afoo-aff-field select:focus { border-color: var(--aff-olive); }

/* Types de code visuels */
.afoo-aff-code-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.afoo-aff-code-type {
  border: 2px solid var(--aff-border);
  border-radius: var(--aff-radius-sm);
  padding: 16px;
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.afoo-aff-code-type input[type=radio] { display: none; }
.afoo-aff-code-type:has(input:checked) {
  border-color: var(--aff-olive);
  background: #f0f6dc;
}
.afoo-aff-code-type-preview {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--aff-forest);
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.afoo-aff-code-type-name {
  font-size: 12px;
  color: var(--aff-muted);
  font-weight: 500;
}
.afoo-aff-code-type:has(input:checked) .afoo-aff-code-type-preview { color: var(--aff-olive); }

/* Bouton submit */
.afoo-aff-submit {
  width: 100%;
  padding: 15px 24px;
  background: linear-gradient(135deg, var(--aff-forest) 0%, #2d5218 100%);
  color: #fff;
  border: none;
  border-radius: var(--aff-radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s;
  position: relative;
  overflow: hidden;
  letter-spacing: .02em;
}
.afoo-aff-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: translateX(-100%);
  transition: transform .4s;
}
.afoo-aff-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,46,14,.3); }
.afoo-aff-submit:hover::after { transform: translateX(100%); }
.afoo-aff-submit:active { transform: translateY(0); }

/* Code déjà affilié */
.afoo-aff-already {
  background: linear-gradient(135deg, var(--aff-forest), #2d5218);
  border-radius: var(--aff-radius);
  padding: 32px;
  text-align: center;
  animation: aff-scalein .4s ease both;
}
.afoo-aff-already p { color: rgba(255,255,255,.8); margin: 0; font-size: 15px; }
.afoo-aff-already strong { color: var(--aff-lime); font-family: 'Outfit', sans-serif; font-size: 22px; letter-spacing: 3px; display: block; margin-top: 8px; }

/* ══════════════════════════════════════════════════
   DASHBOARD AFFILIÉ
══════════════════════════════════════════════════ */
.afoo-aff-dashboard {
  margin: 0 auto;
  padding: 0 0 48px;
}

/* Hero dashboard */
.afoo-aff-db-hero {
  background: linear-gradient(135deg, var(--aff-forest) 0%, #263d14 50%, #1e4510 100%);
  border-radius: var(--aff-radius);
  padding: 32px 36px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  animation: aff-fadein .5s ease both;
}
.afoo-aff-db-hero::before {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(143,166,50,.15) 0%, transparent 70%);
  top: -100px; right: -60px;
  pointer-events: none;
}
.afoo-aff-db-hello {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  margin-bottom: 4px;
}
.afoo-aff-db-name {
  font-family: 'Outfit', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.1;
}
.afoo-aff-db-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(143,166,50,.2);
  border: 1px solid rgba(143,166,50,.35);
  border-radius: 20px;
  padding: 4px 12px 4px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--aff-lime);
}
.afoo-aff-db-status::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--aff-lime);
  border-radius: 50%;
  animation: aff-pulse 2s infinite;
}

/* Bloc code */
.afoo-aff-code-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--aff-radius-sm);
  padding: 20px 24px;
  min-width: 280px;
  flex-shrink: 0;
}
.afoo-aff-code-card-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.afoo-aff-code-display {
  font-family: 'Outfit', sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 5px;
  color: var(--aff-lime);
  margin-bottom: 14px;
  background: linear-gradient(90deg, var(--aff-lime), var(--aff-amber), var(--aff-lime));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aff-shimmer 4s linear infinite;
}
.afoo-aff-copy-row {
  display: flex;
  gap: 8px;
}
.afoo-aff-copy-input {
  flex: 1;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: 8px 12px;
  color: rgba(255,255,255,.7);
  font-size: 11px;
  font-family: 'DM Sans', sans-serif;
  outline: none;
}
.afoo-aff-copy-btn {
  background: var(--aff-olive);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .15s;
  white-space: nowrap;
}
.afoo-aff-copy-btn:hover { background: var(--aff-lime); transform: translateY(-1px); }
.afoo-aff-copy-btn.copied { background: var(--aff-success); }

/* ── Grille stats ─────────────────────────── */
.afoo-aff-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.afoo-aff-stat {
  background: var(--aff-white);
  border: 1px solid var(--aff-border);
  border-radius: var(--aff-radius);
  padding: 22px 20px;
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  animation: aff-fadein .5s ease both;
}
.afoo-aff-stat:nth-child(1) { animation-delay: .05s }
.afoo-aff-stat:nth-child(2) { animation-delay: .10s }
.afoo-aff-stat:nth-child(3) { animation-delay: .15s }
.afoo-aff-stat:nth-child(4) { animation-delay: .20s }
.afoo-aff-stat:hover { transform: translateY(-3px); box-shadow: var(--aff-shadow-lg); }
.afoo-aff-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--aff-radius) var(--aff-radius) 0 0;
}
.afoo-aff-stat:nth-child(1)::before { background: linear-gradient(90deg, var(--aff-olive), var(--aff-lime)); }
.afoo-aff-stat:nth-child(2)::before { background: linear-gradient(90deg, #2196F3, #64B5F6); }
.afoo-aff-stat:nth-child(3)::before { background: linear-gradient(90deg, var(--aff-gold), var(--aff-amber)); }
.afoo-aff-stat:nth-child(4)::before { background: linear-gradient(90deg, var(--aff-forest), #3e6b24); }
.afoo-aff-stat-icon {
  font-size: 22px;
  margin-bottom: 10px;
  line-height: 1;
}
.afoo-aff-stat-val {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--aff-ink);
  line-height: 1.1;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.afoo-aff-stat-lbl {
  font-size: 12px;
  color: var(--aff-muted);
  font-weight: 500;
}

/* ── Wallet + taux ────────────────────────── */
.afoo-aff-mid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

/* Wallet card */
.afoo-aff-wallet-card {
  background: linear-gradient(135deg, var(--aff-forest) 0%, #263d14 100%);
  border-radius: var(--aff-radius);
  padding: 28px;
  color: #fff;
  position: relative;
  overflow: hidden;
  animation: aff-fadein .5s .25s ease both;
}
.afoo-aff-wallet-card::after {
  content: '';
  position: absolute;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(143,166,50,.1);
  bottom: -40px; right: -40px;
}
.afoo-aff-wallet-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.afoo-aff-wallet-balance {
  font-family: 'Outfit', sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1;
}
.afoo-aff-wallet-currency {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  margin-bottom: 20px;
}
.afoo-aff-withdraw-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--aff-olive);
  color: #fff;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  transition: all .2s;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.afoo-aff-withdraw-btn:hover { background: var(--aff-lime); color: #fff; transform: translateY(-2px); }

/* Taux card */
.afoo-aff-rates-card {
  background: var(--aff-white);
  border: 1px solid var(--aff-border);
  border-radius: var(--aff-radius);
  padding: 28px;
  animation: aff-fadein .5s .3s ease both;
}
.afoo-aff-rates-card h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--aff-ink);
  margin: 0 0 20px;
}
.afoo-aff-rate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--aff-border);
}
.afoo-aff-rate-row:last-child { border-bottom: none; }
.afoo-aff-rate-type {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--aff-ink);
}
.afoo-aff-rate-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.afoo-aff-rate-pct {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--aff-olive);
}
/* Commission désactivée */
.afoo-aff-rate-disabled { opacity: .4; }
.afoo-aff-rate-badge-off {
  display: inline-block;
  background: #ececec;
  color: #999;
  font-size: 10px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 7px;
  letter-spacing: .04em;
}

/* ── Tableau historique ───────────────────── */
.afoo-aff-history-section {
  background: var(--aff-white);
  border: 1px solid var(--aff-border);
  border-radius: var(--aff-radius);
  overflow: hidden;
  animation: aff-fadein .5s .35s ease both;
}
.afoo-aff-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--aff-border);
}
.afoo-aff-history-header h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--aff-ink);
  margin: 0;
}
.afoo-aff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.afoo-aff-table thead th {
  background: var(--aff-surface);
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--aff-muted);
  border-bottom: 1px solid var(--aff-border);
}
.afoo-aff-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #f0f2eb;
  color: var(--aff-ink);
  vertical-align: middle;
}
.afoo-aff-table tbody tr:last-child td { border-bottom: none; }
.afoo-aff-table tbody tr { transition: background .15s; }
.afoo-aff-table tbody tr:hover td { background: #f7f9f2; }

/* Badges */
.afoo-aff-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.afoo-aff-badge.sale         { background: #e8f5e9; color: #2e7d32; }
.afoo-aff-badge.subscription { background: #e3f2fd; color: #1565c0; }
.afoo-aff-badge.objective    { background: #fff8e1; color: #8a6a10; }
.afoo-aff-badge.approved,
.afoo-aff-badge.paid         { background: #e8f5e9; color: #2e7d32; }
.afoo-aff-badge.pending      { background: #fff8e1; color: #f57c00; }
.afoo-aff-badge.cancelled    { background: #ffebee; color: #c62828; }

/* Vide */
.afoo-aff-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--aff-muted);
  font-size: 14px;
}
.afoo-aff-empty-icon { font-size: 40px; margin-bottom: 12px; }

/* Notices */
.afoo-aff-notice {
  padding: 14px 18px;
  border-radius: var(--aff-radius-sm);
  margin-bottom: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: aff-fadein .4s ease both;
}
.afoo-aff-notice.success { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.afoo-aff-notice.error   { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }
.afoo-aff-notice.info    { background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; }
.afoo-aff-notice.warning { background: #fff8e1; color: #f57c00; border: 1px solid #ffe082; }

/* ══════════════════════════════════════════════════
   OBJECTIF MENSUEL
══════════════════════════════════════════════════ */
.afoo-aff-objective-card {
  background: var(--aff-white);
  border: 1px solid var(--aff-border);
  border-radius: var(--aff-radius);
  padding: 28px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  animation: aff-fadein .5s .22s ease both;
}
.afoo-aff-objective-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--aff-gold), var(--aff-amber));
}
.afoo-aff-obj-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.afoo-aff-obj-title {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--aff-ink);
  margin: 0 0 4px;
}
.afoo-aff-obj-desc {
  font-size: 13px;
  color: var(--aff-muted);
}
.afoo-aff-obj-reward {
  background: linear-gradient(135deg, #fff8e7, #ffefc9);
  border: 1px solid #f5d98a;
  border-radius: var(--aff-radius-sm);
  padding: 12px 18px;
  text-align: center;
  flex-shrink: 0;
}
.afoo-aff-obj-reward-val {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--aff-gold);
  line-height: 1;
}
.afoo-aff-obj-reward-lbl {
  font-size: 10px;
  color: #8a6a10;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 3px;
}
.afoo-aff-obj-counts {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}
.afoo-aff-obj-current {
  font-family: 'Outfit', sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: var(--aff-ink);
  line-height: 1;
}
.afoo-aff-obj-sep    { font-size: 18px; color: var(--aff-muted); }
.afoo-aff-obj-target {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--aff-muted);
}
.afoo-aff-obj-unit { font-size: 13px; color: var(--aff-muted); margin-left: 4px; }

.afoo-aff-progress-track {
  background: var(--aff-border);
  border-radius: 99px;
  height: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}
.afoo-aff-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--aff-olive), var(--aff-lime));
  width: 0;
  transition: width 1.2s cubic-bezier(.25,.8,.25,1);
}
.afoo-aff-progress-fill.complete {
  background: linear-gradient(90deg, var(--aff-gold), var(--aff-amber));
}
.afoo-aff-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--aff-muted);
}
.afoo-aff-progress-meta strong { color: var(--aff-olive); }
.afoo-aff-obj-complete-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--aff-success);
  margin-top: 10px;
}

/* ══════════════════════════════════════════════════
   IMAGE DE FOND — pages frontend
   Les variables sont injectées en inline style par PHP
══════════════════════════════════════════════════ */
.afoo-aff-page-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* Superposition semi-transparente pour garder la lisibilité */
.afoo-aff-page-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--aff-bg-overlay, rgba(255,255,255,0.45));
  z-index: 0;
  pointer-events: none;
}
.afoo-aff-page-bg > * { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════
   MACARON ROTATIF
══════════════════════════════════════════════════ */

/* ── Dans le hero dashboard (overflow:hidden) ──
   Le macaron est positionné DANS le hero mais clipé → on le sort
   en utilisant un wrapper externe .afoo-aff-db-hero-wrap         */
.afoo-aff-db-hero-wrap {
  position: relative;
  margin-bottom: 24px;
}
/* Le hero perd son margin-bottom propre quand il est dans le wrapper */
.afoo-aff-db-hero-wrap .afoo-aff-db-hero {
  margin-bottom: 0;
}

/* ── Dans la page inscription (overflow:hidden sur .afoo-aff-hero)
   Le macaron est positionné sur .afoo-aff-register-wrap qui n'a
   pas de overflow:hidden                                          */

/* Classe commune du macaron — fonctionne dans les 2 contextes */
.afoo-aff-macaron-wrap {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 88px;
  height: 88px;
  z-index: 20;
  pointer-events: none;
}
.afoo-aff-macaron-wrap img,
.afoo-aff-macaron-wrap svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: afoo-spin-cw 8s linear infinite;
  display: block;
  box-shadow: 0 4px 18px rgba(26,46,14,.35);
}

/* ── Responsive ───────────────────────────── */
@media (max-width: 768px) {
  .afoo-aff-stats-grid  { grid-template-columns: 1fr 1fr; }
  .afoo-aff-mid-row     { grid-template-columns: 1fr; }
  .afoo-aff-db-hero     { flex-direction: column; }
  .afoo-aff-code-card   { width: 100%; }
  .afoo-aff-table thead { display: none; }
  .afoo-aff-table tbody td {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: none;
  }
  .afoo-aff-table tbody tr { border-bottom: 1px solid var(--aff-border); }
  .afoo-aff-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--aff-muted);
    font-size: 11px;
    text-transform: uppercase;
  }
  .afoo-aff-macaron-wrap { width: 64px; height: 64px; top: -8px; right: -8px; }
}
@media (max-width: 480px) {
  .afoo-aff-stats-grid   { grid-template-columns: 1fr; }
  .afoo-aff-code-types   { grid-template-columns: 1fr; }
  .afoo-aff-benefits     { grid-template-columns: 1fr; }
  .afoo-aff-hero,
  .afoo-aff-form-body    { padding: 24px 20px; }
}