/* /public_html/assets/css/dashboard-memberships.css */
/* Styles du panel Adhésions extraits du JavaScript. */
.membership-panel {
display: flex;
flex-direction: column;
gap: 16px;
}
.membership-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
}
.membership-stat-card,
.membership-editor-section,
.membership-history-card,
.membership-row-card {
padding: 14px 16px;
border-radius: 18px;
border: 1px solid var(--ui-border, rgba(0,0,0,.08));
background: var(--ui-surface, rgba(255,255,255,.75));
}
.membership-stat-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 10px;
min-height: 96px;
overflow: hidden;
background: #fff;
border-color: rgba(148, 163, 184, .24);
box-shadow: 0 12px 26px rgba(15, 23, 42, .05);
}
.membership-stat-card::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 4px;
border-radius: 18px 0 0 18px;
background: currentColor;
opacity: .95;
}
.membership-stat-card__top {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.membership-stat-card__icon {
width: 34px;
height: 34px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex: 0 0 auto;
background: rgba(255,255,255,.88);
border: 1px solid rgba(255,255,255,.65);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.membership-stat-card__text {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.membership-stat-card__eyebrow {
font-size: .72rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
opacity: .82;
line-height: 1.1;
}
.membership-stat-card__label {
font-size: .95rem;
font-weight: 800;
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 1;
}
.membership-stat-card__bottom {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
min-width: 0;
}
.membership-stat-card__value {
font-size: 1.45rem;
font-weight: 900;
line-height: 1;
letter-spacing: -.02em;
color: #0f172a;
}
.membership-stat-card__sub {
font-size: .78rem;
font-weight: 700;
opacity: .72;
white-space: nowrap;
}
.membership-stat-card--tracked {
color: #2563eb;
background: linear-gradient(180deg, rgba(37,99,235,.10), rgba(37,99,235,.03));
border-color: rgba(37,99,235,.22);
}
.membership-stat-card--tracked .membership-stat-card__icon {
color: #2563eb;
background: rgba(255,255,255,.82);
}
.membership-stat-card--paid {
color: #16a34a;
background: linear-gradient(180deg, rgba(22,163,74,.10), rgba(22,163,74,.03));
border-color: rgba(22,163,74,.22);
}
.membership-stat-card--paid .membership-stat-card__icon {
color: #16a34a;
background: rgba(255,255,255,.82);
}
.membership-stat-card--pending {
color: #d97706;
background: linear-gradient(180deg, rgba(217,119,6,.10), rgba(217,119,6,.03));
border-color: rgba(217,119,6,.22);
}
.membership-stat-card--pending .membership-stat-card__icon {
color: #d97706;
background: rgba(255,255,255,.82);
}
.membership-stat-card--unpaid {
color: #dc2626;
background: linear-gradient(180deg, rgba(220,38,38,.10), rgba(220,38,38,.03));
border-color: rgba(220,38,38,.22);
}
.membership-stat-card--unpaid .membership-stat-card__icon {
color: #dc2626;
background: rgba(255,255,255,.82);
}
.membership-stat-card--due {
color: #0ea5a6;
background: linear-gradient(180deg, rgba(14,165,166,.10), rgba(14,165,166,.03));
border-color: rgba(14,165,166,.22);
}
.membership-stat-card--due .membership-stat-card__icon {
color: #0ea5a6;
background: rgba(255,255,255,.82);
}
.membership-stat-card--paidamount {
color: #f97316;
background: linear-gradient(180deg, rgba(249,115,22,.10), rgba(249,115,22,.03));
border-color: rgba(249,115,22,.22);
}
.membership-stat-card--paidamount .membership-stat-card__icon {
color: #f97316;
background: rgba(255,255,255,.82);
}
.membership-toolbar,
.membership-settings-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 12px;
align-items: end;
}
.membership-settings-card {
padding: 14px;
border-radius: 18px;
border: 1px solid var(--ui-border, rgba(0,0,0,.08));
background: var(--ui-surface, rgba(255,255,255,.75));
display: flex;
flex-direction: column;
gap: 10px;
}
.membership-settings-card__title,
.membership-editor-section__title {
font-size: 1rem;
font-weight: 700;
}
.membership-settings-card__hint,
.membership-editor-section__hint {
font-size: .92rem;
opacity: .8;
}
.membership-settings-form__actions,
.membership-editor-form__actions,
.membership-row-card__actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.membership-list,
.membership-history-list,
.membership-editor {
display: flex;
flex-direction: column;
gap: 12px;
}
.membership-row-card {
display: grid;
grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr) auto;
gap: 14px;
align-items: center;
}
.membership-row-card:hover,
.membership-row-card:focus,
.membership-row-card:active {
transform: none !important;
box-shadow: none !important;
}
.membership-row-card__identity,
.membership-editor-section,
.membership-history-card {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.membership-row-card__name,
.membership-editor-context__name,
.membership-history-card__title {
font-size: 1.02rem;
font-weight: 700;
line-height: 1.25;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.membership-row-card__meta,
.membership-editor-context__meta,
.membership-history-card__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
color: var(--text-muted, #666);
font-size: .92rem;
}
.membership-row-card__money,
.membership-editor-context__money,
.membership-history-card__money {
display: grid;
grid-template-columns: repeat(2, minmax(92px, 1fr));
gap: 8px 14px;
align-items: center;
}
.membership-row-card__money div,
.membership-editor-context__money div,
.membership-history-card__money div {
display: flex;
flex-direction: column;
gap: 4px;
}
.membership-row-card__money dt,
.membership-editor-context__money dt,
.membership-history-card__money dt {
font-size: .8rem;
opacity: .75;
margin: 0;
}
.membership-row-card__money dd,
.membership-editor-context__money dd,
.membership-history-card__money dd {
margin: 0;
font-weight: 700;
}
.membership-row-card__actions {
justify-content: flex-end;
}
.membership-status-chip,
.membership-history-status {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
padding: 6px 10px;
font-size: .88rem;
font-weight: 700;
border: 1px solid rgba(0,0,0,.08);
white-space: nowrap;
}
.membership-history-status {
color: #1b7f3a;
background: rgba(35, 164, 78, .14);
}
.membership-status-chip--unpaid {
color: #c62828;
background: rgba(198, 40, 40, .12);
}
.membership-status-chip--pending,
.membership-status-chip--partial {
color: #b26a00;
background: rgba(255, 179, 0, .15);
}
.membership-status-chip--paid,
.membership-status-chip--covered {
color: #1b7f3a;
background: rgba(35, 164, 78, .14);
}
.membership-status-chip--waived {
color: #3b5bdb;
background: rgba(59, 91, 219, .12);
}
.membership-empty {
padding: 18px;
text-align: center;
border-radius: 18px;
border: 1px dashed rgba(0,0,0,.14);
opacity: .8;
}
.membership-editor-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
align-items: end;
}
.membership-checkboxes {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
min-height: 42px;
}
.membership-checkboxes label {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.membership-history-card__actions {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 10px;
}
.membership-history-coverages {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: .9rem;
color: var(--text-muted, #666);
}
.membership-header-tools {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
align-items: stretch;
margin-top: 12px;
}
.membership-header-search {
width: 100%;
min-width: 0;
margin: 0;
max-width: none;
}
.membership-header-search .ui-input {
width: 100%;
display: block;
}
.membership-header-search-row {
display: flex;
align-items: stretch;
gap: 12px;
width: 100%;
}
.membership-header-actions {
display: flex;
justify-content: flex-end;
align-items: stretch;
flex: 0 0 auto;
}
.membership-header-actions .ui-btn {
white-space: nowrap;
}
.membership-filter-row {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex-wrap: wrap;
width: 100%;
}
.membership-filter-chip {
width: 56px;
height: 56px;
border-radius: 999px;
border: 3px solid rgba(148, 163, 184, .45);
background: rgba(255,255,255,.92);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
transition: border-color .18s ease, color .18s ease, box-shadow .18s ease, background-color .18s ease;
padding: 0;
color: #64748b;
flex: 0 0 auto;
}
.membership-filter-chip:hover,
.membership-filter-chip:focus,
.membership-filter-chip:active {
transform: none !important;
outline: none;
}
.membership-filter-chip__icon {
width: 100%;
height: 100%;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
line-height: 1;
background: transparent;
}
.membership-filter-chip__label {
display: none;
}
.membership-filter-chip--neutral {
color: #8b95a7;
border-color: rgba(180, 190, 205, .65);
background: rgba(255,255,255,.9);
}
.membership-filter-chip--danger {
color: #ef4444;
border-color: #ef4444;
background: rgba(255,255,255,.92);
box-shadow: 0 0 0 4px rgba(239,68,68,.10);
}
.membership-filter-chip--warning {
color: #f59e0b;
border-color: #f59e0b;
background: rgba(255,255,255,.92);
box-shadow: 0 0 0 4px rgba(245,158,11,.10);
}
.membership-filter-chip--success {
color: #22c55e;
border-color: #22c55e;
background: rgba(255,255,255,.92);
box-shadow: 0 0 0 4px rgba(34,197,94,.10);
}
.membership-filter-chip--violet {
color: #a855f7;
border-color: #a855f7;
background: rgba(255,255,255,.92);
box-shadow: 0 0 0 4px rgba(168,85,247,.10);
}
.membership-filter-chip--student {
color: #38bdf8;
border-color: #38bdf8;
background: rgba(255,255,255,.92);
box-shadow: 0 0 0 4px rgba(56,189,248,.10);
}
.membership-filter-chip--guardian {
color: #4ade80;
border-color: #4ade80;
background: rgba(255,255,255,.92);
box-shadow: 0 0 0 4px rgba(74,222,128,.10);
}
.membership-filter-chip--settings {
color: #64748b;
border-color: #94a3b8;
background: rgba(255,255,255,.92);
box-shadow: 0 0 0 4px rgba(148,163,184,.12);
}
.membership-settings-panel {
display: flex;
flex-direction: column;
gap: 16px;
}
.membership-settings-panel__intro {
padding: 14px 16px;
border-radius: 18px;
border: 1px solid rgba(148, 163, 184, .24);
background: rgba(255,255,255,.72);
box-shadow: 0 12px 26px rgba(15, 23, 42, .04);
}
.membership-settings-panel__title {
font-size: 1rem;
font-weight: 800;
margin-bottom: 4px;
}
.membership-settings-panel__hint {
font-size: .94rem;
opacity: .82;
line-height: 1.45;
}
@media (max-width: 900px) {
.membership-header-search-row {
flex-direction: column;
}
.membership-header-actions {
width: 100%;
justify-content: center;
}
}
@media (max-width: 900px) {
.membership-row-card,
.membership-history-card {
grid-template-columns: 1fr;
}
.membership-row-card__actions {
justify-content: stretch;
}
.membership-row-card__money,
.membership-editor-context__money,
.membership-history-card__money {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.membership-panel-header--no-animate,
.membership-panel-header--no-animate *,
.membership-panel-header--no-animate::before,
.membership-panel-header--no-animate::after {
animation: none !important;
transition: none !important;
}
/* ===== Refresh UX adhésions ===== */
.membership-stat-card {
border-color: color-mix(in srgb, var(--color-border-subtle) 82%, transparent);
box-shadow: 0 16px 36px rgba(15, 23, 42, .10);
}
html[data-theme="dark"] .membership-stat-card {
box-shadow: 0 20px 46px rgba(0, 0, 0, .34);
}
.membership-stat-card__value {
color: var(--color-text);
}
.membership-settings-card,
.membership-editor-section,
.membership-history-card,
.membership-row-card,
.membership-settings-panel__intro {
background: color-mix(in srgb, var(--color-surface-soft) 92%, transparent);
border-color: color-mix(in srgb, var(--color-border-subtle) 78%, transparent);
box-shadow: var(--shadow-subtle);
color: var(--color-text);
}
html[data-theme="dark"] .membership-settings-card,
html[data-theme="dark"] .membership-editor-section,
html[data-theme="dark"] .membership-history-card,
html[data-theme="dark"] .membership-row-card,
html[data-theme="dark"] .membership-settings-panel__intro {
background: color-mix(in srgb, var(--color-surface) 86%, #020617 14%);
border-color: color-mix(in srgb, var(--color-border-subtle) 92%, transparent);
box-shadow: 0 20px 48px rgba(0, 0, 0, .30);
}
.membership-row-card {
grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1.15fr) auto;
gap: 18px;
padding: 16px 18px;
align-items: stretch;
}
.membership-row-card__identity {
gap: 10px;
justify-content: center;
}
.membership-row-card__meta {
gap: 8px;
color: var(--color-text-muted, #64748b);
}
.membership-row-card__meta > span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--color-border-subtle) 78%, transparent);
background: color-mix(in srgb, var(--color-surface) 78%, transparent);
max-width: 100%;
}
html[data-theme="dark"] .membership-row-card__meta > span {
background: color-mix(in srgb, var(--color-surface) 86%, #020617 14%);
}
.membership-row-card__money {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 10px;
align-self: center;
}
.membership-row-card__money div {
padding: 10px 12px;
border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--color-border-subtle) 72%, transparent);
background: color-mix(in srgb, var(--color-surface) 74%, transparent);
min-width: 0;
}
html[data-theme="dark"] .membership-row-card__money div {
background: color-mix(in srgb, var(--color-surface) 82%, #020617 18%);
border-color: color-mix(in srgb, var(--color-border-subtle) 90%, transparent);
}
.membership-row-card__money dt,
.membership-editor-context__money dt,
.membership-history-card__money dt {
color: var(--color-text-muted, #64748b);
opacity: 1;
}
.membership-row-card__money dd,
.membership-editor-context__money dd,
.membership-history-card__money dd {
color: var(--color-text);
font-size: 1rem;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
}
.membership-row-card__actions {
display: flex;
align-items: center;
justify-content: flex-end;
}
.membership-row-card__actions .ui-btn {
min-width: 210px;
}
.membership-status-chip,
.membership-history-status {
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.20);
}
.membership-status-chip--unpaid {
color: #ef4444;
background: rgba(239, 68, 68, .14);
}
.membership-status-chip--pending,
.membership-status-chip--partial {
color: #f59e0b;
background: rgba(245, 158, 11, .16);
}
.membership-status-chip--paid,
.membership-status-chip--covered {
color: #22c55e;
background: rgba(34, 197, 94, .15);
}
.membership-status-chip--waived {
color: #a855f7;
background: rgba(168, 85, 247, .16);
}
.membership-empty {
border-color: color-mix(in srgb, var(--color-border-subtle) 75%, transparent);
background: color-mix(in srgb, var(--color-surface-soft) 82%, transparent);
color: var(--color-text-muted);
}
html[data-theme="dark"] .membership-empty {
background: color-mix(in srgb, var(--color-surface) 82%, #020617 18%);
}
@media (max-width: 900px) {
.membership-row-card {
gap: 14px;
}
.membership-row-card__actions .ui-btn {
width: 100%;
min-width: 0;
}
}
/* ==========================================================================
MEMBERSHIPS PANEL — shell mobile moderne
========================================================================== */
.memberships-panel-shell-body {
padding-top: 0;
}
.memberships-panel-shell {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
min-width: 0;
}
.memberships-panel-mobile-title {
opacity: var(--panel-mobile-title-opacity, 1);
}
.memberships-loader-host {
margin-bottom: 1rem;
}
.membership-panel.is-loading {
opacity: 0.38;
pointer-events: none;
filter: saturate(0.9);
transition: opacity 180ms ease;
}
.membership-panel.is-hidden-during-load {
visibility: hidden;
pointer-events: none;
min-height: 0;
}
.memberships-desktop-controls {
display: grid;
grid-template-columns: minmax(18rem, 1fr) minmax(12rem, .38fr) minmax(12rem, .38fr);
gap: 0.85rem;
align-items: center;
margin-bottom: 1rem;
}
.memberships-desktop-controls .ui-search,
.memberships-search-popover .ui-search {
min-width: 0;
}
.memberships-search-popover[hidden] {
display: none !important;
}
.memberships-search-popover {
position: relative;
z-index: 30;
margin-bottom: 1rem;
}
.memberships-filter-summary {
display: flex;
align-items: center;
gap: .5rem;
flex-wrap: wrap;
margin: -0.15rem 0 0.75rem;
color: var(--color-text-muted, #64748b);
font-size: .88rem;
font-weight: 700;
}
.memberships-filter-summary__chip {
--chip-accent: var(--theme-primary, #38bdf8);
display: inline-flex;
align-items: center;
gap: .35rem;
min-height: 1.8rem;
border-radius: 999px;
padding: .25rem .6rem;
border: 1px solid color-mix(in srgb, var(--chip-accent) 54%, transparent);
background:
linear-gradient(135deg,
color-mix(in srgb, var(--chip-accent) 18%, transparent),
color-mix(in srgb, var(--color-surface-soft, #f8fafc) 86%, transparent));
color: color-mix(in srgb, var(--chip-accent) 76%, var(--color-text, #0f172a));
appearance: none;
-webkit-appearance: none;
cursor: pointer;
box-shadow:
inset 0 0 0 1px color-mix(in srgb, rgba(255,255,255,.35) 70%, transparent),
0 0 18px color-mix(in srgb, var(--chip-accent) 12%, transparent);
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.memberships-filter-summary__chip:hover,
.memberships-filter-summary__chip:focus-visible {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--chip-accent) 74%, transparent);
background:
linear-gradient(135deg,
color-mix(in srgb, var(--chip-accent) 24%, transparent),
color-mix(in srgb, var(--color-surface-soft, #f8fafc) 82%, transparent));
}
.memberships-filter-summary__remove {
font-size: .72rem;
opacity: .78;
}
.memberships-filter-summary__chip--search {
--chip-accent: var(--theme-primary, #38bdf8);
}
.memberships-hidden-actions[hidden] {
display: none !important;
}
@media (max-width: 960px) {
.memberships-desktop-controls {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 719px) {
.memberships-panel-shell-body {
min-height: calc(100dvh - var(--dashboard-floating-top-offset, 5.8rem));
overflow-x: clip;
}
.memberships-panel-shell {
padding-top: 0;
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
}
.memberships-desktop-controls {
display: none !important;
}
.memberships-search-popover {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + 4.25rem);
left: max(.75rem, env(safe-area-inset-left, 0px));
right: max(.75rem, env(safe-area-inset-right, 0px));
z-index: 70;
margin: 0;
padding: .62rem;
border-radius: 1.35rem;
border: 1px solid color-mix(in srgb, var(--color-border-subtle) 80%, transparent);
background: color-mix(in srgb, var(--color-surface) 86%, transparent);
box-shadow: 0 1.2rem 3rem rgba(15, 23, 42, .22);
backdrop-filter: blur(18px) saturate(1.25);
-webkit-backdrop-filter: blur(18px) saturate(1.25);
}
html[data-theme="dark"] .memberships-search-popover,
body[data-theme="dark"] .memberships-search-popover {
background: color-mix(in srgb, var(--color-surface) 82%, #020617 18%);
box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .36);
}
body.memberships-mobile-search-open .mobile-shell-menu {
pointer-events: none;
}
body.memberships-mobile-search-open .mobile-shell-menu__panel,
body.memberships-mobile-search-open .mobile-shell-menu__content {
opacity: .28;
filter: blur(1px);
}
.mobile-shell-navbar__left .memberships-mobile-search-trigger {
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
border: 1px solid color-mix(in srgb, var(--color-border-subtle) 82%, transparent);
background: color-mix(in srgb, var(--color-surface) 74%, transparent);
color: var(--color-text, #0f172a);
box-shadow: 0 .75rem 1.65rem rgba(15, 23, 42, .12);
}
.mobile-shell-navbar__left .memberships-mobile-search-trigger.is-open {
color: #2563eb;
border-color: rgba(37, 99, 235, .42);
box-shadow: 0 0 0 4px rgba(37, 99, 235, .12), 0 .75rem 1.65rem rgba(15, 23, 42, .14);
}
.memberships-mobile-search-trigger.has-search::after {
content: '';
position: absolute;
right: .42rem;
top: .42rem;
width: .48rem;
height: .48rem;
border-radius: 999px;
background: #22c55e;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-surface) 90%, transparent);
}
.membership-panel {
gap: .75rem;
}
.membership-summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .72rem;
}
.membership-stat-card {
min-width: 0;
min-height: 5.35rem;
padding: .85rem .8rem;
border-radius: 1.05rem;
}
.membership-stat-card__top {
gap: .58rem;
}
.membership-stat-card__icon {
width: 2rem;
height: 2rem;
border-radius: .72rem;
font-size: .96rem;
}
.membership-stat-card__eyebrow {
font-size: .66rem;
}
.membership-stat-card__label {
font-size: .82rem;
line-height: 1.12;
}
.membership-stat-card__bottom {
align-items: flex-end;
}
.membership-stat-card__value {
min-width: 0;
font-size: clamp(1.05rem, 4.2vw, 1.36rem);
line-height: 1.05;
overflow-wrap: anywhere;
}
.membership-stat-card__sub {
font-size: .68rem;
}
.membership-row-card,
.membership-history-card,
.membership-editor-section,
.membership-settings-card {
border-radius: 1.2rem;
}
.membership-row-card {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: .8rem;
padding: .95rem;
overflow: hidden;
}
.membership-row-card__identity {
justify-content: flex-start;
min-width: 0;
}
.membership-row-card__name {
align-items: flex-start;
gap: .55rem;
}
.membership-row-card__name > span:first-child {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
}
.membership-row-card__meta {
gap: .45rem;
}
.membership-row-card__meta > span,
.membership-editor-context__meta > span,
.membership-history-card__meta > span {
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.membership-row-card__money,
.membership-editor-context__money,
.membership-history-card__money {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .55rem;
}
.membership-row-card__money div,
.membership-editor-context__money div,
.membership-history-card__money div {
min-width: 0;
padding: .7rem .72rem;
}
.membership-row-card__money dd,
.membership-editor-context__money dd,
.membership-history-card__money dd {
overflow-wrap: anywhere;
}
.membership-row-card__actions {
width: 100%;
justify-content: stretch;
}
.membership-row-card__actions .ui-btn {
width: 100%;
min-width: 0;
justify-content: center;
}
.membership-editor-form,
.membership-settings-form {
grid-template-columns: minmax(0, 1fr);
}
.membership-editor-form__actions,
.membership-settings-form__actions {
align-items: stretch;
}
.membership-editor-form__actions .ui-btn,
.membership-settings-form__actions .ui-btn {
flex: 1 1 100%;
}
}
@media (max-width: 380px) {
.membership-summary-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.memberships-panel-shell-body.is-membership-subpanel .memberships-desktop-controls {
display: none !important;
}
/* ==========================================================================
MEMBERSHIPS PANEL — bulles filtres + recherche mobile alignée sur le panel Élèves
========================================================================== */
@media (max-width: 719px) {
.membership-filter-bubbles-source[hidden],
.memberships-filter-bubbles-root[hidden],
.memberships-search-popover[hidden] {
display: none !important;
}
.memberships-search-popover {
position: fixed !important;
top: calc(env(safe-area-inset-top, 0px) + 4.45rem) !important;
left: 50% !important;
right: auto !important;
width: min(23rem, calc(100vw - 2.1rem)) !important;
transform: translateX(-50%) !important;
z-index: 1256 !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.memberships-search-popover.is-open {
animation: memberships-search-pop-in 210ms ease both;
}
.memberships-search-popover__field {
width: 100% !important;
min-height: 3.05rem !important;
border-radius: 999px !important;
pointer-events: auto !important;
border: 1px solid color-mix(in srgb, var(--theme-primary, #38bdf8) 42%, rgba(148,163,184,.34)) !important;
background: color-mix(in srgb, rgba(15,23,42,.82) 86%, var(--theme-primary, #38bdf8) 14%) !important;
box-shadow:
0 16px 42px rgba(0, 0, 0, .26),
0 0 24px color-mix(in srgb, var(--theme-primary, #38bdf8) 16%, transparent) !important;
backdrop-filter: blur(16px) saturate(1.08) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}
.memberships-search-popover__field .ui-search__input {
min-width: 0 !important;
width: 100% !important;
}
.mobile-shell-navbar__left .memberships-mobile-search-trigger {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
z-index: 8 !important;
margin: 0 0 0 .45rem !important;
width: 2.5rem !important;
height: 2.5rem !important;
min-width: 2.5rem !important;
min-height: 2.5rem !important;
max-width: 2.5rem !important;
max-height: 2.5rem !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
pointer-events: auto !important;
}
.mobile-shell-navbar__left .memberships-mobile-search-trigger.is-active,
.mobile-shell-navbar__left .memberships-mobile-search-trigger.is-open {
--mobile-shell-navbar-btn-border: color-mix(in srgb, var(--theme-primary, #38bdf8) 56%, rgba(255,255,255,.14));
--mobile-shell-navbar-btn-bg: linear-gradient(135deg, rgba(56, 189, 248, .22), rgba(14, 165, 233, .16));
--mobile-shell-navbar-btn-shadow: 0 10px 24px rgba(14, 165, 233, .18);
color: #7dd3fc !important;
}
.memberships-mobile-search-trigger.has-search::after {
content: '';
position: absolute;
right: .42rem;
top: .42rem;
width: .48rem;
height: .48rem;
border-radius: 999px;
background: #22c55e;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-surface) 90%, transparent);
}
.memberships-filter-bubbles .membership-filter-bubble__label {
display: none !important;
}
.memberships-filter-bubbles .membership-filter-bubble i {
font-size: calc(var(--filter-bubble-size) * .45) !important;
}
.memberships-mobile-filters .memberships-filter-bubbles .filter-bubbles__bubble.membership-filter-bubble--status i,
.memberships-mobile-filters .memberships-filter-bubbles .filter-bubbles__bubble.membership-filter-bubble--role i {
color: var(--filter-bubble-accent) !important;
-webkit-text-fill-color: var(--filter-bubble-accent) !important;
opacity: .98 !important;
text-shadow: 0 0 10px color-mix(in srgb, var(--filter-bubble-accent) 50%, transparent) !important;
}
.memberships-mobile-filters .memberships-filter-bubbles .filter-bubbles__bubble.membership-filter-bubble--status:not(.is-active) i,
.memberships-mobile-filters .memberships-filter-bubbles .filter-bubbles__bubble.membership-filter-bubble--role:not(.is-active) i {
opacity: .88 !important;
}
.memberships-mobile-filters .memberships-filter-bubbles .filter-bubbles__bubble.membership-filter-bubble--status::before,
.memberships-mobile-filters .memberships-filter-bubbles .filter-bubbles__bubble.membership-filter-bubble--role::before {
inset: -10px;
}
.memberships-mobile-filters .memberships-filter-bubbles .filter-bubbles__bubble.membership-filter-bubble--status-cycle,
.memberships-mobile-filters .memberships-filter-bubbles .filter-bubbles__bubble.membership-filter-bubble--role-cycle {
box-shadow:
0 0 0 1px color-mix(in srgb, var(--filter-bubble-accent) 36%, transparent),
0 0 22px color-mix(in srgb, var(--filter-bubble-accent) 30%, transparent),
0 12px 28px rgba(0, 0, 0, .28) !important;
}
body.memberships-mobile-search-open .mobile-shell-menu {
pointer-events: auto !important;
z-index: 1500 !important;
}
body.memberships-mobile-search-open .mobile-shell-menu__panel,
body.memberships-mobile-search-open .mobile-shell-menu__content {
opacity: 1 !important;
filter: none !important;
z-index: 1501 !important;
}
body.memberships-mobile-search-open [data-memberships-filter-bubbles-portal="1"].memberships-mobile-filters.filter-bubbles,
body.memberships-mobile-search-open [data-memberships-filter-bubbles-portal="1"].filter-bubbles {
z-index: 1460 !important;
isolation: isolate !important;
}
body.memberships-mobile-search-open [data-memberships-filter-bubbles-portal="1"] .filter-bubbles__stage {
z-index: 1461 !important;
isolation: isolate !important;
}
body.memberships-mobile-search-open [data-memberships-filter-bubbles-portal="1"] .filter-bubbles__bubble {
z-index: 1464 !important;
}
body.memberships-mobile-search-open [data-memberships-filter-bubbles-portal="1"] .filter-bubbles__bubble--reset {
z-index: 1465 !important;
}
body.memberships-mobile-search-open .memberships-search-popover {
z-index: 1291 !important;
}
html[data-theme="light"] .memberships-search-popover__field,
body[data-theme="light"] .memberships-search-popover__field {
background: color-mix(in srgb, rgba(255,255,255,.92) 84%, rgba(224,242,254,.72)) !important;
border-color: color-mix(in srgb, var(--theme-primary, #38bdf8) 34%, rgba(15,23,42,.12)) !important;
box-shadow:
0 14px 36px rgba(15, 23, 42, .15),
0 0 22px color-mix(in srgb, var(--theme-primary, #38bdf8) 13%, transparent) !important;
}
html[data-theme="light"] .mobile-shell-navbar__left .memberships-mobile-search-trigger.is-active,
html[data-theme="light"] .mobile-shell-navbar__left .memberships-mobile-search-trigger.is-open,
body[data-theme="light"] .mobile-shell-navbar__left .memberships-mobile-search-trigger.is-active,
body[data-theme="light"] .mobile-shell-navbar__left .memberships-mobile-search-trigger.is-open {
--mobile-shell-navbar-btn-border: color-mix(in srgb, var(--theme-primary, #38bdf8) 40%, rgba(15,23,42,.08));
--mobile-shell-navbar-btn-bg: linear-gradient(135deg, rgba(224, 242, 254, .98), rgba(186, 230, 253, .92));
--mobile-shell-navbar-btn-shadow: 0 8px 22px rgba(14, 165, 233, .14);
color: #0284c7 !important;
}
}
@keyframes memberships-search-pop-in {
from {
opacity: 0;
transform: translateX(-50%) translateY(-8px) scale(.985);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
}
/* ==========================================================================
Paiement HelloAsso assisté pendant les permanences
========================================================================== */
.membership-row-card__actions {
flex-direction: column;
align-items: stretch;
justify-content: center;
min-width: 226px;
}
.membership-row-card__actions .membership-row-card__manage-btn,
.membership-row-card__actions .membership-payment-link-btn {
width: 100%;
min-width: 0;
justify-content: center;
}
.membership-row-card__helloasso-actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
width: 100%;
padding-top: 10px;
border-top: 1px solid color-mix(in srgb, var(--color-border-subtle) 72%, transparent);
}
.membership-payment-link-btn {
position: relative;
color: #7dd3fc;
border-color: color-mix(in srgb, #38bdf8 38%, var(--color-border-subtle));
background: color-mix(in srgb, #0284c7 12%, var(--color-surface) 88%);
}
.membership-payment-link-btn:hover:not(:disabled),
.membership-payment-link-btn:focus-visible:not(:disabled) {
box-shadow: 0 0 22px color-mix(in srgb, currentColor 22%, transparent);
}
.membership-payment-link-btn.is-loading {
cursor: progress;
opacity: .68;
}
.membership-payment-link-btn.is-loading .ui-btn__icon,
.membership-payment-invitation-card__email-btn.is-loading .ui-btn__icon {
animation: membership-payment-invitation-spin .8s linear infinite;
}
.membership-payment-link-btn:disabled {
opacity: .38;
filter: saturate(.45);
cursor: not-allowed;
}
body.membership-payment-invitation-open {
overflow: hidden !important;
}
.membership-payment-invitation-modal {
position: fixed;
inset: 0;
z-index: 1800;
display: grid;
place-items: center;
padding: max(18px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
}
.membership-payment-invitation-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(1, 4, 15, .82);
backdrop-filter: blur(12px) saturate(1.06);
-webkit-backdrop-filter: blur(12px) saturate(1.06);
}
.membership-payment-invitation-card {
position: relative;
z-index: 1;
width: min(660px, 100%);
max-height: min(880px, calc(100dvh - 36px));
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 28px;
border: 1px solid color-mix(in srgb, #38bdf8 34%, var(--color-border-subtle));
background:
radial-gradient(circle at 10% 0%, rgba(14, 165, 233, .18), transparent 38%),
color-mix(in srgb, var(--color-surface) 92%, #020617 8%);
color: var(--color-text);
box-shadow:
0 34px 100px rgba(0, 0, 0, .55),
0 0 50px rgba(56, 189, 248, .12),
inset 0 1px 0 rgba(255, 255, 255, .06);
animation: membership-payment-invitation-enter 220ms cubic-bezier(.2, .75, .25, 1) both;
}
.membership-payment-invitation-card__header {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 18px 20px;
border-bottom: 1px solid color-mix(in srgb, var(--color-border-subtle) 78%, transparent);
background: color-mix(in srgb, var(--color-surface) 78%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.membership-payment-invitation-card__icon {
width: 48px;
height: 48px;
border-radius: 17px;
display: inline-grid;
place-items: center;
color: #7dd3fc;
font-size: 1.35rem;
border: 1px solid rgba(125, 211, 252, .34);
background: rgba(14, 165, 233, .14);
box-shadow: 0 0 24px rgba(56, 189, 248, .13);
}
.membership-payment-invitation-card__eyebrow {
margin-bottom: 3px;
color: #7dd3fc;
font-size: .75rem;
font-weight: 850;
letter-spacing: .07em;
text-transform: uppercase;
}
.membership-payment-invitation-card__header h2 {
margin: 0;
font-size: clamp(1.18rem, 3vw, 1.55rem);
line-height: 1.18;
}
.membership-payment-invitation-card__close {
width: 42px;
height: 42px;
border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--color-border-subtle) 82%, transparent);
background: color-mix(in srgb, var(--color-surface) 82%, transparent);
color: var(--color-text);
display: inline-grid;
place-items: center;
cursor: pointer;
}
.membership-payment-invitation-card__close:hover,
.membership-payment-invitation-card__close:focus-visible {
color: #fca5a5;
border-color: rgba(248, 113, 113, .45);
box-shadow: 0 0 18px rgba(248, 113, 113, .13);
}
.membership-payment-invitation-card__body {
min-height: 0;
overflow: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 20px;
overscroll-behavior: contain;
}
.membership-payment-invitation-card__summary {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.membership-payment-invitation-card__summary > div {
min-width: 0;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid color-mix(in srgb, var(--color-border-subtle) 76%, transparent);
background: color-mix(in srgb, var(--color-surface-soft) 82%, transparent);
display: flex;
flex-direction: column;
gap: 4px;
}
.membership-payment-invitation-card__summary-wide {
grid-column: 1 / -1;
}
.membership-payment-invitation-card__summary span,
.membership-payment-invitation-card__url > span {
color: var(--color-text-muted, #94a3b8);
font-size: .78rem;
font-weight: 720;
}
.membership-payment-invitation-card__summary strong {
min-width: 0;
overflow-wrap: anywhere;
font-size: 1rem;
}
.membership-payment-invitation-card__qr {
width: min(360px, 84vw);
aspect-ratio: 1;
padding: 14px;
border-radius: 24px;
background: #fff;
border: 1px solid rgba(255, 255, 255, .86);
box-shadow:
0 22px 50px rgba(0, 0, 0, .26),
0 0 34px rgba(125, 211, 252, .15);
}
.membership-payment-invitation-card__qr svg {
display: block;
width: 100%;
height: 100%;
}
.membership-payment-invitation-card__instruction {
max-width: 540px;
margin: 0;
color: var(--color-text-muted, #cbd5e1);
text-align: center;
line-height: 1.55;
}
.membership-payment-invitation-card__url {
width: 100%;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid color-mix(in srgb, #38bdf8 22%, var(--color-border-subtle));
background: color-mix(in srgb, #0ea5e9 7%, var(--color-surface-soft) 93%);
display: flex;
flex-direction: column;
gap: 6px;
}
.membership-payment-invitation-card__url code {
color: #bae6fd;
font-size: .78rem;
line-height: 1.45;
overflow-wrap: anywhere;
user-select: all;
}
.membership-payment-invitation-card__details {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 14px;
color: var(--color-text-muted, #94a3b8);
font-size: .84rem;
}
.membership-payment-invitation-card__details span {
display: inline-flex;
align-items: center;
gap: 7px;
}
.membership-payment-invitation-card__email-btn {
justify-content: center;
color: #a7f3d0;
border-color: color-mix(in srgb, #34d399 42%, var(--color-border-subtle));
background: color-mix(in srgb, #059669 13%, var(--color-surface) 87%);
}
.membership-payment-invitation-card__email-btn:hover:not(:disabled),
.membership-payment-invitation-card__email-btn:focus-visible:not(:disabled) {
box-shadow: 0 0 22px rgba(52, 211, 153, .18);
}
.membership-payment-invitation-card__email-btn.is-sent {
color: #dcfce7;
border-color: rgba(74, 222, 128, .58);
background: rgba(22, 163, 74, .24);
}
.membership-payment-invitation-card__email-btn:disabled {
opacity: .48;
cursor: not-allowed;
}
.membership-payment-invitation-card__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
padding: 16px 20px max(16px, env(safe-area-inset-bottom, 0px));
border-top: 1px solid color-mix(in srgb, var(--color-border-subtle) 78%, transparent);
background: color-mix(in srgb, var(--color-surface) 86%, transparent);
}
.membership-payment-invitation-card__actions .ui-btn {
justify-content: center;
}
html[data-theme="light"] .membership-payment-invitation-modal__backdrop,
body[data-theme="light"] .membership-payment-invitation-modal__backdrop {
background: rgba(15, 23, 42, .58);
}
html[data-theme="light"] .membership-payment-invitation-card,
body[data-theme="light"] .membership-payment-invitation-card {
background:
radial-gradient(circle at 10% 0%, rgba(14, 165, 233, .13), transparent 38%),
rgba(248, 250, 252, .97);
}
html[data-theme="light"] .membership-payment-invitation-card__url code,
body[data-theme="light"] .membership-payment-invitation-card__url code {
color: #0369a1;
}
@media (min-width: 1180px) {
.membership-row-card {
grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1.05fr) minmax(226px, .72fr);
}
}
@media (max-width: 900px) {
.membership-row-card__actions {
min-width: 0;
width: 100%;
}
}
@media (max-width: 560px) {
.membership-payment-invitation-modal {
padding: max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
}
.membership-payment-invitation-card {
max-height: calc(100dvh - 20px);
border-radius: 22px;
}
.membership-payment-invitation-card__header {
gap: 10px;
padding: 14px;
}
.membership-payment-invitation-card__icon {
width: 42px;
height: 42px;
border-radius: 14px;
}
.membership-payment-invitation-card__body {
padding: 14px;
}
.membership-payment-invitation-card__summary {
grid-template-columns: minmax(0, 1fr);
}
.membership-payment-invitation-card__summary-wide {
grid-column: auto;
}
.membership-payment-invitation-card__qr {
width: min(300px, 82vw);
border-radius: 20px;
}
.membership-payment-invitation-card__actions {
flex-direction: column-reverse;
padding: 12px 14px max(12px, env(safe-area-inset-bottom, 0px));
}
.membership-payment-invitation-card__actions .ui-btn {
width: 100%;
}
.membership-row-card__helloasso-actions {
grid-template-columns: minmax(0, 1fr);
}
}
@keyframes membership-payment-invitation-enter {
from {
opacity: 0;
transform: translateY(14px) scale(.975);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes membership-payment-invitation-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.membership-payment-invitation-card,
.membership-payment-link-btn.is-loading .ui-btn__icon,
.membership-payment-invitation-card__email-btn.is-loading .ui-btn__icon {
animation: none !important;
}
}
/* ==========================================================================
EDQ V49.4.85 — Panel Adhésions modernisé
Hero, smartbar, dock à chips et dossiers de règlement.
========================================================================== */
.memberships-course-shell-root {
--memberships-accent: #38bdf8;
--memberships-accent-secondary: #f97316;
--memberships-card-bg: color-mix(in srgb, var(--color-surface, #071126) 92%, transparent);
--memberships-card-border: color-mix(in srgb, var(--color-border-subtle, rgba(148, 163, 184, .24)) 84%, transparent);
min-width: 0;
padding-top: 0;
}
.memberships-course-shell-root .memberships-panel-view,
.memberships-course-shell-root .memberships-panel-content,
.memberships-course-shell-root .membership-panel,
.memberships-course-shell-root .membership-list {
min-width: 0;
}
.memberships-course-shell-root .memberships-panel-hero.courses-panel-hero {
min-height: clamp(14rem, 26vh, 19rem) !important;
border-radius: 0 !important;
border-block: 1px solid color-mix(in srgb, var(--memberships-accent) 24%, transparent) !important;
background:
radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--memberships-accent) 22%, transparent), transparent 30rem),
radial-gradient(circle at 91% 12%, color-mix(in srgb, var(--memberships-accent-secondary) 27%, transparent), transparent 31rem),
linear-gradient(120deg, color-mix(in srgb, var(--color-bg, #020617) 95%, transparent), color-mix(in srgb, var(--color-bg, #020617) 76%, var(--memberships-accent-secondary) 24%)) !important;
overflow: hidden !important;
}
.memberships-course-shell-root .memberships-panel-hero.courses-panel-hero::before {
content: none !important;
display: none !important;
}
.memberships-course-shell-root .memberships-panel-hero .courses-panel-hero__inner {
min-height: inherit !important;
padding: calc(var(--courses-panel-nav-height, 4.5rem) + clamp(1rem, 2.4vw, 2.45rem)) var(--courses-panel-content-right, clamp(1rem, 4vw, 4.5rem)) clamp(1.25rem, 3vw, 2.8rem) var(--courses-panel-content-left, clamp(1rem, 4vw, 4.5rem)) !important;
display: grid !important;
grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr) !important;
align-items: center !important;
gap: clamp(1rem, 3vw, 3rem) !important;
}
.memberships-course-shell-root .memberships-panel-hero .courses-panel-hero__text {
max-width: 47rem;
}
.memberships-course-shell-root .memberships-panel-hero .courses-panel-hero__kicker {
color: #7dd3fc !important;
letter-spacing: .13em;
text-transform: uppercase;
font-weight: 900;
}
.memberships-course-shell-root .memberships-panel-hero .courses-panel-hero__text h1 {
text-wrap: balance;
}
.memberships-course-shell-root .memberships-panel-hero .courses-panel-hero__stats {
width: min(100%, 34rem) !important;
max-width: 34rem !important;
justify-self: end !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: .75rem !important;
}
.memberships-course-shell-root .memberships-panel-hero .courses-panel-stat-card {
min-width: 0 !important;
min-height: auto !important;
padding: 1rem !important;
border: 1px solid color-mix(in srgb, currentColor 12%, transparent) !important;
border-radius: 1rem !important;
background: color-mix(in srgb, var(--color-bg, #020617) 57%, transparent) !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.memberships-course-shell-root .memberships-panel-hero .courses-panel-stat-card:nth-child(1) { color: #7dd3fc; }
.memberships-course-shell-root .memberships-panel-hero .courses-panel-stat-card:nth-child(2) { color: #fb7185; }
.memberships-course-shell-root .memberships-panel-hero .courses-panel-stat-card:nth-child(3) { color: #2dd4bf; }
.memberships-course-shell-root .memberships-panel-hero .courses-panel-stat-card:nth-child(4) { color: #fb923c; }
.memberships-course-shell-root .memberships-panel-hero .courses-panel-stat-card strong {
display: block !important;
color: currentColor !important;
font-size: clamp(1.35rem, 2.35vw, 1.95rem) !important;
line-height: .95 !important;
letter-spacing: -.04em !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.memberships-course-shell-root .memberships-panel-hero .courses-panel-stat-card span {
display: block !important;
margin-top: .3rem !important;
color: color-mix(in srgb, currentColor 72%, #fff 28%) !important;
font-size: .78rem !important;
font-weight: 800 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.mobile-shell-navbar .membership-smartbar-shell.courses-searchbar--navbar {
width: min(100%, 580px) !important;
max-width: 100% !important;
}
.mobile-shell-navbar.is-mobile-mode .membership-smartbar-shell.courses-searchbar--navbar,
.mobile-shell-navbar.is-tablet-mode .membership-smartbar-shell.courses-searchbar--navbar {
width: 100% !important;
}
.mobile-shell-navbar.is-mobile-mode .membership-smartbar-shell .courses-searchbar__label span,
.mobile-shell-navbar.is-tablet-mode .membership-smartbar-shell .courses-searchbar__label span {
display: none !important;
}
.membership-smart-suggestions.courses-smart-suggestions,
.membership-smart-suggestions.ui-smartbar-suggestions {
z-index: 10060;
}
.membership-smart-suggestion {
--courses-smart-suggestion-color: #38bdf8;
}
.memberships-course-shell-root .membership-control-dock.courses-control-dock {
width: 100% !important;
max-width: 100% !important;
min-height: calc(var(--courses-control-row-height, 2.55rem) + clamp(.65rem, 1.4vw, .95rem));
margin-inline: 0 !important;
}
.memberships-course-shell-root .membership-control-dock .courses-control-dock__chips {
width: 100%;
min-width: 0;
}
.memberships-course-shell-root .membership-smart-strip.courses-smart-strip {
position: relative;
top: auto;
width: 100%;
min-width: 0;
margin: 0;
}
.memberships-course-shell-root .membership-smart-strip .courses-smart-chips,
.memberships-course-shell-root .membership-smart-strip .membership-smart-chips {
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: 100% !important;
overflow: hidden !important;
}
.memberships-course-shell-root .membership-smart-summary strong,
.memberships-course-shell-root .membership-smart-chip span,
.memberships-course-shell-root .courses-smart-chip span {
white-space: nowrap;
}
.memberships-course-shell-root .memberships-panel-content--list.courses-panel-content {
gap: clamp(.85rem, 2vw, 1.15rem) !important;
padding-top: clamp(1.15rem, 2.4vw, 2rem);
}
.memberships-course-shell-root .membership-panel {
width: 100%;
max-width: none;
margin: 0;
gap: 0;
}
.memberships-course-shell-root .membership-list--modern {
width: 100%;
max-width: none;
margin: 0;
display: flex;
flex-direction: column;
gap: clamp(.75rem, 1.35vw, 1.05rem);
}
.memberships-course-shell-root .membership-row-card {
--membership-row-accent: #94a3b8;
position: relative;
isolation: isolate;
width: 100%;
min-width: 0;
padding: clamp(1rem, 1.65vw, 1.3rem);
border: 1px solid color-mix(in srgb, var(--membership-row-accent) 28%, var(--memberships-card-border));
border-radius: 1.35rem;
background:
linear-gradient(115deg, color-mix(in srgb, var(--membership-row-accent) 7%, transparent), transparent 38%),
var(--memberships-card-bg);
box-shadow: none;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .9fr) minmax(13.4rem, .5fr);
gap: clamp(.85rem, 1.6vw, 1.35rem);
align-items: center;
}
.memberships-course-shell-root .membership-row-card::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: .28rem;
border-radius: 1.35rem 0 0 1.35rem;
background: var(--membership-row-accent);
box-shadow: 0 0 24px color-mix(in srgb, var(--membership-row-accent) 48%, transparent);
z-index: -1;
}
.memberships-course-shell-root .membership-row-card--unpaid { --membership-row-accent: #ef4444; }
.memberships-course-shell-root .membership-row-card--pending { --membership-row-accent: #f59e0b; }
.memberships-course-shell-root .membership-row-card--partial { --membership-row-accent: #fb923c; }
.memberships-course-shell-root .membership-row-card--paid { --membership-row-accent: #22c55e; }
.memberships-course-shell-root .membership-row-card--covered { --membership-row-accent: #10b981; }
.memberships-course-shell-root .membership-row-card--waived { --membership-row-accent: #a78bfa; }
.memberships-course-shell-root .membership-row-card:hover,
.memberships-course-shell-root .membership-row-card:focus-within {
border-color: color-mix(in srgb, var(--membership-row-accent) 48%, var(--memberships-card-border));
background:
linear-gradient(115deg, color-mix(in srgb, var(--membership-row-accent) 10%, transparent), transparent 42%),
color-mix(in srgb, var(--memberships-card-bg) 96%, #fff 4%);
box-shadow: 0 18px 42px color-mix(in srgb, var(--membership-row-accent) 7%, transparent) !important;
}
.memberships-course-shell-root .membership-row-card__identity,
.memberships-course-shell-root .membership-row-card__money,
.memberships-course-shell-root .membership-row-card__actions {
min-width: 0;
}
.memberships-course-shell-root .membership-row-card__identity {
display: flex;
flex-direction: column;
gap: .6rem;
}
.memberships-course-shell-root .membership-row-card__name {
align-items: center;
gap: .55rem;
}
.memberships-course-shell-root .membership-row-card__name > span:first-child {
font-size: clamp(1rem, 1.35vw, 1.18rem);
font-weight: 900;
letter-spacing: -.015em;
}
.memberships-course-shell-root .membership-row-card__meta {
gap: .45rem .55rem;
}
.memberships-course-shell-root .membership-row-card__meta > span:not(.style-badge) {
min-height: 1.85rem;
padding: .28rem .6rem;
border: 1px solid color-mix(in srgb, var(--membership-row-accent) 18%, var(--memberships-card-border));
border-radius: 999px;
background: color-mix(in srgb, var(--membership-row-accent) 5%, transparent);
display: inline-flex;
align-items: center;
gap: .4rem;
max-width: 100%;
}
.memberships-course-shell-root .membership-row-card__meta > span i {
color: color-mix(in srgb, var(--membership-row-accent) 76%, #fff 24%);
}
.memberships-course-shell-root .membership-row-card__meta > span {
overflow-wrap: anywhere;
}
.memberships-course-shell-root .membership-row-card__course-context {
color: color-mix(in srgb, var(--membership-row-accent) 72%, var(--color-text, #f8fafc) 28%);
font-weight: 780;
}
.memberships-course-shell-root .membership-row-card__hints {
display: grid;
gap: .23rem;
}
.memberships-course-shell-root .membership-row-card__hints .form-hint {
margin: 0;
color: var(--color-text-muted, #94a3b8);
line-height: 1.38;
}
.memberships-course-shell-root .membership-row-card__money {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .55rem;
}
.memberships-course-shell-root .membership-row-card__money > div {
min-width: 0;
min-height: 4rem;
padding: .65rem .75rem;
border: 1px solid color-mix(in srgb, var(--memberships-card-border) 88%, transparent);
border-radius: .9rem;
background: color-mix(in srgb, var(--color-bg, #020617) 45%, transparent);
display: flex;
flex-direction: column;
justify-content: center;
gap: .18rem;
}
.memberships-course-shell-root .membership-row-card__money-highlight {
border-color: color-mix(in srgb, var(--membership-row-accent) 40%, var(--memberships-card-border)) !important;
background: color-mix(in srgb, var(--membership-row-accent) 8%, var(--color-bg, #020617) 92%) !important;
}
.memberships-course-shell-root .membership-row-card__money dt {
color: var(--color-text-muted, #94a3b8);
font-size: .78rem;
line-height: 1;
}
.memberships-course-shell-root .membership-row-card__money dd {
margin: 0;
color: var(--color-text, #f8fafc);
font-size: 1rem;
font-weight: 900;
line-height: 1.05;
overflow-wrap: anywhere;
}
.memberships-course-shell-root .membership-row-card__money-highlight dd {
color: color-mix(in srgb, var(--membership-row-accent) 76%, #fff 24%);
}
.memberships-course-shell-root .membership-row-card__actions {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: .55rem;
align-content: center;
}
.memberships-course-shell-root .membership-row-card__actions .ui-btn,
.memberships-course-shell-root .membership-row-card__helloasso-actions,
.memberships-course-shell-root .membership-row-card__helloasso-actions .ui-btn {
width: 100%;
min-width: 0;
justify-content: center;
}
.memberships-course-shell-root .membership-row-card__manage-btn {
border-color: color-mix(in srgb, var(--membership-row-accent) 28%, var(--memberships-card-border));
}
.memberships-course-shell-root .membership-payment-link-btn:not(:disabled) {
color: #bae6fd;
border-color: color-mix(in srgb, #38bdf8 42%, var(--memberships-card-border));
background: color-mix(in srgb, #0ea5e9 10%, transparent);
}
.memberships-course-shell-root .membership-empty--modern {
width: min(100%, 42rem);
min-height: 14rem;
margin: 1rem auto;
padding: 2rem;
border: 1px dashed color-mix(in srgb, var(--memberships-accent) 34%, var(--memberships-card-border));
border-radius: 1.4rem;
background: color-mix(in srgb, var(--memberships-accent) 4%, var(--memberships-card-bg));
display: grid;
place-items: center;
align-content: center;
gap: .55rem;
text-align: center;
color: var(--color-text-muted, #94a3b8);
}
.memberships-course-shell-root .membership-empty--modern i {
color: #7dd3fc;
font-size: 2rem;
}
.memberships-course-shell-root .membership-empty--modern strong {
color: var(--color-text, #f8fafc);
font-size: 1.05rem;
}
.memberships-course-shell-root.is-membership-subpanel .memberships-panel-hero,
.memberships-course-shell-root.is-membership-subpanel .membership-control-dock {
display: none !important;
}
.memberships-course-shell-root.is-membership-subpanel .memberships-panel-content--list {
padding-top: clamp(1rem, 2vw, 1.75rem);
}
body.memberships-smart-focus-active .memberships-course-shell-root .membership-list,
.memberships-smart-focus-active .memberships-course-shell-root .membership-list {
pointer-events: none;
}
html[data-theme="light"] .memberships-course-shell-root {
--memberships-card-bg: rgba(255, 255, 255, .92);
--memberships-card-border: rgba(15, 23, 42, .13);
}
html[data-theme="light"] .memberships-course-shell-root .membership-row-card__money > div {
background: rgba(248, 250, 252, .88);
}
html[data-theme="light"] .memberships-course-shell-root .membership-row-card__money dd,
html[data-theme="light"] .memberships-course-shell-root .membership-empty--modern strong {
color: #0f172a;
}
@media (max-width: 1180px) {
.memberships-course-shell-root .membership-row-card {
grid-template-columns: minmax(0, 1.4fr) minmax(17rem, .85fr);
}
.memberships-course-shell-root .membership-row-card__actions {
grid-column: 1 / -1;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.memberships-course-shell-root .memberships-panel-hero .courses-panel-hero__inner {
grid-template-columns: minmax(0, 1fr) !important;
align-content: center !important;
}
.memberships-course-shell-root .memberships-panel-hero .courses-panel-hero__stats {
width: 100% !important;
max-width: none !important;
justify-self: stretch !important;
}
.memberships-course-shell-root .membership-row-card {
grid-template-columns: minmax(0, 1fr);
}
.memberships-course-shell-root .membership-row-card__actions {
grid-column: auto;
}
}
@media (max-width: 767px) {
.memberships-course-shell-root .memberships-panel-content--list.courses-panel-content {
padding-top: clamp(.85rem, 3vw, 1.1rem);
}
.memberships-course-shell-root .memberships-panel-hero.courses-panel-hero {
min-height: auto !important;
}
.memberships-course-shell-root .memberships-panel-hero .courses-panel-hero__inner {
padding-top: calc(var(--courses-panel-nav-height, 4.5rem) + 1rem) !important;
}
.memberships-course-shell-root .memberships-panel-hero .courses-panel-hero__stats {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: .55rem !important;
}
.memberships-course-shell-root .memberships-panel-hero .courses-panel-stat-card {
padding: .78rem !important;
}
.memberships-course-shell-root .memberships-panel-hero .courses-panel-stat-card strong {
font-size: 1.25rem !important;
}
.memberships-course-shell-root .memberships-panel-hero .courses-panel-stat-card span {
font-size: .69rem !important;
}
.memberships-course-shell-root .membership-smart-strip.courses-smart-strip {
gap: .4rem;
overflow: visible;
}
.memberships-course-shell-root .courses-smart-summary strong,
.memberships-course-shell-root .membership-smart-chip,
.memberships-course-shell-root .courses-smart-chip {
min-height: 2.4rem;
padding-inline: .72rem;
font-size: .82rem;
}
.memberships-course-shell-root .membership-row-card {
padding: .95rem;
border-radius: 1.15rem;
}
.memberships-course-shell-root .membership-row-card::before {
border-radius: 1.15rem 0 0 1.15rem;
}
.memberships-course-shell-root .membership-row-card__money {
gap: .45rem;
}
.memberships-course-shell-root .membership-row-card__money > div {
min-height: 3.65rem;
padding: .58rem .65rem;
}
.memberships-course-shell-root .membership-row-card__actions {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 480px) {
.memberships-course-shell-root .memberships-panel-hero .courses-panel-hero__stats {
grid-template-columns: minmax(0, 1fr) !important;
}
.memberships-course-shell-root .membership-row-card__money {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==========================================================================
V49.4.86 — sous-panel Gérer les règlements modernisé
========================================================================== */
.memberships-course-shell-root.is-membership-subpanel .membership-control-dock {
display: none !important;
}
.memberships-course-shell-root.is-membership-subpanel .memberships-panel-hero {
display: block !important;
min-height: clamp(11.5rem, 21vh, 15rem) !important;
}
.memberships-course-shell-root.is-membership-subpanel .memberships-panel-hero .courses-panel-hero__inner {
padding-bottom: clamp(1.15rem, 2.2vw, 2rem) !important;
}
.memberships-course-shell-root.is-membership-subpanel .memberships-panel-content--list {
padding-top: clamp(1rem, 2vw, 1.65rem);
}
.memberships-course-shell-root .memberships-panel-hero--editor.courses-panel-hero {
background:
radial-gradient(circle at 13% 18%, rgba(56, 189, 248, .22), transparent 28rem),
radial-gradient(circle at 88% 10%, rgba(45, 212, 191, .20), transparent 29rem),
linear-gradient(122deg, color-mix(in srgb, var(--color-bg, #020617) 95%, transparent), color-mix(in srgb, var(--color-bg, #020617) 78%, #0f766e 22%)) !important;
}
.memberships-course-shell-root .memberships-panel-hero--settings.courses-panel-hero {
background:
radial-gradient(circle at 14% 15%, rgba(167, 139, 250, .22), transparent 29rem),
radial-gradient(circle at 91% 12%, rgba(251, 146, 60, .18), transparent 30rem),
linear-gradient(122deg, color-mix(in srgb, var(--color-bg, #020617) 95%, transparent), color-mix(in srgb, var(--color-bg, #020617) 78%, #7c3aed 22%)) !important;
}
.membership-editor--modern {
width: min(100%, 78rem);
margin-inline: auto;
gap: clamp(.9rem, 1.6vw, 1.35rem);
}
.membership-editor--modern .membership-editor-section,
.membership-history-section {
position: relative;
border: 1px solid color-mix(in srgb, var(--color-border-subtle) 88%, transparent);
border-radius: 1.45rem;
background:
linear-gradient(145deg, color-mix(in srgb, var(--color-surface) 94%, transparent), color-mix(in srgb, var(--color-surface-soft) 88%, transparent));
box-shadow: 0 22px 56px rgba(0, 0, 0, .16);
overflow: hidden;
}
.membership-editor--modern .membership-editor-section {
padding: clamp(1rem, 2vw, 1.45rem);
gap: 1rem;
}
.membership-editor-section__heading {
display: flex;
align-items: flex-start;
gap: .9rem;
min-width: 0;
}
.membership-editor-section__heading > div {
min-width: 0;
}
.membership-editor-section__icon {
width: 2.85rem;
height: 2.85rem;
flex: 0 0 2.85rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 1rem;
color: #7dd3fc;
border: 1px solid rgba(125, 211, 252, .25);
background: rgba(14, 116, 144, .18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 28px rgba(14, 116, 144, .12);
font-size: 1.15rem;
}
.membership-editor-section__icon--entry {
color: #2dd4bf;
border-color: rgba(45, 212, 191, .28);
background: rgba(13, 148, 136, .16);
}
.membership-editor-section__icon--status {
color: var(--membership-editor-accent, #38bdf8);
border-color: color-mix(in srgb, var(--membership-editor-accent, #38bdf8) 30%, transparent);
background: color-mix(in srgb, var(--membership-editor-accent, #38bdf8) 15%, transparent);
}
.membership-editor-section__eyebrow,
.membership-history-card__eyebrow {
color: #7dd3fc;
font-size: .7rem;
line-height: 1.1;
font-weight: 900;
letter-spacing: .11em;
text-transform: uppercase;
}
.membership-editor-section__title {
margin-top: .18rem;
color: var(--color-text, #f8fafc);
font-size: clamp(1.02rem, 1.4vw, 1.18rem);
font-weight: 900;
letter-spacing: -.015em;
}
.membership-editor-section__hint {
margin-top: .28rem;
color: var(--color-text-muted, #94a3b8);
font-size: .91rem;
line-height: 1.45;
opacity: 1;
}
.membership-editor-context {
--membership-editor-accent: #38bdf8;
}
.membership-editor-context--unpaid { --membership-editor-accent: #ef4444; }
.membership-editor-context--pending,
.membership-editor-context--partial { --membership-editor-accent: #f59e0b; }
.membership-editor-context--paid,
.membership-editor-context--covered { --membership-editor-accent: #22c55e; }
.membership-editor-context--waived { --membership-editor-accent: #a855f7; }
.membership-editor-context::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: .28rem;
background: var(--membership-editor-accent);
box-shadow: 0 0 1.35rem color-mix(in srgb, var(--membership-editor-accent) 55%, transparent);
}
.membership-editor-context__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.membership-editor-context__identity {
display: flex;
align-items: center;
gap: .9rem;
min-width: 0;
}
.membership-editor-context__name {
margin-top: .2rem;
font-size: clamp(1.05rem, 1.6vw, 1.3rem);
font-weight: 900;
}
.membership-editor-context__history-count,
.membership-history-section__count {
display: inline-flex;
align-items: center;
gap: .45rem;
flex: 0 0 auto;
padding: .52rem .72rem;
border: 1px solid color-mix(in srgb, var(--color-border-subtle) 88%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--color-surface-soft) 82%, transparent);
color: var(--color-text-muted, #94a3b8);
font-size: .78rem;
font-weight: 800;
white-space: nowrap;
}
.membership-editor-context__meta {
gap: .48rem;
}
.membership-editor-context__meta > span {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .5rem .7rem;
border: 1px solid color-mix(in srgb, var(--color-border-subtle) 82%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--color-surface-soft) 78%, transparent);
}
.membership-editor-context__notices {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .65rem;
}
.membership-editor-context__notices > div,
.membership-editor-recommendation,
.membership-history-card__note,
.membership-history-coverages {
display: flex;
align-items: flex-start;
gap: .65rem;
padding: .78rem .85rem;
border: 1px solid rgba(125, 211, 252, .16);
border-radius: 1rem;
background: rgba(14, 116, 144, .08);
color: var(--color-text-muted, #94a3b8);
font-size: .86rem;
line-height: 1.42;
}
.membership-editor-context__notices i,
.membership-editor-recommendation i,
.membership-history-card__note i,
.membership-history-coverages i {
color: #7dd3fc;
flex: 0 0 auto;
margin-top: .05rem;
}
.membership-editor-context__money {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .7rem;
}
.membership-editor-context__money > div,
.membership-history-card__money > div {
min-width: 0;
padding: .85rem .9rem;
border: 1px solid color-mix(in srgb, var(--color-border-subtle) 84%, transparent);
border-radius: 1rem;
background: color-mix(in srgb, var(--color-surface-soft) 78%, transparent);
}
.membership-editor-context__money--remaining {
border-color: color-mix(in srgb, var(--membership-editor-accent) 42%, transparent) !important;
background: color-mix(in srgb, var(--membership-editor-accent) 10%, transparent) !important;
}
.membership-editor-context__money--remaining dd {
color: var(--membership-editor-accent) !important;
}
.membership-payment-entry-card {
isolation: isolate;
}
.membership-payment-entry-card::after {
content: '';
position: absolute;
width: 19rem;
height: 19rem;
right: -8rem;
top: -10rem;
border-radius: 50%;
background: radial-gradient(circle, rgba(45, 212, 191, .10), transparent 68%);
pointer-events: none;
z-index: -1;
}
.membership-editor-recommendation {
border-color: rgba(45, 212, 191, .18);
background: rgba(13, 148, 136, .08);
}
.membership-editor-recommendation i {
color: #2dd4bf;
}
.membership-editor-form {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: .9rem;
align-items: start;
}
.membership-editor-form__field {
min-width: 0;
}
.membership-editor-form__field label,
.membership-editor-form__field legend {
display: flex;
align-items: center;
gap: .45rem;
margin-bottom: .45rem;
color: var(--color-text, #f8fafc);
font-size: .82rem;
font-weight: 850;
}
.membership-editor-form__field label i,
.membership-editor-form__field legend i {
color: #7dd3fc;
}
.membership-editor-form__field--payer { grid-column: span 4; }
.membership-editor-form__field--amount { grid-column: span 2; }
.membership-editor-form__field--date { grid-column: span 3; }
.membership-editor-form__field--method { grid-column: span 3; }
.membership-editor-form__field--note { grid-column: span 6; }
.membership-editor-form__field--propagation { grid-column: span 6; }
.membership-editor-form__field--propagation {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.membership-editor-money-field {
position: relative;
}
.membership-editor-money-field .ui-input {
padding-right: 2.45rem;
}
.membership-editor-money-field > span {
position: absolute;
top: 50%;
right: .9rem;
transform: translateY(-50%);
color: #2dd4bf;
font-weight: 900;
pointer-events: none;
}
.membership-editor-form .ui-input,
.membership-editor-form .ui-select {
width: 100%;
min-height: 3rem;
border-radius: 1rem;
border-color: color-mix(in srgb, var(--color-border-subtle) 94%, transparent);
background: color-mix(in srgb, var(--color-surface-soft) 86%, transparent);
}
.membership-editor-form .ui-input:focus,
.membership-editor-form .ui-select:focus {
border-color: rgba(56, 189, 248, .72);
box-shadow: 0 0 0 .22rem rgba(56, 189, 248, .12);
}
.membership-propagation-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .65rem;
min-height: 0;
}
.membership-propagation-option {
position: relative;
display: grid !important;
grid-template-columns: auto auto minmax(0, 1fr);
align-items: center !important;
gap: .65rem !important;
min-width: 0;
padding: .72rem .78rem;
border: 1px solid color-mix(in srgb, var(--color-border-subtle) 88%, transparent);
border-radius: 1rem;
background: color-mix(in srgb, var(--color-surface-soft) 78%, transparent);
cursor: pointer;
}
.membership-propagation-option:has(input:checked) {
border-color: rgba(45, 212, 191, .48);
background: rgba(13, 148, 136, .10);
box-shadow: 0 0 0 .18rem rgba(45, 212, 191, .08);
}
.membership-propagation-option input {
width: 1.05rem;
height: 1.05rem;
accent-color: #14b8a6;
}
.membership-propagation-option__icon {
width: 2.2rem;
height: 2.2rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: .78rem;
background: rgba(45, 212, 191, .10);
color: #2dd4bf;
}
.membership-propagation-option strong,
.membership-propagation-option small {
display: block;
}
.membership-propagation-option strong {
color: var(--color-text, #f8fafc);
font-size: .84rem;
}
.membership-propagation-option small {
margin-top: .15rem;
color: var(--color-text-muted, #94a3b8);
font-size: .72rem;
line-height: 1.32;
}
.membership-editor-form__actions {
grid-column: 1 / -1;
justify-content: flex-end;
padding-top: .15rem;
}
.membership-editor-form__actions .ui-btn {
min-width: 14rem;
}
.membership-history-section {
padding: clamp(1rem, 2vw, 1.45rem);
}
.membership-history-section__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.membership-history-list {
gap: .8rem;
}
.membership-history-card {
position: relative;
display: grid;
grid-template-columns: .75rem minmax(0, 1fr);
gap: 0;
padding: 0;
overflow: hidden;
}
.membership-history-card__rail {
position: relative;
background: linear-gradient(180deg, #38bdf8, #2dd4bf);
}
.membership-history-card__rail span {
position: absolute;
top: 1.2rem;
left: 50%;
width: .65rem;
height: .65rem;
border: .18rem solid var(--color-surface, #020617);
border-radius: 50%;
background: #2dd4bf;
transform: translateX(-50%);
box-shadow: 0 0 1rem rgba(45, 212, 191, .62);
}
.membership-history-card__content {
display: flex;
flex-direction: column;
gap: .85rem;
min-width: 0;
padding: 1rem 1.05rem;
}
.membership-history-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.membership-history-card__title {
margin-top: .18rem;
font-size: clamp(1.12rem, 1.6vw, 1.35rem);
font-weight: 950;
}
.membership-history-card__date {
display: inline-flex;
align-items: center;
gap: .4rem;
color: var(--color-text-muted, #94a3b8);
font-size: .78rem;
font-weight: 750;
white-space: nowrap;
}
.membership-history-card__meta > span {
display: inline-flex;
align-items: center;
gap: .42rem;
padding: .45rem .65rem;
border: 1px solid color-mix(in srgb, var(--color-border-subtle) 82%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--color-surface-soft) 76%, transparent);
}
.membership-history-card__money {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .65rem;
}
.membership-history-status {
gap: .38rem;
}
.membership-history-coverages,
.membership-history-card__note {
margin: 0;
}
.membership-history-card__actions {
padding-top: .1rem;
}
.membership-empty--history {
display: grid;
place-items: center;
gap: .45rem;
min-height: 10rem;
}
.membership-empty--history > i {
color: #7dd3fc;
font-size: 1.8rem;
}
.membership-empty--history strong {
color: var(--color-text, #f8fafc);
}
.membership-empty--history span {
color: var(--color-text-muted, #94a3b8);
}
html[data-theme="light"] .membership-editor--modern .membership-editor-section,
html[data-theme="light"] .membership-history-section,
html[data-theme="light"] .membership-history-card {
background: rgba(255, 255, 255, .94);
box-shadow: 0 20px 48px rgba(15, 23, 42, .10);
}
@media (max-width: 1180px) {
.membership-editor-form__field--payer { grid-column: span 6; }
.membership-editor-form__field--amount { grid-column: span 3; }
.membership-editor-form__field--date { grid-column: span 6; }
.membership-editor-form__field--method { grid-column: span 3; }
.membership-editor-form__field--note,
.membership-editor-form__field--propagation { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
.memberships-course-shell-root.is-membership-subpanel .memberships-panel-hero {
min-height: auto !important;
}
.membership-editor-context__header,
.membership-history-section__header,
.membership-history-card__header {
align-items: flex-start;
flex-direction: column;
}
.membership-editor-context__notices,
.membership-editor-context__money,
.membership-history-card__money {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.membership-editor-form__field--payer,
.membership-editor-form__field--amount,
.membership-editor-form__field--date,
.membership-editor-form__field--method,
.membership-editor-form__field--note,
.membership-editor-form__field--propagation {
grid-column: 1 / -1;
}
}
@media (max-width: 600px) {
.membership-editor--modern {
width: 100%;
}
.membership-editor--modern .membership-editor-section,
.membership-history-section {
border-radius: 1.15rem;
padding: .9rem;
}
.membership-editor-context__identity {
align-items: flex-start;
}
.membership-editor-context__history-count,
.membership-history-section__count {
white-space: normal;
}
.membership-editor-context__notices,
.membership-editor-context__money,
.membership-history-card__money,
.membership-propagation-options {
grid-template-columns: minmax(0, 1fr);
}
.membership-history-card__content {
padding: .9rem;
}
.membership-history-card__date {
white-space: normal;
}
.membership-editor-form__actions .ui-btn {
width: 100%;
min-width: 0;
}
}
/* ==========================================================================
V49.4.87 — CTA dans le dock et listes déroulantes modernisées
========================================================================== */
.memberships-course-shell-root.is-membership-subpanel .membership-control-dock,
.memberships-course-shell-root.is-membership-subpanel .membership-control-dock.membership-control-dock--subpanel {
display: grid !important;
}
.memberships-course-shell-root .membership-control-dock--subpanel {
--courses-panel-accent: #2dd4bf;
min-height: calc(var(--courses-control-row-height, 2.55rem) + clamp(.65rem, 1.4vw, .95rem));
grid-template-columns: minmax(0, 1fr) !important;
}
.memberships-course-shell-root .membership-control-dock--subpanel .courses-control-dock__chips {
display: none !important;
}
.memberships-course-shell-root .membership-control-dock--subpanel .courses-control-dock__actions {
width: 100%;
justify-content: flex-end;
flex-wrap: wrap;
}
.memberships-course-shell-root .membership-control-dock--subpanel .membership-dock-action {
--courses-control-action-color: #2dd4bf;
}
.memberships-course-shell-root .membership-control-dock--subpanel .membership-dock-action--secondary {
--courses-control-action-color: #38bdf8;
}
.memberships-course-shell-root.is-membership-subpanel .memberships-panel-content--list {
padding-top: clamp(1rem, 2vw, 1.55rem);
}
.membership-editor-form .ui-combo {
min-width: 0;
}
.membership-editor-form .ui-combo__btn {
width: 100%;
min-height: 3rem;
height: 3rem;
padding: 0 1rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, var(--color-border-subtle) 94%, transparent);
background: color-mix(in srgb, var(--color-surface-soft) 86%, transparent);
color: var(--color-text, #f8fafc);
box-shadow: none;
font-weight: 720;
}
.membership-editor-form .ui-combo__btn:hover {
border-color: rgba(56, 189, 248, .5);
background: color-mix(in srgb, var(--color-surface-soft) 92%, #38bdf8 8%);
filter: none;
}
.membership-editor-form .ui-combo__btn:focus-visible,
.membership-editor-form .ui-combo.is-open .ui-combo__btn {
border-color: rgba(56, 189, 248, .72);
box-shadow: 0 0 0 .22rem rgba(56, 189, 248, .12);
}
.membership-editor-form .ui-combo__chev {
flex: 0 0 auto;
width: 1.75rem;
height: 1.75rem;
border-radius: .65rem;
color: #7dd3fc;
background: rgba(56, 189, 248, .08);
transition: transform .18s ease, background-color .18s ease;
}
.membership-editor-form .ui-combo.is-open .ui-combo__chev {
transform: rotate(180deg);
background: rgba(56, 189, 248, .15);
}
.ui-combo__menu--portal[data-ui-combo-context="membership"] {
padding: .5rem;
border-radius: 1rem;
border: 1px solid rgba(56, 189, 248, .28);
background:
radial-gradient(circle at 0 0, rgba(56, 189, 248, .11), transparent 14rem),
color-mix(in srgb, var(--color-surface, #071020) 96%, #020617 4%);
box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(56, 189, 248, .06);
scrollbar-width: thin;
scrollbar-color: rgba(125, 211, 252, .52) transparent;
}
.ui-combo__menu--portal[data-ui-combo-context="membership"] .ui-combo__opt {
min-height: 2.75rem;
padding: .68rem .78rem;
border-radius: .78rem;
color: var(--color-text, #f8fafc);
line-height: 1.28;
}
.ui-combo__menu--portal[data-ui-combo-context="membership"] .ui-combo__text {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
}
.ui-combo__menu--portal[data-ui-combo-context="membership"] .ui-combo__opt:hover,
.ui-combo__menu--portal[data-ui-combo-context="membership"] .ui-combo__opt:focus-visible {
outline: none;
background: rgba(56, 189, 248, .12);
}
.ui-combo__menu--portal[data-ui-combo-context="membership"] .ui-combo__opt.is-active {
background: rgba(45, 212, 191, .13);
box-shadow: 0 0 0 1px rgba(45, 212, 191, .24) inset;
}
.ui-combo__menu--portal[data-ui-combo-context="membership"] .ui-combo__check {
flex: 0 0 auto;
color: #2dd4bf;
}
html[data-theme="light"] .ui-combo__menu--portal[data-ui-combo-context="membership"] {
background:
radial-gradient(circle at 0 0, rgba(14, 165, 233, .10), transparent 14rem),
rgba(255, 255, 255, .98);
border-color: rgba(14, 165, 233, .24);
box-shadow: 0 24px 70px rgba(15, 23, 42, .22), 0 0 0 1px rgba(14, 165, 233, .05);
}
@media (max-width: 767px) {
.memberships-course-shell-root .membership-control-dock--subpanel .courses-control-dock__actions {
justify-content: stretch;
}
.memberships-course-shell-root .membership-control-dock--subpanel .membership-dock-action {
flex: 1 1 0;
min-width: 0;
}
}
/* V49.7.14 — Trop-perçu et suppression de règlement */
.membership-status-chip--overpaid {
color: #fb923c;
background: rgba(251, 146, 60, .16);
}
.membership-filter-bubble--overpaid {
--filter-bubble-accent: #fb923c;
}
.membership-row-card--overpaid {
border-color: rgba(251, 146, 60, .42);
box-shadow: inset 0 0 0 1px rgba(251, 146, 60, .12);
}
.membership-overpaid-hint,
.membership-editor-context__money--overpaid dd {
color: #fb923c;
}
.membership-overpaid-hint {
display: inline-flex;
align-items: center;
gap: 8px;
}
.membership-history-card__delete-btn {
border-color: rgba(248, 113, 113, .35);
color: #fecaca;
}
.membership-history-card__delete-btn:hover,
.membership-history-card__delete-btn:focus-visible {
border-color: rgba(248, 113, 113, .72);
background: rgba(248, 113, 113, .12);
}
html[data-theme="light"] .membership-history-card__delete-btn {
color: #991b1b;
}
/* V49.7.19 — paiement manuel séparé de l'historique */
.membership-editor--history-only .membership-history-section {
margin-top: 0;
}
.membership-editor-auto-coverage {
grid-column: 1 / -1;
display: flex;
gap: .75rem;
align-items: flex-start;
padding: .9rem 1rem;
border: 1px solid rgba(55, 214, 190, .28);
border-radius: 18px;
background: linear-gradient(135deg, rgba(10, 132, 150, .16), rgba(11, 20, 44, .62));
color: rgba(249, 250, 251, .82);
font-size: .86rem;
line-height: 1.35;
}
.membership-editor-auto-coverage i {
color: #37d6be;
font-size: 1rem;
margin-top: .1rem;
}