/*
 * Manuels MX — thème « soft UI » du panneau Filament.
 *
 * Feuille CSS simple, sans build (pas de Node dans l'image Docker) : injectée par
 * AdminPanelProvider (render hook HEAD_END). Toutes les règles Filament sont compilées
 * dans des @layer : ces règles hors couche l'emportent donc toujours, quelle que soit
 * leur spécificité. Ne pas les envelopper dans un @layer.
 *
 * Principes : fond gris très clair, cartes blanches très arrondies (carte dans carte),
 * contour hairline + ombre ambiante diffuse, boutons et onglets en pilule, couleurs vives
 * réservées aux petites touches (chips, états, indicateurs). Mode clair uniquement.
 */

:root {
    --mx-fond: #f0f1f4;
    --mx-surface: #ffffff;
    --mx-surface-2: #f7f8fa;
    --mx-ligne: #e6e8ec;
    --mx-ligne-douce: #eef0f3;
    --mx-encre: #1f2328;
    --mx-texte: #3b4048;
    --mx-gris: #8a8f98;
    --mx-inactif: #d9dce1;

    --mx-violet: #8b5cf6;
    --mx-vert: #10b981;
    --mx-bleu: #3b82f6;
    --mx-bleu-fonce: #2563eb;
    --mx-jaune: #fdd835;
    --mx-rouge: #f43f5e;

    --mx-r-carte: 24px;
    --mx-r-sous-carte: 16px;
    --mx-r-champ: 12px;

    --mx-contour: 0 0 0 1px var(--mx-ligne);
    --mx-ombre: 0 0 0 1px var(--mx-ligne), 0 4px 24px rgba(17, 24, 39, 0.04);
    --mx-ombre-flottante: 0 0 0 1px var(--mx-ligne), 0 14px 36px -10px rgba(17, 24, 39, 0.16);
    --mx-micro-ombre: 0 0 0 1px var(--mx-ligne), 0 1px 2px rgba(17, 24, 39, 0.05);
    --mx-focus: 0 0 0 1px var(--mx-bleu), 0 0 0 4px rgba(59, 130, 246, 0.16);

    --mx-hachures: repeating-linear-gradient(-45deg, transparent 0 5px, rgba(138, 143, 152, 0.14) 5px 6px);
}

/* ------------------------------------------------------------------ */
/* Fond, typographie                                                    */
/* ------------------------------------------------------------------ */

.fi-body {
    background: var(--mx-fond);
    color: var(--mx-encre);
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: normal;
}

.fi-body ::selection {
    background: rgba(59, 130, 246, 0.18);
}

.fi-header-heading {
    font-size: 24px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--mx-encre);
}

.fi-header-subheading {
    font-size: 13px;
    color: var(--mx-gris);
}

.fi-breadcrumbs .fi-breadcrumbs-item-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--mx-gris);
}

.fi-body a.fi-link,
.fi-body .fi-link {
    color: var(--mx-bleu-fonce);
}

/* ------------------------------------------------------------------ */
/* Cadre : barre du haut en verre, contenu dans une grande carte        */
/* ------------------------------------------------------------------ */

.fi-topbar-ctn {
    background: rgba(240, 241, 244, 0.72);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

.fi-topbar {
    background: transparent;
    box-shadow: none;
    min-height: 64px;
    padding-inline: 16px;
}

.fi-logo {
    font-weight: 600;
    font-size: 17px;
    letter-spacing: normal;
    color: var(--mx-encre);
}

.mx-marque {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--mx-encre);
    white-space: nowrap;
}

.mx-marque-pastille {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--mx-surface);
    box-shadow: var(--mx-micro-ombre);
    display: grid;
    place-items: center;
}

.mx-marque-pastille::after {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.95) 0 14%, transparent 42%),
        radial-gradient(circle at 60% 70%, #93c5fd, #3b82f6 60%, #1d4ed8);
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.45);
}

@media (min-width: 1024px) {
    .fi-main-ctn {
        margin: 0 16px 16px 0;
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.5);
        box-shadow: 0 0 0 1px rgba(230, 232, 236, 0.9), 0 4px 24px rgba(17, 24, 39, 0.03);
        min-width: 0;
    }

    .fi-body:not(.fi-body-has-navigation) .fi-main-ctn {
        margin-left: 16px;
    }
}

@media (max-width: 1023.98px) {
    .fi-main-ctn {
        margin: 0 8px 8px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.5);
        box-shadow: 0 0 0 1px rgba(230, 232, 236, 0.9);
    }
}

