/*
 * Identité visuelle de l'institution.
 * Les couleurs viennent de variables posées par AdminPanelProvider :
 * --brand-primary, --brand-accent (réglables dans Administration › Identité visuelle).
 */

/* ---------- Connexion : écran partagé ---------- */

.brand-login {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    background: #FFFFFF;
    color: #13232C;
}

.brand-login-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 48px 56px;
    background-color: var(--brand-primary);
    color: var(--brand-on-primary);
}

.brand-login-panel.has-image {
    background-image:
        linear-gradient(color-mix(in srgb, var(--brand-primary) 86%, transparent), color-mix(in srgb, var(--brand-primary) 94%, #000000)),
        var(--brand-login-image);
    background-size: cover;
    background-position: center;
}

.brand-login-identity {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    max-width: 180px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #FFFFFF;
    box-sizing: border-box;
}

.brand-login-logo img {
    max-height: 40px;
    max-width: 156px;
    object-fit: contain;
}

.brand-login-monogram {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--brand-accent);
    color: var(--brand-on-accent);
    font-size: 18px;
    font-weight: 700;
}

.brand-login-names {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand-login-name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.brand-login-tagline {
    font-size: 14px;
    color: color-mix(in srgb, var(--brand-on-primary) 82%, transparent);
}

.brand-login-pitch {
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 440px;
}

.brand-login-rule {
    width: 48px;
    height: 4px;
    border-radius: 2px;
    background: var(--brand-accent);
}

.brand-login-title {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.brand-login-message {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--brand-on-primary) 86%, transparent);
}

.brand-login-legal {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--brand-on-primary) 78%, transparent);
    max-width: 440px;
}

.brand-login-side {
    display: flex;
    flex-direction: column;
    padding: 48px 24px 24px;
}

.brand-login-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.brand-login-main > .fi-simple-page {
    width: 100%;
    max-width: 400px;
}

.brand-login .fi-simple-header {
    align-items: flex-start;
    text-align: left;
    margin-bottom: 8px;
}

.brand-login .fi-simple-header-heading {
    font-size: 28px;
    font-weight: 700;
    color: #13232C;
}

.brand-login .fi-simple-header-subheading {
    margin-top: 4px;
    font-size: 15px;
    color: #52646E;
    text-align: left;
}

.brand-login .fi-btn {
    min-height: 48px;
    font-size: 15px;
}

.brand-login-vendor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 24px;
    font-size: 12px;
    color: #52646E;
}

.brand-login-vendor img {
    height: 56px;
    width: auto;
}

/* Thème sombre de Filament : la partie formulaire suit. */
.dark .brand-login,
.dark .brand-login-side {
    background: var(--gray-950);
    color: #FFFFFF;
}

.dark .brand-login .fi-simple-header-heading {
    color: #FFFFFF;
}

.dark .brand-login .fi-simple-header-subheading,
.dark .brand-login-vendor {
    color: var(--gray-400);
}

.dark .brand-login-vendor img {
    padding: 4px 8px;
    border-radius: 8px;
    background: #FFFFFF;
}

/* Tablette et téléphone : le panneau devient un bandeau au-dessus du formulaire. */
@media (max-width: 900px) {
    .brand-login {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }

    .brand-login-panel {
        gap: 20px;
        padding: 24px 16px;
    }

    .brand-login-pitch {
        margin: 0;
        gap: 8px;
    }

    .brand-login-rule,
    .brand-login-legal {
        display: none;
    }

    .brand-login-title {
        font-size: 22px;
    }

    .brand-login-message {
        font-size: 14px;
    }

    .brand-login-side {
        padding: 32px 16px 16px;
    }

    .brand-login-main {
        align-items: flex-start;
    }
}

/* ---------- Marque (logo ou initiales, nom, sous-titre) ---------- */

.brand-mark {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.brand-mark-logo {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    height: 40px;
    max-width: 96px;
    padding: 4px 8px;
    border-radius: 8px;
    background: #FFFFFF;
    box-sizing: border-box;
}

.brand-mark-logo img {
    max-height: 32px;
    max-width: 80px;
    object-fit: contain;
}

.brand-mark-monogram {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--brand-accent);
    color: var(--brand-on-accent);
    font-size: 15px;
    font-weight: 700;
}

