/* MihaiJoe CMS UI Framework 1.6 — composants visuels communs public/admin. */
*,*::before,*::after{box-sizing:border-box}
.mj-ui-page{width:min(1120px,calc(100% - 32px));margin-inline:auto;padding:32px 0 64px;color:var(--mj-theme-text)}
.mj-ui-stack{display:grid;gap:18px}.mj-ui-stack.is-tight{gap:10px}.mj-ui-stack.is-loose{gap:28px}
.mj-ui-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.mj-ui-card{background:var(--mj-theme-surface);color:var(--mj-safe-surface-text,var(--mj-theme-text));border:1px solid var(--mj-theme-border);border-radius:calc(var(--mj-theme-radius) + 4px);padding:22px;box-shadow:0 8px 28px color-mix(in srgb,var(--mj-theme-shadow) 8%,transparent)}
.mj-ui-card.is-flat{box-shadow:none}.mj-ui-card.is-compact{padding:16px}.mj-ui-card> :first-child{margin-top:0}.mj-ui-card> :last-child{margin-bottom:0}
.mj-ui-nav{display:flex;justify-content:flex-end;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0;margin-bottom:28px;border-bottom:1px solid var(--mj-theme-border)}
.mj-ui-nav a{color:var(--mj-theme-link);text-decoration-thickness:1px;text-underline-offset:3px}.mj-ui-nav a:hover{color:var(--mj-theme-link-hover)}
.mj-ui-button,button.mj-ui-button,input[type=submit].mj-ui-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid var(--mj-theme-primary);border-radius:var(--mj-theme-radius);background:var(--mj-theme-primary);color:var(--mj-safe-primary-text,var(--mj-theme-on-primary))!important;font:inherit;font-weight:750;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
.mj-ui-button:hover{background:var(--mj-theme-primary-hover);border-color:var(--mj-theme-primary-hover);color:var(--mj-safe-primary-hover-text,var(--mj-theme-on-primary))!important}
.mj-ui-button:active{transform:translateY(1px)}
.mj-ui-button.is-secondary{background:var(--mj-theme-surface);border-color:var(--mj-theme-border);color:var(--mj-theme-text)!important}.mj-ui-button.is-secondary:hover{background:var(--mj-theme-surface-alt);border-color:var(--mj-theme-primary);color:var(--mj-theme-text)!important}
.mj-ui-button.is-danger{background:var(--mj-theme-danger);border-color:var(--mj-theme-danger);color:var(--mj-safe-danger-solid-text,var(--mj-theme-on-primary))!important}
.mj-ui-button:disabled,.mj-ui-button[aria-disabled="true"]{background:var(--mj-theme-disabled-bg)!important;border-color:var(--mj-theme-border)!important;color:var(--mj-safe-disabled-text,var(--mj-theme-disabled-text))!important;cursor:not-allowed;pointer-events:none;transform:none}
.mj-ui-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.mj-ui-actions.is-end{justify-content:flex-end}
.mj-ui-form{display:grid;gap:16px}.mj-ui-form.is-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mj-ui-field{display:grid;gap:7px}.mj-ui-field>span,.mj-ui-field>label{font-weight:650}.mj-ui-field.is-full{grid-column:1/-1}
.mj-ui-input,.mj-ui-form input:not([type=hidden]):not([type=checkbox]):not([type=radio]),.mj-ui-form select,.mj-ui-form textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--mj-theme-field-border);border-radius:var(--mj-theme-radius);background:var(--mj-theme-field-bg);color:var(--mj-safe-field-text,var(--mj-theme-field-text));font:inherit}.mj-ui-form textarea{min-height:96px;resize:vertical}.mj-ui-input::placeholder,.mj-ui-form input::placeholder,.mj-ui-form textarea::placeholder{color:var(--mj-theme-field-placeholder)}.mj-ui-input:focus,.mj-ui-form input:focus,.mj-ui-form select:focus,.mj-ui-form textarea:focus{outline:2px solid var(--mj-theme-field-focus);outline-offset:1px}.mj-ui-input.is-compact{width:82px;min-height:36px;padding:6px 8px}
.mj-ui-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--mj-theme-border);border-radius:var(--mj-theme-radius);background:var(--mj-theme-surface)}.mj-ui-table{width:100%;border-collapse:collapse;background:var(--mj-theme-surface);color:var(--mj-safe-surface-text,var(--mj-theme-text))}.mj-ui-table th,.mj-ui-table td{padding:13px;text-align:left;border-bottom:1px solid var(--mj-theme-border);vertical-align:middle}.mj-ui-table thead th,.mj-ui-table tfoot th{background:var(--mj-theme-table-header)}.mj-ui-table tbody tr:nth-child(even){background:var(--mj-theme-table-alt)}.mj-ui-table tr:last-child>*{border-bottom:0}
.mj-ui-alert{padding:13px 15px;border:1px solid var(--mj-theme-border);border-radius:var(--mj-theme-radius);background:var(--mj-theme-info-bg);color:var(--mj-safe-info-text,var(--mj-theme-info))}.mj-ui-alert.is-success{background:var(--mj-theme-success-bg);color:var(--mj-safe-success-text,var(--mj-theme-success))}.mj-ui-alert.is-warning{background:var(--mj-theme-warning-bg);color:var(--mj-safe-warning-text,var(--mj-theme-warning))}.mj-ui-alert.is-danger{background:var(--mj-theme-danger-bg);color:var(--mj-safe-danger-text,var(--mj-theme-danger))}
.mj-ui-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font-size:.88rem;font-weight:750;background:var(--mj-theme-surface-alt);color:var(--mj-safe-surface-alt-text,var(--mj-theme-text));border:1px solid var(--mj-theme-border)}.mj-ui-badge.is-success{background:var(--mj-theme-success-bg);color:var(--mj-safe-success-text,var(--mj-theme-success))}.mj-ui-badge.is-warning{background:var(--mj-theme-warning-bg);color:var(--mj-safe-warning-text,var(--mj-theme-warning))}.mj-ui-badge.is-danger{background:var(--mj-theme-danger-bg);color:var(--mj-safe-danger-text,var(--mj-theme-danger))}.mj-ui-badge.is-info{background:var(--mj-theme-info-bg);color:var(--mj-safe-info-text,var(--mj-theme-info))}
.mj-ui-empty{padding:24px;border:1px dashed var(--mj-theme-border);border-radius:var(--mj-theme-radius);background:var(--mj-theme-surface-alt);color:var(--mj-safe-surface-alt-muted,var(--mj-theme-muted));text-align:center}
.mj-ui-muted{color:var(--mj-theme-muted)}.mj-ui-price{font-size:1.5rem;font-weight:800;color:var(--mj-theme-text)}.mj-ui-product-image{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--mj-theme-radius);border:1px solid var(--mj-theme-border)}
.mj-ui-details{display:grid;gap:10px}.mj-ui-details>div{display:flex;justify-content:space-between;gap:18px}.mj-ui-details dt{color:var(--mj-theme-muted)}.mj-ui-details dd{margin:0;font-weight:650;text-align:right}
/* Compatibilité progressive des plugins 5.1.x : les anciens noms héritent du design system. */
.has-payment-public-page .card,.has-customer-portal-page .mj-card,.has-customer-portal-page .mj-app-card{background:var(--mj-theme-surface);color:var(--mj-safe-surface-text,var(--mj-theme-text));border:1px solid var(--mj-theme-border);border-radius:calc(var(--mj-theme-radius) + 4px);box-shadow:0 8px 28px color-mix(in srgb,var(--mj-theme-shadow) 8%,transparent)}
.has-payment-public-page .button,.has-payment-public-page button,.has-customer-portal-page .mj-button,.has-customer-portal-page .mj-form button{min-height:44px;border-radius:var(--mj-theme-radius)}
@media(max-width:700px){.mj-ui-page{width:min(100% - 20px,1120px);padding-top:20px}.mj-ui-form.is-grid{grid-template-columns:1fr}.mj-ui-field.is-full{grid-column:auto}.mj-ui-nav{justify-content:flex-start}.mj-ui-actions{display:grid;grid-template-columns:1fr}.mj-ui-actions .mj-ui-button{width:100%}.mj-ui-card{padding:18px}}
/* 5.2.1 — priorité stricte du thème sur les anciens styles de plugins. */
body.mj-builder-page .mj-ui-button,
body.mj-builder-page a.mj-ui-button,
body.mj-builder-page button.mj-ui-button,
body.mj-builder-page input[type="submit"].mj-ui-button,
body.mj-builder-page.has-payment-public-page .button.mj-ui-button,
body.mj-builder-page.has-customer-portal-page .mj-button.mj-ui-button{
  background:var(--mj-theme-primary)!important;
  border-color:var(--mj-theme-primary)!important;
  color:var(--mj-safe-primary-text,var(--mj-theme-on-primary))!important;
}
body.mj-builder-page .mj-ui-button:hover,
body.mj-builder-page a.mj-ui-button:hover,
body.mj-builder-page button.mj-ui-button:hover,
body.mj-builder-page input[type="submit"].mj-ui-button:hover,
body.mj-builder-page.has-payment-public-page .button.mj-ui-button:hover,
body.mj-builder-page.has-customer-portal-page .mj-button.mj-ui-button:hover{
  background:var(--mj-theme-primary-hover)!important;
  border-color:var(--mj-theme-primary-hover)!important;
  color:var(--mj-safe-primary-hover-text,var(--mj-theme-on-primary))!important;
}
body.mj-builder-page .mj-ui-button.is-secondary,
body.mj-builder-page button.mj-ui-button.is-secondary,
body.mj-builder-page a.mj-ui-button.is-secondary{
  background:var(--mj-theme-surface)!important;
  border-color:var(--mj-theme-border)!important;
  color:var(--mj-theme-text)!important;
}
body.mj-builder-page .mj-ui-button.is-secondary:hover,
body.mj-builder-page button.mj-ui-button.is-secondary:hover,
body.mj-builder-page a.mj-ui-button.is-secondary:hover{
  background:var(--mj-theme-surface-alt)!important;
  border-color:var(--mj-theme-primary)!important;
  color:var(--mj-theme-text)!important;
}
body.mj-builder-page .mj-ui-button.is-danger{
  background:var(--mj-theme-danger)!important;
  border-color:var(--mj-theme-danger)!important;
  color:var(--mj-safe-primary-text,var(--mj-theme-on-primary))!important;
}
/* Compatibilité avec les derniers boutons legacy des pages publiques. */
body.mj-builder-page.has-payment-public-page button:not(.mj-ui-button):not(.secondary):not(.danger),
body.mj-builder-page.has-customer-portal-page button:not(.mj-ui-button):not(.secondary):not(.danger){
  background:var(--mj-theme-primary)!important;
  border:1px solid var(--mj-theme-primary)!important;
  color:var(--mj-safe-primary-text,var(--mj-theme-on-primary))!important;
}
body.mj-builder-page.has-payment-public-page button:not(.mj-ui-button):not(.secondary):not(.danger):hover,
body.mj-builder-page.has-customer-portal-page button:not(.mj-ui-button):not(.secondary):not(.danger):hover{
  background:var(--mj-theme-primary-hover)!important;
  border-color:var(--mj-theme-primary-hover)!important;
}
body.mj-builder-page.has-payment-public-page button.secondary,
body.mj-builder-page.has-customer-portal-page button.secondary{
  background:var(--mj-theme-surface)!important;
  border:1px solid var(--mj-theme-border)!important;
  color:var(--mj-theme-text)!important;
}