.fi-main {
    padding-top: 8px;
    padding-bottom: 32px;
}

.fi-page > section,
.fi-page-header-main-ctn {
    row-gap: 24px;
}

/* ------------------------------------------------------------------ */
/* Barre latérale : icônes dans des carrés arrondis blancs               */
/* ------------------------------------------------------------------ */

.fi-sidebar {
    background: transparent;
}

@media (max-width: 1023.98px) {
    .fi-sidebar.fi-sidebar-open {
        background: var(--mx-fond);
        box-shadow: 0 20px 60px rgba(17, 24, 39, 0.18);
    }
}

.fi-sidebar-nav {
    padding: 16px 16px 24px;
    row-gap: 20px;
}

.fi-sidebar-nav-groups {
    row-gap: 20px;
}

.fi-sidebar-group-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--mx-gris);
}

.fi-sidebar-group-items {
    row-gap: 4px;
}

.fi-sidebar-item-btn {
    border-radius: 14px;
    padding: 4px;
    gap: 12px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-group-dropdown-trigger-btn > .fi-icon {
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 9px;
    border-radius: 12px;
    background: var(--mx-surface);
    box-shadow: var(--mx-micro-ombre);
    color: var(--mx-gris);
    stroke-width: 1.5;
    transition: color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.fi-sidebar-item-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--mx-texte);
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
    background: rgba(255, 255, 255, 0.6);
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover > .fi-icon {
    color: var(--mx-encre);
    box-shadow: var(--mx-ombre-flottante);
    transform: translateY(-1px);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--mx-surface);
    box-shadow: var(--mx-micro-ombre);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: #fff;
    background: var(--mx-bleu);
    box-shadow: 0 6px 16px -6px rgba(59, 130, 246, 0.7);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--mx-encre);
    font-weight: 600;
}

/* Sidebar repliée : seuls les carrés d'icônes restent */
@media (min-width: 1024px) {
    .fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
        padding: 2px 0;
    }

    .fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups {
        max-width: 2.5rem;
    }
}

.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: transparent;
    box-shadow: none;
}

.fi-sidebar-footer {
    border-top-color: var(--mx-ligne);
}

.fi-sidebar-header-controls::after {
    border-color: var(--mx-ligne);
}

/* ------------------------------------------------------------------ */
/* Cartes : sections, tables, widgets, assistants                       */
/* ------------------------------------------------------------------ */