.brand-mark-names {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.brand-mark-name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-mark-tagline {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Barre latérale ---------- */

.fi-main-sidebar {
    background-color: var(--brand-primary);
    color: var(--brand-on-primary);
    /* Thème clair : filet pour détacher la barre de la page. */
    border-inline-end: 1px solid var(--brand-band-edge);
}

.fi-main-sidebar .fi-sidebar-header {
    background: transparent;
    box-shadow: none;
}

.fi-main-sidebar .fi-logo {
    color: var(--brand-on-primary);
}

.fi-main-sidebar .fi-icon-btn,
.fi-main-sidebar .fi-sidebar-group-collapse-btn .fi-icon,
.fi-main-sidebar .fi-sidebar-group-btn .fi-icon {
    color: color-mix(in srgb, var(--brand-on-primary) 78%, transparent);
}

.fi-main-sidebar .fi-icon-btn:hover,
.fi-main-sidebar .fi-icon-btn:focus-visible {
    color: var(--brand-on-primary);
    background-color: color-mix(in srgb, var(--brand-on-primary) 10%, transparent);
}

.fi-main-sidebar .fi-sidebar-group-label {
    color: color-mix(in srgb, var(--brand-on-primary) 72%, transparent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fi-main-sidebar .fi-sidebar-item-label {
    color: var(--brand-on-primary);
    font-weight: 500;
}

.fi-main-sidebar .fi-sidebar-item-btn > .fi-icon {
    color: color-mix(in srgb, var(--brand-on-primary) 82%, transparent);
}

.fi-main-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-main-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
    background-color: color-mix(in srgb, var(--brand-on-primary) 10%, transparent);
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: color-mix(in srgb, var(--brand-on-primary) 18%, transparent);
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--brand-on-primary);
    font-weight: 600;
}

.fi-main-sidebar .fi-sidebar-item-grouped-border-part,
.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-grouped-border-part {
    background-color: color-mix(in srgb, var(--brand-on-primary) 60%, transparent);
}

/* ---------- Barre supérieure : même couleur que la barre latérale ---------- */

.fi-topbar {
    background-color: var(--brand-primary);
    color: var(--brand-on-primary);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--brand-on-primary) 12%, transparent);
    border-bottom: 1px solid var(--brand-band-edge);
}

.fi-topbar .fi-logo {
    color: var(--brand-on-primary);
}

.fi-topbar .fi-icon-btn,
.fi-topbar .fi-icon-btn .fi-icon {
    color: var(--brand-on-primary);
}

.fi-topbar .fi-icon-btn:hover,
.fi-topbar .fi-icon-btn:focus-visible {
    background-color: color-mix(in srgb, var(--brand-on-primary) 12%, transparent);
}

/* Recherche : champ translucide sur la couleur de la barre. */
.fi-topbar .fi-global-search-field .fi-input-wrp {
    background-color: color-mix(in srgb, var(--brand-on-primary) 12%, transparent);
    box-shadow: none;
    --tw-ring-color: color-mix(in srgb, var(--brand-on-primary) 24%, transparent);
}

.fi-topbar .fi-global-search-field .fi-input,
.fi-topbar .fi-global-search-field .fi-icon {
    color: var(--brand-on-primary);
}

.fi-topbar .fi-global-search-field .fi-input::placeholder {
    color: color-mix(in srgb, var(--brand-on-primary) 72%, transparent);
}

/* Nom et rôle à côté de l'avatar. */
.fi-topbar-end {
    gap: 12px;
}

.brand-user-identity {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
    text-align: right;
}

.brand-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-on-primary);
}

.brand-user-role {
    font-size: 12px;
    color: color-mix(in srgb, var(--brand-on-primary) 78%, transparent);
}

@media (max-width: 767px) {
    .brand-user-identity {
        display: none;
    }
}

/* ---------- Tableaux : colonne d'actions toujours visible ---------- */