/* 5.8.8 / UI API 1.1.0 — composants structurants communs de l’administration.
   Ces classes sont la référence pour Pages, Header, Footer, Menus, plugins et futurs modules. */
.mj-ui-shell-card{background:var(--mj-theme-surface);color:var(--mj-safe-surface-text,var(--mj-theme-text));border:1px solid var(--mj-theme-border);border-radius:calc(var(--mj-theme-radius) + 4px);box-shadow:0 3px 18px color-mix(in srgb,var(--mj-theme-shadow) 8%,transparent);overflow:hidden}
.mj-ui-shell-card.is-flat{box-shadow:none}
.mj-ui-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:16px 18px;background:var(--mj-theme-surface);color:var(--mj-safe-surface-text,var(--mj-theme-text));border:1px solid var(--mj-theme-border);border-radius:calc(var(--mj-theme-radius) + 2px)}
.mj-ui-toolbar.is-subtle{background:var(--mj-theme-surface-alt)}
.mj-ui-toolbar-copy{display:grid;gap:4px;min-width:0}.mj-ui-toolbar-copy>:is(h1,h2,h3,p){margin:0}.mj-ui-toolbar-copy p{color:var(--mj-theme-muted)}
.mj-ui-tabs{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;padding:12px 16px 0;background:var(--mj-theme-surface-alt);border-bottom:1px solid var(--mj-theme-border)}
.mj-ui-tab{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:40px;padding:9px 14px;border:1px solid var(--mj-theme-border);border-bottom:0;border-radius:var(--mj-theme-radius) var(--mj-theme-radius) 0 0;background:var(--mj-theme-surface);color:var(--mj-safe-surface-text,var(--mj-theme-text));font:inherit;font-weight:750;cursor:pointer}
.mj-ui-tab:hover,.mj-ui-tab:focus-visible{background:var(--mj-theme-surface-alt);border-color:var(--mj-theme-primary);color:var(--mj-theme-text)}
.mj-ui-tab.is-active,.mj-ui-tab[aria-selected="true"]{background:var(--mj-theme-primary);border-color:var(--mj-theme-primary);color:var(--mj-safe-primary-text,var(--mj-theme-on-primary))}
.mj-ui-tabs>.mj-ui-tab+.mj-ui-tab{margin-left:0!important}
.mj-ui-panel-body{padding:22px 24px 24px}
.mj-ui-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;align-items:start}.mj-ui-form-grid>.field,.mj-ui-form-grid>.mj-ui-field{margin:0;min-width:0}.mj-ui-form-grid>.is-full{grid-column:1/-1}
.mj-ui-subcard{padding:18px;border:1px solid var(--mj-theme-border);border-radius:calc(var(--mj-theme-radius) + 2px);background:var(--mj-theme-surface-alt);color:var(--mj-safe-surface-alt-text,var(--mj-theme-text))}.mj-ui-subcard>:first-child{margin-top:0}.mj-ui-subcard>:last-child{margin-bottom:0}
.mj-ui-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--mj-theme-border)}.mj-ui-section-head>:first-child{display:grid;gap:4px}.mj-ui-section-head :is(h2,h3,p){margin:0}.mj-ui-section-head p{color:var(--mj-theme-muted)}
.mj-ui-editor-list{display:grid;gap:16px}
.mj-ui-editor-card{padding:16px 18px;border:1px solid var(--mj-theme-border);border-radius:calc(var(--mj-theme-radius) + 2px);background:var(--mj-theme-surface);color:var(--mj-safe-surface-text,var(--mj-theme-text));box-shadow:0 3px 18px color-mix(in srgb,var(--mj-theme-shadow) 8%,transparent)}
.mj-ui-editor-column{padding:14px;border:1px solid var(--mj-theme-border);border-radius:calc(var(--mj-theme-radius) + 1px);background:var(--mj-theme-surface);color:var(--mj-safe-surface-text,var(--mj-theme-text))}
.mj-ui-actions-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--mj-theme-border);border-radius:calc(var(--mj-theme-radius) + 4px);background:color-mix(in srgb,var(--mj-theme-surface) 97%,transparent);box-shadow:0 14px 36px color-mix(in srgb,var(--mj-theme-shadow) 22%,transparent);backdrop-filter:blur(12px)}
.mj-ui-actions-bar.is-sticky{position:sticky;bottom:8px;z-index:60}
.mj-ui-form-inline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}.mj-ui-form-inline>.field{margin:0}
@media(max-width:900px){.mj-ui-panel-body{padding:18px}.mj-ui-form-grid{gap:14px 18px}}
@media(max-width:700px){.mj-ui-toolbar{padding:14px}.mj-ui-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;align-items:stretch}.mj-ui-tab{width:100%;min-height:48px;border:1px solid var(--mj-theme-border);border-radius:var(--mj-theme-radius)}.mj-ui-panel-body{padding:14px}.mj-ui-form-grid{grid-template-columns:1fr;gap:14px}.mj-ui-form-grid>.is-full{grid-column:auto}.mj-ui-subcard{padding:14px}.mj-ui-editor-card,.mj-ui-editor-column{padding:12px}.mj-ui-actions-bar{display:grid;grid-template-columns:1fr;padding:12px}.mj-ui-form-inline{grid-template-columns:1fr}}
@media(max-width:380px){.mj-ui-tabs{grid-template-columns:1fr}}