.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn,
.fi-ta-ctn,
.fi-sc-tabs.fi-contained,
.fi-sc-wizard.fi-contained,
.fi-sc-wizard:not(.fi-contained) .fi-sc-wizard-header,
.fi-wi-stats-overview-stat,
.fi-fo-repeater-item,
.fi-fo-builder-item,
.fi-wi-chart .fi-section {
    border-radius: var(--mx-r-carte);
    background: var(--mx-surface);
    box-shadow: var(--mx-ombre);
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header {
    padding: 20px 24px 16px;
}

.fi-section:not(.fi-section-not-contained):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content {
    padding: 20px 24px 24px;
}

.fi-section.fi-section-has-header:not(.fi-collapsed):not(.fi-section-not-contained) > .fi-section-content-ctn {
    border-top-color: var(--mx-ligne-douce);
}

.fi-section > .fi-section-content-ctn > .fi-section-footer {
    border-top-color: var(--mx-ligne-douce);
}

.fi-section .fi-section-header-heading {
    font-size: 16px;
    font-weight: 600;
    color: var(--mx-encre);
}

.fi-section .fi-section-header-description {
    font-size: 12px;
    color: var(--mx-gris);
}

.fi-section.fi-secondary:not(.fi-section-not-contained):not(.fi-aside) {
    background: var(--mx-surface-2);
}

/* Carte dans carte : sous-cartes plus petites et plus douces */
:is(.fi-section, .fi-modal-window, .fi-fo-repeater-item, .fi-fo-builder-item, .fi-sc-tabs.fi-contained, .fi-sc-wizard.fi-contained)
    :is(.fi-section:not(.fi-section-not-contained):not(.fi-aside), .fi-ta-ctn, .fi-fo-repeater-item, .fi-fo-builder-item, .fi-sc-tabs.fi-contained) {
    border-radius: var(--mx-r-sous-carte);
    background: var(--mx-surface-2);
    box-shadow: var(--mx-contour);
}

:is(.fi-section, .fi-modal-window) :is(.fi-section, .fi-ta-ctn) .fi-section:not(.fi-section-not-contained):not(.fi-aside) {
    background: var(--mx-surface);
}

.fi-fieldset {
    border-radius: var(--mx-r-sous-carte);
    border-color: var(--mx-ligne);
}

.fi-wi-stats-overview-stat {
    padding: 20px 24px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.fi-wi-stats-overview-stat:hover {
    box-shadow: var(--mx-ombre-flottante);
    transform: translateY(-2px);
}

.fi-wi-stats-overview-stat-label {
    font-size: 12px;
    color: var(--mx-gris);
}

.fi-wi-stats-overview-stat-value {
    font-weight: 600;
    letter-spacing: normal;
    color: var(--mx-encre);
}

/* ------------------------------------------------------------------ */
/* Tables                                                               */
/* ------------------------------------------------------------------ */

.fi-ta-ctn .fi-ta-header,
.fi-ta-ctn .fi-ta-header-toolbar {
    border-color: var(--mx-ligne-douce);
}

.fi-ta-header-cell {
    font-size: 12px;
    font-weight: 500;
    color: var(--mx-gris);
    background: transparent;
}

.fi-ta-table > thead {
    background: #fafbfc;
}

.fi-ta-table > thead > tr {
    box-shadow: inset 0 -1px 0 var(--mx-ligne-douce);
}

.fi-ta-table > tbody {
    --tw-divide-opacity: 1;
}

.fi-ta-table > tbody > tr {
    border-color: var(--mx-ligne-douce);
}

.fi-ta-row {
    transition: background-color 0.12s ease;
}

.fi-ta-row:not(.fi-ta-group-header-row):hover {
    background: var(--mx-surface-2);
}

.fi-ta-row.fi-selected,
.fi-ta-row.fi-selected:hover {
    background: rgba(59, 130, 246, 0.06);
    box-shadow: inset 2px 0 0 var(--mx-bleu);
}

.fi-ta-group-header-row,
.fi-ta-group-header {
    background: var(--mx-surface-2);
}

.fi-ta-text-item-label,
.fi-ta-text {
    font-size: 13.5px;
}

.fi-ta-empty-state-icon-bg {
    border-radius: 16px;
    background: var(--mx-surface-2);
    box-shadow: var(--mx-micro-ombre);
}

.fi-pagination-items {
    border-radius: 999px;
    box-shadow: var(--mx-micro-ombre);
    overflow: hidden;
}

.fi-pagination-item-btn {
    border-radius: 999px;
}

.fi-pagination-item.fi-active .fi-pagination-item-btn {
    background: var(--mx-encre);
}

.fi-pagination-item.fi-active .fi-pagination-item-label {
    color: #fff;
}

/* ------------------------------------------------------------------ */
/* Boutons : pilules                                                    */
/* ------------------------------------------------------------------ */

.fi-btn {
    border-radius: 999px;
    min-height: 36px;
    padding-inline: 16px;
    font-weight: 500;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.fi-btn.fi-size-xs {
    min-height: 28px;
    padding-inline: 10px;
}

.fi-btn.fi-size-sm {
    min-height: 32px;
    padding-inline: 12px;
}

.fi-btn.fi-size-lg,
.fi-btn.fi-size-xl {
    min-height: 40px;
    padding-inline: 20px;
}

.fi-btn > .fi-icon {
    stroke-width: 1.5;
}

/* Bouton neutre : blanc, bordure fine */
.fi-btn:not(.fi-color):not(.fi-outlined),
.fi-btn:is(label, [aria-pressed]):not(.fi-outlined) {
    background-color: var(--mx-surface);
    color: var(--mx-encre);
    box-shadow: var(--mx-micro-ombre);
}

.fi-btn:not(.fi-color):not(.fi-outlined):not([disabled]):not(.fi-disabled):hover {
    background-color: var(--mx-surface);
    box-shadow: var(--mx-ombre-flottante);
    transform: translateY(-1px);
}

.fi-btn:not(.fi-color) > .fi-icon {
    color: var(--mx-gris);
}

/* Action principale : charbon (le bleu reste réservé à la sélection) */
.fi-btn.fi-color-primary:not(.fi-outlined):not(label):not([aria-pressed]) {
    --bg: var(--mx-encre);
    --hover-bg: #343a42;
    --text: #fff;
    --hover-text: #fff;
    box-shadow: 0 6px 16px -8px rgba(31, 35, 40, 0.55);
}

.fi-btn.fi-color:not(.fi-outlined):not(label):not([aria-pressed]):not([disabled]):not(.fi-disabled):hover {
    box-shadow: 0 10px 22px -10px rgba(31, 35, 40, 0.5);
    transform: translateY(-1px);
}

.fi-btn.fi-outlined {
    box-shadow: var(--mx-micro-ombre);
}

.fi-btn.fi-outlined.fi-color {
    box-shadow: 0 0 0 1px var(--color-300), 0 1px 2px rgba(17, 24, 39, 0.05);
}

.fi-btn:focus-visible,
.fi-icon-btn:focus-visible {
    box-shadow: var(--mx-focus);
}

.fi-btn-group {
    border-radius: 999px;
    box-shadow: var(--mx-micro-ombre);
}

.fi-btn-group > .fi-btn {
    box-shadow: none;
}

.fi-btn-group > .fi-btn:nth-child(1 of .fi-btn) {
    border-start-start-radius: 999px;
    border-end-start-radius: 999px;
}

.fi-btn-group > .fi-btn:nth-last-child(1 of .fi-btn) {
    border-start-end-radius: 999px;
    border-end-end-radius: 999px;
}

.fi-icon-btn {
    border-radius: 999px;
}

/* Indisponible : gris neutre + hachures fines */
.fi-btn.fi-disabled:not(.fi-force-enabled),
.fi-btn[disabled]:not(.fi-force-enabled) {
    opacity: 1;
    color: var(--mx-gris);
    background-color: var(--mx-surface-2);
    background-image: var(--mx-hachures);
    box-shadow: var(--mx-contour);
}

.fi-btn.fi-disabled:not(.fi-force-enabled) > .fi-icon,
.fi-btn[disabled]:not(.fi-force-enabled) > .fi-icon {
    color: var(--mx-inactif);
}

/* ------------------------------------------------------------------ */
/* Onglets : barre segmentée en pilule                                  */
/* ------------------------------------------------------------------ */

.fi-tabs:not(.fi-contained) {
    width: fit-content;
    max-width: 100%;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(230, 232, 236, 0.6);
    box-shadow: inset 0 0 0 1px var(--mx-ligne);
}

.fi-tabs.fi-contained {
    gap: 4px;
    padding: 12px 16px;
    border-color: var(--mx-ligne-douce);
}

.fi-tabs-item {
    border-radius: 999px;
    min-height: 34px;
    padding: 6px 16px;
    font-weight: 500;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.fi-tabs-item:hover,
.fi-tabs-item:focus-visible {
    background: rgba(255, 255, 255, 0.65);
}

.fi-tabs-item .fi-tabs-item-label {
    color: var(--mx-gris);
}

.fi-tabs-item > .fi-icon {
    color: var(--mx-gris);
    stroke-width: 1.5;
}

.fi-tabs-item.fi-active {
    background: var(--mx-surface);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 4px 12px -4px rgba(17, 24, 39, 0.12);
}

.fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--mx-encre);
}

.fi-tabs-item.fi-active > .fi-icon {
    color: var(--mx-bleu);
}

.fi-tabs.fi-contained .fi-tabs-item.fi-active {
    background: var(--mx-surface-2);
    box-shadow: var(--mx-micro-ombre);
}

/* Assistant (wizard) : étapes */
.fi-sc-wizard-header {
    border-color: var(--mx-ligne-douce);
}

.fi-sc-wizard-header-step-icon-ctn {
    border-radius: 999px;
}

.fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-icon-ctn {
    border-color: var(--mx-bleu);
}

.fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-icon-ctn {
    background: var(--mx-vert);
}

/* ------------------------------------------------------------------ */
/* Champs de formulaire                                                 */
/* ------------------------------------------------------------------ */

.fi-input-wrp {
    border-radius: var(--mx-r-champ);
    background: var(--mx-surface);
    box-shadow: var(--mx-contour);
    transition: box-shadow 0.15s ease;
}

.fi-input-wrp:not(.fi-disabled):hover {
    box-shadow: 0 0 0 1px #d4d7dd;
}

.fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
    box-shadow: var(--mx-focus);
}

.fi-input-wrp.fi-invalid,
.fi-input-wrp.fi-invalid:hover {
    box-shadow: 0 0 0 1px var(--mx-rouge);
}

.fi-input-wrp.fi-invalid:not(.fi-disabled):focus-within {
    box-shadow: 0 0 0 1px var(--mx-rouge), 0 0 0 4px rgba(244, 63, 94, 0.14);
}

.fi-input-wrp.fi-disabled {
    background-color: var(--mx-surface-2);
    background-image: var(--mx-hachures);
}

.fi-input-wrp .fi-input-wrp-prefix:not(.fi-inline),
.fi-input-wrp .fi-input-wrp-suffix:not(.fi-inline) {
    border-color: var(--mx-ligne-douce);
}

.fi-input,
.fi-select-input,
.fi-input-wrp input,
.fi-input-wrp textarea,
.fi-input-wrp select {
    font-size: 14px;
    color: var(--mx-encre);
}

.fi-input::placeholder,
.fi-input-wrp input::placeholder,
.fi-input-wrp textarea::placeholder {
    color: #a9aeb6;
}

.fi-fo-field-label-content,
.fi-fo-field-wrp-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--mx-encre);
}

