/* Offre du serveur (plan.md §979, js/stats/offre.js) : abonnements, offres et prix du jour, code promo, parrainage ; le
   bandeau d'une réduction sur l'accueil du serveur. Couleurs par variables seulement : trois thèmes. */

#of-contenu h3 { margin: 20px 0 8px; font-size: 15px; }
.of-note { margin: 0 0 12px; padding: 8px 10px; border-radius: 9px; font-size: 13px; color: var(--text-muted);
  background: var(--voile); border: 1px dashed var(--border); }
.of-abo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.of-etat { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent); }
.of-etat.essai { color: var(--accent2); background: color-mix(in srgb, var(--accent2) 14%, transparent); }
.of-etat.impaye { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.of-etat.annule { color: var(--text-muted); background: var(--voile); }
.of-grille { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.of-carte { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--border); }
.of-carte h4 { margin: 0; font-size: 15px; }
.of-carte p { margin: 0; }
.of-prix { display: grid; gap: 2px; font-size: 13.5px; }
.of-prix s { color: var(--text-muted); }
.of-reduc { font-size: 12px; font-weight: 700; color: var(--success); }
.of-carte .btn { align-self: flex-start; }
.of-code { display: flex; gap: 8px; flex-wrap: wrap; max-width: 560px; }
.of-code .form-input { flex: 1 1 220px; min-width: 0; }

/* Le bandeau d'une réduction en cours, en tête de l'accueil du serveur. */
.of-bandeau { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; padding: 10px 14px;
  border-radius: 12px; font-size: 13.5px; color: var(--text);
  background: color-mix(in srgb, var(--success) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); }
.of-bandeau span { flex: 1 1 260px; }
.of-ferme { margin-left: auto; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none;
  color: var(--text-muted); font: inherit; font-size: 18px; cursor: pointer; }
.of-ferme:hover, .of-ferme:focus-visible { background: var(--voile); color: var(--text); }