/* Quand un tableau déborde, la colonne d'actions reste collée à droite. */
.fi-ta-table td.fi-ta-cell:last-child:has(> .fi-ta-actions),
.fi-ta-table th.fi-ta-actions-header-cell:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background-color: #FFFFFF;
    box-shadow: -10px 0 10px -10px rgba(19, 35, 44, 0.25);
}

.fi-ta-table tr:hover > td.fi-ta-cell:last-child:has(> .fi-ta-actions) {
    background-color: var(--gray-50);
}

.dark .fi-ta-table td.fi-ta-cell:last-child:has(> .fi-ta-actions),
.dark .fi-ta-table th.fi-ta-actions-header-cell:last-child {
    background-color: var(--gray-900);
}

/* ---------- Identité visuelle : aperçu en direct ---------- */

@media (min-width: 1280px) {
    .brand-preview-ctn {
        position: sticky;
        top: calc(var(--topbar-height, 4rem) + 16px);
        align-self: start;
    }
}

.brand-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border: 1px solid #D7E0E5;
    border-radius: 12px;
    background: #FFFFFF;
    color: #13232C;
}

.brand-preview-label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #52646E;
}

.brand-preview-accent-bg {
    background: var(--pv-accent);
}

.brand-preview-app {
    overflow: hidden;
    border: 1px solid #D7E0E5;
    border-radius: 10px;
}

.brand-preview-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--pv-primary);
    color: var(--pv-on-primary);
    border-bottom: 1px solid color-mix(in srgb, var(--pv-on-primary) 12%, transparent);
}

.brand-preview-user {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-align: right;
}

.brand-preview-user small {
    font-weight: 400;
    opacity: 0.8;
}

.brand-preview-body {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    min-height: 170px;
}

.brand-preview-sidebar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 8px;
    background: var(--pv-primary);
    color: var(--pv-on-primary);
    font-size: 13px;
}

.brand-preview-sidebar span {
    padding: 8px 10px;
    border-radius: 6px;
}

.brand-preview-sidebar .is-active {
    background: color-mix(in srgb, var(--pv-on-primary) 18%, transparent);
    font-weight: 600;
}

.brand-preview-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: #F3F6F8;
    font-size: 13px;
}

.brand-preview-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--pv-accent) 14%, #FFFFFF);
}

.brand-preview-alert span {
    width: 8px;
    height: 8px;
    border-radius: 4px;
}

.brand-preview-btn {
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--pv-ink);
    color: #FFFFFF;
    font-weight: 600;
}

.brand-preview-login {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-radius: 10px;
    background: var(--pv-primary);
    color: var(--pv-on-primary);
    font-size: 13px;
}

.brand-preview-login strong {
    font-size: 20px;
    line-height: 1.2;
}

.brand-preview-login small {
    opacity: 0.8;
}

.brand-preview-rule {
    width: 32px;
    height: 3px;
    border-radius: 2px;
}

/* ---------- Pages : fond et cartes de la charte ---------- */

.fi-body {
    background-color: #F3F6F8;
}

.dark .fi-body {
    background-color: var(--gray-950);
}

/* Cartes Filament (sections, tableaux, indicateurs) : bordure fine, sans ombre. */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-radius: 12px;
    box-shadow: none;
    --tw-ring-color: #D7E0E5;
}

.fi-wi-stats-overview-stat {
    padding: 20px;
}

.fi-wi-stats-overview-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: #52646E;
}

.fi-wi-stats-overview-stat-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.fi-wi-stats-overview-stat-description {
    font-size: 13px;
    font-weight: 600;
}

/* ---------- Tableau de bord : blocs de la maquette ---------- */

.brand-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
    box-sizing: border-box;
    padding: 24px;
    border: 1px solid #D7E0E5;
    border-radius: 12px;
    background: #FFFFFF;
    color: #13232C;
}

.dark .brand-card {
    border-color: rgba(255, 255, 255, 0.1);
    background: var(--gray-900);
    color: #FFFFFF;
}

