/* ----- onyx BEGIN ----- */

/* ============================================================
   ONYX MODAL
   ============================================================ */

/* --- Keyframes --- */
@keyframes onyx-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes onyx-backdrop-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes onyx-panel-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes onyx-panel-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }
}

/* --- Backdrop --- */
.onyx-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* 60px = hauteur headerbar (50px) + 10px de marge */
    padding: 60px 1.5rem 1.5rem;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: onyx-backdrop-in 0.2s ease-out both;
}
.onyx-modal-backdrop--closing {
    animation: onyx-backdrop-out 0.18s ease-in both;
}

/* --- Panel --- */
.onyx-modal-panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    /* 60px (headerbar) + 1.5rem (padding bas backdrop) + 1rem de marge */
    max-height: calc(100vh - 60px - 2.5rem);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, .07),
        0 20px 60px -8px rgba(0, 0, 0, .18),
        0 0 0 1px rgba(0, 0, 0, .05);
    animation: onyx-panel-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    overflow: visible;
}
.onyx-modal-panel--closing {
    animation: onyx-panel-out 0.18s cubic-bezier(0.4, 0, 1, 1) both;
}

/*
 * Usage hybride : panneau Onyx dans une modale Bootstrap native (.modal > .modal-dialog).
 * Bootstrap met pointer-events: none sur .modal-dialog et compte sur .modal-content pour
 * les réactiver ; quand .onyx-modal-panel remplace .modal-content, tout le contenu devient
 * incliquable sans cette règle (cf. crm/tool/tabcontent/times/dash.blade.php).
 */
.modal-dialog .onyx-modal-panel {
    pointer-events: auto;
}

/* Tailles */
.onyx-modal-panel.modal-sm  { max-width: 380px; }
.onyx-modal-panel.modal-md  { max-width: 640px; }
.onyx-modal-panel.modal-lg  { max-width: 800px; }
.onyx-modal-panel.modal-xl  { max-width: 1100px; }
.onyx-modal-panel.modal-xxl { max-width: 1380px; }

/* Neutraliser les shadow Bootstrap éventuellement passés en classe size */
.onyx-modal-panel.shadow-sm,
.onyx-modal-panel.shadow,
.onyx-modal-panel.shadow-md,
.onyx-modal-panel.shadow-lg,
.onyx-modal-panel.shadow-xl {
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, .07),
        0 20px 60px -8px rgba(0, 0, 0, .18),
        0 0 0 1px rgba(0, 0, 0, .05) !important;
}

/* --- Header --- */
.onyx-modal-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.125rem 1.25rem 1rem;
    flex-shrink: 0;
}

.onyx-modal-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: .9rem;
    flex-shrink: 0;
}

.onyx-modal-title {
    flex: 1;
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.35;
}

.onyx-modal-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: #9ca3af;
    font-size: .85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    margin-left: auto;
}
.onyx-modal-close-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

/* --- Divider --- */
.onyx-modal-divider {
    height: 1px;
    background: #f1f5f9;
    flex-shrink: 0;
}

/* --- Body --- */
.onyx-modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.25rem;
    min-height: 180px;
}

/* --- Footer --- */
.onyx-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    padding: .875rem 1.25rem;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
}

/* --- Staggered reveal for modal children --- */
@keyframes onyx-modal-reveal {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.onyx-modal-panel > .onyx-modal-header       { animation: onyx-modal-reveal .3s cubic-bezier(.16,1,.3,1) .05s both; }
.onyx-modal-panel > .onyx-modal-header + .onyx-modal-divider { animation: onyx-modal-reveal .3s cubic-bezier(.16,1,.3,1) .1s both; }
.onyx-modal-panel > .onyx-modal-body          { animation: onyx-modal-reveal .3s cubic-bezier(.16,1,.3,1) .15s both; }
.onyx-modal-panel > .onyx-modal-body + .onyx-modal-divider { animation: onyx-modal-reveal .3s cubic-bezier(.16,1,.3,1) .2s both; }
.onyx-modal-panel > .onyx-modal-footer        { animation: onyx-modal-reveal .3s cubic-bezier(.16,1,.3,1) .25s both; }

/* --- Loader overlay --- */
.onyx-modal-loader-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
    border-radius: 14px;
    z-index: 10;
}

/* --- [x-cloak] reset --- */
[x-cloak] { display: none !important; }

/* ============================================================ */

.onyx-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    font-size: 0.775rem;
    font-weight: 500 !important;
    border-radius: 0.375rem;
    color: white;
    line-height: 1.2;
    border: 1px solid transparent;
}

.onyx-badge-xs {
    padding: 0.2rem 0.3rem !important;
    font-size: 0.575rem !important;
}

.onyx-badge-sm {
    padding: 0.25rem 0.4rem !important;
    font-size: 0.675rem !important;
}

.onyx-badge-md {
    padding: 0.25rem 0.6rem !important;
    font-size: 0.775rem !important;
}

.onyx-badge-lg {
    padding: 0.25rem 0.8rem !important;
    font-size: 0.875rem !important;
}

.onyx-badge-xl {
    padding: 0.25rem 0.8rem !important;
    font-size: 1rem !important;
}

.onyx-badge-zinc {
    background-color: #f1f1f2;
    color: #3f3f47;
    border-color: #d4d4d6;
}

.onyx-badge-dark {
    background-color: #1f2937;
    color: #f3f4f6;
    border-color: #374151;
}

.onyx-badge-red {
    background-color: #ffe0e1;
    color: #c10007;
    border-color: #f5b8ba;
}

.onyx-badge-orange {
    background-color: #ffe7cd;
    color: #ca3500;
    border-color: #f5cba5;
}

.onyx-badge-amber {
    background-color: #ffeebf;
    color: #c64d00;
    border-color: #f2d88f;
}

.onyx-badge-yellow {
    background-color: #fef1bf;
    color: #894b00;
    border-color: #ecd68d;
}

.onyx-badge-lemon {
    background-color: #ffeb3b;
    color: #4e3300;
    border-color: #f0c419;
}

.onyx-badge-lime {
    background-color: #e6f9bf;
    color: #3c6300;
    border-color: #c9e7a0;
}

.onyx-badge-green {
    background-color: #cdf9e3;
    color: #016630;
    border-color: #a3eac8;
}

.onyx-badge-dark-green {
    background-color: #a8f0d1;
    color: #047857;
    border-color: #7ee2b4;
}

.onyx-badge-emerald {
    background-color: #ccf6e9;
    color: #006045;
    border-color: #a1e3d0;
}

.onyx-badge-teal {
    background-color: #ccf7f2;
    color: #005f5a;
    border-color: #9fe5df;
}

.onyx-badge-cyan {
    background-color: #ccf6fd;
    color: #005f78;
    border-color: #a0e5f4;
}

.onyx-badge-sky {
    background-color: #ccf2ff;
    color: #00598a;
    border-color: #a0dbf5;
}

.onyx-badge-blue {
    background-color: #dcecff;
    color: #193cb8;
    border-color: #bad9f8;
}

.onyx-badge-dark-blue {
    background-color: #a3beff;
    color: #2d47b9;
    border-color: #aebef9;
}

.onyx-badge-indigo {
    background-color: #e5e7ff;
    color: #432dd7;
    border-color: #c8ccf5;
}

.onyx-badge-violet {
    background-color: #ede6ff;
    color: #7008e7;
    border-color: #d2c6f3;
}

.onyx-badge-purple {
    background-color: #f3e4ff;
    color: #8200db;
    border-color: #dabcf5;
}

.onyx-badge-fuchsia {
    background-color: #fbe1ff;
    color: #a800b7;
    border-color: #eec0f0;
}

.onyx-badge-pink {
    background-color: #fee0f0;
    color: #c6005c;
    border-color: #f6b8d6;
}

.onyx-badge-rose {
    background-color: #ffe0e5;
    color: #c70036;
    border-color: #f7b6be;
}

.onyx-badge-transparent {
    background-color: transparent;
    color: #6b7280;
    border-color: #d1d5db;
}

.onyx-callout {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid transparent;
    background-color: #f9f9f9;
}

.onyx-callout-icon {
    font-size: 1.2rem;
    color: inherit;
}

.onyx-callout-text {
    color: inherit;
}

.onyx-zinc {
    background-color: #fafafa;
    color: #3f3f47;
    border-color: #e4e4e7;
}

.onyx-dark {
    background-color: #1f2937;
    color: #f3f4f6;
    border-color: #374151;
}

.onyx-red {
    background-color: #fef2f2;
    color: #c10007;
    border-color: #ffc9c9;
}

.onyx-orange {
    background-color: #fff7ed;
    color: #ca3500;
    border-color: #ffd6a7;
}

.onyx-amber {
    background-color: #fffbeb;
    color: #c64d00;
    border-color: #ffb900;
}

.onyx-yellow {
    background-color: #fffbf0;
    color: #dd9600;
    border-color: #fdc700;
}

.onyx-lime {
    background-color: #f7fee7;
    color: #598916;
    border-color: #9ae600;
}

.onyx-green {
    background-color: #f0fdf4;
    color: #00a63e;
    border-color: #7bf1a7;
}

.onyx-dark-green {
    background-color: #d1fae5;
    color: #047857;
    border-color: #86efac;
}

.onyx-emerald {
    background-color: #ecfdf5;
    color: #009b6b;
    border-color: #a4f4cf;
}

.onyx-teal {
    background-color: #f0fdfa;
    color: #089889;
    border-color: #96f7e4;
}

.onyx-cyan {
    background-color: #ecfeff;
    color: #0092bf;
    border-color: #a2f4fd;
}

.onyx-sky {
    background-color: #ccf2ff;
    color: #00598a;
    border-color: #a0dbf5;
}

.onyx-blue {
    background-color: #f0f9ff;
    color: #0f8dd2;
    border-color: #b8e6fe;
}

.onyx-indigo {
    background-color: #eff6ff;
    color: #155ffc;
    border-color: #bedbff;
}

.onyx-violet {
    background-color: #eef2ff;
    color: #4f39f7;
    border-color: #ddd6ff;
}

.onyx-purple {
    background-color: #faf5ff;
    color: #6e11b7;
    border-color: #dab2ff;
}

.onyx-fuchsia {
    background-color: #fdf4ff;
    color: #c800de;
    border-color: #f6cfff;
}

.onyx-pink {
    background-color: #fdf2f8;
    color: #ec2a76;
    border-color: #fccee8;
}

.onyx-rose {
    background-color: #fff1f2;
    color: #ec003f;
    border-color: #ffccd3;
}

.onyx-transparent {
    background-color: transparent;
    color: #6b7280;
    border-color: #d1d5db;
}

/* ----- onyx Skeleton ----- */

.onyx-skeleton {
    background: linear-gradient(90deg, #edf2f7 25%, #e2e8f0 50%, #edf2f7 75%);
    background-size: 200% 100%;
    border-radius: .5rem;
    animation: onyx-shimmer 1.5s ease-in-out infinite;
}

@keyframes onyx-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ----- onyx Stat Card ----- */

.onyx-stat-card {
    position: relative;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: .875rem 1rem;
    height: 100%;
    transition: border-color .2s, box-shadow .2s;
    overflow: hidden;
}

/* Variante compacte : icône + libellé + valeur sur une seule ligne (compteurs simples).
   La card s'ajuste à son contenu (flex-wrap parent) → aucun libellé tronqué. */
.onyx-stat-card--compact {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    flex: 0 1 auto;
    height: auto;
}

.onyx-stat-card--compact .onyx-stat-card-icon {
    width: 1.875rem;
    height: 1.875rem;
    font-size: .8rem;
}

.onyx-stat-card--compact .onyx-stat-card-title {
    text-transform: none;
    font-size: .8125rem;
    letter-spacing: 0;
    white-space: nowrap;
}

.onyx-stat-card--compact .onyx-stat-card-value {
    font-size: .875rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
    margin-left: .375rem;
    line-height: 1;
    white-space: nowrap;
}

.onyx-stat-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

.onyx-stat-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    font-size: .85rem;
    flex-shrink: 0;
}

.onyx-stat-card-icon.icon-blue {
    background: #eff6ff;
    color: #3b82f6;
}

.onyx-stat-card-icon.icon-green {
    background: #f0fdf4;
    color: #22c55e;
}

.onyx-stat-card-icon.icon-amber {
    background: #fffbeb;
    color: #f59e0b;
}

.onyx-stat-card-icon.icon-purple {
    background: #faf5ff;
    color: #a855f7;
}

.onyx-stat-card-icon.icon-cyan {
    background: #ecfeff;
    color: #06b6d4;
}

.onyx-stat-card-icon.icon-red {
    background: #fef2f2;
    color: #ef4444;
}

.onyx-stat-card-icon.icon-indigo {
    background: #eef2ff;
    color: #6366f1;
}

.onyx-stat-card-icon.icon-primary {
    background: #eff6ff;
    color: #3b82f6;
}

.onyx-stat-card-icon.icon-success {
    background: #f0fdf4;
    color: #22c55e;
}

.onyx-stat-card-icon.icon-warning {
    background: #fffbeb;
    color: #f59e0b;
}

.onyx-stat-card-icon.icon-info {
    background: #ecfeff;
    color: #06b6d4;
}

.onyx-stat-card-icon.icon-sky {
    background: #f0f9ff;
    color: #0ea5e9;
}

.onyx-stat-card-icon.icon-orange {
    background: #fff7ed;
    color: #f97316;
}

.onyx-stat-card-icon.icon-indigo {
    background: #eef2ff;
    color: #6366f1;
}

.onyx-stat-card-icon.icon-violet {
    background: #f5f3ff;
    color: #8b5cf6;
}

.onyx-stat-card-icon.icon-zinc {
    background: #f4f4f5;
    color: #71717a;
}

.onyx-stat-card-title {
    font-size: .775rem;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.onyx-stat-card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: .25rem 0 .125rem;
}

.onyx-stat-card-trend {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    font-weight: 500;
    padding: .125rem .5rem;
    border-radius: 1rem;
}

.onyx-stat-card-trend.trend-up {
    background: #f0fdf4;
    color: #16a34a;
}

.onyx-stat-card-trend.trend-down {
    background: #fef2f2;
    color: #dc2626;
}

.onyx-stat-card-trend-label {
    color: #9ca3af;
    font-weight: 400;
    margin-left: .125rem;
}

.onyx-stat-card-footer {
    margin-top: .625rem;
    padding-top: .5rem;
    border-top: 1px solid #f3f4f6;
}

.onyx-stat-card-subtitle {
    font-size: .75rem;
    color: #6b7280;
    margin-top: .125rem;
}

/* ----- onyx Panel ----- */

.onyx-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    overflow: visible;
    transition: border-color .2s, box-shadow .2s;
}

.onyx-panel:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

.onyx-panel-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .875rem 1.25rem;
    font-size: .8rem;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-radius: .75rem .75rem 0 0;
    background: #fff;
}

.onyx-panel-header i {
    font-size: .85rem;
    opacity: .7;
}