/* Textes d'aide (sous le champ) et indications (à côté du libellé) : 12 px, gris moyen */
.fi-fo-field-content-col > .fi-sc .fi-sc-text,
.fi-fo-field-label-ctn .fi-sc-text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--mx-gris);
}

.fi-checkbox-input {
    border-radius: 6px;
    border-color: #cfd3d9;
}

.fi-checkbox-input:checked {
    background-color: var(--mx-bleu);
    border-color: var(--mx-bleu);
}

.fi-radio-input:checked {
    background-color: var(--mx-bleu);
    border-color: var(--mx-bleu);
}

.fi-toggle.fi-toggle-on,
.fi-toggle:checked {
    background-color: var(--mx-bleu);
}

/* Éditeur riche (TipTap) */
.fi-fo-rich-editor-toolbar {
    border-color: var(--mx-ligne-douce);
}

.fi-fo-rich-editor-tool {
    border-radius: 10px;
}

.fi-fo-rich-editor-tool.fi-active {
    background: rgba(59, 130, 246, 0.1);
    color: var(--mx-bleu-fonce);
}

.fi-fo-file-upload .filepond--panel-root {
    border-radius: var(--mx-r-sous-carte);
    background: var(--mx-surface-2);
}

/* ------------------------------------------------------------------ */
/* Badges : petites pilules sombres translucides + point coloré         */
/* ------------------------------------------------------------------ */