/* 5.8.9 / UI API 1.2.0 — généralisation aux écrans historiques du cœur.
   Les classes métier peuvent rester pour PHP/JS ; ces composants portent désormais le rendu commun. */
.mj-ui-help{display:grid;gap:6px;padding:16px 18px;margin-bottom:18px;border:1px solid var(--mj-theme-border);border-radius:calc(var(--mj-theme-radius) + 2px);background:var(--mj-theme-surface-alt);color:var(--mj-safe-surface-alt-text,var(--mj-theme-text))}
.mj-ui-help>:is(h1,h2,h3,strong,p){margin:0}.mj-ui-help p{color:var(--mj-theme-muted)}
.mj-ui-card.panel{padding:22px 24px;margin-block:0 18px}
.mj-ui-card.panel> :first-child{margin-top:0}.mj-ui-card.panel> :last-child{margin-bottom:0}
.mj-ui-card.panel .panel-heading,.mj-ui-card.panel>.mj-settings-heading{margin-top:0}
.mj-ui-form.mj-settings-form{gap:18px}
.mj-ui-form-grid.site-settings-grid,.mj-ui-form-grid.mj-settings-grid{margin-top:16px}
.mj-ui-field.field{display:grid;gap:7px;min-width:0}
.mj-ui-field.field>label{font-weight:650;color:var(--mj-theme-text)}
.mj-ui-field.field>small{color:var(--mj-theme-muted)}
.mj-ui-table-wrap.table-wrap{margin-top:14px}
.mj-ui-actions.actions{margin-top:16px}
.mj-ui-alert.flash{margin-bottom:16px}
.mj-ui-alert.flash.is-success{border-color:var(--mj-theme-success)}
.mj-ui-alert.flash.is-warning{border-color:var(--mj-theme-warning)}
.mj-ui-alert.flash.is-danger{border-color:var(--mj-theme-danger)}
.theme-tabs.mj-ui-tabs{margin:0 0 18px}
.theme-tabs.mj-ui-tabs .mj-ui-tab{margin:0}
@media(max-width:700px){
  .mj-ui-card.panel{padding:16px;margin-bottom:14px}
  .mj-ui-help{padding:14px;margin-bottom:14px}
  .mj-ui-actions.actions{display:grid;grid-template-columns:1fr}
  .mj-ui-actions.actions .mj-ui-button{width:100%}
}



