/* Écran « Offres premium » : un bandeau d'état, le choix du rythme, puis trois cartes de même
   hauteur dont les listes s'alignent ligne à ligne. Aucune couleur ici : tout vient des
   variables de 01-socle.css. */
.offres-bandeau {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.offres-bandeau p { margin: 0; }
.offres-bandeau .hint { margin-top: var(--space-1); }
.offres-bandeau-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.offres-rythme {
  display: flex; width: fit-content; margin: 0 auto var(--space-5); padding: 3px; gap: 2px;
  background: var(--bg-inset); border: 1px solid var(--border); border-radius: 999px;
}
.offres-rythme-choix {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.4rem 1.1rem; border: 0; border-radius: 999px; background: transparent;
  color: var(--muted); font: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer;
}
.offres-rythme-choix[aria-pressed="true"] { background: var(--card); color: var(--text-strong); box-shadow: var(--shadow-btn); }
.offres-rythme-bonus {
  padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.7rem;
  background: var(--accent-soft); color: var(--accent-text);
}

.offres-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-4);
  align-items: stretch;
}
.offre-carte {
  display: flex; flex-direction: column; min-width: 0;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-sm); text-align: center;
}
/* Solo : un filet or vers vert en tête et un fond à peine doré, plutôt qu'un cadre plein. */
.offre-carte { position: relative; overflow: hidden; }
.offre-carte-avant { background: color-mix(in srgb, var(--gold) 5%, var(--card)); border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.offre-carte-avant::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--gold-btn-dark), var(--gold-btn-plateau) 45%, var(--accent));
}
.offre-nom {
  margin: 0 0 var(--space-4); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.offre-carte-avant .offre-nom { color: var(--gold-strong); }
.offre-prix { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 0.2rem; }
.offre-montant {
  font-family: var(--font-serif); font-size: 2.6rem; font-weight: 500; line-height: 1.1;
  color: var(--text-strong); font-variant-numeric: tabular-nums;
}
.offre-unite { font-size: 0.85rem; color: var(--muted); }
.offre-prix-sous { margin: var(--space-1) 0 0; font-size: 0.85rem; color: var(--muted); }
.offre-accroche { margin: var(--space-4) 0 var(--space-5); font-size: 0.875rem; color: var(--text); min-height: 2.6em; }

.offre-action { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.offre-bouton { width: 100%; justify-content: center; border-radius: 999px; min-height: 2.6rem; }
.offre-bouton-inscrit { color: var(--accent-text); border-color: var(--accent); }
.offre-note { margin: 0; font-size: 0.75rem; line-height: 1.35; color: var(--muted); min-height: 2.7em; }

.offre-liste {
  list-style: none; margin: var(--space-5) 0 0; padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border); text-align: left;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.offre-liste .offre-groupe {
  margin-top: var(--space-3); font-family: var(--font-serif); font-style: italic; font-size: 0.95rem;
  color: var(--gold-strong);
}
.offre-liste .offre-groupe:first-child { margin-top: 0; }
.offre-liste li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 0.875rem; line-height: 1.35; }
.offre-icone { flex: none; width: 1rem; height: 1rem; margin-top: 0.1rem; }
.offre-oui { color: var(--text); }
/* Les coches reprennent le dégradé or vers vert de `.btn.primary`. Le porteur du dégradé ne
   prend aucune place, mais ne doit pas être en `display: none` : le dégradé disparaîtrait. */
.offres-degrade { position: absolute; width: 0; height: 0; overflow: hidden; }
.offre-degrade-or { stop-color: var(--gold-btn-dark); }
.offre-degrade-plateau { stop-color: var(--gold-btn-plateau); }
.offre-degrade-vert { stop-color: var(--accent); }
.offre-non { color: var(--muted); opacity: 0.7; }
.offre-pastille {
  margin-left: 0.3rem; padding: 0.05rem 0.4rem; border-radius: 999px; font-size: 0.68rem; font-weight: 500;
  white-space: nowrap; background: var(--gold-soft); color: var(--gold-strong);
}
/* Ce qu'une offre payante ajoute au Gratuit, dans le dégradé des coches et des boutons. */
.offre-change {
  font-weight: 600;
  background: linear-gradient(120deg, var(--gold-btn-dark) 0%, var(--gold-btn-plateau) 40%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}