.fi-badge {
    border-radius: 999px;
    gap: 6px;
    padding: 2px 9px 2px 8px;
    font-size: 11px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: normal;
    color: #fff;
    background: rgba(31, 35, 40, 0.8);
    box-shadow: none;
    backdrop-filter: blur(6px);
}

.fi-badge::before {
    content: '';
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mx-inactif);
}

.fi-badge.fi-color {
    color: #fff;
    background: rgba(31, 35, 40, 0.8);
    box-shadow: none;
}

.fi-badge.fi-color::before {
    background: var(--color-400);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-400) 30%, transparent);
}

.fi-badge .fi-icon,
.fi-badge:not(.fi-color) .fi-icon,
.fi-badge .fi-icon.fi-color {
    color: rgba(255, 255, 255, 0.85);
}

.fi-badge .fi-badge-delete-btn-icon,
.fi-badge.fi-color .fi-badge-delete-btn-icon {
    color: rgba(255, 255, 255, 0.6);
}

/* Compteurs (navigation, onglets, boutons) : sans point, pilule claire */
:is(.fi-sidebar-item-badge-ctn, .fi-tabs-item, .fi-btn-badge-ctn, .fi-icon-btn-badge-ctn, .fi-link-badge-ctn, .fi-topbar-item) .fi-badge {
    color: var(--mx-encre);
    background: var(--mx-surface-2);
    box-shadow: var(--mx-contour);
    padding-inline: 7px;
}

:is(.fi-sidebar-item-badge-ctn, .fi-tabs-item, .fi-btn-badge-ctn, .fi-icon-btn-badge-ctn, .fi-link-badge-ctn, .fi-topbar-item) .fi-badge::before {
    display: none;
}

:is(.fi-sidebar-item-badge-ctn, .fi-tabs-item, .fi-btn-badge-ctn, .fi-icon-btn-badge-ctn, .fi-link-badge-ctn, .fi-topbar-item) .fi-badge.fi-color {
    color: #fff;
    background: var(--color-500);
    box-shadow: none;
}

.fi-btn-badge-ctn,
.fi-icon-btn-badge-ctn,
.fi-link-badge-ctn {
    border-radius: 999px;
}

/* Éditeur riche : jetons (pictogrammes) */
.fi-fo-rich-editor [data-type='mergeTag'] {
    border-radius: 999px;
}

/* ------------------------------------------------------------------ */
/* Surfaces flottantes : modales, menus, notifications, infobulles      */
/* ------------------------------------------------------------------ */