/* 5.9.0 / UI API 1.3.0 — plugins officiels, responsive et accessibilité. */
.mj-ui-button:focus-visible,.mj-ui-tab:focus-visible,.mj-ui-nav a:focus-visible{outline:3px solid color-mix(in srgb,var(--mj-theme-primary) 35%,transparent);outline-offset:2px}
.mj-ui-tabs{overflow-x:auto;scrollbar-width:thin}
.mj-ui-tab{flex:0 0 auto}
.mj-ui-table{min-width:100%}
.mj-ui-table :is(a,button,input,select){max-width:100%}
.mj-ui-field small,.mj-ui-form small{color:var(--mj-theme-muted);line-height:1.45}
.mj-ui-form :is(input,select,textarea,button),.mj-ui-button,.mj-ui-tab{touch-action:manipulation}
.mj-ui-toolbar> :first-child{min-width:0}.mj-ui-toolbar :is(h1,h2,p){overflow-wrap:anywhere}
@media(max-width:900px){.mj-ui-toolbar{align-items:flex-start}.mj-ui-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}}
@media(max-width:700px){.mj-ui-toolbar{display:grid;grid-template-columns:1fr}.mj-ui-toolbar>.mj-ui-actions{width:100%}.mj-ui-toolbar>.mj-ui-actions .mj-ui-button{width:100%}.mj-ui-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.mj-ui-tab{min-width:0;width:100%}.mj-ui-table{min-width:0}}
@media(prefers-reduced-motion:reduce){.mj-ui-button,.mj-ui-tab{transition:none!important;scroll-behavior:auto!important}}


/* 5.9.1 / UI API 1.4.0 — consolidation finale et page de référence. */
.mj-ui-shell-card>.mj-ui-toolbar{border:0;border-bottom:1px solid var(--mj-theme-border);border-radius:0}
.mj-ui-shell-card>.mj-ui-tabs{border-radius:0}
.mj-ui-panel-body>.mj-ui-stack:first-child{margin-top:0}
.mj-ui-stack>section>h3:first-child{margin-top:0}
.mj-ui-card code,.mj-ui-table code{overflow-wrap:anywhere}
.login .mj-ui-form{width:100%}
.login .mj-ui-button{width:100%}
@media(max-width:700px){.mj-ui-shell-card{border-radius:var(--mj-theme-radius)}.mj-ui-panel-body{overflow-wrap:anywhere}}

/* 5.9.2 / UI API 1.5.0 — responsive mobile natif de l'administration.
   Référence minimale : 360 px. Aucun scroll horizontal global ; les actions
   s'empilent et les tableaux deviennent des cartes lisibles sur téléphone. */
