/* =========================================================
   Page « Offres » (hub Paramètres du club) — CRUD des offres de licence.
   Réutilise .chip / .chip-disc (session-staff.css), .ls-* (champs de modale),
   les composants twig:Button et twig:Modal. Tokens : tokens.css.
   ========================================================= */

.co-head-row { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.co-intro { max-width: 70ch; margin-bottom: 0; flex: 1 1 320px; }
.co-head-row .ui-btn { flex: 0 0 auto; }
.co-empty { font-size: 0.9rem; color: var(--text-faint); padding: 1.2rem 0; }

.co-group-title {
    font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--gold); font-weight: 600;
    display: flex; align-items: center; gap: 0.6rem;
    margin: 1.5rem 0 0.7rem;
}
.co-group-title::after { content: ""; height: 1px; background: var(--border); flex: 1; order: 3; }
.co-count { color: var(--text-faint); font-weight: 500; letter-spacing: 0; text-transform: none; }

.co-card {
    display: flex; align-items: center; gap: 1rem;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 0.85rem 1.05rem; margin-bottom: 0.7rem; max-width: 820px;
}
.co-card:hover { border-color: var(--border-strong); }
.co-main { flex: 1 1 auto; min-width: 0; }
.co-name { font-weight: 600; font-size: 0.98rem; color: var(--text); }
.co-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.co-price { flex: 0 0 auto; font-size: 1.05rem; font-weight: 700; color: var(--gold-strong); min-width: 84px; text-align: right; }
.co-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 0.15rem; }
.co-actions form { margin: 0; line-height: 0; }
.co-act-btn {
    display: inline-grid; place-items: center; width: 30px; height: 30px;
    border: none; background: none; color: var(--text-muted); cursor: pointer; border-radius: 8px;
}
.co-act-btn:hover { background: var(--hover); color: var(--text); }
.co-act-btn.danger:hover { color: var(--danger); background: var(--danger-soft); }

/* Champ tarif (dans la modale) : input + suffixe € */
.co-price-input { position: relative; }
.co-price-input input {
    width: 100%; background: var(--surface-3); border: 1px solid var(--border-strong); color: var(--text);
    font: inherit; font-size: 0.92rem; border-radius: var(--radius-sm); padding: 0.55rem 2rem 0.55rem 0.75rem;
    color-scheme: inherit; transition: border-color 0.15s, box-shadow 0.15s;
}
.co-price-input input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.co-affix { position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-weight: 600; }

@media (max-width: 560px) {
    .co-card { flex-wrap: wrap; }
    .co-price { text-align: left; }
}