.fi-modal-close-overlay {
    background: rgba(31, 35, 40, 0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window {
    border-radius: 28px;
    box-shadow: 0 0 0 1px var(--mx-ligne), 0 30px 80px -20px rgba(17, 24, 39, 0.3);
}

.fi-modal.fi-modal-slide-over > .fi-modal-window-ctn > .fi-modal-window {
    box-shadow: 0 0 0 1px var(--mx-ligne), 0 30px 80px -20px rgba(17, 24, 39, 0.3);
}

.fi-modal.fi-modal-slide-over.fi-modal-slide-over-from-end > .fi-modal-window-ctn > .fi-modal-window {
    border-start-start-radius: 28px;
    border-end-start-radius: 28px;
}

.fi-modal-heading {
    font-size: 18px;
    font-weight: 600;
    color: var(--mx-encre);
}

.fi-modal-description {
    font-size: 13px;
    color: var(--mx-gris);
}

.fi-modal-window .fi-modal-header {
    border-color: var(--mx-ligne-douce);
}

.fi-modal-icon-bg {
    border-radius: 16px;
}

.fi-dropdown-panel {
    border-radius: var(--mx-r-sous-carte);
    box-shadow: 0 0 0 1px var(--mx-ligne), 0 18px 48px -12px rgba(17, 24, 39, 0.2);
    overflow: hidden;
}

.fi-dropdown-list {
    padding: 6px;
}

.fi-dropdown-list-item {
    border-radius: 10px;
}

.fi-dropdown-header {
    border-color: var(--mx-ligne-douce);
}

.fi-no-notification {
    border-radius: 20px;
    box-shadow: 0 0 0 1px var(--mx-ligne), 0 18px 48px -12px rgba(17, 24, 39, 0.2);
}

.fi-sc-actions.fi-sticky .fi-ac {
    border-radius: 999px;
}

.fi-callout {
    border-radius: var(--mx-r-sous-carte);
}

/* Recherche globale */
.fi-global-search-field .fi-input-wrp {
    border-radius: 999px;
    box-shadow: var(--mx-micro-ombre);
}

.fi-global-search-results-ctn {
    border-radius: var(--mx-r-sous-carte);
    box-shadow: 0 0 0 1px var(--mx-ligne), 0 18px 48px -12px rgba(17, 24, 39, 0.2);
}

/* Avatars */
.fi-avatar {
    box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(17, 24, 39, 0.12);
}

.fi-user-menu-trigger {
    border-radius: 999px;
}

/* ------------------------------------------------------------------ */
/* Page de connexion : verre, dégradé blanc → bleu pâle, sphère          */
/* ------------------------------------------------------------------ */

.fi-simple-layout {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(60rem 40rem at 85% -10%, rgba(191, 219, 254, 0.55), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, var(--mx-fond) 55%, #e8eef9 100%);
}

.fi-simple-layout::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    top: 9%;
    right: max(3%, calc(50% - 600px));
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.95) 0 7%, rgba(255, 255, 255, 0.35) 17%, transparent 38%),
        radial-gradient(circle at 68% 76%, rgba(147, 197, 253, 0.95), rgba(59, 130, 246, 0.55) 45%, rgba(37, 99, 235, 0.32) 72%, rgba(219, 234, 254, 0.55) 100%);
    box-shadow:
        inset -22px -30px 60px rgba(37, 99, 235, 0.35),
        inset 18px 22px 46px rgba(255, 255, 255, 0.75),
        0 50px 90px -30px rgba(59, 130, 246, 0.5);
    opacity: 0.9;
}

.fi-simple-layout::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    bottom: 10%;
    left: max(3%, calc(50% - 600px));
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(147, 197, 253, 0.55), transparent 70%);
    filter: blur(28px);
}

.fi-simple-main {
    position: relative;
    z-index: 1;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: 0 0 0 1px rgba(230, 232, 236, 0.9), 0 24px 60px -24px rgba(17, 24, 39, 0.18);
}

.fi-simple-header-heading {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--mx-encre);
}

/* ------------------------------------------------------------------ */
/* Composants maison (vues Blade de l'application) — préfixe mx-         */
/* ------------------------------------------------------------------ */