@media(max-width:700px){
  body.mj-admin-body .mj-main,
  body.mj-admin-body .mj-ui-page,
  body.mj-admin-body .mj-ui-card,
  body.mj-admin-body .mj-ui-shell-card,
  body.mj-admin-body .mj-ui-toolbar,
  body.mj-admin-body .mj-ui-panel-body,
  body.mj-admin-body .mj-ui-subcard,
  body.mj-admin-body .mj-ui-editor-card,
  body.mj-admin-body .mj-ui-editor-column,
  body.mj-admin-body .panel,
  body.mj-admin-body .card{min-width:0;max-width:100%}

  body.mj-admin-body .mj-ui-actions,
  body.mj-admin-body .mj-ui-actions.actions,
  body.mj-admin-body .actions,
  body.mj-admin-body .page-toolbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    width:100%;
    gap:10px;
  }
  body.mj-admin-body .mj-ui-actions > *,
  body.mj-admin-body .actions > *,
  body.mj-admin-body .page-toolbar > *{min-width:0;max-width:100%}
  body.mj-admin-body .mj-ui-actions .mj-ui-button,
  body.mj-admin-body .mj-ui-actions > .button,
  body.mj-admin-body .mj-ui-actions > button,
  body.mj-admin-body .actions .mj-ui-button,
  body.mj-admin-body .actions > .button,
  body.mj-admin-body .actions > button,
  body.mj-admin-body .page-toolbar .button,
  body.mj-admin-body .page-toolbar button{
    width:100%!important;
    min-height:46px;
    text-align:center;
  }
  body.mj-admin-body .mj-ui-actions form,
  body.mj-admin-body .actions form{width:100%;min-width:0}
  body.mj-admin-body .mj-ui-actions form .mj-ui-button,
  body.mj-admin-body .mj-ui-actions form button,
  body.mj-admin-body .actions form .mj-ui-button,
  body.mj-admin-body .actions form button{width:100%!important}

  body.mj-admin-body .mj-ui-toolbar>.mj-ui-actions{width:100%}
  body.mj-admin-body .mj-ui-actions-bar{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important}
  body.mj-admin-body .mj-ui-actions-bar>*{min-width:0;max-width:100%}

  body.mj-admin-body .mj-ui-tabs{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px;
    overflow:visible!important;
    padding:12px;
  }
  body.mj-admin-body .mj-ui-tab{
    min-width:0!important;
    width:100%!important;
    min-height:48px;
    white-space:normal;
    text-align:center;
    border:1px solid var(--mj-theme-border);
    border-radius:var(--mj-theme-radius);
  }

  body.mj-admin-body .builder-component-actions,
  body.mj-admin-body .builder-column-header-actions,
  body.mj-admin-body .builder-order-actions,
  body.mj-admin-body .chrome-object-toolbar{
    overflow-x:visible!important;
    flex-wrap:wrap!important;
    max-width:100%;
  }

  body.mj-admin-body .mj-ui-table-wrap{
    overflow:visible!important;
    border:0;
    background:transparent;
    border-radius:0;
  }
  body.mj-admin-body table.mj-ui-table{
    display:block;
    width:100%;
    min-width:0!important;
    border:0;
    background:transparent!important;
  }
  body.mj-admin-body .mj-ui-table thead{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
  }
  body.mj-admin-body .mj-ui-table tbody{
    display:grid;
    gap:12px;
    width:100%;
  }
  body.mj-admin-body .mj-ui-table tbody tr{
    display:block;
    width:100%;
    min-width:0;
    overflow:hidden;
    border:1px solid var(--mj-theme-border);
    border-radius:calc(var(--mj-theme-radius) + 2px);
    background:var(--mj-theme-surface)!important;
    box-shadow:0 3px 14px color-mix(in srgb,var(--mj-theme-shadow) 7%,transparent);
  }
  body.mj-admin-body .mj-ui-table tbody td{
    display:grid;
    grid-template-columns:minmax(108px,38%) minmax(0,1fr);
    gap:10px;
    align-items:start;
    width:100%;
    min-width:0;
    padding:11px 12px;
    border:0!important;
    border-bottom:1px solid var(--mj-theme-border)!important;
    background:transparent!important;
    overflow-wrap:anywhere;
  }
  body.mj-admin-body .mj-ui-table tbody td:last-child{border-bottom:0!important}
  body.mj-admin-body .mj-ui-table tbody td[data-label]::before{
    content:attr(data-label);
    min-width:0;
    color:var(--mj-theme-muted);
    font-weight:750;
    line-height:1.35;
  }
  body.mj-admin-body .mj-ui-table tbody td:not([data-label]),
  body.mj-admin-body .mj-ui-table tbody td.mj-ui-mobile-full{
    display:block;
  }
  body.mj-admin-body .mj-ui-table tbody td.mj-ui-mobile-full::before{content:none}
  body.mj-admin-body .mj-ui-table tbody td :is(a,button,input,select,textarea,form,code){max-width:100%;min-width:0}
  body.mj-admin-body .mj-ui-table tbody td form{margin:0}
  body.mj-admin-body .mj-ui-table tbody td .mj-ui-button,
  body.mj-admin-body .mj-ui-table tbody td > .button,
  body.mj-admin-body .mj-ui-table tbody td > button,
  body.mj-admin-body .mj-ui-table tbody td form > .mj-ui-button,
  body.mj-admin-body .mj-ui-table tbody td form > button{width:100%!important}

  body.mj-admin-body img,
  body.mj-admin-body video,
  body.mj-admin-body iframe{max-width:100%}
  body.mj-admin-body pre,
  body.mj-admin-body code{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
}
@media(max-width:430px){
  body.mj-admin-body .mj-ui-tabs{grid-template-columns:1fr!important}
  body.mj-admin-body .mj-ui-table tbody td[data-label]{grid-template-columns:1fr;gap:4px}
}



/* 5.9.4 / UI API 1.6.1 — consolidation responsive mobile.
   La 5.9.4 supprime les contraintes de largeur héritées qui pouvaient contredire
   le composant tableau → cartes et renforce la règle zéro débordement global.

   5.9.3 / UI API 1.6.0 — finition des cartes mobiles.
   Le rendu téléphone reste générique : hiérarchie plus nette, actions isolées
   et aucune réimplémentation métier dans les plugins. */