.onyx-panel-header-titles {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.onyx-panel-subtitle {
    font-size: .7rem;
    font-weight: 400;
    color: #9ca3af;
    text-transform: none;
    letter-spacing: 0;
}

.onyx-panel-body {
    padding: 1.25rem;
}

.onyx-panel-body.no-padding {
    padding: 0;
}

/* Panel compact — for dense form pages */
.wiki-create-form .onyx-panel,
.wiki-update-form .onyx-panel,
.wiki-schema-update-form .onyx-panel,
.generic-form-panel {
    height: auto !important;
    overflow: visible;
}

.wiki-create-form .onyx-panel-body,
.wiki-update-form .onyx-panel-body,
.wiki-schema-update-form .onyx-panel-body,
.generic-form-panel .onyx-panel-body {
    padding: 1rem .75rem .5rem;
}

.wiki-create-form .onyx-panel-header,
.wiki-update-form .onyx-panel-header,
.wiki-schema-update-form .onyx-panel-header {
    padding: .5rem 1rem;
    font-size: .75rem;
}

/* Panel compact — news forms */
.news-create-form .onyx-panel,
.news-update-form .onyx-panel {
    height: auto !important;
    overflow: visible;
}

.news-create-form .onyx-panel-body,
.news-update-form .onyx-panel-body {
    padding: .75rem 1rem;
}

.news-create-form .onyx-panel-header,
.news-update-form .onyx-panel-header {
    padding: .5rem 1rem;
    font-size: .75rem;
}

/* Titres de section dans les forms news */
.news-create-form .onyx-form-label.fw-semibold,
.news-update-form .onyx-form-label.fw-semibold {
    display: block;
    margin-top: .75rem;
    margin-bottom: .1rem;
    font-size: .8rem;
}
.news-create-form .onyx-panel-body > .onyx-form-label.fw-semibold:first-child,
.news-update-form .onyx-panel-body > .onyx-form-label.fw-semibold:first-child {
    margin-top: 0;
}

/* Carte CPS update form */
.sante-update-cps-form .onyx-panel {
    height: auto !important;
    overflow: visible;
}

.sante-update-cps-form .onyx-panel-body {
    padding: .75rem 1rem;
}

.sante-update-cps-form .onyx-form-label.fw-semibold {
    display: block;
    margin-top: .75rem;
    margin-bottom: .1rem;
    font-size: .8rem;
}

.sante-update-cps-form .onyx-panel-body > .onyx-form-label.fw-semibold:first-child {
    margin-top: 0;
}

/* Addin-menu buttons (sidebar générique + news) → Onyx style */
.news-sidebar-actions a,
.generic-sidebar-actions a {
    display: block;
    text-decoration: none;
}
.news-sidebar-actions .btn.btn-secondary,
.generic-sidebar-actions .btn.btn-secondary {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .75rem;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--onyx-radius, .375rem);
    border: 1px solid var(--onyx-border, #d1d5db);
    background: var(--onyx-bg-card, #fff);
    color: var(--onyx-text, #374151);
    cursor: pointer;
    margin-bottom: .2rem;
    width: fit-content;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.news-sidebar-actions .btn.btn-secondary i,
.generic-sidebar-actions .btn.btn-secondary i {
    flex-shrink: 0;
    font-size: .68rem;
    opacity: .7;
}
.news-sidebar-actions .btn.btn-secondary:hover,
.generic-sidebar-actions .btn.btn-secondary:hover {
    background: var(--onyx-bg-hover, #f3f4f6);
    border-color: var(--onyx-border-hover, #9ca3af);
    color: var(--onyx-text, #374151);
}

/* ── hook-form-content : overrides pour HTML généré server-side ── */
.hook-form-content .form-group {
    margin-bottom: .75rem;
}
.hook-form-content label {
    font-size: .885rem;
    font-weight: 500;
    color: var(--onyx-text, #374151);
    margin-bottom: .25rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
/* Bouton admin "Param" (édition champ) — icône seule, inline avec le label */
.hook-form-content .btn.btn-outline-danger.btn-xs {
    display: inline-flex;
    align-items: center;
    padding: 2px 4px;
    border: none;
    background: transparent;
    color: var(--onyx-text-muted, #9ca3af);
    font-size: .75rem;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
    opacity: .5;
    transition: opacity .15s, color .15s;
}
.hook-form-content .btn.btn-outline-danger.btn-xs:hover {
    opacity: 1;
    color: #f97316;
    border: none;
    background: transparent;
    box-shadow: none;
}
.hook-form-content .btn.btn-outline-danger.btn-xs span:not([class*="label"]) {
    display: none;
}
.hook-form-content .form-control,
.hook-form-content input[type="text"],
.hook-form-content input[type="email"],
.hook-form-content input[type="number"],
.hook-form-content input[type="date"],
.hook-form-content input[type="password"],
.hook-form-content textarea,
.hook-form-content select {
    font-size: .900rem;
    border-radius: var(--onyx-radius, .375rem);
    border-color: var(--onyx-border, #d1d5db);
    padding: .35rem .65rem;
    color: var(--onyx-text, #374151);
    background: var(--onyx-bg-input, #fff);
    transition: border-color .15s;
}
.hook-form-content .form-control:focus,
.hook-form-content input:focus,
.hook-form-content textarea:focus,
.hook-form-content select:focus {
    border-color: var(--onyx-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
    outline: none;
}
/* Champs en lecture seule dans les formulaires hook */
.hook-form-content .form-control[readonly],
.hook-form-content input[readonly],
.hook-form-content textarea[readonly] {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    opacity: .75;
}
/* Bouton submit généré */
.hook-form-content .submitButton,
.hook-form-content button[type="submit"],
.hook-form-content input[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem 1rem;
    font-size: .8rem;
    font-weight: 500;
    border-radius: var(--onyx-radius, .375rem);
    border: none;
    background: var(--onyx-primary, #3b82f6);
    color: #fff;
    cursor: pointer;
    transition: background .15s;
}
.hook-form-content .submitButton:hover,
.hook-form-content button[type="submit"]:hover,
.hook-form-content input[type="submit"]:hover {
    background: var(--onyx-primary-dark, #2563eb);
}
/* Autres boutons dans le form généré */
.hook-form-content .btn:not(.submitButton) {
    font-size: .8rem;
    border-radius: var(--onyx-radius, .375rem);
    padding: .35rem .75rem;
}

/* Arbo tree select */
.arbo-tree-select {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.arbo-tree-select ul {
    list-style: none;
    padding-left: 1.25rem;
    margin: 0;
}

.arbo-tree-item:hover {
    background: #f3f4f6;
}

.arbo-tree-item-selected {
    background: #dbeafe !important;
}

.arbo-tree-item-selected .arbo-tree-label {
    font-weight: 600;
}

.arbo-tree-toggle {
    background: none;
    border: none;
    padding: 0;
    width: 1rem;
    text-align: center;
    cursor: pointer;
    color: #6b7280;
    font-size: .6rem;
    flex-shrink: 0;
}

.arbo-tree-toggle:hover {
    color: #111827;
}

.arbo-tree-toggle-spacer {
    display: inline-block;
    width: 1rem;
    flex-shrink: 0;
}

.arbo-tree-label {
    cursor: pointer;
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: 1;
}

.arbo-tree-label i {
    font-size: .75rem;
}

/* ----- arbo drag-drop (mode gestion) ----- */
.arbo-drag-handle {
    cursor: grab;
    padding: 0 .15rem;
    line-height: 1;
}

.arbo-drag-handle:active {
    cursor: grabbing;
}

.arbo-manage .arbo-sortable:empty {
    min-height: 10px;
    border: 1px dashed transparent;
    border-radius: .25rem;
}

.arbo-manage .arbo-sortable {
    border-radius: .25rem;
}

/* États SortableJS pendant le drag */
.sortable-ghost .arbo-tree-item {
    opacity: .4;
    background: var(--onyx-primary-50, #eef2ff);
}

.sortable-drag .arbo-tree-item {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    border-radius: .25rem;
}

.arbo-manage .arbo-sortable.sortable-over,
.arbo-manage .arbo-sortable:empty.sortable-over {
    border-color: var(--onyx-primary-400, #818cf8);
    background: var(--onyx-primary-50, #eef2ff);
}

/* Panel flex support — when panel is used as a flex container */
.onyx-panel.d-flex > .onyx-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: inherit;
    overflow: hidden;
}

/* ----- onyx Widget Card (widget manager) ----- */
/* Colonne flex + corps extensible : permet à la barre d'actions de la carte de
   se coller en bas (`mt-auto`). Sans ça, deux cartes voisines dont les boutons
   ne se replient pas sur le même nombre de lignes affichent leurs actions à des
   hauteurs différentes (les panels étant étirés par `h-100`). */
.onyx-widget-card {
    transition: box-shadow .2s;
    display: flex;
    flex-direction: column;
}

.onyx-widget-card > .onyx-panel-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.onyx-widget-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.onyx-widget-card .onyx-panel-header {
    padding: .65rem 1rem;
    gap: .5rem;
    background: #f9fafb;
}

.onyx-widget-card .drag-handle {
    cursor: grab;
    color: #d1d5db;
    font-size: .8rem;
    transition: color .15s;
    flex-shrink: 0;
}

.onyx-widget-card .drag-handle:hover {
    color: #6b7280;
}

.onyx-widget-card .widget-icon-wrap {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: .4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    flex-shrink: 0;
    font-size: .8rem;
}

.onyx-widget-card .widget-title {
    font-size: .82rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.onyx-widget-card .widget-subtitle {
    font-size: .7rem;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.onyx-widget-card .onyx-panel-body {
    padding: .75rem 1rem;
}

.onyx-widget-card-footer {
    padding: .4rem 1rem;
    border-top: 1px solid #f3f4f6;
    font-size: .72rem;
    color: #9ca3af;
    background: #fafafa;
    border-radius: 0 0 calc(.75rem - 1px) calc(.75rem - 1px);
}

.onyx-widget-sortable-ghost {
    opacity: .35;
    background: #eff6ff;
    border: 2px dashed #93c5fd;
}

/* ----- onyx Table ----- */

.onyx-table-wrap {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    width: 100%;
}

/* Scroll shadows : indique visuellement qu'il y a du contenu à droite/gauche */
.onyx-table-wrap .table-responsive {
    background:
        linear-gradient(to right,  #fff 20%, transparent) left  center / 40px 100% no-repeat local,
        linear-gradient(to left,   #fff 20%, transparent) right center / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0%   50%, rgba(0,0,0,.10), transparent) left  center / 12px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.10), transparent) right center / 12px 100% no-repeat scroll;
    background-color: #fff;
}

/* Colonne sticky sur mobile : la 1re colonne reste visible au scroll */
@media (max-width: 767.98px) {
    .onyx-table thead th:first-child,
    .onyx-table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: inherit;
    }
    .onyx-table thead th:first-child {
        background: #f9fafb;
        box-shadow: 2px 0 6px rgba(0,0,0,.07);
    }
    .onyx-table tbody td:first-child {
        background: #fff;
        box-shadow: 2px 0 6px rgba(0,0,0,.05);
    }
    .onyx-table tbody tr:hover td:first-child {
        background: #f9fafb;
    }
}

/* Padding compact + police réduite sur petit écran */
@media (max-width: 575.98px) {
    .onyx-table thead th {
        padding: .5rem .65rem;
        font-size: .7rem;
    }
    .onyx-table tbody td {
        padding: .5rem .65rem;
        font-size: .8rem;
    }
}

.onyx-table-header {
    display: flex;
    align-items: center;
    padding: .5rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    background: #fff;
}

.onyx-table-title {
    font-size: .85rem;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.onyx-table-count {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bg-primary, #1d4ed8);
    background: color-mix(in srgb, var(--bg-primary, #1d4ed8) 10%, white);
    border: 1px solid color-mix(in srgb, var(--bg-primary, #1d4ed8) 25%, white);
    border-radius: .5rem;
    padding: .35rem .75rem;
    white-space: nowrap;
    line-height: 1.5;
}

.onyx-table-footer-wrap {
    padding: .625rem 1rem;
    border-top: 1px solid #f3f4f6;
    background: #fafafa;
}

.onyx-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .825rem;
}

.onyx-table thead th {
    background: #f9fafb;
    padding: .75rem 1rem;
    font-size: .8rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
    user-select: none;
}

.onyx-table thead th.is-sortable {
    cursor: pointer;
}

.onyx-table thead th.is-sortable:hover {
    background: #f3f4f6;
    color: #374151;
}

.onyx-table thead th.is-sorted {
    color: var(--bg-primary, #6b7280);
    background: color-mix(in srgb, var(--bg-primary, #6b7280) 6%, #f9fafb);
}

.onyx-table-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    width: 100%;
}

.onyx-table-sort-icon {
    font-size: .6rem;
    opacity: .5;
    transition: opacity .1s, color .1s;
}

.onyx-table thead th.is-sorted .onyx-table-sort-icon {
    opacity: 1;
    color: var(--bg-primary, #6b7280);
}

.onyx-table tbody td {
    padding: .625rem 1rem;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.onyx-table tbody tr:last-child td {
    border-bottom: none;
}

.onyx-table tbody tr:hover td {
    background: #f9fafb;
}

.onyx-table tfoot td {
    padding: .5rem 1rem;
    font-size: .775rem;
    color: #6b7280;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}

.onyx-table .cell-primary {
    font-weight: 600;
    color: #111827;
}

.onyx-table .cell-mono {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: .775rem;
}

.onyx-table .cell-muted {
    color: #9ca3af;
    font-size: .775rem;
}

.onyx-table .cell-actions {
    white-space: nowrap;
    width: 1%;
}

/* ----- onyx Tabs ----- */

.onyx-tabs {
    display: flex;
    flex-wrap: wrap;
    background: var(--onyx-tabs-bg, #f3f4f6);
    border-radius: .5rem;
    padding: .1875rem;
    gap: .125rem;
    width: fit-content;
}

.onyx-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4375rem 1rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-color, #6b7280);
    background: transparent;
    border: none;
    border-radius: .375rem;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}

.onyx-tab-btn:hover {
    color: var(--text-color, #374151);
    background: var(--onyx-tab-hover-bg, rgba(255, 255, 255, .6));
}

.onyx-tab-btn.active {
    background: var(--onyx-tab-active-bg, #fff) !important;
    color: var(--text-color, #111827) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.onyx-tab-btn.disabled {
    opacity: .5;
    cursor: not-allowed;
}

.onyx-tab-btn.disabled:hover {
    color: var(--text-color, #6b7280);
    background: transparent;
}

.onyx-tab-btn i {
    font-size: .75rem;
}

.onyx-tab-content {
    padding-top: .75rem;
}
.onyx-tab-content > .tab-pane {
    display: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
}
.onyx-tab-content > .tab-pane.active {
    display: block;
}
.onyx-tab-content > .tab-pane.show.active {
    opacity: 1;
    /* `none` et non `translateY(0)` : un transform actif ferait du tab-pane
       le containing block des descendants en position fixed (modales clippées) */
    transform: none;
}

.onyx-tab-content .onyx-tabs {
    background: var(--onyx-tabs-bg, #e9eaec);
    width: fit-content;
    margin-top: .25rem;
}
.onyx-tab-content .onyx-tab-btn {
    font-size: .8rem;
    padding: .3rem .75rem;
}
.onyx-tab-content .onyx-tab-btn.active {
    background: var(--onyx-tab-active-bg, #fff) !important;
}

/* ----- onyx Period Selector ----- */

.onyx-period-selector {
    display: inline-flex;
    background: #f3f4f6;
    border-radius: .5rem;
    padding: .1875rem;
    gap: .125rem;
}

.onyx-period-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .3125rem .75rem;
    font-size: .75rem;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: none;
    border-radius: .375rem;
    cursor: pointer;
    transition: all .15s;
    line-height: 1.4;
}

.onyx-period-btn:hover {
    color: #374151;
    background: rgba(255, 255, 255, .6);
}

.onyx-period-btn.active {
    background: #fff;
    color: #111827;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    font-weight: 600;
}

/* (moved to "onyx Select" section below) */

/* ----- onyx Empty State ----- */

.onyx-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #9ca3af;
    font-size: .825rem;
}

.onyx-empty i {
    font-size: 1.5rem;
    margin-bottom: .5rem;
    display: block;
    opacity: .5;
}

/* ----- onyx Alert ----- */

.onyx-alert {
    border-radius: .5rem;
    padding: .75rem 1rem;
    font-size: .85rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.onyx-alert-close {
    background: none;
    border: none;
    color: inherit;
    opacity: .5;
    cursor: pointer;
    padding: 0 .25rem;
    font-size: .75rem;
    transition: opacity .15s;
}

.onyx-alert-close:hover {
    opacity: 1;
}

/* ----- onyx Button ----- */

.onyx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: .5rem;
    cursor: pointer;
    transition: all .15s ease;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
}

.onyx-btn:disabled, .onyx-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.onyx-btn-xs {
    padding: .1rem .35rem;
    font-size: .70rem;
    border-radius: .25rem;
    min-height: 1.25rem;
    line-height: 1.2;
}

.onyx-btn-sm {
    padding: .3125rem .75rem;
    font-size: .80rem;
    border-radius: .375rem;
    min-height: 1.75rem;
}

.onyx-btn-md {
    padding: .4375rem 1rem;
    font-size: .8125rem;
    min-height: 2.125rem;
}

.onyx-btn-lg {
    padding: .5625rem 1.25rem;
    font-size: .875rem;
}

.onyx-btn-blue {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}

.onyx-btn-blue:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.onyx-btn-indigo {
    background: #6366f1;
    color: #fff;
    border-color: #6366f1;
}

.onyx-btn-indigo:hover {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
}

.onyx-btn-green {
    background: #22c55e;
    color: #fff;
    border-color: #22c55e;
}

.onyx-btn-green:hover {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.onyx-btn-red {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

.onyx-btn-red:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.onyx-btn-amber {
    background: #f59e0b;
    color: #fff;
    border-color: #f59e0b;
}

.onyx-btn-amber:hover {
    background: #d97706;
    border-color: #d97706;
    color: #fff;
}

.onyx-btn-cyan {
    background: #06b6d4;
    color: #fff;
    border-color: #06b6d4;
}

.onyx-btn-cyan:hover {
    background: #0891b2;
    border-color: #0891b2;
    color: #fff;
}

.onyx-btn-purple {
    background: #a855f7;
    color: #fff;
    border-color: #a855f7;
}

.onyx-btn-purple:hover {
    background: #9333ea;
    border-color: #9333ea;
    color: #fff;
}

/* Manquait alors que color="violet" est utilisé (bouton « Ajouter avec IA » contrats & CRM). */
.onyx-btn-violet {
    background: #8b5cf6;
    color: #fff;
    border-color: #8b5cf6;
}

.onyx-btn-violet:hover {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}

.onyx-btn-outline-violet {
    background: transparent;
    color: #8b5cf6;
    border-color: #8b5cf6;
}

.onyx-btn-outline-violet:hover {
    background: #8b5cf6;
    color: #fff;
}

.onyx-btn-pink {
    background: #ec4899;
    color: #fff;
    border-color: #ec4899;
}

.onyx-btn-pink:hover {
    background: #db2777;
    border-color: #db2777;
    color: #fff;
}

.onyx-btn-dark {
    background: #1f2937;
    color: #fff;
    border-color: #1f2937;
}

.onyx-btn-dark:hover {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

.onyx-btn-zinc {
    background: #f3f4f6;
    color: #374151;
    border-color: #e5e7eb;
}

.onyx-btn-zinc:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
    color: #1f2937;
}

/* Bouton icône « fantôme » (actions de table, etc.) : pas de fond au repos, juste
   un survol discret — jusqu'ici non défini, color="transparent" retombait sur le
   style natif du navigateur (bouton gris terne, invisible en thème clair mais très
   visible en thème sombre où rien ne le recolore). */
.onyx-btn-transparent {
    background: transparent;
    color: #6b7280;
    border-color: transparent;
}

.onyx-btn-transparent:hover {
    background: #f3f4f6;
    color: #374151;
}

.onyx-btn-teal {
    background: #0d9488;
    color: #fff;
    border-color: #0d9488;
}

.onyx-btn-teal:hover {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.onyx-btn-outline-blue {
    background: transparent;
    color: #3b82f6;
    border-color: #3b82f6;
}

.onyx-btn-outline-blue:hover {
    background: #3b82f6;
    color: #fff;
}

.onyx-btn-outline-indigo {
    background: transparent;
    color: #6366f1;
    border-color: #6366f1;
}

.onyx-btn-outline-indigo:hover {
    background: #6366f1;
    color: #fff;
}

.onyx-btn-outline-green {
    background: transparent;
    color: #22c55e;
    border-color: #22c55e;
}

.onyx-btn-outline-green:hover {
    background: #22c55e;
    color: #fff;
}

.onyx-btn-outline-cyan {
    background: transparent;
    color: #06b6d4;
    border-color: #06b6d4;
}

.onyx-btn-outline-cyan:hover {
    background: #06b6d4;
    color: #fff;
}

.onyx-btn-outline-red {
    background: transparent;
    color: #ef4444;
    border-color: #ef4444;
}

.onyx-btn-outline-red:hover {
    background: #ef4444;
    color: #fff;
}

/* Bouton admin param dans DynamicForm — ghost, icône seule */
.dynform-param-btn.onyx-btn {
    padding: 2px 4px;
    border: none;
    background: transparent;
    color: var(--onyx-text-muted, #9ca3af);
    font-size: .75rem;
    line-height: 1;
    box-shadow: none;
    opacity: .5;
    min-width: unset;
    transition: opacity .15s, color .15s;
}
.dynform-param-btn.onyx-btn:hover {
    opacity: 1;
    color: #f97316;
    border: none;
    background: transparent;
    box-shadow: none;
}

.onyx-btn-outline-amber {
    background: transparent;
    color: #f59e0b;
    border-color: #f59e0b;
}

.onyx-btn-outline-amber:hover {
    background: #f59e0b;
    color: #fff;
}

.onyx-btn-outline-purple {
    background: transparent;
    color: #a855f7;
    border-color: #a855f7;
}

.onyx-btn-outline-purple:hover {
    background: #a855f7;
    color: #fff;
}

.onyx-btn-outline-pink {
    background: transparent;
    color: #ec4899;
    border-color: #ec4899;
}

.onyx-btn-outline-pink:hover {
    background: #ec4899;
    color: #fff;
}

.onyx-btn-outline-teal {
    background: transparent;
    color: #0d9488;
    border-color: #0d9488;
}

.onyx-btn-outline-teal:hover {
    background: #0d9488;
    color: #fff;
}

.onyx-btn-outline-dark {
    background: transparent;
    color: #1f2937;
    border-color: #1f2937;
}

.onyx-btn-outline-dark:hover {
    background: #1f2937;
    color: #fff;
}

.onyx-btn-outline-zinc {
    background: transparent;
    color: #6b7280;
    border-color: #d1d5db;
}

.onyx-btn-outline-zinc:hover {
    background: #f3f4f6;
    color: #374151;
}

.onyx-btn-outline-gray {
    background: transparent;
    color: #6b7280;
    border-color: #d1d5db;
}

.onyx-btn-outline-gray:hover {
    background: #f3f4f6;
    color: #374151;
}

/* ----- onyx Avatar ----- */

.onyx-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    overflow: hidden;
    flex-shrink: 0;
}

/* Squircle : convention pour les organisations/entités (le rond reste celle des personnes) */
.onyx-avatar-square {
    border-radius: 22%;
}

.onyx-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.onyx-avatar-fallback {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.onyx-avatar-xs {
    width: 1.5rem;
    height: 1.5rem;
    font-size: .5rem;
}

.onyx-avatar-sm {
    width: 1.75rem;
    height: 1.75rem;
    font-size: .6rem;
}

.onyx-avatar-md {
    width: 2.25rem;
    height: 2.25rem;
    font-size: .75rem;
}

.onyx-avatar-lg {
    width: 3rem;
    height: 3rem;
    font-size: .9rem;
}

.onyx-avatar-xl {
    width: 4rem;
    height: 4rem;
    font-size: 1.1rem;
}

.onyx-avatar-xxl {
    width: 6rem;
    height: 6rem;
    font-size: 1.5rem;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.onyx-avatar-blue {
    background: #dbeafe;
    color: #2563eb;
}

.onyx-avatar-indigo {
    background: #e0e7ff;
    color: #4f46e5;
}

.onyx-avatar-green {
    background: #dcfce7;
    color: #16a34a;
}

.onyx-avatar-red {
    background: #fee2e2;
    color: #dc2626;
}

.onyx-avatar-amber {
    background: #fef3c7;
    color: #d97706;
}

.onyx-avatar-purple {
    background: #f3e8ff;
    color: #9333ea;
}

.onyx-avatar-cyan {
    background: #cffafe;
    color: #0891b2;
}

.onyx-avatar-pink {
    background: #fce7f3;
    color: #db2777;
}

.onyx-avatar-zinc {
    background: #f3f4f6;
    color: #6b7280;
}

/* ----- onyx Progress ----- */

.onyx-progress {
    position: relative;
    width: 100%;
    background: #f3f4f6;
    border-radius: 1rem;
    overflow: hidden;
}

.onyx-progress-sm {
    height: .25rem;
}

.onyx-progress-md {
    height: .5rem;
}

.onyx-progress-lg {
    height: .75rem;
}

.onyx-progress-bar {
    height: 100%;
    border-radius: 1rem;
    transition: width .4s ease;
}

.onyx-progress-blue {
    background: #3b82f6;
}

.onyx-progress-green {
    background: #22c55e;
}

.onyx-progress-red {
    background: #ef4444;
}

.onyx-progress-amber {
    background: #f59e0b;
}

.onyx-progress-indigo {
    background: #6366f1;
}

.onyx-progress-cyan {
    background: #06b6d4;
}

.onyx-progress-purple {
    background: #a855f7;
}

.onyx-progress-wrapper {
    width: 100%;
}

.onyx-progress-label {
    display: block;
    text-align: right;
    margin-top: .25rem;
    font-size: .75rem;
    font-weight: 600;
    color: #374151;
}

/* ----- onyx Empty State ----- */

.onyx-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
}

.onyx-empty-state-icon {
    margin-bottom: .75rem;
}

.onyx-empty-state-icon i {
    font-size: 2.5rem;
    color: #d1d5db;
}

.onyx-empty-state-title {
    font-size: .9rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: .25rem;
}

.onyx-empty-state-description {
    font-size: .8rem;
    color: #9ca3af;
}

/* ----- onyx Divider ----- */

.onyx-divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: .5rem 0;
}

.onyx-divider-label {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: #9ca3af;
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: .5rem 0;
}

.onyx-divider-label::before,
.onyx-divider-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* ----- onyx Toggle ----- */

.onyx-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    user-select: none;
}

.onyx-toggle-input {
    display: none;
}

.onyx-toggle-switch {
    position: relative;
    width: 2.25rem;
    height: 1.25rem;
    background: #d1d5db;
    border-radius: 1rem;
    transition: background .2s ease;
    flex-shrink: 0;
}

.onyx-toggle-switch::after {
    content: '';
    position: absolute;
    top: .125rem;
    left: .125rem;
    width: 1rem;
    height: 1rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    transition: transform .2s ease;
}

.onyx-toggle-input:checked + .onyx-toggle-blue {
    background: #3b82f6;
}

.onyx-toggle-input:checked + .onyx-toggle-green {
    background: #22c55e;
}

.onyx-toggle-input:checked + .onyx-toggle-red {
    background: #ef4444;
}

.onyx-toggle-input:checked + .onyx-toggle-indigo {
    background: #6366f1;
}

.onyx-toggle-input:checked + .onyx-toggle-amber {
    background: #d4af37;
}

/* Manquait alors que color="violet" est utilisé (toggle Import direct/IA de l'Ajout IA CRM). */
.onyx-toggle-input:checked + .onyx-toggle-violet {
    background: #8b5cf6;
}

.onyx-toggle-input:checked + .onyx-toggle-switch::after,
.onyx-toggle-input:checked + .onyx-toggle-blue::after,
.onyx-toggle-input:checked + .onyx-toggle-green::after,
.onyx-toggle-input:checked + .onyx-toggle-red::after,
.onyx-toggle-input:checked + .onyx-toggle-indigo::after,
.onyx-toggle-input:checked + .onyx-toggle-amber::after,
.onyx-toggle-input:checked + .onyx-toggle-violet::after {
    transform: translateX(1rem);
}

.onyx-toggle-input:disabled + .onyx-toggle-switch {
    opacity: .4;
    cursor: not-allowed;
}

.onyx-toggle-label {
    font-size: .8125rem;
    color: #374151;
}

/* ----- onyx Input ----- */

.onyx-input-group {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.onyx-input-label {
    font-size: .775rem;
    font-weight: 500;
    color: #374151;
}

.onyx-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.onyx-input-icon {
    position: absolute;
    left: .75rem;
    font-size: .8rem;
    color: #9ca3af;
    pointer-events: none;
}

.onyx-input {
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    color: #111827;
    line-height: 1.5;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.onyx-input::placeholder {
    color: #9ca3af;
}

.onyx-input:focus {
    outline: none;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
}

.onyx-input:disabled,
.onyx-input[readonly] {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    opacity: .75;
}

textarea.onyx-input {
    resize: none;
}

.onyx-input.has-icon {
    padding-left: 2.25rem;
}

.onyx-input-icon-right {
    position: absolute;
    right: .75rem;
    font-size: .8rem;
    pointer-events: none;
}

.onyx-input.has-icon-right {
    padding-right: 2.25rem;
}

.onyx-input-sm {
    padding: .3125rem .75rem;
    font-size: .75rem;
    min-height: 2rem;
}

.onyx-input-md {
    padding: .4375rem .75rem;
    font-size: .8125rem;
    min-height: 2.25rem;
}

.onyx-input-lg {
    padding: .5625rem 1rem;
    font-size: .875rem;
    min-height: 2.625rem;
}

.has-error .onyx-input {
    border-color: #fca5a5;
}

.has-error .onyx-input:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1);
}

.has-success .onyx-input {
    border-color: #86efac;
}

.has-success .onyx-input:focus {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .1);
}

.onyx-input-error {
    font-size: .725rem;
    color: #ef4444;
}

.onyx-input-hint {
    font-size: .725rem;
    color: #9ca3af;
}

/* ----- onyx File Upload ----- */
.onyx-file-upload {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.onyx-file-drop-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    border: 2px dashed #e5e7eb;
    border-radius: .5rem;
    background: #f9fafb;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.onyx-file-drop-zone:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}

.onyx-file-drop-zone.is-dragging {
    border-color: #3b82f6;
    background: #dbeafe;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
}

.onyx-file-drop-zone.has-file {
    border-color: #86efac;
    background: #f0fdf4;
}

.has-error .onyx-file-drop-zone {
    border-color: #fca5a5;
}

.onyx-file-prompt,
.onyx-file-selected {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    text-align: center;
}

.onyx-file-icon {
    font-size: 1.5rem;
    color: #9ca3af;
}

.onyx-file-drop-zone:hover .onyx-file-icon {
    color: #3b82f6;
}

.onyx-file-drop-zone.has-file .onyx-file-icon {
    color: #22c55e;
}

.onyx-file-text {
    font-size: .8125rem;
    font-weight: 500;
    color: #374151;
}

.onyx-file-hint {
    font-size: .725rem;
    color: #9ca3af;
}

.onyx-file-remove {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .5rem;
    border: 1px solid #fca5a5;
    border-radius: .375rem;
    background: #fff;
    color: #ef4444;
    font-size: .725rem;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.onyx-file-remove:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* ----- onyx Kbd ----- */

.onyx-kbd {
    display: inline-flex;
    align-items: center;
    padding: .125rem .375rem;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: .7rem;
    font-weight: 500;
    color: #374151;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: .25rem;
    box-shadow: 0 1px 0 #d1d5db;
    line-height: 1.4;
}

/* ----- onyx Dropdown ----- */

.onyx-dropdown {
    position: relative;
    display: inline-block;
    height: fit-content;
}

.onyx-dropdown-menu {
    position: absolute;
    top: calc(100% + .25rem);
    z-index: 1050;
    min-width: 12rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
    padding: .25rem;
}

.onyx-dropdown-header {
    padding: .375rem .75rem .5rem;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #9ca3af;
}

.onyx-dropdown-start {
    left: 0;
}

.onyx-dropdown-end {
    right: 0;
}

.onyx-dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .4375rem .75rem;
    font-size: .8125rem;
    color: #374151;
    background: none;
    border: none;
    border-radius: .375rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .1s;
    text-align: left;
}

.onyx-dropdown-item:hover {
    background: #f3f4f6;
    color: #111827;
}

.onyx-dropdown-item i {
    font-size: .85rem;
    width: 1rem;
    text-align: center;
}

.onyx-dropdown-item-danger {
    color: #ef4444;
}

.onyx-dropdown-item-danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

.onyx-dropdown-item-active {
    background: color-mix(in srgb, var(--bg-primary, #6366f1) 8%, white);
    color: var(--bg-primary, #4338ca);
    font-weight: 600;
}

.onyx-dropdown-item-active:hover {
    background: color-mix(in srgb, var(--bg-primary, #6366f1) 14%, white);
    color: var(--bg-primary, #4338ca);
}

.onyx-dropdown-divider {
    border: none;
    border-top: 1px solid #f3f4f6;
    margin: .25rem 0;
}

/* ----- onyx Description List ----- */

.onyx-dl {
    margin: 0;
}

.onyx-dl-row {
    display: flex;
    padding: .5rem 0;
    break-inside: avoid;
}

.onyx-dl-striped .onyx-dl-row:nth-child(odd) {
    background: #f9fafb;
    margin: 0 -.75rem;
    padding: .5rem .75rem;
    border-radius: .375rem;
}

.onyx-dl-label {
    flex: 0 0 40%;
    font-size: .8rem;
    font-weight: 500;
    color: #6b7280;
    margin: 0;
}

.onyx-dl-value {
    flex: 1;
    font-size: .8rem;
    color: #111827;
    margin: 0;
}

/* ----- onyx Timeline ----- */

.onyx-timeline {
    position: relative;
    padding-left: 1.75rem;
}

.onyx-timeline::before {
    content: '';
    position: absolute;
    left: .5rem;
    top: .25rem;
    bottom: .25rem;
    width: 2px;
    background: #e5e7eb;
    border-radius: 1px;
}

.onyx-timeline-item {
    position: relative;
    padding-bottom: 1.25rem;
}

.onyx-timeline-item:last-child {
    padding-bottom: 0;
}

.onyx-timeline-dot {
    position: absolute;
    left: -1.75rem;
    top: .125rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.onyx-timeline-dot i {
    font-size: .5rem;
    color: #fff;
}

.onyx-timeline-dot.dot-blue {
    background: #3b82f6;
}

.onyx-timeline-dot.dot-green {
    background: #22c55e;
}

.onyx-timeline-dot.dot-red {
    background: #ef4444;
}

.onyx-timeline-dot.dot-amber {
    background: #f59e0b;
}

.onyx-timeline-dot.dot-indigo {
    background: #6366f1;
}

.onyx-timeline-dot.dot-purple {
    background: #a855f7;
}

.onyx-timeline-dot.dot-zinc {
    background: #9ca3af;
}

.onyx-timeline-header {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
}

.onyx-timeline-title {
    font-size: .8125rem;
    font-weight: 600;
    color: #111827;
}

.onyx-timeline-date {
    font-size: .725rem;
    color: #9ca3af;
}

.onyx-timeline-description {
    font-size: .8rem;
    color: #6b7280;
    margin-top: .125rem;
}

/* ----- onyx Stepper ----- */

.onyx-stepper {
    display: flex;
    align-items: center;
}

.onyx-step {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.onyx-step-indicator {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 600;
    flex-shrink: 0;
    transition: all .2s;
}

.onyx-step-active .onyx-step-indicator {
    background: #3b82f6;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .2);
}

.onyx-step-completed .onyx-step-indicator {
    background: #22c55e;
    color: #fff;
}

.onyx-step-pending .onyx-step-indicator {
    background: #f3f4f6;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
}

.onyx-step-label {
    font-size: .775rem;
    font-weight: 500;
    white-space: nowrap;
}

.onyx-step-active .onyx-step-label {
    color: #111827;
}

.onyx-step-completed .onyx-step-label {
    color: #22c55e;
}

.onyx-step-pending .onyx-step-label {
    color: #9ca3af;
}

.onyx-step-connector {
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    margin: 0 .5rem;
    min-width: 1.5rem;
}

.onyx-step-connector-done {
    background: #22c55e;
}

/* ----- onyx Status Dot ----- */

.onyx-status {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.onyx-status-dot {
    border-radius: 50%;
    flex-shrink: 0;
}

.onyx-status-dot-sm {
    width: .375rem;
    height: .375rem;
}

.onyx-status-dot-md {
    width: .5rem;
    height: .5rem;
}

.onyx-status-dot-lg {
    width: .625rem;
    height: .625rem;
}

.onyx-status-green {
    background: #22c55e;
}

.onyx-status-red {
    background: #ef4444;
}

.onyx-status-amber {
    background: #f59e0b;
}

.onyx-status-blue {
    background: #3b82f6;
}

.onyx-status-zinc {
    background: #9ca3af;
}

.onyx-status-pulse {
    animation: onyx-pulse 2s ease-in-out infinite;
}

@keyframes onyx-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .4;
    }
}

.onyx-status-radar {
    position: relative;
}

.onyx-status-radar::before,
.onyx-status-radar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: onyx-radar 3.5s ease-out infinite;
}

.onyx-status-radar::after {
    animation-delay: 1.75s;
}

@keyframes onyx-radar {
    0% {
        transform: scale(1);
        opacity: .6;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.onyx-status-label {
    font-size: .8rem;
    color: #374151;
}

/* ----- onyx Code ----- */

.onyx-code {
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    overflow: hidden;
}

.onyx-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .375rem .75rem;
    background: #f9fafb;
    border-bottom: 1px solid #f3f4f6;
}

.onyx-code-lang {
    font-size: .675rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.onyx-code-copy {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: .125rem .375rem;
    border-radius: .25rem;
    font-size: .7rem;
    transition: all .15s;
}

.onyx-code-copy:hover {
    background: #e5e7eb;
    color: #374151;
}

.onyx-code-block {
    margin: 0;
    padding: .875rem 1rem;
    background: #1e1e2e;
    color: #cdd6f4;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: .775rem;
    line-height: 1.6;
    overflow-x: auto;
}

.onyx-code-block code {
    color: inherit;
    background: none;
    padding: 0;
}

.onyx-code-inline {
    padding: .125rem .375rem;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: .775rem;
    color: #c7254e;
    background: #f9f2f4;
    border-radius: .25rem;
}

/* ----- onyx Accordion ----- */

.onyx-accordion {
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    overflow: hidden;
}

.onyx-accordion-item + .onyx-accordion-item {
    border-top: 1px solid #f3f4f6;
}

.onyx-accordion-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .875rem 1.25rem;
    font-size: .8125rem;
    font-weight: 600;
    color: #374151;
    background: #fff;
    border: none;
    cursor: pointer;
    transition: background .15s;
    text-align: left;
}

.onyx-accordion-header:hover {
    background: #f9fafb;
}

.onyx-accordion-chevron {
    margin-left: auto;
    font-size: .65rem;
    color: #9ca3af;
    transition: transform .2s;
}

.onyx-accordion-header.collapsed .onyx-accordion-chevron {
    transform: rotate(-90deg);
}

.onyx-accordion-body {
    padding: 0 1.25rem 1rem;
    font-size: .825rem;
    color: #6b7280;
}

/* ----- onyx Spinner ----- */

.onyx-spinner-wrapper {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.onyx-spinner {
    border-radius: 50%;
    border-style: solid;
    border-color: #e5e7eb;
    animation: onyx-spin .6s linear infinite;
}

.onyx-spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

.onyx-spinner-md {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 2px;
}

.onyx-spinner-lg {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 3px;
}

.onyx-spinner-blue {
    border-top-color: #3b82f6;
}

.onyx-spinner-indigo {
    border-top-color: #6366f1;
}

.onyx-spinner-green {
    border-top-color: #22c55e;
}

.onyx-spinner-red {
    border-top-color: #ef4444;
}

.onyx-spinner-amber {
    border-top-color: #f59e0b;
}

.onyx-spinner-dark {
    border-top-color: #1f2937;
}

.onyx-spinner-label {
    font-size: .8125rem;
    color: #6b7280;
}

@keyframes onyx-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ----- onyx Page Header ----- */

.onyx-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding-top: 6px;
    margin-bottom: 1rem;
}

.onyx-page-header-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.onyx-page-header-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.onyx-page-header-title i {
    font-size: 1.1rem;
    opacity: .7;
}

.onyx-page-header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ── Onyx sidebar panel ───────────────────────────────────────── */
.onyx-sidebar-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    container-type: inline-size;
}

.onyx-sidebar-author {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .25rem .75rem;
}

.onyx-sidebar-author-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: .125rem;
}

.onyx-sidebar-author-name {
    font-weight: 600;
    font-size: .875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.onyx-sidebar-author-meta {
    font-size: .75rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

a.onyx-sidebar-author-meta:hover {
    color: #374151;
    text-decoration: underline;
}

.onyx-sidebar-divider {
    border-top: 1px solid #e5e7eb;
    margin: .25rem 0;
}

.onyx-sidebar-props {
    display: flex;
    flex-direction: column;
    padding: .25rem 0;
}

.onyx-prop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .375rem .5rem;
    border-radius: 6px;
    gap: .5rem;
    min-height: 2rem;
    transition: background .12s ease;
}

.onyx-prop-clickable {
    cursor: pointer;
}

.onyx-prop-clickable:hover {
    background-color: rgba(0, 0, 0, .05);
}

.onyx-prop-label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    color: #6b7280;
    white-space: nowrap;
    min-width: 5.5rem;
}

.onyx-prop-label i {
    font-size: .65rem;
    opacity: .7;
}

.onyx-prop-value {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

.onyx-prop-value > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.onyx-prop-arrow {
    font-size: .55rem;
    color: #9ca3af;
    flex-shrink: 0;
}

/* Carte étroite / petit écran : si la valeur déborderait du cadre, on masque
   le texte gris et on garde uniquement l'icône + le libellé (+ le chevron). */
@container (max-width: 340px) {
    .onyx-prop-value > span {
        display: none;
    }
}

.onyx-prop-empty {
    font-size: .75rem;
    color: #9ca3af;
}

.onyx-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .25rem 0;
}

/* ── Onyx sidebar — carte CTL (nouveau design) ───────────────── */

/* Identité (avatar centré + nom + email + badge statut) */
.onyx-sidebar-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .15rem;
    padding: .25rem .25rem .5rem;
}

.onyx-sidebar-avatar-wrap {
    position: relative;
    display: inline-flex;
    margin-bottom: .35rem;
}

.onyx-sidebar-identity-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font-weight: 700;
    font-size: 1rem;
    color: #1f2937;
    line-height: 1.2;
}

.onyx-sidebar-identity-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: #d1fae5;
    color: #059669;
    font-size: .68rem;
    flex-shrink: 0;
    cursor: help;
}

.onyx-sidebar-identity-mail {
    font-size: .8rem;
    color: #6b7280;
    text-decoration: none;
}

.onyx-sidebar-identity-mail:hover {
    color: #374151;
    text-decoration: underline;
}

/* Section + titre */
.onyx-sidebar-section {
    padding: .15rem 0;
}

.onyx-sidebar-section-title {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: .5rem .5rem .3rem;
}

.onyx-sidebar-section-title.is-danger {
    color: #ef4444;
}

/* Lignes d'action (texte + icône) */
.onyx-action-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .5rem .55rem;
    border: 0;
    background: transparent;
    border-radius: 8px;
    font-size: .82rem;
    color: #334155;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.onyx-action-row:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.onyx-action-row > i:first-child {
    width: 1rem;
    text-align: center;
    color: #3b82f6;
    font-size: .85rem;
    flex-shrink: 0;
}

.onyx-action-row-danger {
    color: #dc2626;
}

.onyx-action-row-danger:hover {
    background: #fef2f2;
    color: #b91c1c;
}

.onyx-action-row-danger > i:first-child {
    color: #ef4444;
}

.onyx-action-row:disabled,
.onyx-action-row.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Grille de tuiles compléments */
.onyx-complements-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    padding: .35rem .25rem;
}

.onyx-complements-grid.is-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Carte étroite / petit écran : les tuiles passent à la ligne (2 colonnes) au
   lieu de déborder du cadre. */
@container (max-width: 340px) {
    .onyx-complements-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.onyx-complement-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .7rem .4rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    text-decoration: none;
    color: #475569;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.onyx-complement-tile:hover {
    border-color: #bfdbfe;
    background: #f8fafc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.onyx-complement-tile i {
    font-size: 1.05rem;
    color: #3b82f6;
}

.onyx-complement-tile-label {
    font-size: .7rem;
    color: #64748b;
    text-align: center;
    overflow-wrap: anywhere;
}

.onyx-complement-tile-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 1.2rem;
    height: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .3rem;
    border-radius: 999px;
    background: #3b82f6;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    border: 2px solid #fff;
}

.onyx-complement-tile-badge:empty {
    display: none;
}

.onyx-page-header-title-suffix i {
    font-size: inherit;
    opacity: 1;
}
/* ────────────────────────────────────────────────────────────── */

.onyx-breadcrumb ol {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: .25rem;
    font-size: .775rem;
}

.onyx-breadcrumb li {
    display: flex;
    align-items: center;
    color: #9ca3af;
}

.onyx-breadcrumb li + li::before {
    content: '/';
    margin-right: .25rem;
    color: #d1d5db;
}

.onyx-breadcrumb li a {
    color: #6b7280;
    text-decoration: none;
    transition: color .15s;
}

.onyx-breadcrumb li a:hover {
    color: #3b82f6;
}

.onyx-breadcrumb li a i {
    font-size: .7rem;
}

.onyx-breadcrumb li span {
    color: #374151;
    font-weight: 500;
}

/* ----- onyx Select (Tom Select) ----- */

.onyx-select {
    appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right .625rem center;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    padding: .4375rem 2rem .4375rem .75rem;
    font-size: .8125rem;
    color: #374151;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}

.onyx-select:focus {
    outline: none;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
}

.onyx-select:hover {
    border-color: #d1d5db;
}

.onyx-select.has-icon {
    padding-left: 2.25rem;
}

.onyx-select-sm {
    padding: .5rem 2rem .5rem .75rem;
    font-size: .75rem;
}

.onyx-select-md {
    padding: .625rem 2rem .625rem .75rem;
    font-size: .8125rem;
}

.onyx-select-lg {
    padding: .75rem 2rem .75rem 1rem;
    font-size: .875rem;
}

.onyx-select:disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    opacity: .75;
}

/* Tom Select — reset du wrapper (TomSelect copie les classes du <select> sur .ts-wrapper) */
/* Le border et la flèche doivent être sur .ts-control, pas sur le wrapper extérieur */
.ts-wrapper.onyx-select,
.ts-wrapper.onyx-select-sm,
.ts-wrapper.onyx-select-md,
.ts-wrapper.onyx-select-lg {
    position: relative;
    border: none;
    background: none;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    appearance: none;
    width: 100%;
}

/* Flèche chevron — positionnée en absolu sur le wrapper, visible single ET multiple */
.ts-wrapper.onyx-select::after {
    content: '';
    position: absolute;
    right: .625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
    pointer-events: none;
    z-index: 1;
}

/* Tom Select disabled */
.ts-wrapper.onyx-select.disabled .ts-control {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    opacity: .75;
    pointer-events: none;
}

.has-error .onyx-select {
    border-color: #fca5a5;
}

.has-error .onyx-select:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1);
}

/* Tom Select overrides for onyx-select */
.ts-wrapper.onyx-select .ts-control {
    font-size: .8125rem;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    padding: .3125rem 2rem .3125rem .75rem;
    min-height: 2.25rem;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
    box-shadow: none;
}

.ts-wrapper.onyx-select .ts-control > input {
    min-height: 0;
    padding: 0;
    margin: 0;
    font-size: .8125rem;
}

/* Icon à gauche : laisser de la place dans le ts-control */
.ts-wrapper.onyx-select.has-icon .ts-control {
    padding-left: 2.25rem;
}

.ts-wrapper.onyx-select .ts-control:hover {
    border-color: #d1d5db;
}

.ts-wrapper.onyx-select.focus .ts-control {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
}

.ts-wrapper.onyx-select .ts-dropdown {
    font-size: .8125rem;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    margin-top: .25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    overflow: hidden;
    z-index: 1050;
}

/* La liste déroulante s'ajuste à son contenu (évite le vide sous une liste courte). */
.ts-wrapper.onyx-select .ts-dropdown .ts-dropdown-content {
    min-height: 0;
}

/* ----- onyx Group Card (Gestion des groupes) ----- */
.onyx-group-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.onyx-group-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 .35rem .75rem rgba(15, 23, 42, .07) !important;
    border-color: rgba(15, 23, 42, .08) !important;
}

.ts-wrapper.onyx-select .ts-dropdown .option {
    padding: .4375rem .75rem;
    transition: background .1s;
}

.ts-wrapper.onyx-select .ts-dropdown .option.active {
    background: #eff6ff;
    color: #1d4ed8;
}

.ts-wrapper.onyx-select .ts-dropdown .option:hover {
    background: #f3f4f6;
}

.ts-dropdown .optgroup-header {
    font-weight: 700 !important;
    font-size: .75rem !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: #374151 !important;
    padding: .5rem .75rem .4rem .65rem !important;
    background: var(--bg-breadcrumb, #eff6ff) !important;
    border-top: 1px solid var(--bg-header, #bfdbfe) !important;
    border-left: 3px solid var(--bg-primary, #3b82f6) !important;
    cursor: default !important;
}

.ts-dropdown .optgroup:first-child .optgroup-header {
    border-top: none !important;
}

.ts-dropdown .optgroup .option {
    padding-left: 1.25rem;
}

.ts-wrapper.onyx-select .plugin-remove_button .item .remove {
    border-left: 1px solid rgba(0, 0, 0, .1);
    font-size: .7rem;
}

.has-error .ts-wrapper.onyx-select .ts-control {
    border-color: #fca5a5;
}

/* ----- onyx select-category (Tom Select avec rendu badges) ----- */

/* Reset du wrapper .item — le badge a déjà son propre padding */
.ts-wrapper.onyx-select-category .ts-control .item {
    padding: 0;
    margin: 2px 2px;
    background: none;
    border: none;
    border-radius: 0;
    color: inherit;
}

/* Bouton × aligné dans le badge */
.ts-wrapper.onyx-select-category .plugin-remove_button .item .remove {
    border-left: 1px solid rgba(0, 0, 0, .15);
    border-radius: 0 .3rem .3rem 0;
    padding: 0 .35rem;
    font-size: .65rem;
    line-height: 1;
    opacity: .7;
    color: inherit;
}

.ts-wrapper.onyx-select-category .plugin-remove_button .item .remove:hover {
    opacity: 1;
    background: rgba(0, 0, 0, .1);
}

/* ----- onyx badge-picker ----- */

.onyx-badge-picker-item {
    cursor: pointer;
    user-select: none;
    transition: opacity .15s, box-shadow .15s;
    margin: 0;
}

.onyx-badge-picker-item.is-unselected {
    opacity: .45;
}

.onyx-badge-picker-item.is-unselected:hover {
    opacity: .75;
}

.onyx-badge-picker-item.is-selected {
    opacity: 1;
    box-shadow: 0 0 0 2px currentColor;
}

/* Tom Select dans filter-section : même style intégré que le select natif */
.onyx-filter-section .ts-wrapper.onyx-select .ts-control {
    background-color: color-mix(in srgb, var(--bg-primary, #6b7280) 5%, white);
    border-color: color-mix(in srgb, var(--bg-primary, #6b7280) 20%, white);
    border-radius: .45rem;
}

.onyx-filter-section .ts-wrapper.onyx-select .ts-control:hover {
    background-color: color-mix(in srgb, var(--bg-primary, #6b7280) 10%, white);
    border-color: color-mix(in srgb, var(--bg-primary, #6b7280) 35%, white);
}

.onyx-filter-section .ts-wrapper.onyx-select.focus .ts-control {
    background-color: #fff;
    border-color: var(--bg-primary, #6b7280);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg-primary, #6b7280) 15%, transparent);
}

/* Items sélectionnés (tags) dans filter-section */
.onyx-filter-section .ts-wrapper.onyx-select .ts-control .item {
    background: color-mix(in srgb, var(--bg-primary, #6b7280) 15%, white);
    color: color-mix(in srgb, var(--bg-primary, #6b7280) 90%, black);
    border-radius: .3rem;
    padding: .1rem .45rem;
    font-size: .7rem;
    font-weight: 600;
}

/* ----- onyx Menu Card ----- */

.onyx-menu-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    transition: border-color .2s, box-shadow .2s;
}

.onyx-menu-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

.onyx-menu-card-icon {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.onyx-menu-card-icon i {
    font-size: 2.5rem;
    color: var(--onyx-mc-color, #3b82f6);
}

.onyx-menu-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 .5rem;
}

.onyx-menu-card-description {
    font-size: .825rem;
    color: #6b7280;
    margin: 0 0 1rem;
    flex-grow: 1;
    text-align: left;
}

.onyx-menu-card-body {
    margin-bottom: 1rem;
    width: 100%;
}

.onyx-menu-card-footer {
    margin-top: auto;
}

/* ----- onyx Media Card ----- */

.onyx-media-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    transition: border-color .2s, box-shadow .2s;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.onyx-media-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    text-decoration: none;
    color: inherit;
}

.onyx-media-card-image {
    aspect-ratio: 7 / 5;
    max-height: 120px;
    overflow: hidden;
    flex-shrink: 0;
}

.onyx-media-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.onyx-media-card-content {
    padding: .5rem .75rem;
    flex: 1;
    min-width: 0;
}

.onyx-media-card-title {
    font-size: .95rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 .25rem;
}

.onyx-media-card-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.onyx-media-card-subtitle {
    font-size: .825rem;
    color: #6b7280;
}

/* ----- onyx Document Card (addins diapoDoc) ----- */

.onyx-doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    padding: .5rem;
}

.onyx-doc-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.onyx-doc-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.onyx-doc-card--wide {
    grid-column: 1 / -1;
}

.onyx-doc-preview {
    width: 100%;
    height: 280px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}

.onyx-doc-preview iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.onyx-doc-body {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem;
    flex: 1;
}

.onyx-doc-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
}

.onyx-doc-info {
    min-width: 0;
    flex: 1;
}

.onyx-doc-name {
    font-size: .9rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
    word-break: break-word;
    line-height: 1.3;
}

.onyx-doc-meta {
    font-size: .72rem;
    color: #9ca3af;
    margin-top: .2rem;
    letter-spacing: .02em;
}

.onyx-doc-desc {
    font-size: .8rem;
    color: #6b7280;
    margin: .55rem 0 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.onyx-doc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .625rem 1rem;
    border-top: 1px solid #f1f5f9;
    background: #fafafa;
}

.onyx-doc-author {
    font-size: .75rem;
    color: #6b7280;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onyx-doc-author i {
    color: #9ca3af;
    margin-right: .3rem;
}

/* ----- onyx Image Gallery (addins diapoImage) ----- */

.onyx-img-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    padding: .5rem;
}

.onyx-img-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.onyx-img-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.onyx-img-thumb {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    cursor: zoom-in;
    background: #f1f5f9;
}

.onyx-img-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.onyx-img-card:hover .onyx-img-thumb img {
    transform: scale(1.05);
}

.onyx-img-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    background: rgba(15, 23, 42, 0);
    opacity: 0;
    transition: background .2s ease, opacity .2s ease;
}

.onyx-img-card:hover .onyx-img-overlay {
    background: rgba(15, 23, 42, .35);
    opacity: 1;
}

.onyx-img-body {
    padding: .75rem;
    flex: 1;
    min-width: 0;
}

.onyx-img-name {
    font-size: .875rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
    word-break: break-word;
    line-height: 1.3;
}

.onyx-img-meta {
    font-size: .72rem;
    color: #9ca3af;
    margin-top: .25rem;
    line-height: 1.4;
}

.onyx-img-meta i {
    margin-right: .3rem;
}

.onyx-img-footer {
    padding: .625rem .75rem;
    border-top: 1px solid #f1f5f9;
    background: #fafafa;
    display: flex;
    justify-content: flex-end;
}

/* ----- onyx Hero (en-tête projet) ----- */

.onyx-hero {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    overflow: hidden;
    height: 100%;
}

.onyx-hero-cover {
    height: 56px;
    /* Aligné sur .onyx-card-media--simple (cover des cards Onyx) */
    background: linear-gradient(135deg, #f7f9fc, #e6ecf3);
    background-size: cover;
    background-position: center;
}

.onyx-hero-avatar {
    text-align: center;
    margin-top: -38px;
}

/* Média circulaire façon .onyx-card-media : vignette si image, sinon icône placeholder */
.onyx-hero-avatar-media {
    position: relative;
    display: inline-block;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    background: linear-gradient(135deg, #f7f9fc, #e6ecf3);
}

.onyx-hero-avatar-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #60a5fa;
}

.onyx-hero-avatar-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.onyx-hero-body {
    padding: .75rem 1.5rem 1.5rem;
    text-align: center;
}

.onyx-hero-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.onyx-hero-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    font-size: .9rem;
    color: #475569;
}

/* ----- onyx Menu Card Compact ----- */

.onyx-menu-card-compact {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color .2s, box-shadow .2s;
}

.onyx-menu-card-compact:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

.onyx-menu-card-compact-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .625rem;
}

.onyx-menu-card-compact-icon {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.onyx-menu-card-compact-icon i {
    font-size: 1.125rem;
    color: var(--onyx-mcc-color, #3b82f6);
}

.onyx-menu-card-compact-title {
    font-size: .9375rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
    flex-grow: 1;
    text-align: left;
}

.onyx-menu-card-compact-btn {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    background: color-mix(in srgb, var(--onyx-mcc-color, #3b82f6) 12%, transparent);
    color: var(--onyx-mcc-color, #3b82f6);
    transition: background .15s;
    text-decoration: none;
    font-size: .75rem;
}

.onyx-menu-card-compact-btn:hover {
    background: color-mix(in srgb, var(--onyx-mcc-color, #3b82f6) 22%, transparent);
    color: var(--onyx-mcc-color, #3b82f6);
}

.onyx-menu-card-compact-description {
    font-size: .8125rem;
    color: #6b7280;
    margin: 0;
    text-align: left;
    flex-grow: 1;
}

.onyx-menu-card-compact-body {
    margin-top: .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.onyx-menu-card-compact.is-disabled {
    background: #f9fafb;
    border-style: dashed;
}

.onyx-menu-card-compact.is-disabled:hover {
    border-color: #e5e7eb;
    box-shadow: none;
}

.onyx-menu-card-compact.is-disabled .onyx-menu-card-compact-icon i,
.onyx-menu-card-compact.is-disabled .onyx-menu-card-compact-title {
    color: #9ca3af;
}

.onyx-menu-card-compact-btn.is-disabled {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

/* ----- onyx Back Top ----- */

.onyx-back-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1040;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    font-size: .85rem;
}

.onyx-back-top:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
    transform: translateY(-2px);
}

/* ----- onyx Form Group ----- */

.onyx-form-group {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: .25rem;
}

.onyx-form-label {
    font-size: .875rem;
    font-weight: 500;
    color: #374151;
}

.onyx-form-required {
    color: #ef4444;
    margin-left: .125rem;
}

.onyx-form-control {
    position: relative;
}

.onyx-form-error {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .725rem;
    color: #ef4444;
}

.onyx-form-error i {
    font-size: .625rem;
}

.onyx-form-hint {
    font-size: .725rem;
    color: #9ca3af;
}

.onyx-form-group.has-error .onyx-input,
.onyx-form-group.has-error .onyx-select,
.onyx-form-group.has-error .ts-control {
    border-color: #fca5a5 !important;
}

/* ----- onyx Back Button ----- */

@media print {
    .no-print {
        display: none !important;
    }
}

/* ----- onyx Stamp ----- */

.onyx-stamp-wrapper {
    position: relative;
}

.onyx-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    border: 5px solid #198754;
    color: #198754;
    font-size: 2.8rem;
    font-weight: 900;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding: 0.25em 0.75em;
    border-radius: 10px;
    opacity: 0.25;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
    font-family: 'Courier New', Courier, monospace;
    user-select: none;
}

.onyx-change-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .375rem .5rem;
    border-radius: .375rem;
    transition: background .1s;
}

.onyx-change-item:hover {
    background: #f9fafb;
}

.onyx-change-item-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: .375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    flex-shrink: 0;
}

.onyx-change-item-text {
    flex: 1;
    font-size: .8125rem;
    color: #374151;
    line-height: 1.4;
}

/* ----- onyx Release Card ----- */

.onyx-release-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

.onyx-release-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
}

.onyx-release-card-accent {
    height: 4px;
}

.onyx-release-card-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
    background: #fafafa;
}

.onyx-release-card-version {
    font-size: .85rem;
    font-weight: 700;
    color: #111827;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.onyx-release-card-date {
    font-size: .75rem;
    color: #9ca3af;
    margin-left: auto;
}

.onyx-release-card-body {
    padding: 1.25rem;
}

.onyx-release-card-footer {
    display: flex;
    gap: .375rem;
    flex-wrap: wrap;
    padding: .625rem 1.25rem;
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
}

/* ----- onyx Type Section ----- */

.onyx-type-section-header {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .875rem 1.25rem;
    border-radius: calc(.75rem - 1px) calc(.75rem - 1px) 0 0;
    border-bottom: 1px solid transparent;
}

.onyx-type-section-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    flex-shrink: 0;
}

.onyx-type-section-title {
    font-size: .85rem;
    font-weight: 700;
    flex: 1;
}

/* ----- onyx Version Timeline ----- */

.onyx-vtl-entry {
    display: grid;
    grid-template-columns: 130px 28px 1fr;
    gap: 0 1.25rem;
    padding-bottom: 2.5rem;
}

.onyx-vtl-entry:last-child {
    padding-bottom: 0;
}

.onyx-vtl-meta {
    text-align: right;
    padding-top: 2px;
}

.onyx-vtl-version {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    color: #111827;
    font-family: 'SF Mono', 'Fira Code', monospace;
    letter-spacing: -.01em;
}

.onyx-vtl-date {
    display: block;
    font-size: .725rem;
    color: #9ca3af;
    margin-top: .25rem;
    white-space: nowrap;
}

.onyx-vtl-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.onyx-vtl-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    flex-shrink: 0;
    margin-top: 3px;
    z-index: 1;
}

.onyx-vtl-line {
    flex: 1;
    width: 2px;
    background: #e5e7eb;
    margin-top: 6px;
    border-radius: 1px;
}

.onyx-vtl-entry:last-child .onyx-vtl-line {
    display: none;
}

.onyx-vtl-anchor-btn {
    display: block;
    margin-top: .2rem;
    opacity: 0;
    transition: opacity .15s;
}

.onyx-vtl-entry:hover .onyx-vtl-anchor-btn {
    opacity: 1;
}

.onyx-vtl-anchor-link {
    font-size: .75rem;
    color: #9ca3af;
    line-height: 1;
}

.onyx-vtl-entry--highlighted > div:last-child .onyx-panel {
    box-shadow: 0 0 0 3px #3b82f6;
    transition: box-shadow .4s;
}

/* ----- Version Timeline Sidebar ----- */
.onyx-vtl-sidebar {
    position: sticky;
    top: 1rem;
    padding-top: 7.5rem;
}

/* ----- Responsive mobile: Version Timeline ----- */
@media (max-width: 767.98px) {
    .onyx-vtl-entry {
        grid-template-columns: 28px 1fr;
        grid-template-rows: auto auto;
        gap: 0 .75rem;
        padding-bottom: 1.75rem;
    }

    .onyx-vtl-meta {
        grid-column: 1 / -1;
        grid-row: 1;
        text-align: left;
        display: flex;
        align-items: center;
        gap: .5rem;
        padding-top: 0;
        margin-bottom: .375rem;
    }

    .onyx-vtl-date {
        margin-top: 0;
    }

    .onyx-vtl-version {
        font-size: .8rem;
    }

    .onyx-vtl-connector {
        grid-column: 1;
        grid-row: 2;
    }

    .onyx-vtl-entry > div:last-child {
        grid-column: 2;
        grid-row: 2;
    }

    .onyx-vtl-anchor-btn {
        opacity: 1;
        margin-top: 0;
    }

    .onyx-vtl-search-bar {
        padding-left: 0 !important;
    }

    .onyx-vtl-sidebar {
        position: static;
        padding-top: 0;
    }
}

/* ----- Release Notes — Category Chips ----- */

.rn-cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}

.rn-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem;
    font-size: .775rem;
    font-weight: 500;
    border-radius: 2rem;
    border: 1.5px solid color-mix(in srgb, var(--chip-color, #71717a) 30%, transparent);
    background: color-mix(in srgb, var(--chip-color, #71717a) 10%, white);
    color: color-mix(in srgb, var(--chip-color, #71717a) 85%, #1f2937);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
    line-height: 1.4;
}

.rn-cat-chip i,
.rn-cat-chip svg {
    font-size: .7rem;
    flex-shrink: 0;
}

.rn-cat-chip:hover {
    background: color-mix(in srgb, var(--chip-color, #71717a) 18%, white);
    border-color: color-mix(in srgb, var(--chip-color, #71717a) 55%, transparent);
}

.rn-cat-chip--active {
    background: var(--chip-color, #71717a);
    border-color: var(--chip-color, #71717a);
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--chip-color, #71717a) 35%, transparent);
}

.rn-cat-chip--active:hover {
    background: color-mix(in srgb, var(--chip-color, #71717a) 88%, black);
    border-color: color-mix(in srgb, var(--chip-color, #71717a) 88%, black);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--chip-color, #71717a) 45%, transparent);
}

.rn-cat-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid #d1d5db;
    background: #f9fafb;
    color: #6b7280;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    flex-shrink: 0;
}

.rn-cat-toggle:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
}

.rn-cat-toggle-icon {
    font-size: .6rem;
    transition: transform .2s ease;
}

.rn-cat-toggle-icon--open {
    transform: rotate(180deg);
}

/* ----- onyx Sortable Category Tree ----- */

.sortable-ghost {
    opacity: .3;
    background: #e0f2fe;
    border: 2px dashed #0ea5e9 !important;
}

.sortable-chosen {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.sortable-drag {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    transform: rotate(.5deg);
    opacity: .95;
}

.empty-drop-zone {
    display: none;
    border: 2px dashed #d1d5db;
    border-radius: .5rem;
    margin: .25rem .5rem;
    transition: background .15s, border-color .15s;
}

body.is-dragging-category .empty-drop-zone {
    display: block;
}

body.is-dragging-category [data-sortable-parent]:has(.sortable-ghost) .empty-drop-zone {
    border-color: #0ea5e9;
    background: #f0f9ff;
}

/* ----- onyx Icon Picker ----- */

.onyx-icon-picker-preview {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    background: #f4f4f5;
    border: 1px solid #e4e4e7;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.onyx-icon-picker-preview i {
    font-size: 1rem;
}

.onyx-icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid #e4e4e7;
    border-radius: 0.375rem;
    background: #fafafa;
}

.onyx-icon-picker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    background: transparent;
    color: #52525b;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.onyx-icon-picker-item:hover {
    background: #e4e4e7;
    color: #18181b;
}

.onyx-icon-picker-item.active {
    background: #3b82f6;
    color: #fff;
    border-color: #2563eb;
}

/* ----- onyx Store Cards ----- */

.store-card-hover {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.store-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1) !important;
}

/* ----- onyx OCS Staging Cards ----- */

.ocs-staging-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 991.98px) {
    .ocs-staging-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .ocs-staging-grid {
        grid-template-columns: 1fr;
    }
}

/* ----- Card de staging (framework Store) -----
 * `.store-staging-card*` est le nom courant ; `.ocs-staging-card*` est conservé en alias le
 * temps de migrer `components/store/ocs-staging-card.blade.php` et
 * `livewire/ocs-v3/staging-list.blade.php` (23 occurrences, 0 en JS/PHP). Ne pas ajouter de
 * troisième préfixe par connecteur : les règles sont identiques, seul le nom neutre doit
 * survivre. Cf. records/audits/store-connectors-2026-08.md
 */
.ocs-staging-card,
.store-staging-card {
    background: var(--onyx-bg, #fff);
    border: 1px solid var(--onyx-border, #e5e7eb);
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ocs-staging-card:hover,
.store-staging-card:hover {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06);
}

.ocs-staging-card--selected,
.store-staging-card--selected {
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px #3b82f6;
}

.ocs-staging-card--delete,
.store-staging-card--delete {
    border-left: 3px solid #ef4444;
}

.ocs-staging-card--error,
.store-staging-card--error {
    border-left: 3px solid #ef4444;
}

/* `--review` partage l'ambre de `--update` par convention de sévérité, pas par identité :
   les séparer si l'ambre de « Modifications » change. */
.ocs-staging-card--update,
.store-staging-card--update,
.store-staging-card--review {
    border-left: 3px solid #f59e0b;
}

.ocs-staging-card-header,
.store-staging-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--onyx-border, #e5e7eb);
}

.ocs-staging-card-body,
.store-staging-card-body {
    padding: .75rem 1rem;
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25rem .75rem;
}

.ocs-staging-card-field,
.store-staging-card-field {
    display: flex;
    flex-direction: column;
    padding: .25rem 0;
}

/* Champ occupant les deux colonnes de la grille (libellés longs : adresse, nom complet). */
.store-staging-card-field--wide {
    grid-column: 1 / -1;
}

.ocs-staging-card-field--changed,
.store-staging-card-field--changed {
    background: #fef9c3;
    border-radius: .25rem;
    padding: .25rem .375rem;
    margin: 0 -.375rem;
}

.ocs-staging-card-label,
.store-staging-card-label {
    font-size: .7rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .025em;
}

.ocs-staging-card-value,
.store-staging-card-value {
    font-size: .8125rem;
    color: #111827;
    word-break: break-word;
}

.ocs-staging-card-diff,
.store-staging-card-diff {
    padding: .5rem 1rem .75rem;
    border-top: 1px solid var(--onyx-border, #e5e7eb);
    background: #fefce8;
}

.ocs-staging-card-diff-row,
.store-staging-card-diff-row {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    padding: .125rem 0;
    flex-wrap: wrap;
}

.ocs-staging-card-diff-label,
.store-staging-card-diff-label {
    font-weight: 600;
    color: #6b7280;
    min-width: 5rem;
}

.ocs-staging-card-diff-old,
.store-staging-card-diff-old {
    color: #ef4444;
    text-decoration: line-through;
}

.ocs-staging-card-diff-new,
.store-staging-card-diff-new {
    color: #16a34a;
    font-weight: 600;
}

.ocs-staging-card-error,
.store-staging-card-error {
    padding: .5rem 1rem;
    border-top: 1px solid var(--onyx-border, #e5e7eb);
    background: #fef2f2;
    color: #dc2626;
    font-size: .75rem;
    line-height: 1.4;
}

.ocs-staging-card-footer,
.store-staging-card-footer {
    display: flex;
    gap: .5rem;
    padding: .5rem 1rem .75rem;
    border-top: 1px solid var(--onyx-border, #e5e7eb);
}

/* ----- onyx PractitionerCard ----- */

.onyx-practitioner-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    padding: 1rem 1.1rem .9rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color .2s, box-shadow .2s;
}

.onyx-practitioner-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

.onyx-practitioner-card--exists {
    border-color: #bbf7d0;
}

/* Header */
.onyx-practitioner-card-header {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}

.onyx-practitioner-card-identity {
    flex: 1;
    min-width: 0;
}

.onyx-practitioner-card-name {
    font-weight: 700;
    font-size: .9rem;
    color: #111827;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.onyx-practitioner-card-forname {
    font-weight: 500;
}

.onyx-practitioner-card-fonc {
    font-size: .78rem;
    color: #6b7280;
    margin-top: .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.onyx-practitioner-card-action {
    flex-shrink: 0;
    margin-left: auto;
}

/* Divider */
.onyx-practitioner-card-divider {
    border-top: 1px solid #f3f4f6;
    margin: .75rem 0 .6rem;
}

/* Body rows */
.onyx-practitioner-card-body {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex: 1;
}

.onyx-practitioner-card-row {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .8rem;
    color: #374151;
    line-height: 1.4;
}

.onyx-practitioner-card-row-icon {
    width: 13px;
    text-align: center;
    color: #9ca3af;
    margin-top: 2px;
    flex-shrink: 0;
    font-size: .75rem;
}

.onyx-practitioner-card-muted {
    color: #9ca3af;
}

.onyx-practitioner-card-sub {
    font-size: .72rem;
    color: #9ca3af;
    margin-top: .1rem;
}

.onyx-practitioner-card-code {
    font-size: .78rem;
    background: #f3f4f6;
    color: #4b5563;
    padding: .05rem .3rem;
    border-radius: 4px;
    font-family: ui-monospace, monospace;
}

.onyx-practitioner-card-mss {
    font-size: .75rem;
    color: #6b7280;
    word-break: break-all;
}

/* ----- onyx Ticket Kanban Column ----- */

/* Container global — centré, 3 colonnes égales */
.tk-kanban-container {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding-bottom: .5rem;
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
}

.tk-kanban-col {
    flex: 1 1 0;
    max-width: 520px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
}

/* Colonne */
.tk-board {
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .15s;
}

/* Couleur de fond par colonne via data-color */
/* Ticket kanban */
.tk-board[data-col="todo"]        { background: #fffbeb; }
.tk-board[data-col="in_progress"] { background: #eff6ff; }
.tk-board[data-col="paused"]      { background: #f5f3ff; }
/* Backlog kanban */
.tk-board[data-col="Accep"]  { background: #f3f4f6; }
.tk-board[data-col="Progr"]  { background: #eff6ff; }
.tk-board[data-col="Bloqu"]  { background: #fef2f2; }
.tk-board[data-col="Test"]   { background: #fffbeb; }
.tk-board[data-col="Real"]   { background: #f0fdf4; }
.tk-board[data-col="Revie"]  { background: #fffbeb; }
.tk-board[data-col="Valid"]  { background: #f0fdf4; }
.tk-board[data-col="Propo"]  { background: #f5f3ff; }
.tk-board[data-col="Wait"]   { background: #f9fafb; }
.tk-board[data-col="NULL"]   { background: #f3f4f6; }
.tk-board[data-col="Refus"]  { background: #fef2f2; }

/* Dropzone active */
.tk-board.drag-over {
    box-shadow: 0 0 0 3px rgba(147,197,253,.35);
}

/* Header */
.tk-board-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.1rem .75rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
    position: sticky;
    top: 0;
    z-index: 2;
    backdrop-filter: blur(4px);
}

/* Fond du header légèrement plus foncé que la colonne */
/* Ticket kanban */
.tk-board[data-col="todo"]        .tk-board-header { background: rgba(254,243,199,.9); }
.tk-board[data-col="in_progress"] .tk-board-header { background: rgba(219,234,254,.9); }
.tk-board[data-col="paused"]      .tk-board-header { background: rgba(237,233,254,.9); }
/* Backlog kanban */
.tk-board[data-col="Accep"]  .tk-board-header { background: rgba(229,231,235,.9); }
.tk-board[data-col="Progr"]  .tk-board-header { background: rgba(219,234,254,.9); }
.tk-board[data-col="Bloqu"]  .tk-board-header { background: rgba(254,202,202,.9); }
.tk-board[data-col="Test"]   .tk-board-header { background: rgba(254,243,199,.9); }
.tk-board[data-col="Real"]   .tk-board-header { background: rgba(220,252,231,.9); }
.tk-board[data-col="Revie"]  .tk-board-header { background: rgba(254,243,199,.9); }
.tk-board[data-col="Valid"]  .tk-board-header { background: rgba(220,252,231,.9); }
.tk-board[data-col="Propo"]  .tk-board-header { background: rgba(237,233,254,.9); }
.tk-board[data-col="Wait"]   .tk-board-header { background: rgba(243,244,246,.9); }
.tk-board[data-col="NULL"]   .tk-board-header { background: rgba(243,244,246,.9); }
.tk-board[data-col="Refus"]  .tk-board-header { background: rgba(254,202,202,.9); }

.tk-board-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tk-board-icon {
    font-size: .9rem;
    flex-shrink: 0;
}

.tk-board-title {
    font-size: .95rem;
    font-weight: 700;
    color: #1f2937;
    flex: 1;
}

.tk-board-count {
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    border-radius: 20px;
    padding: .15rem .6rem;
    flex-shrink: 0;
}

.tk-board[data-col="todo"]        .tk-board-count { background: #f59e0b; }
.tk-board[data-col="in_progress"] .tk-board-count { background: #3b82f6; }
.tk-board[data-col="paused"]      .tk-board-count { background: #8b5cf6; }

/* Contract kanban columns */
.tk-board[data-col="proposition"] { background: #f9fafb; }
.tk-board[data-col="running"]     { background: #f0fdf4; }
.tk-board[data-col="ended"]       { background: #f3f4f6; }

.tk-board[data-col="proposition"] .tk-board-header { background: rgba(243,244,246,.9); }
.tk-board[data-col="running"]     .tk-board-header { background: rgba(220,252,231,.9); }
.tk-board[data-col="ended"]       .tk-board-header { background: rgba(229,231,235,.9); }

.tk-board[data-col="proposition"] .tk-board-count { background: #9ca3af; }
.tk-board[data-col="running"]     .tk-board-count { background: #16a34a; }
.tk-board[data-col="ended"]       .tk-board-count { background: #6b7280; }

/* Zone scrollable */
.tk-board-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .5rem .6rem .8rem;
    max-height: 110vh;
}

.tk-board-body::-webkit-scrollbar { width: 3px; }
.tk-board-body::-webkit-scrollbar-track { background: transparent; }
.tk-board-body::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }
.tk-board-body::-webkit-scrollbar-thumb:hover { background: #d1d5db; }

/* Empty state */
.tk-board-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2.5rem 1rem;
    color: #9ca3af;
    font-size: .8rem;
}

.tk-board-empty i { font-size: 1.75rem; }

.tk-board-all-loaded {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .6rem;
    font-size: .72rem;
    color: #6b7280;
}

/* Footer (load more / tout chargé / quick-add) */
.tk-board-footer {
    padding: .5rem .6rem;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,.05);
}

.tk-board-quick-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    padding: .45rem .75rem;
    background: transparent;
    border: 1px dashed #d1d5db;
    border-radius: 7px;
    font-size: .78rem;
    font-weight: 500;
    color: #9ca3af;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.tk-board-quick-add:hover {
    background: rgba(0,0,0,.03);
    border-color: #9ca3af;
    color: #6b7280;
}

/* ----- onyx Ticket Kanban Skeleton ----- */

@keyframes tkcard-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.tkcard-skeleton-col {
    opacity: 1 !important;
    background: #fff !important;
}

.tkcard-skeleton {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-bottom: .5rem;
    overflow: hidden;
}

.tkcard-skeleton-header {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .75rem .3rem;
}

.tkcard-skeleton-body {
    padding: .2rem .75rem .55rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.tkcard-skeleton-footer {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .4rem .75rem;
    border-top: 1px solid #f3f4f6;
}

.tkcard-skeleton-line,
.tkcard-skeleton-badge,
.tkcard-skeleton-avatar {
    display: inline-block;
    border-radius: 4px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e9ecef 50%, #f3f4f6 75%);
    background-size: 800px 100%;
    animation: tkcard-shimmer 1.4s infinite linear;
    flex-shrink: 0;
}

.tkcard-skeleton-line {
    height: .55rem;
    border-radius: 3px;
}

.tkcard-skeleton-badge {
    height: 1.1rem;
    width: 2.2rem;
    border-radius: 20px;
}

.tkcard-skeleton-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

/* ----- onyx Ticket Kanban Card (tkcard) ----- */

.tkcard {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #d1d5db;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: box-shadow .15s, border-color .15s;
    margin-bottom: .5rem;
    display: flex;
    flex-direction: column;
}

.tkcard:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
}

/* Priority border colors */
.tkcard.priority-success { border-left-color: #22c55e; }
.tkcard.priority-warning { border-left-color: #f59e0b; }
.tkcard.priority-danger  { border-left-color: #ef4444; }
.tkcard.priority-secondary { border-left-color: #d1d5db; }

/* ── Header ── */
.tkcard-header {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .75rem .25rem;
}

.tkcard-id {
    font-size: .68rem;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: .02em;
    flex-shrink: 0;
}

.tkcard-addins {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .2rem;
    min-width: 0;
    overflow: hidden;
}

.tkcard-menu {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .3rem;
}

/* ── Body ── */
.tkcard-body {
    padding: .2rem .75rem .55rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.tkcard-title {
    font-size: .90rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    color: #111827;
}

.tkcard-title a {
    color: inherit;
    text-decoration: none;
}

.tkcard-title a:hover {
    color: #2563eb;
}

.tkcard-desc {
    font-size: .75rem;
    color: #4b5563;
    margin: 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tkcard-activity {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    color: #6b7280;
}

.tkcard-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    align-items: center;
}

.tkcard-address {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    font-size: .72rem;
    color: #6b7280;
    background: #f9fafb;
    border-radius: 5px;
    padding: .3rem .5rem;
    line-height: 1.4;
}

/* ── Footer ── */
.tkcard-footer {
    display: flex;
    align-items: center;
    padding: .3rem .6rem;
    border-top: 1px solid #f3f4f6;
    font-size: .68rem;
    color: #4b5563;
    gap: .25rem;
}

.tkcard-footer.is-mine {
    background: #fefce8;
    border-top-color: #fde68a;
}

.tkcard-footer-col {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-width: 0;
}

.tkcard-footer-col:first-child { justify-content: flex-start; }
.tkcard-footer-col:last-child  { justify-content: flex-end; }

.tkcard-footer-link {
    display: flex;
    align-items: center;
    gap: .25rem;
    text-decoration: none;
    color: #4b5563;
    overflow: hidden;
    max-width: 100%;
    white-space: nowrap;
}

.tkcard-footer-link:hover { color: #111827; }

.tkcard-footer-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .55rem;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
}

.tkcard-footer-avatar.affected {
    background: #dbeafe;
    color: #1d4ed8;
}

.tkcard-footer-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tkcard-open-link {
    color: #6b7280;
    text-decoration: none;
    line-height: 1;
}

.tkcard-open-link:hover { color: #111827; }

.tkcard-open-link {
    color: #6b7280;
    text-decoration: none;
    line-height: 1;
}

.tkcard-open-link:hover { color: #111827; }

/* ----- onyx Toolbar ----- */

.onyx-toolbar {
    display: inline-flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--bg-primary, #6b7280) 18%, white);
    border-radius: .6rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    overflow: visible;
    max-width: 100%;
}

@media (max-width: 1399.98px) {
    .onyx-toolbar {
        flex-wrap: wrap;
    }
    .onyx-toolbar-btn {
        padding: .4375rem .55rem;
        font-size: .775rem;
        gap: .3rem;
    }
    .onyx-toolbar-sep {
        margin: .25rem 0;
    }
}

.onyx-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5625rem .85rem;
    font-size: .8125rem;
    font-weight: 500;
    color: #4b5563;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color .12s;
    line-height: 1;
    text-decoration: none;
    position: relative;
}

/* Fond arrondi flottant — ne touche pas les bords de la toolbar */
.onyx-toolbar-btn::before {
    content: '';
    position: absolute;
    inset: .25rem .15rem;
    border-radius: .4rem;
    background: transparent;
    transition: background .12s;
    pointer-events: none;
    z-index: 0;
}

/* Contenu au-dessus du pseudo-élément */
.onyx-toolbar-btn > * {
    position: relative;
    z-index: 1;
}

.onyx-toolbar-btn:hover {
    color: var(--bg-primary, #374151);
}

.onyx-toolbar-btn:hover::before {
    background: color-mix(in srgb, var(--bg-primary, #6b7280) 10%, white);
}

.onyx-toolbar-btn.is-open {
    color: var(--bg-primary, #374151);
}

.onyx-toolbar-btn.is-open::before {
    background: color-mix(in srgb, var(--bg-primary, #6b7280) 15%, white);
}

.onyx-toolbar-btn.is-active {
    color: var(--bg-primary, #374151);
    font-weight: 600;
}

.onyx-toolbar-btn.is-active::before {
    background: color-mix(in srgb, var(--bg-primary, #6b7280) 14%, white);
}

.onyx-toolbar-btn.color-green             { color: #16a34a; }
.onyx-toolbar-btn.color-green:hover       { color: #15803d; }
.onyx-toolbar-btn.color-green:hover::before { background: #f0fdf4; }
.onyx-toolbar-btn.color-red               { color: #dc2626; }
.onyx-toolbar-btn.color-red:hover         { color: #b91c1c; }
.onyx-toolbar-btn.color-red:hover::before { background: #fef2f2; }

.onyx-toolbar-sep {
    width: 1px;
    background: color-mix(in srgb, var(--bg-primary, #6b7280) 18%, white);
    margin: .3rem 0;
    flex-shrink: 0;
    align-self: stretch;
}

.onyx-toolbar-chevron {
    font-size: .55rem;
    opacity: .55;
    transition: transform .15s;
    margin-left: .1rem;
}

.onyx-toolbar-btn.is-open .onyx-toolbar-chevron {
    transform: rotate(180deg);
}

/* ----- onyx Filter Bar ----- */

.onyx-filter-bar {
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--bg-primary, #6b7280) 20%, white);
    border-radius: .75rem;
    padding: .75rem 1rem;
    margin-bottom: .5rem;
    margin-top: .5rem;
    overflow: visible;
}

/* Utilitaire : autorise un enfant flex à rétrécir sous sa taille intrinsèque */
.min-width-0 { min-width: 0; }

.onyx-filter-bar-title {
    font-size: .75rem;
    font-weight: 700;
    color: var(--bg-primary, #6b7280);
    text-transform: uppercase;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* Compteur de filtres actifs, accolé au titre (couleur de marque) */
.onyx-filter-bar-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--bg-primary, #6b7280);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

/* ----- onyx Filter Panel ----- */

.onyx-filter-panel {
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--bg-primary, #6b7280) 20%, white);
    border-radius: .75rem;
    overflow: visible; /* Laisser les dropdowns Tom Select dépasser */
}

/* Coins arrondis portés par le premier et dernier enfant */
.onyx-filter-section:first-child {
    border-radius: .75rem .75rem 0 0;
}

.onyx-filter-section:last-child {
    border-radius: 0 0 .75rem .75rem;
}

.onyx-filter-section:only-child {
    border-radius: .75rem;
}

.onyx-filter-section {
    padding: .7rem 1.1rem .8rem;
    overflow: visible;
}

.onyx-filter-section + .onyx-filter-section {
    border-top: 1px solid color-mix(in srgb, var(--bg-primary, #6b7280) 8%, white);
}

.onyx-filter-section-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--bg-primary, #6b7280);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .45rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}

/* Select natif dans un filter-section : style intégré, sans double bordure */
.onyx-filter-section .onyx-select {
    background-color: color-mix(in srgb, var(--bg-primary, #6b7280) 5%, white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    border-color: color-mix(in srgb, var(--bg-primary, #6b7280) 20%, white);
    color: #374151;
    border-radius: .45rem;
}

.onyx-filter-section .onyx-select:hover {
    background-color: color-mix(in srgb, var(--bg-primary, #6b7280) 10%, white);
    border-color: color-mix(in srgb, var(--bg-primary, #6b7280) 35%, white);
}

.onyx-filter-section .onyx-select:focus {
    background-color: #fff;
    border-color: var(--bg-primary, #6b7280);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg-primary, #6b7280) 15%, transparent);
}

/* ----- Project Meeting Forms ----- */
.project-meeting-create-form .onyx-panel,
.project-meeting-update-form .onyx-panel { height: auto !important; overflow: visible; }
.project-meeting-create-form .onyx-panel-body,
.project-meeting-update-form .onyx-panel-body { padding: .75rem 1rem; }

/* ----- onyx SprintPicker ----- */
.onyx-select-carousel {
    position: relative;
    width: 100%;
}

.onyx-select-carousel-controls {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid var(--onyx-border, #dee2e6);
    border-radius: 8px;
    overflow: hidden;
    background: var(--onyx-bg-card, #fff);
    transition: border-color .15s, box-shadow .15s;
}

.onyx-select-carousel-controls:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .12);
}

.onyx-select-carousel-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    background: var(--onyx-carousel-arrow-bg, #f3f4f6);
    border: none;
    color: var(--text-color, #6c757d);
    cursor: pointer;
    transition: background .15s, color .15s;
    font-size: .8rem;
}

.onyx-select-carousel-arrow:first-child {
    border-right: 1px solid var(--onyx-border, #dee2e6);
}

.onyx-select-carousel-arrow:last-child,
.onyx-select-carousel-arrow-next,
.onyx-select-carousel-clear {
    border-left: 1px solid var(--onyx-border, #dee2e6);
}

.onyx-select-carousel-clear {
    color: var(--bs-danger, #dc3545);
}

.onyx-select-carousel-clear:hover:not(:disabled) {
    background: var(--bs-danger-bg-subtle, #f8d7da);
    color: var(--bs-danger, #dc3545);
}

.onyx-select-carousel-arrow:hover:not(:disabled) {
    background: var(--onyx-carousel-arrow-hover-bg, #e9ecef);
    color: var(--text-color, #212529);
}

.onyx-select-carousel-arrow:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.onyx-select-carousel-label {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    height: 35px;
    background: transparent;
    border: none;
    padding: 0 10px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-color, #212529);
    cursor: pointer;
    transition: background .15s;
    overflow: hidden;
}

.onyx-select-carousel-label:hover:not(:disabled) {
    background: var(--onyx-carousel-arrow-bg, #f3f4f6);
}

.onyx-select-carousel-label:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.onyx-select-carousel-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 200px;
    z-index: 1050;
    background: var(--onyx-bg-card, #fff);
    border: 1px solid var(--onyx-border, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
    overflow: hidden;
}

.onyx-select-carousel-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--onyx-border, #f0f0f0);
    color: var(--text-color, #6c757d);
    font-size: .8rem;
}

.onyx-select-carousel-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: .875rem;
    background: transparent;
    color: var(--text-color, #212529);
}

.onyx-select-carousel-list {
    max-height: 220px;
    overflow-y: auto;
}

.onyx-select-carousel-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    background: transparent;
    border: none;
    text-align: left;
    font-size: .875rem;
    color: var(--text-color, #212529);
    cursor: pointer;
    transition: background .1s;
}

.onyx-select-carousel-item:hover {
    background: var(--onyx-carousel-arrow-bg, #f3f4f6);
}

.onyx-select-carousel-item.active {
    background: rgba(59,130,246,0.12);
    color: #3b82f6;
    font-weight: 500;
}

.onyx-select-carousel-empty {
    padding: 12px 16px;
    font-size: .875rem;
    color: var(--text-color, #6c757d);
    text-align: center;
    font-style: italic;
}

/* ----- Kanban Backlog — column colors ----- */

.tk-board[data-col="NULL"],
.tk-board[data-col="Wait"],
.tk-board[data-col="Accep"]  { background: #f9fafb; }
.tk-board[data-col="Propo"]  { background: #f0f9ff; }
.tk-board[data-col="Progr"]  { background: #eff6ff; }
.tk-board[data-col="Test"],
.tk-board[data-col="Revie"]  { background: #fffbeb; }
.tk-board[data-col="Valid"],
.tk-board[data-col="Real"]   { background: #f0fdf4; }
.tk-board[data-col="Refus"]  { background: #fef2f2; }

.tk-board[data-col="NULL"]  .tk-board-header,
.tk-board[data-col="Wait"]  .tk-board-header,
.tk-board[data-col="Accep"] .tk-board-header { background: rgba(243,244,246,.9); }
.tk-board[data-col="Propo"] .tk-board-header { background: rgba(224,242,254,.9); }
.tk-board[data-col="Progr"] .tk-board-header { background: rgba(219,234,254,.9); }
.tk-board[data-col="Test"]  .tk-board-header,
.tk-board[data-col="Revie"] .tk-board-header { background: rgba(254,243,199,.9); }
.tk-board[data-col="Valid"] .tk-board-header,
.tk-board[data-col="Real"]  .tk-board-header { background: rgba(220,252,231,.9); }
.tk-board[data-col="Refus"] .tk-board-header { background: rgba(254,226,226,.9); }

/* Backlog card — no colored border, delete on hover */
.tkcard--backlog { border-left: none; }

.tkcard--selected {
    background-color: #eff6ff;
    box-shadow: 0 0 0 2px #3b82f6;
}

.tkcard-checkbox {
    display: flex;
    align-items: center;
}

.tkcard-checkbox .form-check-input {
    width: 15px;
    height: 15px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

.tkcard-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #d1d5db;
    font-size: .7rem;
    cursor: pointer;
    transition: color .15s, background .15s;
    opacity: 0;
}

.tkcard:hover .tkcard-delete-btn { opacity: 1; }

.tkcard-delete-btn:hover {
    color: #ef4444;
    background: #fef2f2;
}

/* ----- onyx Charges Tables ----- */

/* Légende heatmap */
.charges-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.charges-legend-item {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    white-space: nowrap;
}

/* En-tetes de colonnes triables */
.charges-sort-header {
    cursor: pointer;
    white-space: nowrap;
}
.charges-sort-header:hover {
    color: var(--bs-primary, #0d6efd);
}
.charges-sort-header:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
    border-radius: 2px;
    color: var(--bs-primary, #0d6efd);
}
.charges-sort-icon-idle {
    opacity: 0.35;
    font-size: 0.85em;
}

/* Tableaux pivot Charges : en-tete, 1re colonne et pied figes au defilement */
.charges-pivot-wrap {
    max-height: 70vh;
    overflow: auto;
}
.charges-pivot-wrap > table {
    margin-bottom: 0;
}
.charges-pivot-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #fff;
}
.charges-pivot-wrap thead th:first-child,
.charges-pivot-wrap tbody td:first-child {
    position: sticky;
    left: 0;
    background-color: #fff;
}
.charges-pivot-wrap tbody td:first-child {
    z-index: 1;
}
.charges-pivot-wrap thead th:first-child {
    z-index: 3;
}
.charges-pivot-wrap tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background-color: #f8f9fa;
}

/* ----- onyx Nav Tabs ----- */

.onyx-nav-tabs {
    display: flex;
    flex-wrap: wrap;
    background: var(--onyx-tabs-bg, #f3f4f6);
    border-radius: .5rem;
    padding: .1875rem;
    gap: .125rem;
    width: fit-content;
}

.onyx-nav-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4375rem 1rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-color, #6b7280);
    background: transparent;
    border-radius: .375rem;
    text-decoration: none;
    white-space: nowrap;
    transition: all .15s ease;
}

.onyx-nav-tab-btn i {
    font-size: .75rem;
}

.onyx-nav-tab-btn:hover {
    color: var(--text-color, #374151);
    background: var(--onyx-tab-hover-bg, rgba(255, 255, 255, .6));
    text-decoration: none;
}

.onyx-nav-tab-btn.active {
    background: var(--onyx-tab-active-bg, #fff) !important;
    color: var(--text-color, #111827) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* ----- onyx Nav Buttons (sous-onglets, style boutons individuels) ----- */

.onyx-nav-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    /* Aligne le 1er bouton sur le 1er onglet des pills (.onyx-nav-tabs a padding .1875rem) */
    padding-left: .1875rem;
}

.onyx-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background-color: var(--onyx-nav-btn-bg, #f1f1f1);
    border: 1px solid var(--onyx-nav-btn-border, #dee2e6);
    padding: .5rem 1rem;
    border-radius: 8px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--onyx-nav-btn-color, #555);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.onyx-nav-btn i {
    font-size: .75rem;
}

.onyx-nav-btn:hover {
    background-color: var(--onyx-nav-btn-hover-bg, #e2e6ea);
    color: var(--onyx-nav-btn-hover-color, #000);
    text-decoration: none;
}

.onyx-nav-btn.active {
    background-color: var(--onyx-nav-btn-active-bg, #0d6efd);
    color: var(--onyx-nav-btn-active-color, #fff);
    border-color: var(--onyx-nav-btn-active-bg, #0d6efd);
    cursor: default;
}

/* ----- onyx StarRating ----- */

.onyx-star-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* Aligne la hauteur sur onyx-input-md (padding .4375rem + font .8125rem) */
    padding: .4375rem 0;
    min-height: calc(.875rem + .8125rem * 1.5 + 2px);
}

.onyx-star-rating-stars {
    display: flex;
    align-items: center;
    gap: 1px;
}

.onyx-star-rating-btn {
    background: none;
    border: none;
    padding: 2px 3px;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    transition: transform .1s ease;
}

.onyx-star-rating-btn:hover {
    transform: scale(1.2);
}

.onyx-star-rating-btn:disabled {
    cursor: default;
    pointer-events: none;
}

.onyx-star-active {
    color: #f59e0b;
}

.onyx-star-inactive {
    color: #d1d5db;
}

.onyx-star-rating-clear {
    background: none;
    border: none;
    padding: 2px 5px;
    cursor: pointer;
    font-size: .75rem;
    color: #9ca3af;
    line-height: 1;
    transition: color .1s ease;
    margin-left: 2px;
}

.onyx-star-rating-clear:hover {
    color: #6b7280;
}

/* ----- onyx BacklogMeta ----- */

.onyx-backlog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    background: var(--onyx-bg-card, #fff);
    border: 1px solid var(--onyx-border, #e5e7eb);
    border-radius: .625rem;
    padding: .75rem 1.125rem;
}

.onyx-meta-item {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.onyx-meta-icon {
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    flex-shrink: 0;
}

.onyx-meta-icon-blue  { background: var(--onyx-meta-icon-blue-bg, #eff6ff); color: #3b82f6; }
.onyx-meta-icon-green { background: var(--onyx-meta-icon-green-bg, #f0fdf4); color: #22c55e; }
.onyx-meta-icon-amber { background: var(--onyx-meta-icon-amber-bg, #fffbeb); color: #f59e0b; }

.onyx-meta-label {
    font-size: .675rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9ca3af;
    line-height: 1;
    margin-bottom: .2rem;
}

.onyx-meta-value {
    font-size: .8125rem;
    color: #374151;
    font-weight: 500;
    line-height: 1.2;
}

.onyx-meta-sep {
    width: 1px;
    height: 2rem;
    background: var(--onyx-border, #e5e7eb);
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .onyx-meta-sep { display: none; }
}

/* ----- onyx Tab Badge ----- */

.onyx-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .3rem;
    font-size: .65rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    background: #6b7280;
    color: #fff;
}

.onyx-tab-btn.active .onyx-tab-badge {
    background: #3b82f6;
}

/* ----- onyx ColorSwatch ----- */

.onyx-color-swatch {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: .4375rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    transition: transform .1s, box-shadow .1s;
    flex-shrink: 0;
}

.onyx-color-swatch:hover {
    transform: scale(1.1);
}

.onyx-color-swatch-active {
    transform: scale(1.08);
    outline: 2px solid #fff;
    outline-offset: -4px;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .22);
}

/* ----- Category Color Picker ----- */

.category-color-picker {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.category-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    flex: 1;
}

.category-color-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 7rem;
    padding: .625rem .875rem;
    background: var(--onyx-surface, #f8f9fa);
    border: 1px solid var(--onyx-border, #e5e7eb);
    border-radius: .5rem;
    text-align: center;
}

.category-preview-badge {
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
}

.category-preview-label {
    font-size: .7rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* ----- onyx Tabs Wire ----- */

.onyx-tabs-fill {
    width: 100%;
}

.onyx-tabs-fill .onyx-tab-btn {
    flex: 1 1 0;
    justify-content: center;
}

/* Soft base badge for tabs-wire (overrides solid gray from original component) */
.onyx-tabs-wire .onyx-tab-badge {
    background: rgba(107, 114, 128, .14);
    color: #6b7280;
}

.onyx-tabs-wire .onyx-tab-btn.active .onyx-tab-badge {
    background: rgba(17, 24, 39, .09);
    color: #374151;
}

/* Color variants — inactive */
.onyx-tabs-wire .onyx-tab-badge-green { background: rgba(22, 163, 74, .15); color: #15803d; }
.onyx-tabs-wire .onyx-tab-badge-blue  { background: rgba(59, 130, 246, .15); color: #2563eb; }
.onyx-tabs-wire .onyx-tab-badge-amber { background: rgba(245, 158, 11, .15); color: #b45309; }
.onyx-tabs-wire .onyx-tab-badge-red   { background: rgba(220, 53, 69, .15);  color: #b91c1c; }

/* Color variants — active tab (wins over .onyx-tab-btn.active .onyx-tab-badge thanks to higher specificity) */
.onyx-tabs-wire .onyx-tab-btn.active .onyx-tab-badge-green { background: rgba(22, 163, 74, .2);  color: #15803d; }
.onyx-tabs-wire .onyx-tab-btn.active .onyx-tab-badge-blue  { background: rgba(59, 130, 246, .2); color: #2563eb; }
.onyx-tabs-wire .onyx-tab-btn.active .onyx-tab-badge-amber { background: rgba(245, 158, 11, .2); color: #b45309; }
.onyx-tabs-wire .onyx-tab-btn.active .onyx-tab-badge-red   { background: rgba(220, 53, 69, .2);  color: #b91c1c; }

/* Client access list */
.onyx-client-list {
    border: 1px solid var(--onyx-border, #e5e7eb);
    border-radius: .5rem;
    overflow: hidden;
    overflow-y: auto;
    max-height: 340px;
}

.onyx-client-row {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .55rem .875rem;
    border-bottom: 1px solid var(--onyx-border, #e5e7eb);
    cursor: pointer;
    transition: background .1s ease;
    margin: 0;
    font-weight: 400;
}

.onyx-client-row:last-child {
    border-bottom: none;
}

.onyx-client-row:hover {
    background: var(--onyx-surface-subtle, #f8f9fa);
}

.onyx-client-row.is-selected {
    background: rgba(13, 110, 253, .05);
}

.onyx-client-row.is-selected .onyx-client-name {
    font-weight: 600;
    color: #1d4ed8;
}

.onyx-client-row input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 0;
}

.onyx-client-name {
    flex: 1;
    font-size: .875rem;
    transition: color .1s ease;
}

.onyx-client-id {
    font-size: .75rem;
    color: #9ca3af;
}

.onyx-client-check {
    font-size: .7rem;
    color: #2563eb;
    opacity: 0;
    transition: opacity .1s ease;
}

.onyx-client-row.is-selected .onyx-client-check {
    opacity: 1;
}

/* =====================================================
   onyx-rich-editor — état d'erreur
   ===================================================== */

.onyx-rich-editor-error {
    border-radius: .375rem;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, .35);
    transition: box-shadow .15s ease;
}

/* =====================================================
   onyx-toast — système de notifications toast
   ===================================================== */

.onyx-toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 99999;
    display: flex;
    flex-direction: column-reverse;
    gap: .65rem;
    pointer-events: none;
    max-width: calc(100vw - 3rem);
    width: 380px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.onyx-toast {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .95rem 1rem .95rem 1rem;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-radius: .75rem;
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        0 1px 2px rgba(15, 23, 42, .04),
        0 12px 28px -8px rgba(15, 23, 42, .18),
        0 32px 64px -16px rgba(15, 23, 42, .25);
    color: #0f172a;
    font-size: .875rem;
    line-height: 1.5;
    overflow: hidden;
    animation: onyx-toast-slide-in .32s cubic-bezier(.22, 1, .36, 1);
    transition: transform .18s ease, box-shadow .18s ease;
}

.onyx-toast--success {
    background: linear-gradient(135deg, rgba(255, 255, 255, .82) 0%, rgba(220, 252, 231, .72) 100%);
    border-color: rgba(34, 197, 94, .22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        0 1px 2px rgba(15, 23, 42, .04),
        0 12px 28px -8px rgba(34, 197, 94, .12),
        0 32px 64px -16px rgba(15, 23, 42, .2);
}

.onyx-toast--error {
    background: linear-gradient(135deg, rgba(255, 255, 255, .82) 0%, rgba(254, 226, 226, .72) 100%);
    border-color: rgba(239, 68, 68, .22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        0 1px 2px rgba(15, 23, 42, .04),
        0 12px 28px -8px rgba(239, 68, 68, .12),
        0 32px 64px -16px rgba(15, 23, 42, .2);
}

.onyx-toast--warning {
    background: linear-gradient(135deg, rgba(255, 255, 255, .82) 0%, rgba(254, 243, 199, .72) 100%);
    border-color: rgba(245, 158, 11, .26);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        0 1px 2px rgba(15, 23, 42, .04),
        0 12px 28px -8px rgba(245, 158, 11, .12),
        0 32px 64px -16px rgba(15, 23, 42, .2);
}

.onyx-toast--info {
    background: linear-gradient(135deg, rgba(255, 255, 255, .82) 0%, rgba(219, 234, 254, .72) 100%);
    border-color: rgba(59, 130, 246, .22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        0 1px 2px rgba(15, 23, 42, .04),
        0 12px 28px -8px rgba(59, 130, 246, .12),
        0 32px 64px -16px rgba(15, 23, 42, .2);
}

.onyx-toast:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, .02),
        0 4px 8px rgba(15, 23, 42, .06),
        0 16px 32px -4px rgba(15, 23, 42, .12),
        0 32px 64px -16px rgba(15, 23, 42, .22);
}

.onyx-toast-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    margin-top: .05rem;
}

.onyx-toast--success .onyx-toast-icon {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #15803d;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .08);
}

.onyx-toast--error .onyx-toast-icon {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #b91c1c;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .08);
}

.onyx-toast--warning .onyx-toast-icon {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #b45309;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .08);
}

.onyx-toast--info .onyx-toast-icon {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1d4ed8;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .08);
}

.onyx-toast-body {
    flex: 1;
    min-width: 0;
    padding-top: .1rem;
}

.onyx-toast-title {
    font-weight: 600;
    color: #0f172a;
    font-size: .9rem;
    margin: 0 0 .15rem 0;
    letter-spacing: -.01em;
}

.onyx-toast-message {
    margin: 0;
    color: #475569;
    word-wrap: break-word;
    font-size: .85rem;
    line-height: 1.5;
}

.onyx-toast-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    background: transparent;
    border: 0;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    margin-left: .25rem;
    margin-right: -.25rem;
    border-radius: .375rem;
    font-size: .75rem;
    line-height: 1;
    transition: background .15s ease, color .15s ease;
}

.onyx-toast-close:hover {
    color: #0f172a;
    background: rgba(15, 23, 42, .06);
}

.onyx-toast-close:active {
    background: rgba(15, 23, 42, .1);
}

@keyframes onyx-toast-slide-in {
    0% {
        opacity: 0;
        transform: translateX(120%) scale(.96);
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes onyx-toast-slide-out {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
        max-height: 200px;
        margin-bottom: 0;
        padding-top: .95rem;
        padding-bottom: .95rem;
    }
    60% {
        opacity: 0;
        transform: translateX(120%) scale(.94);
        max-height: 200px;
        padding-top: .95rem;
        padding-bottom: .95rem;
    }
    100% {
        opacity: 0;
        transform: translateX(120%) scale(.94);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: calc(-.65rem - 1px);
        border-width: 0;
    }
}

.onyx-toast.is-leaving {
    animation: onyx-toast-slide-out .26s cubic-bezier(.4, 0, 1, 1) forwards;
    pointer-events: none;
    transition: none;
}

@media (max-width: 480px) {
    .onyx-toast-container {
        right: .75rem;
        bottom: .75rem;
        left: .75rem;
        max-width: none;
        width: auto;
    }
}

/* ----- onyx Ticket Card (backlog tickets tab) ----- */

.onyx-ticket-search-field {
    position: relative;
}

.onyx-ticket-search-status {
    position: absolute;
    top: 1.05rem;
    right: .85rem;
    transform: translateY(-50%);
    color: var(--onyx-primary, #3b82f6);
    pointer-events: none;
}

.onyx-ticket-search-hint {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .4rem;
    font-size: .75rem;
    color: var(--onyx-text-muted, #9ca3af);
}

.onyx-ticket-scroll {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.onyx-ticket-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--onyx-text, #374151);
    margin-bottom: .75rem;
}

.onyx-ticket-section-title > i {
    color: var(--onyx-primary, #3b82f6);
}

.onyx-ticket-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--onyx-bg-hover, #f3f4f6);
    color: var(--onyx-text-muted, #6b7280);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: 0;
}

.onyx-ticket-list {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.onyx-ticket-card {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    background: var(--onyx-bg-card, #fff);
    border: 1px solid var(--onyx-border, #e5e7eb);
    border-radius: .625rem;
    padding: .875rem 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.onyx-ticket-card:hover {
    border-color: var(--onyx-primary, #3b82f6);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
}

.onyx-ticket-card-main {
    min-width: 0;
    flex: 1 1 auto;
}

.onyx-ticket-card-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .4rem;
}

.onyx-ticket-title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--onyx-text, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.onyx-ticket-desc {
    margin: 0 0 .55rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--onyx-text-muted, #6b7280);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.onyx-ticket-foot {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.onyx-ticket-asker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--onyx-text, #4b5563);
}

.onyx-ticket-asker-unknown {
    color: var(--onyx-text-muted, #9ca3af);
    font-style: italic;
    font-weight: 400;
}

.onyx-ticket-card-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: .5rem;
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .onyx-ticket-card {
        flex-direction: column;
        align-items: stretch;
    }

    .onyx-ticket-card-actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
}

/* ----- onyx Placeholder chip / Message preview ----- */
.onyx-placeholder-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #0f766e;
    border: 1px solid #e2e8f0;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.8125rem;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.onyx-placeholder-chip:hover,
.onyx-placeholder-chip:focus-visible {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
    outline: none;
}

/* Aperçu façon e-mail */
.onyx-mail-preview {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    max-width: 640px;
}

.onyx-mail-preview-title {
    padding: 16px 20px;
    border-bottom: 1px solid #eef2f7;
    font-weight: 700;
    font-size: 1rem;
    color: #3d3b3d;
    background: #f8fafc;
}

.onyx-mail-preview-body {
    padding: 20px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #3d3b3d;
}

.onyx-mail-preview-btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 4px;
    background: #5777d0;
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: not-allowed;
    opacity: 0.85;
    user-select: none;
}

.onyx-mail-preview-footer {
    margin-top: 18px;
    color: #64748b;
    font-size: 0.8125rem;
}

.onyx-mail-preview-link {
    color: #5777d0;
    text-decoration: underline;
}
/* ----- messagerie ----- */
.messagerie-row {
    transition: background-color .12s ease;
}

.messagerie-row:hover {
    background-color: var(--onyx-bg-subtle, #f8fafc);
}

.messagerie-row-unread {
    background-color: var(--onyx-bg-accent-subtle, #eff6ff);
}

.messagerie-row-selected {
    background-color: var(--onyx-bg-accent-subtle, #eff6ff);
    border-left: 3px solid var(--onyx-primary, #3b82f6);
}

.messagerie-body {
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.55;
}

/* ----- onyx Mail View (liste + volet de lecture, boîte mail CRM) ----- */
.onyx-mail-view-list {
    border-right: 1px solid var(--onyx-border, #e5e7eb);
    border-bottom: 1px solid var(--onyx-border, #e5e7eb);
    max-height: 720px;
    overflow-y: auto;
}

/* < lg : les colonnes liste/lecture s'empilent (col-12) au lieu du côte-à-côte —
   sans cette limite, la liste garde sa hauteur desktop et se retrouve collée
   au volet de lecture juste en dessous, sans séparation visuelle claire. */
@media (max-width: 991.98px) {
    .onyx-mail-view-list {
        max-height: 45vh;
        border-right: none;
    }
}

.onyx-mail-view-group-label {
    padding: .5rem 1rem;
    background: var(--onyx-bg-subtle, #f8fafc);
    border-bottom: 1px solid var(--onyx-border, #e5e7eb);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--onyx-text-muted, #9ca3af);
    text-transform: uppercase;
}

/* En-tête de section au-dessus du contenu du mail / des pièces jointes. */
.onyx-mail-section-header {
    background: var(--onyx-bg-subtle, #f8f9fa);
}

.messagerie-body img {
    max-width: 100%;
    height: auto;
}

/* ----- onyx Rating Stars (affichage lecture seule, demi-étoiles) ----- */
.onyx-rating-stars {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    color: #f59e0b;
    white-space: nowrap;
}

.onyx-rating-stars .onyx-rating-star-empty {
    color: #d1d5db;
}

/* ----- onyx Card ----- */
.onyx-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    /* visible : ne pas couper les menus déroulants des cartes */
    overflow: visible;
    transition: border-color .2s, box-shadow .2s;
}

.onyx-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

.onyx-card-body {
    flex: 1 1 auto;
    padding: 1rem 1.25rem;
}

.onyx-card-footer {
    padding: .625rem 1.25rem;
    border-top: 1px solid #f3f4f6;
    background: #fafafa;
    border-radius: 0 0 .75rem .75rem;
    font-size: .78rem;
    color: #6b7280;
}

.onyx-card-footer .onyx-badge {
    font-size: .7rem;
}

/* Couverture média */
.onyx-card-media {
    position: relative;
    height: 96px;
    background: #f3f4f6;
    border-radius: .75rem .75rem 0 0;
    overflow: hidden;
}

/* Bande compacte pour les cartes sans visuel possible (ex. interventions) :
   pas de couverture, juste le bandeau coloré + overlays (case, statut). */
.onyx-card-media.onyx-card-media--strip {
    height: 80px;
}

.onyx-card-media > a {
    display: block;
    height: 100%;
    position: relative;
}

/* Header média utilisé en bloc autonome (sidebar de formulaire) : coins entièrement arrondis */
.onyx-card-media--block {
    border-radius: .75rem;
}

/* Placeholder (pas d'image) : icône du type centrée sur le dégradé */
.onyx-card-media-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
}

/* Avec image : vignette rectangulaire arrondie centrée sur le dégradé (pas pleine largeur) */
.onyx-card-media-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 104px;
    height: 68px;
    object-fit: cover;
    border-radius: .6rem;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .14);
    /* Skeleton tant que l'image (lazy) n'est pas chargée — évite le clignotement blanc */
    background: linear-gradient(100deg, #eceff1 30%, #f5f6f7 50%, #eceff1 70%);
    background-size: 200% 100%;
    animation: onyx-skeleton 1.3s ease-in-out infinite;
}

.onyx-card-media-img.onyx-img-loaded {
    background: #fff;
    animation: none;
}

@keyframes onyx-skeleton {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.onyx-card-media--simple {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
}

.onyx-card-media--simple .onyx-card-media-ph {
    color: #60a5fa;
}

.onyx-card-media--booklet {
    background: linear-gradient(135deg, #faf5ff, #f3e8ff);
}

.onyx-card-media--booklet .onyx-card-media-ph {
    color: #c084fc;
}

.onyx-card-media--schema {
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
}

.onyx-card-media--schema .onyx-card-media-ph {
    color: #2dd4bf;
}

/* Projets : gris-bleu très clair (plus doux que --simple) */
.onyx-card-media--project {
    background: linear-gradient(135deg, #f7f9fc, #e6ecf3);
}

.onyx-card-media--project .onyx-card-media-ph {
    color: #60a5fa;
}

.onyx-card-media-tl {
    position: absolute;
    top: .5rem;
    left: .5rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.onyx-card-media-tl .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    cursor: pointer;
}

.onyx-card-media-bl {
    position: absolute;
    bottom: .5rem;
    left: .5rem;
}

/* Menu d'actions en overlay (haut-droit), placé sur .onyx-card pour ne pas être coupé */
.onyx-card-actions {
    position: absolute;
    top: .4rem;
    right: .4rem;
    z-index: 3;
}

/* Étoile favori dans le footer */
.onyx-card-fav {
    border: none;
    background: none;
    padding: .1rem .35rem;
    font-size: 1.25rem;
    line-height: 1;
    color: #d1d5db;
    transition: color .15s, transform .15s;
}

.onyx-card-fav:hover {
    transform: scale(1.15);
    color: #f59e0b;
}

.onyx-card-fav.is-active {
    color: #f59e0b;
}

/* Indicateur de partage discret dans la zone méta */
.onyx-card-share-flag {
    font-size: .8rem;
}

.onyx-card-share-flag.is-internal {
    color: #0ea5e9;
}

.onyx-card-share-flag.is-external {
    color: #f97316;
}

/* Corps */
.onyx-card-title {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 .35rem;
    /* Reprend la couleur de .ticketbox-header (variable selon le thème) */
    color: inherit;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.onyx-card-title-link {
    text-decoration: none;
}

.onyx-card-title-link:hover .onyx-card-title {
    text-decoration: underline;
}

.onyx-card-excerpt {
    font-size: .82rem;
    color: #6b7280;
    line-height: 1.4;
    margin: 0 0 .6rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.onyx-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.onyx-card-footer .avatar-xs {
    vertical-align: middle;
}

/* ----- onyx Hover Actions (révèle des actions au survol d'un conteneur) ----- */
.onyx-hover-actions {
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}
.onyx-hover-actions-host:hover .onyx-hover-actions,
.onyx-hover-actions-host:focus-within .onyx-hover-actions {
    opacity: 1;
    pointer-events: auto;
}
/* Appareil tactile (pas de survol) : on garde les actions visibles. */
@media (hover: none) {
    .onyx-hover-actions {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ----- onyx Link card (bookmark cliquable) ----- */
.onyx-link-card {
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.onyx-link-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
}
/* Lien étiré : un pseudo-élément couvre toute la carte (parent position:relative)
   pour la rendre entièrement cliquable, sans imbriquer de balises <a>. */
.onyx-link-stretch::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* Les actions (modifier/supprimer) passent au-dessus du lien étiré. */
.onyx-link-card .onyx-link-actions {
    position: relative;
    z-index: 2;
}

/* ----- onyx Tag input (chips) ----- */
.onyx-tag-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    width: 100%;
    padding: .35rem .5rem;
    background: #fff;
    border: 1px solid var(--onyx-border, #e5e7eb);
    border-radius: .6rem;
    cursor: text;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.onyx-tag-input-sm { padding: .25rem .45rem; min-height: 2.1rem; }
.onyx-tag-input-md { min-height: 2.5rem; }
.onyx-tag-input-lg { padding: .5rem .65rem; min-height: 2.9rem; }
.onyx-tag-input:focus-within {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}
.onyx-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .12rem .25rem .12rem .55rem;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 1rem;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.4;
    max-width: 100%;
}
.onyx-tag-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.onyx-tag-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #3b82f6;
    font-size: .7rem;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.onyx-tag-chip-remove:hover {
    background: #dbeafe;
    color: #1e3a8a;
}
.onyx-tag-input-field {
    flex: 1 1 6rem;
    min-width: 6rem;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: .85rem;
    color: inherit;
}
.onyx-tag-input-field::placeholder { color: #9ca3af; }

/* ----- onyx Link Button (action textuelle discrète : copier, afficher tout…) ----- */
.onyx-link-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2563eb;
    font-size: .76rem;
    font-weight: 500;
    cursor: pointer;
    transition: color .12s ease;
}
.onyx-link-btn:hover {
    color: #1e40af;
    text-decoration: underline;
}

/* ----- onyx Notification Center ----- */
.onyx-notif-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.onyx-notif-tabs {
    display: inline-flex;
    gap: .25rem;
    padding: .25rem;
    background: #f1f5f9;
    border-radius: .65rem;
}
.onyx-notif-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .85rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: #64748b;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.onyx-notif-tab:hover { color: #1e293b; }
.onyx-notif-tab.is-active {
    background: #ffffff;
    color: #1e293b;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}
.onyx-notif-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: .7rem;
    font-weight: 600;
}
.onyx-notif-tab.is-active .onyx-notif-tab-count {
    background: #2563eb;
    color: #ffffff;
}
.onyx-notif-tools {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.onyx-notif-types {
    display: inline-flex;
    gap: .3rem;
    flex-wrap: wrap;
}
.onyx-notif-type-pill {
    padding: .3rem .75rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #ffffff;
    color: #64748b;
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .12s ease;
}
.onyx-notif-type-pill:hover {
    border-color: #93c5fd;
    color: #2563eb;
}
.onyx-notif-type-pill.is-active {
    background: #eff6ff;
    border-color: #2563eb;
    color: #2563eb;
}
.onyx-notif-digest {
    display: inline-flex;
    align-items: center;
    padding-left: .75rem;
    border-left: 1px solid #e2e8f0;
    font-size: .8rem;
    color: #64748b;
}
.onyx-notif-panel { overflow: hidden; }
.onyx-notif-group {
    padding: .55rem 1.15rem .35rem;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #94a3b8;
}
.onyx-notif-loading { opacity: .55; pointer-events: none; transition: opacity .12s ease; }
.onyx-notif-item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background .12s ease;
}
.onyx-notif-item:last-child { border-bottom: 0; }
.onyx-notif-item:hover { background: #f8fafc; }
.onyx-notif-item.is-unread {
    background: #fbfdff;
}
.onyx-notif-item.is-unread:hover { background: #f0f6ff; }
.onyx-notif-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .8rem;
    font-size: 1rem;
}
.onyx-notif-accent-blue { background: #eff6ff; color: #2563eb; }
.onyx-notif-accent-indigo { background: #eef2ff; color: #4f46e5; }
.onyx-notif-accent-red { background: #fef2f2; color: #dc2626; }
.onyx-notif-accent-amber { background: #fffbeb; color: #d97706; }
.onyx-notif-accent-purple { background: #faf5ff; color: #9333ea; }
.onyx-notif-body { flex: 1; min-width: 0; }
.onyx-notif-body[role="button"] { cursor: pointer; }
.onyx-notif-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.onyx-notif-title {
    font-size: .9rem;
    font-weight: 600;
    color: #1e293b;
}
.onyx-notif-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: #2563eb;
    flex-shrink: 0;
}
.onyx-notif-text {
    margin: .25rem 0 0;
    font-size: .84rem;
    color: #475569;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.onyx-notif-context {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .3rem 0 0;
    font-size: .8rem;
    font-weight: 500;
    color: #334155;
}
.onyx-notif-context i { color: #94a3b8; font-size: .7rem; }
.onyx-notif-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: .4rem;
    font-size: .74rem;
    color: #94a3b8;
}
.onyx-notif-open-hint {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #2563eb;
    font-weight: 500;
    opacity: 0;
    transition: opacity .12s ease;
}
.onyx-notif-item:hover .onyx-notif-open-hint { opacity: 1; }
.onyx-notif-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .12s ease;
}
.onyx-notif-item:hover .onyx-notif-actions,
.onyx-notif-actions:focus-within { opacity: 1; }
.onyx-notif-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    background: #ffffff;
    color: #64748b;
    font-size: .8rem;
    cursor: pointer;
    transition: all .12s ease;
}
.onyx-notif-action:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #2563eb;
}
.onyx-notif-action.is-success:hover {
    border-color: #86efac;
    background: #f0fdf4;
    color: #16a34a;
}
.onyx-notif-action.is-danger:hover {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #dc2626;
}
.onyx-notif-pagination {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}
@media (max-width: 768px) {
    .onyx-notif-actions { opacity: 1; }
    .onyx-notif-open-hint { opacity: 1; }
}

/* ----- onyx Notification Bell (dropdown herobar) ----- */
.onyx-notif-bell-menu {
    width: 380px;
    max-width: 92vw;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
    overflow: hidden;
}
.onyx-notif-bell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}
.onyx-notif-bell-title {
    font-size: .9rem;
    font-weight: 600;
    color: #1e293b;
}
.onyx-notif-bell-count {
    padding: .15rem .55rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: .72rem;
    font-weight: 600;
}
.onyx-notif-bell-item {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    width: 100%;
    padding: .7rem 1rem;
    border: 0;
    border-bottom: 1px solid #f8fafc;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease;
}
.onyx-notif-bell-item:hover { background: #e8f0fe; }
.onyx-notif-bell-open {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.onyx-notif-bell-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: .55rem;
    background: #ffffff;
    color: #94a3b8;
    font-size: .75rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease, border-color .12s ease, background .12s ease;
}
.onyx-notif-bell-item:hover .onyx-notif-bell-mark,
.onyx-notif-bell-mark:focus-visible { opacity: 1; }
.onyx-notif-bell-mark:hover {
    color: #16a34a;
    border-color: #86efac;
    background: #f0fdf4;
}
.onyx-notif-bell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .65rem;
    font-size: .85rem;
}
.onyx-notif-bell-body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.onyx-notif-bell-item-title {
    font-size: .82rem;
    font-weight: 600;
    color: #1e293b;
}
.onyx-notif-bell-item-text {
    font-size: .76rem;
    color: #64748b;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.onyx-notif-bell-item-time {
    margin-top: .15rem;
    font-size: .7rem;
    color: #94a3b8;
}
.onyx-notif-bell-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 1.6rem 1rem;
    color: #94a3b8;
    font-size: .82rem;
}
.onyx-notif-bell-empty i { font-size: 1.3rem; }
.onyx-notif-bell-foot {
    padding: .7rem 1rem;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}
.onyx-notif-bell-types {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}
.onyx-notif-bell-type {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: .72rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .12s ease;
}
.onyx-notif-bell-type:hover { border-color: #93c5fd; color: #2563eb; }
.onyx-notif-bell-type span {
    padding: 0 .35rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 600;
}
.onyx-notif-bell-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .45rem;
    border-radius: .5rem;
    background: #2563eb;
    color: #ffffff !important;
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .12s ease;
}
.onyx-notif-bell-all:hover { background: #1d4ed8; color: #ffffff; }

/* Centre de notifications — recherche texte */
.onyx-notif-search {
    width: 220px;
    flex: 0 0 auto;
}
.onyx-notif-search .onyx-input-group { margin-bottom: 0; }

/* Centre de notifications — regroupement des alertes similaires */
.onyx-notif-cluster {
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}
.onyx-notif-cluster:last-child { border-bottom: 0; }
.onyx-notif-cluster-head {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1rem 1.15rem;
    transition: background .12s ease;
}
.onyx-notif-cluster-head:hover { background: #f1f5f9; }
.onyx-notif-cluster-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: .35rem;
}
.onyx-notif-cluster-toggle i { transition: transform .15s ease; }
.onyx-notif-cluster-items {
    border-top: 1px solid #f1f5f9;
    background: #ffffff;
}
.onyx-notif-cluster-items .onyx-notif-item { padding-left: 2.1rem; }

/* ----- onyx Top Menu (dropdowns herobar : admin, paramètres, outils, profil) ----- */
.onyx-topmenu-menu {
    width: 300px;
    max-width: 92vw;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
    overflow: hidden;
}
.onyx-topmenu-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}
.onyx-topmenu-title {
    font-size: .9rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}
.onyx-topmenu-sub {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    color: #64748b;
    margin-top: .1rem;
}
.onyx-topmenu-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .55rem 1rem;
    border: 0;
    background: transparent;
    color: #334155 !important;
    font-size: .84rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease;
    white-space: normal;
}
.onyx-topmenu-item:hover { background: #e8f0fe; color: #1d4ed8 !important; }
.onyx-topbar-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    stroke: currentColor;
    margin-top: -4px;
}
/* Le bouton support hérite des paddings .btn : on le réaligne sur les nav-link */
.headerbar #customer-sav {
    padding: 0 4px;
    line-height: 50px;
    border: 0;
}
.onyx-topbar-badge {
    position: absolute;
    right: -.55rem;
    bottom: -.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 .28rem;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;
    border: 2px solid rgba(255, 255, 255, .9);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
    pointer-events: none;
}
.onyx-topmenu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: .55rem;
    font-size: .78rem;
}
.onyx-topmenu-badge {
    margin-left: auto;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: .7rem;
    font-weight: 600;
}
.onyx-topmenu-divider {
    height: 1px;
    margin: .3rem 0;
    background: #f1f5f9;
}
.onyx-topmenu-avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Footer d'action collant pour les formulaires longs en modal (DynamicForm stickyButton) */
.dynform-sticky-footer {
    position: sticky;
    /* Ancré 1.25rem plus bas pour couvrir le padding bas du modal-body :
       sinon un liseré de contenu reste visible sous le footer pendant le scroll. */
    bottom: -1.25rem;
    /* Au-dessus des overlays internes du rich editor (z-index ≤ 100),
       sous les popups transitoires (menu slash 1090) et le plein écran (100000). */
    z-index: 500;
    background: #fff;
    /* Déborde sur les côtés jusqu'aux bords du modal-body. */
    margin: 1rem -1.25rem 0;
    /* Padding bas généreux pour garder de l'air sous le bouton malgré l'ancrage bas. */
    padding: .75rem 1.25rem 1.75rem;
    border-top: 1px solid var(--onyx-border, #e5e7eb);
}

/* CTA « Interroger mon contrat » (sidebar de fiche — contrat, réutilisable).
   Volontairement sobre (pas de codes visuels « IA » : ni violet, ni sparkles). */
.onyx-ai-cta {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .7rem .8rem;
    border-radius: .65rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #1f2937;
    text-decoration: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.onyx-ai-cta:disabled {
    cursor: default;
}

.onyx-ai-cta:hover {
    color: #1f2937;
    text-decoration: none;
    border-color: #bfdbfe;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.onyx-ai-cta-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: .55rem;
    background: #e0ecff;
    color: #2563eb;
    font-size: .95rem;
}

.onyx-ai-cta-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.onyx-ai-cta-title {
    font-weight: 600;
    font-size: .84rem;
    line-height: 1.2;
}

.onyx-ai-cta-sub {
    font-size: .72rem;
    line-height: 1.25;
    color: #6b7280;
}

/* Badge « Échéance dans X j » du CTA (dtalert/dtend proche) */
.onyx-ai-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .35rem;
    padding: .08rem .45rem;
    border-radius: 999px;
    border: 1px solid #fcd34d;
    background: #fef3c7;
    color: #92400e;
    font-size: .66rem;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
}

/* Indicateur flottant du launcher en mode listener (liste des contrats) :
   même anatomie que la carte CTA, ancré en bas à droite pendant l'attente. */
.onyx-ai-wait-float {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040; /* sous la modale Livewire (1050) */
    display: flex;
    align-items: center;
    gap: .65rem;
    max-width: 380px;
    padding: .7rem .8rem;
    border-radius: .65rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
}

/* ----- onyx Selectable card -----
   Carte d'un élément à retenir dans une liste de propositions (revue avant
   création). Trois états : neutre, sélectionnée (accent + fond teinté),
   désactivée (déjà présent en base). */
.onyx-selectable-card {
    position: relative;
    display: flex;
    gap: .85rem;
    padding: .9rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    background: #fff;
    transition: border-color .18s, box-shadow .18s, background-color .18s;
}

.onyx-selectable-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}

/* Sélection marquée par le fond et la bordure neutre renforcée, jamais par une
   couleur d'accent : la couleur reste réservée aux badges porteurs de sens
   (confiance, origine de l'e-mail). */
.onyx-selectable-card.is-selected {
    border-color: #d1d5db;
    background: #f9fafb;
}

/* Plus gris que l'état sélectionné, pour rester distinguable sans couleur. */
.onyx-selectable-card.is-disabled {
    background: #f3f4f6;
    opacity: .75;
}

.onyx-selectable-card-check {
    padding-top: .15rem;
}

.onyx-selectable-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.onyx-selectable-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

/* Conteneur flex dont l'enfant doit pouvoir être tronqué (text-truncate
   n'opère pas sans min-width: 0 sur les parents flex). */
.onyx-truncate-wrap {
    min-width: 0;
}

.onyx-selectable-card-title {
    font-weight: 600;
    color: #111827;
    line-height: 1.25;
}

.onyx-selectable-card-subtitle {
    font-size: .8125rem;
    color: #6b7280;
    margin-top: .1rem;
}

.onyx-selectable-card-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
}

/* Champs éditables de la carte : labels discrets au-dessus de chaque input. */
.onyx-selectable-card-field-label {
    display: block;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: .2rem;
}

.onyx-selectable-card-hint {
    margin-top: .3rem;
    min-height: 1.25rem;
}

.onyx-selectable-card-footer {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .7rem;
    padding-top: .6rem;
    border-top: 1px dashed #eef0f3;
    font-size: .75rem;
    color: #9ca3af;
}

.onyx-selectable-card-footer a {
    color: #6b7280;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onyx-selectable-card-footer a:hover {
    color: #4f46e5;
    text-decoration: underline;
}

/* ----- onyx Markdown notes -----
   Rendu HTML d'un compte rendu Markdown produit par l'IA (ex : recherche web
   sans candidat structurable) : typographie compacte cohérente avec le design
   system, à la place de la feuille de style brute du navigateur. */
.onyx-markdown-notes {
    line-height: 1.55;
    color: #374151;
}

.onyx-markdown-notes > *:first-child {
    margin-top: 0;
}

.onyx-markdown-notes > *:last-child {
    margin-bottom: 0;
}

.onyx-markdown-notes h1,
.onyx-markdown-notes h2,
.onyx-markdown-notes h3,
.onyx-markdown-notes h4 {
    font-size: .8125rem;
    font-weight: 700;
    color: #111827;
    margin: .9rem 0 .35rem;
}

.onyx-markdown-notes p {
    margin: 0 0 .5rem;
}

.onyx-markdown-notes ul,
.onyx-markdown-notes ol {
    margin: 0 0 .5rem;
    padding-left: 1.25rem;
}

.onyx-markdown-notes li {
    margin-bottom: .25rem;
}

.onyx-markdown-notes li > p {
    margin-bottom: .25rem;
}

.onyx-markdown-notes strong {
    color: #111827;
}

.onyx-markdown-notes a {
    color: #4f46e5;
    word-break: break-word;
}

.onyx-markdown-notes hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: .75rem 0;
}

.onyx-markdown-notes code {
    background: #f3f4f6;
    padding: .1rem .3rem;
    border-radius: .3rem;
    font-size: .8125rem;
}

.onyx-markdown-notes table {
    font-size: .8125rem;
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* ----- onyx Clamp ----- */
/* Troncature sur N lignes, sans ascenseur (celui d'un overflow: auto se rend
   comme un carré gris dans une petite zone). Le pattern était dupliqué en dur
   dans plusieurs blocs ; ces classes le rendent réutilisable. */
.onyx-clamp-1,
.onyx-clamp-2,
.onyx-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* `line-height` explicite obligatoire : sans lui, la hauteur retenue par
       -webkit-line-clamp rogne les jambages de la dernière ligne (g, p, y…).
       Même valeur que les clamps déjà en place dans ce fichier. */
    line-height: 1.45;
    /* Compense l'arrondi au pixel de la hauteur de ligne, qui peut encore
       manger un ou deux pixels en bas de la dernière ligne visible. */
    padding-bottom: 1px;
}

.onyx-clamp-1 { -webkit-line-clamp: 1; }
.onyx-clamp-2 { -webkit-line-clamp: 2; }
.onyx-clamp-3 { -webkit-line-clamp: 3; }

/* Le contenu vient souvent d'un éditeur riche : la marge du dernier paragraphe
   ajouterait un blanc sous la troncature. */
.onyx-clamp-1 > *:last-child,
.onyx-clamp-2 > *:last-child,
.onyx-clamp-3 > *:last-child {
    margin-bottom: 0;
}

/* ============================================================
   Rappels d'actions commerciales — modale « Mes rappels »
   (App\Livewire\Crm\Action\RemindersPanel)
   Idiome aligné sur .onyx-notif-* : fonds pastel par accent,
   séparateurs #f1f5f9, transitions courtes. Light-only (Onyx
   n'a pas de thème sombre : aucun prefers-color-scheme ici).
   ============================================================ */
.onyx-reminders-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: .9rem;
    border-bottom: 1px solid #f1f5f9;
}
.onyx-reminders-counters { display: flex; gap: .5rem; flex-wrap: wrap; }
.onyx-reminders-counter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    min-width: 5.6rem;
    padding: .55rem .8rem;
    border: 1px solid #e2e8f0;
    border-radius: .7rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.onyx-reminders-counter:hover { background: #f8fafc; }
.onyx-reminders-counter.is-active {
    border-color: #bfdbfe;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
}
.onyx-reminders-counter-value { font-size: 1.15rem; font-weight: 600; line-height: 1.1; color: #0f172a; }
.onyx-reminders-counter-label { font-size: .72rem; color: #64748b; white-space: nowrap; }
.onyx-reminders-counter.accent-red .onyx-reminders-counter-value { color: #dc2626; }
.onyx-reminders-counter.accent-amber .onyx-reminders-counter-value { color: #d97706; }
.onyx-reminders-counter.accent-blue .onyx-reminders-counter-value { color: #2563eb; }

.onyx-reminders-scope { display: inline-flex; border: 1px solid #e2e8f0; border-radius: .7rem; overflow: hidden; }
.onyx-reminders-scope-btn {
    padding: .45rem .8rem;
    border: 0;
    background: #fff;
    font-size: .8rem;
    color: #475569;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.onyx-reminders-scope-btn:hover { background: #f8fafc; }
.onyx-reminders-scope-btn.is-active { background: #eff6ff; color: #2563eb; font-weight: 500; }

.onyx-reminders-body { margin-top: .5rem; max-height: 60vh; overflow-y: auto; transition: opacity .12s ease; }
.onyx-reminders-body.is-loading { opacity: .5; }

.onyx-reminders-section-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .9rem 0 .35rem;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
}
.onyx-reminders-section-title.accent-red { color: #dc2626; }
.onyx-reminders-section-title.accent-amber { color: #d97706; }
.onyx-reminders-section-title.accent-blue { color: #2563eb; }
.onyx-reminders-section-count {
    padding: 0 .4rem;
    border-radius: .5rem;
    background: #f1f5f9;
    color: #475569;
    font-size: .7rem;
}

.onyx-reminders-item {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .8rem .35rem;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    color: inherit;
    transition: background .12s ease;
}
.onyx-reminders-item:last-child { border-bottom: 0; }
.onyx-reminders-item:hover { background: #f8fafc; text-decoration: none; color: inherit; }
.onyx-reminders-item.is-late { background: #fffafa; }
.onyx-reminders-item.is-late:hover { background: #fef2f2; }

.onyx-reminders-when {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: .8rem;
    background: #f1f5f9;
    color: #475569;
}
.onyx-reminders-when.accent-red { background: #fef2f2; color: #dc2626; }
.onyx-reminders-when.accent-amber { background: #fffbeb; color: #d97706; }
.onyx-reminders-when.accent-blue { background: #eff6ff; color: #2563eb; }
.onyx-reminders-time { font-size: .95rem; font-weight: 600; line-height: 1.1; }
.onyx-reminders-day { font-size: .68rem; opacity: .8; }

.onyx-reminders-content { flex: 1; min-width: 0; }
.onyx-reminders-title {
    font-size: .9rem;
    font-weight: 500;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.onyx-reminders-meta {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    margin-top: .15rem;
    font-size: .76rem;
    color: #64748b;
}
.onyx-reminders-relative { font-style: italic; }
.onyx-reminders-badges { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: .35rem; }

.onyx-reminders-open {
    flex-shrink: 0;
    font-size: .76rem;
    color: #2563eb;
    opacity: 0;
    transition: opacity .12s ease;
    white-space: nowrap;
}
.onyx-reminders-item:hover .onyx-reminders-open { opacity: 1; }

@media (max-width: 575.98px) {
    .onyx-reminders-toolbar { align-items: stretch; }
    .onyx-reminders-scope { width: 100%; }
    .onyx-reminders-scope-btn { flex: 1; }
    .onyx-reminders-open { display: none; }
}

/* ----- onyx Revision Diff -----
   Modale « Révisions » d'une fiche Wiki (App\Livewire\Wiki\Revisions\ManageRevisions).
   Le diff HTML (balises <ins>/<del>) est calculé côté client par htmldiff.js. */
.onyx-revision-diff {
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--onyx-border, #e5e7eb);
    border-radius: .5rem;
    padding: .75rem 1rem;
}
.onyx-revision-diff ins {
    text-decoration: none;
    background-color: #d4fcbc;
}
.onyx-revision-diff del {
    text-decoration: line-through;
    background-color: #fbb6c2;
    color: #555;
}
/* ----- onyx Scroll (zone défilante compacte) ----- */

/* Utilitaire pour borner une liste dans un panel sans imposer une scrollbar
   système épaisse. `overscroll-behavior: contain` évite le scroll chaining :
   arrivé en bout de liste, la molette ne fait pas défiler la page derrière.
   La hauteur reste à la charge de l'appelant (max-height inline ou classe). */
.onyx-scroll-y {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
}

.onyx-scroll-y::-webkit-scrollbar { width: 6px; }
.onyx-scroll-y::-webkit-scrollbar-track { background: transparent; }
.onyx-scroll-y::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }
.onyx-scroll-y::-webkit-scrollbar-thumb:hover { background: #d1d5db; }
/* ----- onyx END ----- */