.brand-card-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.brand-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.brand-card-note,
.brand-card-empty {
    margin: 0;
    font-size: 13px;
    color: #52646E;
}

.brand-card-empty a {
    color: var(--brand-ink);
    font-weight: 600;
}

/* Barres collecte vs objectif */
.brand-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.brand-bar-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 156px;
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
    margin: 0 -8px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}

.brand-bar-row:hover,
.brand-bar-row:focus-visible {
    background: #F3F6F8;
}

.brand-bar-label {
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-bar-track {
    position: relative;
    height: 22px;
    border-radius: 4px;
    background: #EDF2F5;
}

.brand-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 4px;
    background: var(--brand-ink);
}

.brand-bar-marker {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    background: #13232C;
}

.brand-bar-value {
    font-size: 14px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.brand-bar-row.is-worst {
    background: color-mix(in srgb, var(--brand-accent) 12%, #FFFFFF);
}

.brand-bar-row.is-worst .brand-bar-label,
.brand-bar-row.is-worst .brand-bar-value {
    font-weight: 700;
    color: color-mix(in srgb, var(--brand-accent) 55%, #13232C);
}

.brand-bar-row.is-worst .brand-bar-track {
    background: color-mix(in srgb, var(--brand-accent) 22%, #FFFFFF);
}

.brand-bar-row.is-worst .brand-bar-fill {
    background: var(--brand-accent);
}

/* Alertes */
.brand-alerts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.brand-alert {
    display: flex;
    gap: 12px;
    padding: 14px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}

.brand-alert.is-accent {
    background: color-mix(in srgb, var(--brand-accent) 12%, #FFFFFF);
}

.brand-alert.is-primary {
    background: #EDF2F5;
}

.brand-alert:hover,
.brand-alert:focus-visible {
    filter: brightness(0.97);
}

.brand-alert.is-zero {
    background: #F3F6F8;
}

.brand-alert-dot {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 5px;
    background: var(--brand-ink);
}

.brand-alert.is-accent .brand-alert-dot {
    background: var(--brand-accent);
}

.brand-alert.is-zero .brand-alert-dot {
    background: #9DB0BA;
}

.brand-alert-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand-alert-title {
    font-size: 14px;
    font-weight: 600;
}

.brand-alert-detail {
    font-size: 13px;
    color: #52646E;
}

/* Classement */
.brand-table-scroll {
    overflow-x: auto;
}

.brand-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.brand-table th {
    padding: 10px 12px;
    border-bottom: 1px solid #D7E0E5;
    color: #52646E;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}

.brand-table td {
    padding: 12px;
    border-bottom: 1px solid #EDF2F5;
}

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

.brand-table .is-num {
    text-align: right;
}

.brand-table .is-strong {
    font-weight: 600;
}

.brand-table .is-success {
    color: #1D6B3A;
}

.brand-table .is-warning {
    color: #9A5310;
}

.brand-table .is-danger {
    color: #B42318;
}

@media (max-width: 640px) {
    .brand-bar-row {
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .brand-bar-value {
        grid-column: 2;
        text-align: left;
    }
}

.brand-alerts.is-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ---------- Abonnement : bandeaux et page ---------- */

.licence-alert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #13232C;
}

.licence-alert.is-neutral { background: #EDF2F5; }
.licence-alert.is-warning { background: #FCF3EA; border: 1px solid #EBC9A6; }
.licence-alert.is-danger { background: #FDECEA; border: 1px solid #F1B5AE; }

.licence-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--brand-ink);
    text-decoration: underline;
    cursor: pointer;
}

.licence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.licence-badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.licence-badge.is-success { background: #E6F2EA; color: #1D6B3A; }
.licence-badge.is-warning { background: #FCF3EA; color: #9A5310; }
.licence-badge.is-danger { background: #FDECEA; color: #B42318; }
.licence-badge.is-neutral { background: #EDF2F5; color: #3E4F58; }

.licence-facts {
    display: grid;
    gap: 12px;
    margin: 0;
}

.licence-facts dt {
    font-size: 12px;
    color: #52646E;
}

.licence-facts dd {
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 500;
}

.licence-count {
    margin: 0;
    font-size: 15px;
    color: #52646E;
}

.licence-count strong {
    font-size: 32px;
    color: #13232C;
}

.licence-meter {
    height: 10px;
    border-radius: 5px;
    background: #EDF2F5;
    overflow: hidden;
}

.licence-meter span {
    display: block;
    height: 100%;
    background: var(--brand-ink);
}

.licence-meter span.is-warning { background: var(--brand-accent); }

.licence-modules {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: #52646E;
}

.licence-modules li::before { content: "○  "; }
.licence-modules li.is-included { color: #13232C; font-weight: 500; }
.licence-modules li.is-included::before { content: "●  "; color: var(--brand-ink); }

.licence-mono {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 13px;
    word-break: break-all;
}

.dark .licence-alert { color: #FFFFFF; background: var(--gray-800); }

/* Canaux d'envoi : tableau de consommation */
.channel-usage table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.channel-usage th, .channel-usage td { padding: .5rem .75rem; border-bottom: 1px solid rgb(0 0 0 / .06); text-align: left; }
.channel-usage th { font-weight: 600; color: rgb(75 85 99); }
.channel-usage .num { text-align: right; font-variant-numeric: tabular-nums; }
.channel-usage tr.current td { font-weight: 600; }
.channel-usage .hint { font-weight: 400; color: rgb(107 114 128); font-size: .75rem; }
.dark .channel-usage th { color: rgb(209 213 219); }
.dark .channel-usage th, .dark .channel-usage td { border-color: rgb(255 255 255 / .08); }

/* ---------- Conversations WhatsApp : carte blanche, couleurs de la charte ---------- */

.wa-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 20px;
    border: 1px solid #E4EBEF;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand-ink) 3%, #F7F9FA);
}

.wa-day {
    align-self: center;
    margin: 6px 0;
    padding: 2px 12px;
    border: 1px solid #E4EBEF;
    border-radius: 999px;
    background: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
    color: #52646E;
}

.wa-msg { display: flex; }
.wa-in { justify-content: flex-start; }
.wa-out { justify-content: flex-end; }

.wa-bubble {
    max-width: min(36rem, 80%);
    padding: 10px 14px;
    border: 1px solid #E4EBEF;
    border-radius: 12px;
    background: #FFFFFF;
    color: #13232C;
    font-size: 14px;
    line-height: 1.45;
}

.wa-in .wa-bubble { border-top-left-radius: 4px; }

.wa-out .wa-bubble {
    border-color: color-mix(in srgb, var(--brand-ink) 22%, #FFFFFF);
    border-top-right-radius: 4px;
    background: color-mix(in srgb, var(--brand-ink) 9%, #FFFFFF);
}

.wa-failed .wa-bubble { border-color: #F5C2C2; background: #FDF1F1; }

.wa-body { white-space: pre-wrap; word-break: break-word; }

.wa-meta {
    margin-top: 4px;
    font-size: 11px;
    color: #52646E;
    text-align: right;
}

.wa-status { font-weight: 600; color: var(--brand-ink); }

.wa-tag {
    display: inline-block;
    margin-bottom: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-accent) 16%, #FFFFFF);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--brand-accent) 55%, #13232C);
}

.wa-error { margin-top: 4px; font-size: 12px; color: #B42318; }
.wa-note { font-size: 12px; font-style: italic; color: #52646E; }

.wa-media {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--brand-ink);
    text-decoration: underline;
}

.wa-media-icon { width: 16px; height: 16px; }

.wa-empty { padding: 32px 0; text-align: center; font-size: 14px; color: #52646E; }

/* Zone de réponse : séparée du fil, dans la même carte. */
.wa-composer {
    padding-top: 16px;
    border-top: 1px solid #E4EBEF;
}

.dark .wa-thread { border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); }
.dark .wa-day { border-color: rgba(255, 255, 255, 0.1); background: var(--gray-800); color: rgb(209 213 219); }
.dark .wa-bubble { border-color: rgba(255, 255, 255, 0.1); background: var(--gray-800); color: #FFFFFF; }
.dark .wa-out .wa-bubble { border-color: color-mix(in srgb, var(--brand-ink) 45%, transparent); background: color-mix(in srgb, var(--brand-ink) 28%, var(--gray-900)); }
.dark .wa-failed .wa-bubble { border-color: rgb(127 29 29); background: rgb(69 10 10); }
.dark .wa-meta, .dark .wa-note, .dark .wa-empty { color: rgb(209 213 219); }
.dark .wa-status, .dark .wa-media { color: color-mix(in srgb, var(--brand-ink) 55%, #FFFFFF); }
.dark .wa-composer { border-color: rgba(255, 255, 255, 0.08); }

/* Messages de l'assistant : même côté que l'institution, teinte neutre pour les distinguer des chargés. */
.wa-auto .wa-bubble { border-color: #E4EBEF; border-style: dashed; background: #FFFFFF; }
.wa-bot { font-weight: 600; color: color-mix(in srgb, var(--brand-accent) 60%, #13232C); }
.dark .wa-auto .wa-bubble { border-color: rgba(255, 255, 255, 0.15); background: var(--gray-800); }
.dark .wa-bot { color: color-mix(in srgb, var(--brand-accent) 60%, #FFFFFF); }

/* ---------- En-tête de page : carte blanche sur toute la largeur ----------
 * Fil d'Ariane, titre, sous-titre et boutons d'action dans la même carte. */

.fi-header {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 20px;
    border: 1px solid #D7E0E5;
    border-radius: 12px;
    background: #FFFFFF;
    row-gap: 12px;
}

/* Bloc titre : prend toute la place laissée par les boutons. */
.fi-header > div:first-child:not(.fi-header-actions-ctn) {
    flex: 1 1 auto;
    min-width: 0;
}

.fi-header .fi-header-actions-ctn {
    align-self: center;
}

.fi-header .fi-header-heading {
    font-size: 22px;
    line-height: 1.25;
    color: #13232C;
}

.fi-header .fi-header-subheading {
    max-width: none;
    margin-top: 4px;
    font-size: 14px;
    color: #52646E;
}

.fi-header .fi-breadcrumbs {
    margin-bottom: 6px;
}

.fi-header .fi-breadcrumbs li {
    font-size: 13px;
    font-weight: 500;
    color: #52646E;
}

.fi-header .fi-breadcrumbs a.fi-breadcrumbs-item-label:hover {
    color: var(--brand-ink);
}

/* Page en cours : couleur de la charte. */
.fi-header .fi-breadcrumbs [aria-current="page"] {
    font-weight: 600;
    color: var(--brand-ink);
}

.fi-header .fi-breadcrumbs .fi-icon {
    width: 14px;
    height: 14px;
    color: #A7B4BC;
}

.dark .fi-header {
    border-color: rgba(255, 255, 255, 0.1);
    background: var(--gray-900);
}

.dark .fi-header .fi-header-heading { color: #FFFFFF; }
.dark .fi-header .fi-header-subheading,
.dark .fi-header .fi-breadcrumbs li { color: rgb(156 163 175); }
.dark .fi-header .fi-breadcrumbs [aria-current="page"],
.dark .fi-header .fi-breadcrumbs a.fi-breadcrumbs-item-label:hover { color: color-mix(in srgb, var(--brand-ink) 55%, #FFFFFF); }

/* ---------- Tableaux condensés (écran d'ordinateur) ----------
 * Lignes d'environ 40 px au lieu de 53 px : plus de lignes visibles, sans tasser la lecture. */

@media (min-width: 640px) {
    .fi-ta-table .fi-ta-text:not(.fi-inline),
    .fi-ta-table .fi-ta-icon:not(.fi-inline),
    .fi-ta-table .fi-ta-image:not(.fi-inline),
    .fi-ta-table .fi-ta-select:not(.fi-inline),
    .fi-ta-table .fi-ta-text-input:not(.fi-inline),
    .fi-ta-table .fi-ta-toggle:not(.fi-inline),
    .fi-ta-table .fi-ta-checkbox:not(.fi-inline),
    .fi-ta-table .fi-ta-color:not(.fi-inline) {
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .fi-ta-table .fi-ta-header-cell {
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 13px;
    }

    .fi-ta-table > tbody > tr > .fi-ta-selection-cell,
    .fi-ta-table > tbody > tr > td.fi-ta-cell:has(.fi-ta-actions) {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* Badges un peu plus fins pour ne pas regonfler les lignes. */
    .fi-ta-table .fi-badge {
        padding-top: 1px;
        padding-bottom: 1px;
    }
}

/* ---------- Cartes indicateurs : en-tête coloré, sans bordure ----------
 * En-tête plein de la couleur principale (libellé et pictogramme en blanc), corps blanc,
 * ombre légère au lieu d'un contour. Une carte à surveiller a un en-tête rouge sourd. */

.fi-wi-stats-overview-stat {
    overflow: hidden;
    padding: 0 20px;
    /* Angles droits en haut : l'en-tête coloré se lit comme un bandeau. */
    border-radius: 0 0 12px 12px;
    background: #FFFFFF;
    --tw-ring-color: transparent;
    --tw-ring-shadow: 0 0 #0000;
    box-shadow: 0 1px 2px rgba(19, 35, 44, 0.06), 0 2px 8px rgba(19, 35, 44, 0.05);
}

.fi-wi-stats-overview-stat-content {
    row-gap: 0;
}

/* En-tête : bandeau plein, sans filet ni contour. */
.fi-wi-stats-overview-stat-label-ctn {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    column-gap: 12px;
    margin: 0 -20px;
    padding: 10px 20px;
    background: var(--brand-band);
}

.fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--brand-on-band);
}

.fi-wi-stats-overview-stat-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--brand-on-band);
}

.fi-wi-stats-overview-stat-value {
    padding: 16px 0 14px;
    font-size: 26px;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: #13232C;
    font-variant-numeric: tabular-nums;
}

.fi-wi-stats-overview-stat-description {
    margin: 0 -20px;
    padding: 0 20px 14px;
    border: 0;
    background: transparent;
    font-size: 12.5px;
    font-weight: 500;
    color: #52646E;
}

.fi-wi-stats-overview-stat-description.fi-color-success { color: #2F6B4F; }
.fi-wi-stats-overview-stat-description.fi-color-warning { color: #8A5A12; }
.fi-wi-stats-overview-stat-description.fi-color-danger { color: #9B2C2C; }

.fi-wi-stats-overview-stat-content:not(:has(.fi-wi-stats-overview-stat-description)) .fi-wi-stats-overview-stat-value {
    padding-bottom: 18px;
}

/* Carte à surveiller : en-tête rouge sourd et mention discrète. */
.fi-wi-stats-overview-stat.brand-stat-alert .fi-wi-stats-overview-stat-label-ctn { background: #9B2C2C; }
.fi-wi-stats-overview-stat.brand-stat-alert .fi-wi-stats-overview-stat-label::after {
    content: "· à surveiller";
    margin-left: 6px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}
.fi-wi-stats-overview-stat.brand-stat-alert .fi-wi-stats-overview-stat-value { color: #9B2C2C; }

a.fi-wi-stats-overview-stat:hover { box-shadow: 0 2px 4px rgba(19, 35, 44, 0.08), 0 6px 16px rgba(19, 35, 44, 0.08); }

.dark .fi-wi-stats-overview-stat { background: var(--gray-900); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
.dark .fi-wi-stats-overview-stat-label-ctn { background: color-mix(in srgb, var(--brand-primary) 70%, var(--gray-950)); }
.dark .fi-wi-stats-overview-stat-value { color: #FFFFFF; }
.dark .fi-wi-stats-overview-stat-description { color: rgb(156 163 175); }
.dark .fi-wi-stats-overview-stat.brand-stat-alert .fi-wi-stats-overview-stat-label-ctn { background: #7A2323; }
.dark .fi-wi-stats-overview-stat.brand-stat-alert .fi-wi-stats-overview-stat-value { color: #F2B8B8; }