@media(max-width:700px){
  body.mj-admin-body .mj-ui-table tbody{gap:14px}
  body.mj-admin-body .mj-ui-table tbody tr{
    box-shadow:0 5px 18px color-mix(in srgb,var(--mj-theme-shadow) 9%,transparent);
  }
  body.mj-admin-body .mj-ui-table tbody td{
    grid-template-columns:minmax(92px,34%) minmax(0,1fr);
    gap:10px 12px;
    padding:11px 12px;
    line-height:1.4;
  }
  body.mj-admin-body .mj-ui-table tbody td[data-label]::before{
    font-size:.9rem;
    font-weight:750;
  }
  body.mj-admin-body .mj-ui-table tbody td.mj-ui-mobile-primary{
    background:var(--mj-theme-surface-alt)!important;
    font-weight:750;
  }
  body.mj-admin-body .mj-ui-table tbody td.mj-ui-mobile-primary::before{
    color:var(--mj-theme-text);
  }
  body.mj-admin-body .mj-ui-table tbody td.mj-ui-mobile-actions-cell{
    display:block;
    padding:10px 12px;
    background:var(--mj-theme-surface-alt)!important;
  }
  body.mj-admin-body .mj-ui-table tbody td.mj-ui-mobile-actions-cell::before{content:none}
  body.mj-admin-body .mj-ui-table tbody td.mj-ui-mobile-actions-cell .mj-ui-actions{margin:0}
  body.mj-admin-body .mj-ui-table tbody td small{
    display:block;
    margin-top:2px;
    color:var(--mj-theme-muted);
    line-height:1.35;
  }
  body.mj-admin-body .mj-ui-table tbody td .mj-ui-badge{max-width:100%;white-space:normal}
}
@media(max-width:430px){
  body.mj-admin-body .mj-ui-table tbody td[data-label]{
    grid-template-columns:minmax(86px,34%) minmax(0,1fr)!important;
    gap:8px 10px;
  }
}


/* 5.9.4 — garde-fou responsive pour anciens wrappers encore présents.
   Les tableaux mj-ui continuent de devenir des cartes ; les wrappers legacy
   ne peuvent plus imposer une largeur minimale sur téléphone. */
@media(max-width:700px){
  body.mj-admin-body .table-wrap,
  body.mj-admin-body .mj-ui-table-wrap{
    max-width:100%;
  }
  body.mj-admin-body .table-wrap > table,
  body.mj-admin-body .mj-ui-table-wrap > table{
    min-width:0!important;
    max-width:100%;
  }
}


/* Aide contextuelle — blocs de contenu centralisés */
.mj-help-content-block{padding:1rem}
.mj-help-content-block textarea{width:100%}
.mj-help-display-image{margin:1rem auto;text-align:center;clear:both}
.mj-help-display-image img{display:block;max-width:100%;height:auto;margin:0 auto}
.mj-help-display-image.is-small{max-width:420px}
.mj-help-display-image.is-medium{max-width:720px}
.mj-help-display-image.is-large{max-width:100%}
.mj-help-display-image figcaption{margin-top:.45rem;font-size:.9em;color:var(--text-muted)}

/* Éléments de formulaire contextuels : hidden doit toujours gagner sur display:grid */
.mj-ui-field[hidden]{display:none!important}


/* Aide distante — accordéon admin */
.mj-help-category + .mj-help-category{margin-top:1.5rem}
.mj-help-category h3{margin:1rem 0 .65rem}
.mj-help-accordion{border:1px solid var(--mj-admin-border);border-radius:var(--mj-admin-radius);background:var(--mj-admin-surface);overflow:hidden}
.mj-help-accordion + .mj-help-accordion{margin-top:.65rem}
.mj-help-accordion summary{cursor:pointer;padding:.9rem 1rem}
.mj-help-accordion-content{padding:0 1rem 1rem;border-top:1px solid var(--mj-admin-border)}
.mj-help-accordion-content > :first-child{margin-top:1rem}
.mj-help-accordion-content > :last-child{margin-bottom:0}

/* UI API 1.7 */
.mj-ui-action-group{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}.mj-ui-action-group.is-compact{margin-top:0}.mj-ui-action-group>form{display:inline-flex;margin:0}.mj-ui-action-group>.mj-ui-button,.mj-ui-action-group>.button,.mj-ui-action-group>button,.mj-ui-action-group>form>button{margin:0;min-height:42px;width:auto}@media(max-width:700px){body.mj-admin-body .mj-ui-action-group{display:grid;grid-template-columns:1fr;align-items:stretch;width:100%;gap:10px}body.mj-admin-body .mj-ui-action-group>*,body.mj-admin-body .mj-ui-action-group>form{width:100%;min-width:0}body.mj-admin-body .mj-ui-action-group>.mj-ui-button,body.mj-admin-body .mj-ui-action-group>.button,body.mj-admin-body .mj-ui-action-group>button,body.mj-admin-body .mj-ui-action-group>form>button{width:100%!important}}

/* 5.10.83 / UI API 1.7.1 */
body.mj-admin-body .mj-ui-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;row-gap:10px}body.mj-admin-body .mj-ui-actions>form{display:inline-flex;align-items:center;margin:0}body.mj-admin-body .mj-ui-actions>:is(.button,.mj-ui-button,button),body.mj-admin-body .mj-ui-actions>form>:is(.button,.mj-ui-button,button){margin:0;min-height:42px;line-height:1.25}body.mj-admin-body .mj-ui-actions.is-start{justify-content:flex-start}body.mj-admin-body .mj-ui-actions.is-center{justify-content:center}body.mj-admin-body .mj-ui-actions.is-end{justify-content:flex-end}body.mj-admin-body .mj-ui-actions.is-between{justify-content:space-between}body.mj-admin-body .mj-ui-actions.is-compact{margin-top:0}body.mj-admin-body .mj-ui-actions.is-separated{padding-top:14px;border-top:1px solid var(--mj-theme-border)}body.mj-admin-body .mj-ui-action-note{flex:1 1 240px;min-width:0;color:var(--mj-theme-muted);font-size:.9rem;line-height:1.45}@media(max-width:700px){body.mj-admin-body .mj-ui-actions.is-between{justify-content:stretch}body.mj-admin-body .mj-ui-action-note{width:100%;font-size:.88rem}}


