/* ===== Section Affiliation — VERSION FOND BLEU FONCÉ ===== */
.aff-program--dark{
  background: var(--blue);
  color:#fff;
  padding: 64px 0 72px;
}

/* Présentation */
.aff-hero h2{
  font-family:"Playfair Display",serif;
  font-size: clamp(26px, 4vw, 38px);
  margin:0 0 10px;
  color:#fff;
}
.aff-hero h2 span{ color: var(--orange); }
.aff-hero h3 span{ color: var(--orange); }
.aff-hero .lead{ color:#eaf2ff; font-size:1.12rem; margin:0 0 12px; }
.aff-points{
  list-style:none; padding:0; margin:0 0 18px; display:grid; gap:6px;
}
.aff-points li{ color:#cfe1ff; }

/* Liste élégante : puces premium (sans check) */
.aff-points{
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.aff-points li{
  position: relative; padding-left: 28px;
  line-height: 1.6; font-size: 1rem;
}
.aff-points li::before{
  content:"";
  position:absolute; left:0; top:.6em;
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #fff 0 25%, transparent 26% 100%), var(--orange);
  box-shadow: 0 0 0 2px rgba(255,116,62,.25);
}

/* Paliers (cartes blanches sur fond bleu) */
.aff-paliers h3{ margin:0 0 10px; color:#fff; font-size:1.2rem; }
.paliers-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.palier{
  background:#fff; color:#0f172a; border-radius:14px; padding:14px 16px;
  box-shadow:0 10px 26px rgba(0,0,0,.15);
  transition: transform .18s ease, box-shadow .18s ease;
}
.palier:hover{ transform: translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.22); }
.palier-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.badge{ background: var(--orange); color:#fff; font-weight:800; font-size:.78rem; border-radius:999px; padding:4px 10px; }
.palier h4{ margin:0; color: var(--blue); font-size:1rem; }
.amount{ font-size:1.6rem; font-weight:800; margin:6px 0; color:#0f172a; }
.amount small{ font-size:.8rem; font-weight:600; color:#64748b; margin-left:6px; }
.palier p{ margin:0; color:#29324a; }

/* Simulateur */
.aff-sim{
  margin-top:18px; background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px; padding:16px;
}
.sim-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-bottom:1px dashed rgba(255,255,255,.18); padding-bottom:10px; margin-bottom:10px;
}
.aff-sim h3{ margin:0; font-size:1.2rem; color:#fff; }

/* CHAMPS INLINE à droite du titre */
.sim-inline{
  display:flex; align-items:end; gap:10px; flex-wrap:wrap;
}
.sim-inline label{
  display:grid; grid-template-columns:1fr; gap:6px;
}
.sim-inline label span{
  font-weight:700; font-size:.92rem; color:#eaf2ff;
}
.sim-inline input{
  background:#fff; color:#0f172a; border:1px solid #e5e7eb; border-radius:10px;
  padding:10px 12px; font-weight:600; width:140px;
}
#runSim.cta{
  background: var(--orange); color:#fff; font-weight:700; border:none;
  padding:12px 18px; border-radius:999px; box-shadow:0 10px 24px rgba(255,116,62,.25);
}

/* Résultats */
.sim-results{ margin-top:8px; }
.cards{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.card{
  background:#fff; color:#0f172a; border-radius:12px; padding:12px 14px;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}
.card h4{ margin:0 0 6px; color: var(--blue); font-size:1rem; }
.card .row{ display:flex; align-items:baseline; justify-content:space-between; padding:4px 0; }
.card .row.total strong{ font-size:1.1rem; }

.grand{
  margin-top:8px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:12px; display:grid; gap:10px;
}
.grand .cell span{ color:#cfe1ff; font-size:.9rem; }
.grand .cell strong{ font-size:1.15rem; color:#fff; }

/* CTA final */
.sim-cta{
  margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.sim-cta .hook{ margin:0; color:#eaf2ff; }
.sim-cta .actions{ display:flex; gap:10px; }
.cta--outline{ background:#fff; color:var(--blue); border:2px solid var(--orange); box-shadow:none; }

/* Responsive */
@media (max-width:1100px){
  .paliers-grid{ grid-template-columns:repeat(2,1fr); }
  .cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  .cards{ grid-template-columns:1fr; }
  .grand{ grid-template-columns:1fr; }
  .sim-head{ align-items:flex-start; }
  .sim-inline input{ width:120px; }
}
/* Variante claire pour la page indicateurs */
.aff-program{
  background: #f9f9f9; /* fond clair */
  color: var(--ink);
  padding: 64px 0 72px;
}

.aff-program .aff-hero h2,
.aff-program .aff-paliers h3,
.aff-program .aff-sim h3 {
  color: var(--blue);
}

.aff-program .lead,
.aff-program .aff-points li {
  color: #29324a;
}
/* ===== VARIANTE CLAIRE EXPLICITE ===== */
.aff-program--light{
  background: #f9f9f9;   /* fond clair */
  color: var(--ink);
  padding: 64px 0 72px;
}
.aff-program--light .aff-hero h2,
.aff-program--light .aff-paliers h3,
.aff-program--light .aff-sim h3{
  color: var(--blue);
}
.aff-program--light .aff-points li{
  color: #29324a;
}
/* Boîte simulateur sur fond clair */
.aff-program--light .aff-sim{
  background: #fff;
  border: 1px solid #e8edf6;
}
.aff-program--light .sim-head{
  border-bottom: 1px dashed #e5e7eb;
}
.aff-program--light .sim-inline label span{
  color: var(--blue);
}
.aff-program--light .grand{
  background: #fff;
  border: 1px solid #e8edf6;
}
.aff-program--light .grand .cell span{
  color: #64748b;
}
.aff-program--light .grand .cell strong{
  color: var(--blue);
}

/* Variante teaser sur la home */
.aff-program--light{
  background:#f9f9f9;
  color:var(--ink);
  padding:64px 0 72px;
  text-align:center;
}
.aff-program--light .paliers-grid.teaser{
  display:flex;
  justify-content:center;
  gap:32px;
  margin:32px 0;
}
.aff-program--light .palier{
  background:#fff;
  border:1px solid #e8edf6;
  border-radius:12px;
  padding:20px;
  width:200px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.aff-program--light .palier .amount{
  font-size:1.6rem;
  font-weight:700;
  color:var(--orange);
  margin-bottom:8px;
}




/* ===== Simulation améliorée (sliders + pastille total) ===== */
.sim-sliders {
  display: grid;
  gap: 16px;
  margin: 20px 0;
}
.sim-sliders label {
  font-weight: 600;
  color: var(--blue);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sim-sliders input[type=range] {
  width: 100%;
  accent-color: var(--orange);
}
.sim-sliders strong {
  font-size: 1rem;
  color: var(--orange);
}

.sim-results .cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.sim-results .card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  text-align: center;
  transition: transform .2s ease;
}
.sim-results .card:hover {
  transform: scale(1.03);
}

.sim-results .grand {
  margin: 32px auto 0;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-weight: 800;
  font-size: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(255,116,62,.35);
  text-align:center;
}
.sim-results .grand span {
  font-size: 0.9rem;
  opacity: 0.9;
}



/* === Sliders en ligne === */
.sim-sliders {
  display: grid;
  grid-template-columns: 1fr 1fr 0.3fr;
  gap: 24px;
  margin: 24px 0;
}
.sim-sliders label {
  font-weight: 600;
  color: var(--blue);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sim-sliders input[type=range] {
  width: 100%;
  accent-color: var(--orange);
}
.sim-sliders strong {
  font-size: 1rem;
  color: var(--orange);
  margin-top: 4px;
}

/* === Total en carte rectangulaire === */
.sim-cta .grand {
  /* margin: 32px auto 0; */
  max-width: 420px;
  background: linear-gradient(135deg, var(--blue), #021737);
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
  padding: 24px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.sim-cta .grand span {
  display: block;
  margin-top: 6px;
  font-size: 1rem;
  font-weight: 400;
  color: #eaf2ff;
}



/* === Présentation en 2 colonnes avec visuel === */
.aff-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  margin-bottom: 40px;
}
.aff-hero-text h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(26px, 4vw, 38px);
  margin: 0 0 12px;
  color: var(--blue);
}
.aff-hero-text .lead {
  font-size: 1.15rem;
  color: #29324a;
  margin-bottom: 12px;
}
.aff-hero-text ul.aff-points {
  margin: 18px 0;
}
.aff-hero-visual img {
  max-width: 100%;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
}

/* Responsive */
@media(max-width: 900px) {
  .aff-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .aff-hero-visual {
    order: -1;
  }
}

.aff-hero-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.aff-hero-text h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(30px, 4.5vw, 42px);
  margin-bottom: 8px;
  line-height: 1.2;
  color: var(--blue);
  position: relative;
}
.aff-hero-text h2 span {
  color: var(--orange);
  position: relative;
}
.aff-hero-text h2 span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 4px;
  background: var(--orange);
  opacity: 0.3;
  border-radius: 2px;
}
.aff-hero-text .lead {
  font-size: 1.2rem;
  font-weight: 500;
  color: #042149;
}
.aff-hero-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: #29324a;
}


/* === Ajustement liste points : alignement à gauche mais centré visuellement === */
.aff-hero-text ul.aff-points {
  margin: 16px auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
  text-align: left;
  align-items: flex-start;
}
.aff-hero-text ul.aff-points li {
  font-size: 1rem;
  color: #042149;
  line-height: 1.6;
  padding-left: 32px;
  position: relative;
  width: 100%;
}
.aff-hero-text ul.aff-points li::before {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--orange);
  font-weight: 700;
  font-size: 1rem;
}