/* Sphère de verre (zone d'accueil / assistant) */
.mx-sphere {
    position: relative;
    width: 132px;
    height: 132px;
    flex: none;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.95) 0 7%, rgba(255, 255, 255, 0.35) 17%, transparent 38%),
        radial-gradient(circle at 68% 76%, rgba(147, 197, 253, 0.95), rgba(59, 130, 246, 0.55) 45%, rgba(37, 99, 235, 0.32) 72%, rgba(219, 234, 254, 0.55) 100%);
    box-shadow:
        inset -14px -20px 40px rgba(37, 99, 235, 0.35),
        inset 12px 16px 30px rgba(255, 255, 255, 0.75),
        0 34px 60px -24px rgba(59, 130, 246, 0.55);
}

.mx-sphere::after {
    content: '';
    position: absolute;
    inset: 18% 22% auto auto;
    width: 22%;
    height: 12%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    filter: blur(3px);
    transform: rotate(35deg);
}

.mx-sphere-halo {
    position: absolute;
    inset: auto -40px -60px auto;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(147, 197, 253, 0.45), transparent 70%);
    filter: blur(24px);
    pointer-events: none;
}

/* Carte d'accueil du tableau de bord */
.mx-accueil {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
    border-radius: var(--mx-r-carte);
    background: linear-gradient(120deg, #ffffff 0%, #ffffff 45%, #eaf2ff 100%);
    box-shadow: var(--mx-ombre);
}

.mx-accueil-texte {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
    min-width: 0;
}

.mx-accueil-titre {
    margin: 0;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--mx-encre);
}

.mx-accueil-sous-titre {
    margin: 0;
    font-size: 13px;
    color: var(--mx-gris);
}

.mx-accueil-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.mx-accueil-deco {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    gap: 24px;
}

@media (max-width: 767.98px) {
    .mx-accueil {
        padding: 24px;
    }

    .mx-accueil-deco .mx-sphere {
        width: 84px;
        height: 84px;
    }

    .mx-accueil-deco .mx-avatars {
        display: none;
    }
}

/* Pilule de navigation (lien) : blanc, bordure fine, icône fine à gauche */
.mx-pilule {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px 0 12px;
    border-radius: 999px;
    background: var(--mx-surface);
    box-shadow: var(--mx-micro-ombre);
    color: var(--mx-encre);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.mx-pilule:hover {
    box-shadow: var(--mx-ombre-flottante);
    transform: translateY(-1px);
}

.mx-pilule svg {
    width: 18px;
    height: 18px;
    color: var(--mx-gris);
    stroke-width: 1.5;
}

/* Avatars groupés en chevauchement */
.mx-avatars {
    display: flex;
    align-items: center;
}

.mx-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-left: -10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 0 0 2px #fff;
}

.mx-avatar:first-child {
    margin-left: 0;
}

.mx-avatar-plus {
    color: var(--mx-encre);
    background: var(--mx-surface-2);
    box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px var(--mx-ligne);
}

/* Chips : fond saturé, texte blanc, icône dans un cercle blanc translucide */
.mx-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px 0 3px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    background: var(--mx-chip, var(--mx-bleu));
}

.mx-chip-icone {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.28);
}

.mx-chip-icone svg {
    width: 12px;
    height: 12px;
    stroke-width: 2;
}

.mx-chip-vert { --mx-chip: var(--mx-vert); }
.mx-chip-violet { --mx-chip: var(--mx-violet); }
.mx-chip-bleu { --mx-chip: var(--mx-bleu); }
.mx-chip-rouge { --mx-chip: var(--mx-rouge); }
.mx-chip-jaune { --mx-chip: var(--mx-jaune); color: var(--mx-encre); }
.mx-chip-jaune .mx-chip-icone { background: rgba(255, 255, 255, 0.55); }

/* État : petite pilule sombre translucide + point coloré */
.mx-etat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 16px;
    font-weight: 500;
    color: #fff;
    background: rgba(31, 35, 40, 0.8);
    white-space: nowrap;
}

.mx-etat::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mx-point, var(--mx-inactif));
}

.mx-point-vert { --mx-point: var(--mx-vert); }
.mx-point-violet { --mx-point: var(--mx-violet); }
.mx-point-bleu { --mx-point: var(--mx-bleu); }
.mx-point-jaune { --mx-point: var(--mx-jaune); }
.mx-point-rouge { --mx-point: var(--mx-rouge); }

/* Tableaux simples des widgets et pages maison */
.mx-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}

.mx-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mx-gris);
    white-space: nowrap;
    border-bottom: 1px solid var(--mx-ligne-douce);
}

.mx-table td {
    padding: 10px 12px;
    vertical-align: middle;
    border-bottom: 1px solid var(--mx-ligne-douce);
    color: var(--mx-texte);
}