/* 5.10.84 / UI API 1.7.2 — finalisation des groupes d'actions */
body.mj-admin-body .mj-ui-actions{
  margin-top:12px;
}
body.mj-admin-body .mj-ui-actions.is-compact{
  margin-top:0;
}
body.mj-admin-body .mj-ui-actions>form{
  gap:0;
}
body.mj-admin-body .mj-ui-actions + .mj-ui-actions{
  margin-top:12px;
}

/* v5.10.333 — Typographie des composants UI centralisés en contexte Admin.
   Limité à body.mj-admin-body : aucune typographie publique n'est modifiée.
   Les valeurs reproduisent le rendu antérieur. */
body.mj-admin-body .mj-ui-button,
body.mj-admin-body button.mj-ui-button,
body.mj-admin-body input[type=submit].mj-ui-button{
  font-weight:var(--mj-admin-type-button-weight);
  line-height:var(--mj-admin-type-button-line-height);
}
body.mj-admin-body .mj-ui-field>span,
body.mj-admin-body .mj-ui-field>label,
body.mj-admin-body .mj-ui-field.field>label{
  font-weight:var(--mj-admin-type-label-weight);
  line-height:var(--mj-admin-type-label-line-height);
}
body.mj-admin-body .mj-ui-field small,
body.mj-admin-body .mj-ui-form small{
  line-height:var(--mj-admin-type-small-line-height);
}
body.mj-admin-body .mj-ui-tab{
  font-weight:var(--mj-admin-type-button-weight);
  line-height:var(--mj-admin-type-button-line-height);
}
body.mj-admin-body .mj-ui-badge{
  font-size:var(--mj-admin-type-badge-size);
  font-weight:var(--mj-admin-type-strong-weight);
}
body.mj-admin-body .mj-ui-price{
  font-size:var(--mj-admin-type-price-size);
  font-weight:var(--mj-admin-type-display-weight);
}
body.mj-admin-body .mj-ui-details dd{
  font-weight:var(--mj-admin-type-emphasis-weight);
}
body.mj-admin-body .mj-ui-table tbody td{
  line-height:var(--mj-admin-type-table-cell-line-height);
}
body.mj-admin-body .mj-ui-table tbody td[data-label]::before{
  font-size:var(--mj-admin-type-table-label-size);
  font-weight:var(--mj-admin-type-strong-weight);
  line-height:var(--mj-admin-type-table-label-line-height);
}
body.mj-admin-body .mj-ui-table tbody td.mj-ui-mobile-primary{
  font-weight:var(--mj-admin-type-strong-weight);
}
body.mj-admin-body .mj-ui-table tbody td small{
  line-height:var(--mj-admin-type-table-label-line-height);
}
body.mj-admin-body .mj-ui-actions>:is(.button,.mj-ui-button,button),
body.mj-admin-body .mj-ui-actions>form>:is(.button,.mj-ui-button,button){
  line-height:var(--mj-admin-type-button-line-height);
}
body.mj-admin-body .mj-ui-action-note{
  font-size:var(--mj-admin-type-action-note-size);
  line-height:var(--mj-admin-type-action-note-line-height);
}
@media(max-width:700px){
  body.mj-admin-body .mj-ui-action-note{
    font-size:var(--mj-admin-type-action-note-size-compact);
  }
}

/* 5.10.404 / UI API 1.9.0 — rythme et espacements de composition.
   Ces primitives centralisent les espacements récurrents des écrans et plugins.
   Les classes métier gardent leur logique ; le rythme visuel vient du Framework UI. */
:root{
  --mj-ui-space-xs:6px;
  --mj-ui-space-sm:10px;
  --mj-ui-space-md:14px;
  --mj-ui-space-lg:18px;
  --mj-ui-space-xl:24px;
  --mj-ui-space-2xl:30px;
}

/* Flux vertical standard entre zones d'un même écran ou d'une même carte. */
.mj-ui-flow{display:grid;gap:var(--mj-ui-space-lg)}
.mj-ui-flow.is-tight{gap:var(--mj-ui-space-sm)}
.mj-ui-flow.is-compact{gap:var(--mj-ui-space-md)}
.mj-ui-flow.is-loose{gap:var(--mj-ui-space-xl)}

/* Zone fonctionnelle : titre, contenu, actions ou sous-blocs. */
.mj-ui-section{display:grid;gap:var(--mj-ui-space-md);min-width:0}
.mj-ui-section+.mj-ui-section{margin-top:var(--mj-ui-space-lg)}
.mj-ui-section-title{display:grid;gap:4px;min-width:0}
.mj-ui-section-title>:is(h2,h3,h4,p){margin:0}
.mj-ui-section-title p{color:var(--mj-theme-muted)}

/* Petites cartes de chiffres / états / résumés. */
.mj-ui-metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--mj-ui-space-sm)}
.mj-ui-metric-card{display:grid;gap:4px;min-width:0;padding:12px 14px;border:1px solid var(--mj-theme-border);border-radius:var(--mj-theme-radius);background:var(--mj-theme-surface);color:var(--mj-safe-surface-text,var(--mj-theme-text))}
.mj-ui-metric-card strong{font-size:1.08em;line-height:1.2}
.mj-ui-metric-card span{color:var(--mj-theme-muted);font-size:.88em;overflow-wrap:anywhere}
.mj-ui-metric-card.is-inline{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--mj-ui-space-sm)}
.mj-ui-metric-card.is-inline strong{order:2}

