/*
 * Succès client — barre du haut (Aide, Nouveautés), panneaux, carte « Premiers
 * pas » de l'accueil, question de satisfaction, centre d'aide et pages
 * d'administration du support.
 *
 * Chargée par templates/partials/head.html, APRÈS app_shell.css. Couleurs =
 * jetons du thème (--surface-color, --text-color, --color-text-muted,
 * --readable-*) : clair, sombre et sombre « système » sans règle dédiée. Une
 * couleur de marque n'est jamais du TEXTE brut : --readable-accent-text.
 * Pourcentages (barres) : chaînes formatées côté serveur (locale fr-fr).
 */

/* ── Barre du haut ─────────────────────────────────────────────────────── */
.success-topbar-btn { display: inline-flex; align-items: center; gap: 0.35rem; }
.success-topbar-label { display: none; }
@media (min-width: 1200px) { .success-topbar-label { display: inline; } }
/* Au téléphone, « Nouveautés » vit dans le panneau d'aide (place comptée). */
@media (max-width: 575.98px) {
    .success-topbar-news { display: none !important; }
}
.success-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--readable-danger-solid, #c62828);
    box-shadow: 0 0 0 2px var(--color-header, var(--surface-color, #fff));
}
.success-dot-phone { display: none; }
@media (max-width: 575.98px) {
    .success-dot-phone:not(.d-none) { display: block; }
}
.success-dot-inline { position: static; display: inline-block; margin-left: auto; box-shadow: none; }

/* ── Panneaux (offcanvas) ──────────────────────────────────────────────── */
.success-panel.offcanvas { --bs-offcanvas-width: 420px; background: var(--surface-color, #fff); color: var(--text-color, #1f2937); }
.success-panel .offcanvas-header { border-bottom: 1px solid var(--border-color, #e5e7eb); padding: 0.75rem 1rem; }
.success-panel .offcanvas-body { padding: 1rem; }
.success-panel-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1rem; font-weight: 600; }
.success-panel-title i { color: var(--readable-accent-text, var(--color-primary-text)); }
.success-panel-loading { color: var(--color-text-muted, #575e66); font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; }

.success-help { display: flex; flex-direction: column; gap: 1.1rem; }
.success-help-section { display: flex; flex-direction: column; gap: 0.5rem; }
.success-help-heading {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted, #575e66);
}
.success-help-note { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted, #575e66); line-height: 1.45; }

.success-help-search { position: relative; display: flex; gap: 0.5rem; align-items: center; }
.success-help-search > i { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--color-text-muted, #575e66); pointer-events: none; }
.success-help-search .form-control { padding-left: 2.1rem; }
.success-help-search-lg { margin-bottom: 1rem; }

.success-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.success-link-list a,
.success-link-static,
.success-link-button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 36px;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm, 0.375rem);
    color: var(--text-color, #1f2937);
    font-size: 0.875rem;
    text-decoration: none;
    background: transparent;
    border: 0;
    text-align: left;
}
.success-link-list a:hover,
.success-link-button:hover { background: var(--surface-alt-color, #f9fafb); color: var(--text-color, #1f2937); }
.success-link-list a:focus-visible,
.success-link-button:focus-visible { outline: 2px solid var(--readable-accent-text, var(--color-primary-text)); outline-offset: 1px; }
.success-link-list i { color: var(--readable-accent-text, var(--color-primary-text)); width: 1.1rem; text-align: center; flex-shrink: 0; }
.success-link-list a.is-current { background: var(--tw-brand-softer, var(--surface-alt-color)); font-weight: 600; }
.success-link-list-compact a { min-height: 32px; font-size: 0.8125rem; }
@media (pointer: coarse) {
    .success-link-list a,
    .success-link-button,
    .success-link-list-compact a { min-height: 44px; }
}
.success-link-static kbd { font-size: 0.75rem; }
.success-count { margin-left: auto; background: var(--readable-danger-solid, #c62828); color: #fff; font-size: 0.7rem; }

.success-contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.5rem; }
.success-contact {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    min-height: 48px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius, 0.5rem);
    color: var(--text-color, #1f2937);
    text-decoration: none;
    background: var(--surface-color, #fff);
}
.success-contact:hover { border-color: var(--readable-accent-text, var(--color-primary-text)); color: var(--text-color, #1f2937); }
.success-contact-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--tw-brand-soft, var(--surface-alt-color));
    color: var(--readable-accent-text, var(--color-primary-text));
}
/* Vert WhatsApp en APLAT (contenu blanc 4,6:1), jamais en texte. */
.success-contact-icon.is-whatsapp { background: #128c4b; color: #fff; }
.success-contact-text { display: flex; flex-direction: column; min-width: 0; font-size: 0.8125rem; line-height: 1.3; }
.success-contact-text span { color: var(--color-text-muted, #575e66); overflow-wrap: anywhere; }

.success-report-form { display: flex; flex-direction: column; gap: 0.6rem; }
.success-report-form .form-label { margin-bottom: 0.15rem; font-size: 0.8125rem; font-weight: 600; }
.success-severity { margin: 0; padding: 0; border: 0; }
.success-severity .form-check { margin-bottom: 0.15rem; font-size: 0.875rem; }
.success-report-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.success-report-status:empty { display: none; }
.success-report-status { font-size: 0.8125rem; border-radius: var(--radius-sm, 0.375rem); padding: 0.5rem 0.65rem; }
.success-report-status.is-ok { background: var(--tw-success-soft, #e7f7f0); color: var(--readable-success-text, #0d6b52); }
.success-report-status.is-error { background: var(--tw-danger-soft, #fdecec); color: var(--readable-danger-text, #b91c1c); }

/* ── Nouveautés ────────────────────────────────────────────────────────── */
.success-changelog { display: flex; flex-direction: column; gap: 1rem; }
.success-release { border-left: 3px solid var(--border-color, #e5e7eb); padding-left: 0.85rem; }
.success-release.is-unread { border-left-color: var(--primary-color, #0d6efd); }
.success-release-title { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.success-release-meta { margin: 0.1rem 0 0.4rem; font-size: 0.75rem; color: var(--color-text-muted, #575e66); display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.success-release-points { margin: 0; padding-left: 1.1rem; font-size: 0.8125rem; line-height: 1.5; }
.success-release-points li + li { margin-top: 0.25rem; }
.success-badge-new {
    display: inline-block; padding: 0 0.4rem; border-radius: var(--radius-pill, 999px);
    background: var(--primary-color, #0d6efd); color: #fff;
    font-size: 0.6875rem; font-weight: 600; line-height: 1.5;
}

/* ── Carte « Premiers pas » (accueil) ──────────────────────────────────── */
.success-onboarding {
    margin: 0 0 1rem;
    padding: 0.9rem 1rem 1rem;
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius, 0.5rem);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, .06));
}
.success-onboarding.is-complete { border-color: var(--readable-success-solid, #0d6b52); }
.success-onboarding-head { display: flex; align-items: flex-start; gap: 0.75rem; }
.success-onboarding-heading { flex: 1 1 auto; min-width: 0; }
.success-onboarding-heading h2 { margin: 0; font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
.success-onboarding-heading h2 i { color: var(--readable-accent-text, var(--color-primary-text)); }
.success-onboarding-heading p { margin: 0.15rem 0 0; font-size: 0.8125rem; color: var(--color-text-muted, #575e66); }
.success-onboarding-hide { color: var(--color-text-muted, #575e66); text-decoration: none; font-size: 0.8125rem; }
.success-onboarding-medal {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
    background: var(--tw-success-soft, #e7f7f0); color: var(--readable-success-text, #0d6b52); font-size: 1.15rem;
}
.success-progress { height: 6px; margin: 0.7rem 0 0.8rem; border-radius: 999px; background: var(--surface-alt-color, #f1f5f9); overflow: hidden; }
.success-progress-bar { display: block; height: 100%; border-radius: inherit; background: var(--primary-color, #0d6efd); transition: width .3s ease; }
.success-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.35rem 1rem; }
@media (min-width: 900px) { .success-steps { grid-template-columns: 1fr 1fr; } }
.success-step { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.3rem 0; border-top: 1px solid var(--border-color, #e5e7eb); }
.success-step-icon { font-size: 1.05rem; color: var(--color-text-muted, #575e66); flex-shrink: 0; }
.success-step.is-done .success-step-icon { color: var(--readable-success-text, #0d6b52); }
.success-step-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.success-step-title { font-size: 0.875rem; font-weight: 600; }
.success-step.is-done .success-step-title { font-weight: 500; color: var(--color-text-muted, #575e66); }
.success-step-desc { font-size: 0.75rem; color: var(--color-text-muted, #575e66); line-height: 1.35; }
.success-step-cta { flex-shrink: 0; white-space: nowrap; }

/* ── Question de satisfaction (carte en bas d'écran, jamais une modale) ── */
.success-nps {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1030; /* sous les modales (1050) et les toasts : une alerte reste lisible */
    width: min(400px, calc(100vw - 2rem));
    background: var(--surface-color, #fff);
    color: var(--text-color, #1f2937);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--text-color, #1f2937) 35%, transparent);
    padding: 0.8rem 0.9rem 0.7rem;
    animation: success-rise 220ms ease-out;
}
@keyframes success-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .success-nps { animation: none; } }
@media (max-width: 575.98px) {
    .success-nps {
        right: 0.5rem; left: 0.5rem; width: auto;
        bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    }
}
.success-nps-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.success-nps-eyebrow { margin: 0; font-size: 0.75rem; font-weight: 600; color: var(--readable-accent-text, var(--color-primary-text)); display: flex; gap: 0.35rem; align-items: center; }
.success-nps-close { font-size: 0.7rem; }
.success-nps-fieldset { margin: 0.25rem 0 0; padding: 0; border: 0; min-width: 0; }
.success-nps-question { float: none; width: auto; margin: 0 0 0.55rem; padding: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.success-nps-scale { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; }
@media (max-width: 575.98px) { .success-nps-scale { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; } }
.success-nps-score { position: relative; margin: 0; cursor: pointer; }
/* Le bouton radio reste accessible au clavier et aux lecteurs d'écran ;
   seule sa pastille native est retirée de la vue (son ancêtre est positionné). */
.success-nps-radio { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.success-nps-score span {
    display: flex; align-items: center; justify-content: center;
    min-height: 34px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-sm, 0.375rem);
    font-size: 0.8125rem; font-weight: 600;
    background: var(--surface-color, #fff);
    transition: background .12s, border-color .12s, color .12s;
}
@media (pointer: coarse) { .success-nps-score span { min-height: 44px; } }
.success-nps-score:hover span { border-color: var(--readable-accent-text, var(--color-primary-text)); }
.success-nps-radio:focus-visible + span { outline: 2px solid var(--readable-accent-text, var(--color-primary-text)); outline-offset: 1px; }
.success-nps-radio:checked + span { background: var(--primary-color, #0d6efd); border-color: var(--primary-color, #0d6efd); color: #fff; }
.success-nps-ends { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.3rem; font-size: 0.6875rem; color: var(--color-text-muted, #575e66); }
.success-nps-more { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; }
.success-nps-more[hidden] { display: none; }
.success-nps-more .form-label { margin: 0; font-size: 0.8125rem; font-weight: 600; }
.success-nps-more .form-check { font-size: 0.8125rem; margin: 0; }
.success-optional { font-weight: 400; color: var(--color-text-muted, #575e66); }
.success-nps-privacy { margin: 0; font-size: 0.75rem; color: var(--color-text-muted, #575e66); }
.success-nps-actions { display: flex; justify-content: flex-end; gap: 0.35rem; margin-top: 0.55rem; }
.success-nps-actions .btn-link { color: var(--color-text-muted, #575e66); text-decoration: none; }
.success-nps-status:empty { display: none; }
.success-nps-status { margin: 0.4rem 0 0; font-size: 0.8125rem; }
.success-nps-status.is-ok { color: var(--readable-success-text, #0d6b52); }
.success-nps-status.is-error { color: var(--readable-danger-text, #b91c1c); }

/* ── Pages : centre d'aide, guides, support, satisfaction ─────────────── */
.success-page { max-width: 1200px; margin: 0 auto; }
.success-page-narrow { max-width: 760px; display: flex; flex-direction: column; gap: 1rem; }
.success-help-layout { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
@media (min-width: 992px) { .success-help-layout { grid-template-columns: minmax(0, 1fr) 280px; } }
.success-help-main { min-width: 0; }
.success-help-aside { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 992px) { .success-help-aside { position: sticky; top: calc(var(--topbar-height, 56px) + 1rem); } }
.success-box {
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius, 0.5rem);
    padding: 1rem;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, .06));
}
.success-section-title { margin: 0 0 0.6rem; font-size: 0.9375rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
.success-section-title i { color: var(--readable-accent-text, var(--color-primary-text)); }
.success-count-muted { font-weight: 500; color: var(--color-text-muted, #575e66); font-size: 0.8125rem; }
.success-empty { font-size: 0.875rem; color: var(--color-text-muted, #575e66); }
.success-tag {
    display: inline-block; margin-top: 0.3rem; padding: 0 0.45rem; width: fit-content;
    border-radius: var(--radius-pill, 999px); font-size: 0.6875rem; font-weight: 600;
    background: var(--surface-alt-color, #f1f5f9); color: var(--color-text-muted, #575e66);
    border: 1px solid var(--border-color, #e5e7eb);
}

.success-guide-grid { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.6rem; }
.success-guide-card,
.success-result {
    display: flex; gap: 0.7rem; align-items: flex-start; height: 100%;
    padding: 0.75rem 0.85rem;
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius, 0.5rem);
    color: var(--text-color, #1f2937); text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
.success-guide-card:hover,
.success-result:hover { border-color: var(--readable-accent-text, var(--color-primary-text)); color: var(--text-color, #1f2937); box-shadow: var(--shadow, 0 1px 3px rgba(15, 23, 42, .08)); }
.success-guide-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-sm, 0.375rem);
    background: var(--tw-brand-soft, var(--surface-alt-color)); color: var(--readable-accent-text, var(--color-primary-text));
}
.success-guide-text,
.success-result-text { display: flex; flex-direction: column; min-width: 0; font-size: 0.8125rem; line-height: 1.4; }
.success-guide-text strong,
.success-result-text strong { font-size: 0.875rem; }
.success-guide-text > span:not(.success-tag),
.success-result-text > span { color: var(--color-text-muted, #575e66); }
.success-result-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.success-guide-article {
    min-width: 0;
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius, 0.5rem);
    padding: 1.1rem 1.25rem;
    font-size: 0.9375rem; line-height: 1.6;
}
.success-guide-article h2 { font-size: 1.0625rem; font-weight: 600; margin: 1.25rem 0 0.5rem; }
.success-guide-article h2:first-of-type { margin-top: 0; }
.success-guide-article h3 { font-size: 0.9375rem; font-weight: 600; margin: 1rem 0 0.35rem; }
.success-guide-article p { margin: 0 0 0.7rem; }
.success-guide-article ol,
.success-guide-article ul { margin: 0 0 0.8rem; padding-left: 1.3rem; }
.success-guide-article li + li { margin-top: 0.3rem; }
.success-guide-article kbd { font-size: 0.75rem; }
.success-guide-article .ui { font-weight: 600; } /* libellé exact d'un bouton, d'un menu, d'un onglet */
.success-guide-audience { font-size: 0.8125rem; color: var(--color-text-muted, #575e66); display: flex; gap: 0.4rem; align-items: center; }
.success-tip {
    margin: 0.4rem 0 0.9rem; padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--primary-color, #0d6efd);
    background: var(--tw-brand-softer, var(--surface-alt-color));
    border-radius: 0 var(--radius-sm, 0.375rem) var(--radius-sm, 0.375rem) 0;
    font-size: 0.875rem;
}
.success-tip.is-warning { border-left-color: var(--readable-warning-solid, #a35c00); background: var(--tw-warning-soft, #fdf3e1); }
.success-guide-nav { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border-color, #e5e7eb); flex-wrap: wrap; }
.success-guide-nav-link { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--text-color, #1f2937); font-size: 0.875rem; font-weight: 600; min-height: 44px; }
.success-guide-nav-link small { display: block; font-weight: 400; color: var(--color-text-muted, #575e66); font-size: 0.75rem; }
.success-guide-nav-link.is-next { margin-left: auto; text-align: right; }
.success-guide-nav-link i { color: var(--readable-accent-text, var(--color-primary-text)); }

.success-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.success-segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-alt-color, #f1f5f9); border: 1px solid var(--border-color, #e5e7eb); border-radius: var(--radius, 0.5rem); }
.success-segmented a {
    display: inline-flex; align-items: center; gap: 0.35rem; min-height: 32px; padding: 0.2rem 0.75rem;
    border-radius: var(--radius-sm, 0.375rem); font-size: 0.8125rem; font-weight: 500;
    color: var(--text-color, #1f2937); text-decoration: none;
}
@media (pointer: coarse) { .success-segmented a { min-height: 44px; } }
.success-segmented a.is-active { background: var(--surface-color, #fff); box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, .06)); font-weight: 600; }

.success-request-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.success-request { background: var(--surface-color, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: var(--radius, 0.5rem); padding: 0.75rem 0.9rem; }
.success-request.is-resolved { opacity: 0.85; }
.success-request-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.success-request-ref { font-size: 0.875rem; }
.success-request-meta { font-size: 0.75rem; color: var(--color-text-muted, #575e66); }
.success-request-desc { margin: 0.45rem 0; font-size: 0.875rem; white-space: normal; overflow-wrap: anywhere; }
.success-request-foot { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; }
.success-request-page { overflow-wrap: anywhere; }
.success-request-ua { margin: 0.4rem 0 0; font-size: 0.6875rem; color: var(--color-text-muted, #575e66); font-family: var(--bs-font-monospace, monospace); overflow-wrap: anywhere; }
.success-severity-pill { display: inline-block; padding: 0.05rem 0.5rem; border-radius: var(--radius-pill, 999px); font-size: 0.6875rem; font-weight: 700; color: #fff; }
.success-severity-pill.is-low { background: var(--readable-neutral-solid, #5f676e); }
.success-severity-pill.is-normal { background: var(--readable-warning-solid, #a35c00); }
.success-severity-pill.is-high { background: var(--readable-danger-solid, #c62828); }
.success-ok { color: var(--readable-success-text, #0d6b52); }
.success-mid { color: var(--readable-warning-text, #8a5a08); }
.success-ko { color: var(--readable-danger-text, #b91c1c); }

.success-empty-state { text-align: center; padding: 2rem 1rem; border: 1px dashed var(--border-color, #e5e7eb); border-radius: var(--radius, 0.5rem); }
.success-empty-state > i { display: block; font-size: 1.75rem; color: var(--color-text-muted, #575e66); margin-bottom: 0.4rem; }
.success-empty-state h2 { font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.25rem; }
.success-empty-state p { font-size: 0.875rem; color: var(--color-text-muted, #575e66); margin: 0 auto; max-width: 560px; }

.success-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.success-kpi { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 0.9rem; background: var(--surface-color, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: var(--radius, 0.5rem); }
@media (min-width: 768px) { .success-kpi-wide { grid-column: span 2; } }
.success-kpi-label { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted, #575e66); text-transform: uppercase; letter-spacing: 0.04em; }
.success-kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.success-kpi-value.is-good { color: var(--readable-success-text, #0d6b52); }
.success-kpi-value.is-mid { color: var(--readable-warning-text, #8a5a08); }
.success-kpi-value.is-bad { color: var(--readable-danger-text, #b91c1c); }
.success-kpi-hint { font-size: 0.75rem; color: var(--color-text-muted, #575e66); }
.success-split { display: flex; height: 12px; margin: 0.35rem 0; border-radius: 999px; overflow: hidden; background: var(--surface-alt-color, #f1f5f9); }
.success-split-part { display: block; height: 100%; }
.success-split-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.8125rem; }
.success-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.35rem; vertical-align: middle; }
/* Aplats des trois catégories (pas du texte) : vert, gris, rouge lisibles en clair et en sombre. */
.is-promoter.success-split-part, .success-swatch.is-promoter, .success-bar.is-promoter, .success-comment-score.is-promoter { background: var(--readable-success-solid, #0d6b52); }
.is-passive.success-split-part, .success-swatch.is-passive, .success-bar.is-passive, .success-comment-score.is-passive { background: var(--readable-neutral-solid, #5f676e); }
.is-detractor.success-split-part, .success-swatch.is-detractor, .success-bar.is-detractor, .success-comment-score.is-detractor { background: var(--readable-danger-solid, #c62828); }

.success-results-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 992px) { .success-results-grid { grid-template-columns: 1fr 1fr; } }
.success-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.success-bar-row { display: grid; grid-template-columns: 1.6rem 1fr 2.2rem; gap: 0.5rem; align-items: center; font-size: 0.8125rem; }
.success-bar-label { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.success-bar-track { height: 10px; background: var(--surface-alt-color, #f1f5f9); border-radius: 3px; overflow: hidden; }
.success-bar { display: block; height: 100%; border-radius: 3px; }
.success-bar-value { font-variant-numeric: tabular-nums; color: var(--color-text-muted, #575e66); }
.success-trend { margin: 0; font-size: 0.8125rem; --bs-table-bg: transparent; color: var(--text-color, #1f2937); }
.success-trend-bar-col { width: 40%; }
.success-trend-track { position: relative; display: block; height: 10px; background: var(--surface-alt-color, #f1f5f9); border-radius: 3px; }
.success-trend-track::before { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--border-color, #e5e7eb); }
.success-trend-bar { position: absolute; left: 50%; top: 0; bottom: 0; background: var(--readable-success-solid, #0d6b52); border-radius: 0 3px 3px 0; }
.success-trend-bar.is-negative { left: auto; right: 50%; background: var(--readable-danger-solid, #c62828); border-radius: 3px 0 0 3px; }

.success-comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.success-comment { display: flex; gap: 0.7rem; padding: 0.6rem 0; border-top: 1px solid var(--border-color, #e5e7eb); }
.success-comment:first-child { border-top: 0; padding-top: 0; }
.success-comment-score { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; color: #fff; font-weight: 700; font-size: 0.8125rem; }
.success-comment-text { margin: 0 0 0.15rem; font-size: 0.875rem; overflow-wrap: anywhere; }
.success-footnote { margin-top: 1rem; display: flex; gap: 0.4rem; align-items: flex-start; }