.mx-table.mx-haut td {
    vertical-align: top;
}

.mx-table tbody tr:last-child td {
    border-bottom: 0;
}

.mx-table tbody tr {
    transition: background-color 0.12s ease;
}

.mx-table tbody tr:hover td {
    background: var(--mx-surface-2);
}

.mx-table tbody tr:hover td:first-child {
    border-radius: 12px 0 0 12px;
}

.mx-table tbody tr:hover td:last-child {
    border-radius: 0 12px 12px 0;
}

.mx-table th:first-child,
.mx-table td:first-child {
    padding-left: 4px;
}

.mx-table .mx-n,
.mx-table th.mx-n {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mx-defile {
    overflow-x: auto;
}

.mx-fort {
    font-weight: 600;
    color: var(--mx-encre);
}

.mx-discret {
    color: var(--mx-gris);
}

.mx-zero {
    color: var(--mx-inactif);
}

.mx-rouge { color: #e11d48; font-weight: 600; }
.mx-orange { color: #b45309; }
.mx-bleu { color: var(--mx-bleu-fonce); }
.mx-vert { color: #059669; }

.mx-lien {
    color: var(--mx-bleu-fonce);
    font-weight: 500;
    text-decoration: none;
}

.mx-lien:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mx-lien-fort {
    color: var(--mx-encre);
    font-weight: 600;
    text-decoration: none;
}

.mx-lien-fort:hover {
    color: var(--mx-bleu-fonce);
}

/* Barre de progression */
.mx-progression {
    height: 6px;
    border-radius: 999px;
    background: var(--mx-ligne-douce);
    overflow: hidden;
}

.mx-progression > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #34d399, var(--mx-vert));
}

/* Listes (activité) */
.mx-liste-simple {
    display: grid;
}

.mx-liste-simple > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 9px 4px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--mx-ligne-douce);
}

.mx-liste-simple > div:last-child {
    border-bottom: 0;
}

.mx-grille-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 24px;
}

/* Grille de traduction : liste des modules, module courant « flottant » */
.mx-tr-filtres {
    display: grid;
    grid-template-columns: 2fr 1fr 1.4fr;
    gap: 16px;
    align-items: end;
}

.mx-tr-filtres .mx-libelle {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mx-encre);
}

.mx-tr-progression {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
}

.mx-tr-grille {
    display: grid;
    grid-template-columns: minmax(14rem, 22rem) 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1023.98px) {
    .mx-tr-filtres,
    .mx-tr-grille {
        grid-template-columns: 1fr;
    }
}

.mx-tr-liste {
    display: grid;
    gap: 6px;
    max-height: 75vh;
    overflow: auto;
    padding: 8px;
    border-radius: var(--mx-r-carte);
    background: var(--mx-surface);
    box-shadow: var(--mx-ombre);
}

.mx-tr-item {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    text-align: left;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--mx-surface-2);
    transition: box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.mx-tr-item:hover {
    background: var(--mx-surface);
    box-shadow: var(--mx-micro-ombre);
}

.mx-tr-item.mx-courant {
    background: var(--mx-surface);
    box-shadow: var(--mx-ombre-flottante);
    transform: translateY(-1px);
}

/* Repère de position courante : fine ligne verticale en pointillés bleus */
.mx-tr-item.mx-courant::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 6px;
    bottom: 6px;
    border-left: 2px dashed var(--mx-bleu);
}

.mx-tr-code {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mx-encre);
}

.mx-tr-nom {
    display: block;
    font-size: 12px;
    color: var(--mx-gris);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mx-tr-barre {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: sticky;
    bottom: 12px;
    padding: 8px;
    border-radius: 999px;
    width: fit-content;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--mx-ombre-flottante);
}

.mx-chargement {
    color: var(--mx-bleu-fonce);
    font-size: 12px;
}

/* Recherche dans les textes */
.mx-table mark,
.fi-body mark {
    background: rgba(253, 216, 53, 0.55);
    color: inherit;
    padding: 0 2px;
    border-radius: 4px;
}

.mx-table ins {
    background: rgba(16, 185, 129, 0.18);
    text-decoration: none;
    padding: 0 2px;
    border-radius: 4px;
}

.mx-etiquette {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    color: var(--mx-texte);
    background: var(--mx-surface-2);
    box-shadow: var(--mx-contour);
}

.mx-etiquette-source {
    color: var(--mx-encre);
    background: rgba(253, 216, 53, 0.35);
    box-shadow: none;
}

.mx-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}