/* Lignes répétables : champs + bouton ajouter/supprimer, utilisables par les plugins. */
.mj-ui-repeater{display:grid;gap:var(--mj-ui-space-sm)}
.mj-ui-repeater-list{display:grid;gap:var(--mj-ui-space-sm)}
.mj-ui-repeater-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--mj-ui-space-sm);align-items:center;padding:12px;border:1px solid var(--mj-theme-border);border-radius:var(--mj-theme-radius);background:var(--mj-theme-surface)}
.mj-ui-repeater-row>:first-child{min-width:0}
.mj-ui-repeater-actions{display:flex;align-items:center;gap:var(--mj-ui-space-sm);flex-wrap:wrap}

/* Actions : le Framework garantit une respiration avant les boutons. */
body.mj-admin-body .mj-ui-actions{margin-top:var(--mj-ui-space-md)}
body.mj-admin-body .mj-ui-actions.is-compact{margin-top:0}
body.mj-admin-body .mj-ui-actions.is-spaced{margin-top:var(--mj-ui-space-lg)}
body.mj-admin-body .mj-ui-actions.is-separated{padding-top:var(--mj-ui-space-md)}
body.mj-admin-body .mj-ui-actions+.mj-ui-actions{margin-top:var(--mj-ui-space-md)}

/* Tableaux : respiration horizontale uniforme sans casser les petits écrans. */
.mj-ui-table th,.mj-ui-table td{padding:14px 16px}

/* Les formulaires composés dans une carte utilisent le même rythme vertical. */
.mj-ui-card>.mj-ui-form,
.mj-ui-subcard>.mj-ui-form{margin-top:var(--mj-ui-space-md)}
.mj-ui-card>.mj-ui-form:first-child,
.mj-ui-subcard>.mj-ui-form:first-child{margin-top:0}

@media(max-width:700px){
  .mj-ui-flow{gap:var(--mj-ui-space-md)}
  .mj-ui-flow.is-loose{gap:var(--mj-ui-space-lg)}
  .mj-ui-section+.mj-ui-section{margin-top:var(--mj-ui-space-md)}
  .mj-ui-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mj-ui-metric-card{padding:11px 12px}
  .mj-ui-repeater-row{grid-template-columns:minmax(0,1fr) auto;padding:10px}
  .mj-ui-table th,.mj-ui-table td{padding:12px 14px}
  body.mj-admin-body .mj-ui-actions{margin-top:var(--mj-ui-space-md)}
}
@media(max-width:420px){
  .mj-ui-metric-grid{grid-template-columns:1fr}
  .mj-ui-repeater-row{grid-template-columns:1fr}
  .mj-ui-repeater-actions{display:grid;grid-template-columns:1fr}
  .mj-ui-repeater-actions>.mj-ui-button,
  .mj-ui-repeater-actions>button{width:100%}
}

/* 5.10.410 / UI API 1.9.1 — barre de recherche + filtres */
.mj-ui-select{
  width:100%;
  min-height:44px;
  padding:10px 38px 10px 12px;
  border:1px solid var(--mj-theme-field-border);
  border-radius:var(--mj-theme-radius);
  background:var(--mj-theme-field-bg);
  color:var(--mj-safe-field-text,var(--mj-theme-field-text));
  font:inherit;
}
.mj-ui-select:focus{outline:2px solid var(--mj-theme-field-focus);outline-offset:1px}
.mj-ui-searchbar{
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(150px,190px) auto;
  gap:var(--mj-ui-space-sm);
  align-items:stretch;
  min-width:min(100%,560px);
}
.mj-ui-search-field{position:relative;min-width:0}
.mj-ui-search-field::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  width:11px;
  height:11px;
  border:2px solid var(--mj-theme-muted);
  border-radius:50%;
  transform:translateY(-60%);
  pointer-events:none;
  z-index:1;
}
.mj-ui-search-field::after{
  content:"";
  position:absolute;
  left:25px;
  top:54%;
  width:7px;
  height:2px;
  border-radius:999px;
  background:var(--mj-theme-muted);
  transform:rotate(45deg);
  transform-origin:left center;
  pointer-events:none;
  z-index:1;
}
.mj-ui-search-field>.mj-ui-input{padding-left:38px}
.mj-ui-searchbar>.mj-ui-input,
.mj-ui-searchbar>.mj-ui-select,
.mj-ui-searchbar>.mj-ui-button,
.mj-ui-searchbar>.mj-ui-search-field>.mj-ui-input{
  min-height:44px;
  height:44px;
  box-sizing:border-box;
  margin:0;
}
.mj-ui-searchbar>.mj-ui-button{white-space:nowrap}
@media(max-width:700px){
  .mj-ui-searchbar{grid-template-columns:1fr;width:100%;min-width:0}
  .mj-ui-searchbar>.mj-ui-button{width:100%}
}

/* 5.10.411 / UI API 1.9.2 — champ avec action associée.
   Pour formulaires compacts du type e-mail + Ajouter, code + Vérifier, etc. */
.mj-ui-field-action{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--mj-ui-space-sm);
  align-items:end;
}
.mj-ui-field-action>.mj-ui-field{
  min-width:0;
  margin:0;
}
.mj-ui-field-action>.mj-ui-button{
  min-height:44px;
  height:44px;
  margin:0;
  align-self:end;
  white-space:nowrap;
}
.mj-ui-field-action .mj-ui-input{
  min-height:44px;
  height:44px;
  box-sizing:border-box;
}
@media(max-width:700px){
  .mj-ui-field-action{
    grid-template-columns:1fr;
  }
  .mj-ui-field-action>.mj-ui-button{
    width:100%;
  }
}