/* Plans, abonnement, inscription, administration (formulaires repliables). */
.os-plans { display: grid; gap: var(--gap); max-width: 900px; }
.os-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: stretch; }
.os-plan { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.os-plan.is-current { border-color: var(--accent); }
.os-plan-pro { background: var(--accent-soft); }
.os-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.os-plan-name { margin: 0; font-size: 18px; font-weight: 600; }
.os-plan-price { margin: 0; }
.os-plan-price strong { font-size: 30px; letter-spacing: -0.03em; }
.os-plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; }
.os-plan-list li { position: relative; padding-left: 22px; }
.os-plan-list li::before { content: ''; position: absolute; left: 4px; top: 0.4em; width: 6px; height: 10px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(40deg); }
.os-plan .btn { align-self: flex-start; }
.os-plan-note { padding: 14px 16px; margin: 0; }
.os-sub { display: grid; gap: 10px; }
.os-sub p { margin: 0; }
.os-sub-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.os-upgrade { display: grid; gap: 2px; padding: 10px 12px; border: 1px dashed var(--accent); border-radius: var(--radius-card); text-decoration: none; color: var(--accent-ink); font-size: var(--fs-small); }
.os-upgrade:hover { background: var(--accent-soft); }
.os-upgrade span { color: var(--muted); font-size: var(--fs-meta); line-height: 1.35; }
@media (max-width: 1024px) { .os-upgrade { display: none; } }
@media (max-width: 640px) { .os-plan .btn { align-self: stretch; text-align: center; min-height: 44px; } }

/* Administration : les formulaires repliables ne reprennent plus la classe « .os-fold » (un bouton de 28 px de large ailleurs), qui écrasait les libellés. */
.os-adminfold > summary { cursor: pointer; padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
.os-adminfold[open] > summary { margin-bottom: 8px; }
.os-adminfold .os-fields .field { flex: 1 1 160px; min-width: 0; }
.os-check { display: flex; align-items: center; gap: 8px; min-height: 44px; }
