/* ==========================================================================
   Dashboard — couche PREMIUM (07/2026)
   Élève la page pro au niveau du sceau AGS : cartes ciselées, médaillons de
   grade en jauge, typographie soignée, profondeur maîtrisée. Chargée APRÈS
   client-dashboard.css et dashboard-v3.css → surcharge propre, rollback facile.
   Ne touche JAMAIS le sceau AGS (.ags-cert-*, travail Codex).
   ========================================================================== */

:root {
    --pm-card-bg: #ffffff;
    --pm-card-border: rgba(16, 24, 40, 0.07);
    --pm-card-border-hover: rgba(91, 63, 156, 0.22);
    --pm-ink-900: #16182b;
    --pm-ink-600: #55607a;
    --pm-ink-400: #8a93a8;
    /* Encre des textes d'alerte ambrée (fonds translucides jaunes) :
       brun lisible en clair, ambre lumineux en sombre. */
    --pm-ink-amber: #92400e;
    --pm-ink-green: #14532d;
    --pm-ring-track: #eceef4;
    --pm-gold: #d4a017;
    --pm-gold-soft: rgba(212, 160, 23, 0.10);
    /* Ombres « premium » : superposition douce + micro-highlight interne */
    --pm-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px -10px rgba(16, 24, 40, 0.14);
    --pm-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.05), 0 18px 40px -14px rgba(30, 22, 60, 0.22);
    --pm-radius: 16px;
}

/* ─── Fond de page : off-white profond + halo discret, plus « produit payant »
   qu'un gris plat. ─── */
body:not(.dark-mode) .dashv3-shell,
body:not(.dark-mode) main.container,
body:not(.dark-mode) .container.dashboard-container {
    background:
        radial-gradient(1200px 480px at 78% -8%, rgba(91, 63, 156, 0.05), transparent 60%),
        radial-gradient(900px 420px at -6% 4%, rgba(37, 99, 235, 0.04), transparent 55%);
}

/* ═══════════════════════════════════════════════════════════════════════
   CARTES — passage du glassmorphism daté à un carton ciselé (Stripe/Linear)
   ═══════════════════════════════════════════════════════════════════════ */
.dash-card,
.chart-card {
    background: var(--pm-card-bg);
    border: 1px solid var(--pm-card-border);
    border-radius: var(--pm-radius);
    box-shadow: var(--pm-shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: transform var(--dashv3-transition, 200ms ease),
                box-shadow var(--dashv3-transition, 200ms ease),
                border-color var(--dashv3-transition, 200ms ease);
}
.dash-card:hover,
.chart-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--pm-shadow-hover);
    border-color: var(--pm-card-border-hover);
}
/* liseré de lumière en haut de carte = matière, pas plat */
.dash-card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9) 22% 78%, transparent);
    pointer-events: none;
    z-index: 2;
}
.dash-card .accent-strip {
    height: 3px;
    opacity: 0.95;
}

/* ═══════════════════════════════════════════════════════════════════════
   MÉDAILLONS DE GRADE — jauge circulaire (le score se LIT visuellement) qui
   parle le même langage « certification circulaire » que le sceau AGS.
   Piloté par --ring (couleur), --ring-dark (texte), --pct (0-100 %).
   ═══════════════════════════════════════════════════════════════════════ */
.hero-medallion {
    --pct: 0;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    margin: 0 auto 12px;
    position: relative;
    display: grid;
    place-items: center;
    background:
        conic-gradient(var(--ring, #94a3b8) calc(var(--pct) * 1%), var(--pm-ring-track) 0);
    box-shadow:
        0 10px 22px -10px var(--ring, rgba(100, 116, 139, 0.6)),
        inset 0 1px 1px rgba(255, 255, 255, 0.7);
    isolation: isolate;
}
.hero-medallion::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 2px 6px rgba(16, 24, 40, 0.06);
    z-index: -1;
}
.hero-medallion-grade {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
    font-variant-numeric: tabular-nums;
}
.hero-medallion.is-empty {
    background: conic-gradient(var(--pm-ring-track) 0, var(--pm-ring-track) 0);
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.05);
}
.hero-medallion.is-empty .hero-medallion-grade { color: var(--pm-ink-400); }

/* ═══════════════════════════════════════════════════════════════════════
   TYPOGRAPHIE — titres de zone/section resserrés, chiffres tabulaires
   ═══════════════════════════════════════════════════════════════════════ */
.dashv3-zone-title,
.section-title {
    letter-spacing: -0.4px;
    font-weight: 800;
}
.metric-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.6px;
}
.section-header {
    border-left-width: 3px;
    border-image: linear-gradient(180deg, var(--dashv3-brand, #5b3f9c), rgba(91, 63, 156, 0.25)) 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   LISERÉ « QUALITÉ » or — écho discret du sceau sur les moments de valeur
   (bloc risques, plan d'action) sans copier le sceau lui-même.
   ═══════════════════════════════════════════════════════════════════════ */
.pm-quality-rule {
    height: 2px;
    border: 0;
    background: linear-gradient(90deg, var(--pm-gold), transparent);
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   BOUTONS — le primaire prend un dégradé de marque + relief léger
   ═══════════════════════════════════════════════════════════════════════ */
.btn-primary {
    background-image: linear-gradient(135deg, var(--dashv3-brand, #5b3f9c), #6d4fb8);
    border: none;
    box-shadow: 0 6px 16px -8px rgba(91, 63, 156, 0.6);
    transition: transform var(--dashv3-transition, 200ms ease), box-shadow var(--dashv3-transition, 200ms ease);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(91, 63, 156, 0.65);
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE — parité (l'intérieur des médaillons + cartes s'inversent)
   ═══════════════════════════════════════════════════════════════════════ */
body.dark-mode {
    --pm-card-bg: #191a2b;
    --pm-card-border: rgba(255, 255, 255, 0.07);
    --pm-card-border-hover: rgba(139, 122, 208, 0.35);
    --pm-ring-track: #2c2d44;
    --pm-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px -12px rgba(0, 0, 0, 0.55);
    --pm-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.35), 0 20px 44px -14px rgba(0, 0, 0, 0.65);
}
body.dark-mode .dash-card::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10) 22% 78%, transparent);
}
body.dark-mode .hero-medallion::before {
    background: #191a2b;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
}
body.dark-mode .dashv3-shell,
body.dark-mode main.container {
    background:
        radial-gradient(1200px 480px at 78% -8%, rgba(91, 63, 156, 0.10), transparent 60%),
        radial-gradient(900px 420px at -6% 4%, rgba(37, 99, 235, 0.07), transparent 55%);
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — médaillons un cran plus petits sur mobile
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
    .hero-medallion { width: 96px; height: 96px; }
    .hero-medallion-grade { font-size: 2.1rem; }
}

/* Respect des préférences de mouvement */
@media (prefers-reduced-motion: reduce) {
    .dash-card, .chart-card, .btn-primary { transition: none; }
    .dash-card:hover, .chart-card:hover, .btn-primary:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION RISQUES / « ce que les IA inventent » — carte unifiée
   ═══════════════════════════════════════════════════════════════════════ */
.pm-risk-card {
    position: relative;
    overflow: hidden;
    border-left: 4px solid var(--dashv3-danger, #ef4444) !important;
    background:
        radial-gradient(900px 220px at 8% 0%, rgba(220, 38, 38, 0.09), transparent 48%),
        linear-gradient(180deg, rgba(255,255,255,0.985), rgba(255,248,248,0.96));
    box-shadow:
        0 22px 56px rgba(15, 23, 42, 0.09),
        inset 0 1px 0 rgba(255,255,255,0.84);
}

.pm-risk-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 92% 8%, rgba(220, 38, 38, 0.08), transparent 18%),
        radial-gradient(circle at 16% 0%, rgba(245, 158, 11, 0.08), transparent 22%);
    pointer-events: none;
}

.pm-risk-card > * {
    position: relative;
    z-index: 1;
}

.pm-risk-card__head {
    position: relative;
    display: block;
    padding-right: 246px;
}

.pm-risk-card__identity {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    flex: none;
}

.pm-risk-card__pulse {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    width: 170px;
    padding: 12px 14px 11px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,244,244,0.90));
    border: 1px solid rgba(220, 38, 38, 0.14);
    box-shadow:
        0 12px 28px rgba(220, 38, 38, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.84);
    position: absolute;
    top: 0;
    right: 34px;
}

.pm-risk-card__pulse-value {
    font-size: 2rem;
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.8px;
    color: color-mix(in srgb, var(--dashv3-danger) 88%, var(--pm-ink-900));
}

.pm-risk-card__pulse-label {
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--pm-ink-600);
}

.pm-risk-card__pulse-track {
    width: 100%;
    height: 6px;
    margin-top: 10px;
    border-radius: 999px;
    background: var(--pm-ring-track);
    overflow: hidden;
}

.pm-risk-card__pulse-track span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #dc2626, #f59e0b 55%, #7c3aed);
}

.pm-risk-card__icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: inline-grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 235, 235, 0.72));
    color: var(--dashv3-danger);
    box-shadow:
        0 12px 26px rgba(220, 38, 38, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.9);
}

.pm-risk-card__icon i { font-size: 1.35rem; }

.pm-risk-card__titlewrap { min-width: 0; }

.pm-risk-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(220, 38, 38, 0.08);
    color: color-mix(in srgb, var(--dashv3-danger) 84%, var(--pm-ink-900));
    font-size: 0.71rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.pm-risk-card__title {
    margin-top: 8px;
    color: var(--pm-ink-900);
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.25;
}

.pm-risk-card__subtitle {
    margin-top: 5px;
    color: var(--pm-ink-600);
    font-size: 0.8rem;
    line-height: 1.45;
    max-width: 64ch;
}

.pm-risk-card__help {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 0;
}

.pm-risk-card__kpis,
.pm-risk-card__followup {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    min-width: 0;
}

.pm-risk-card__section {
    margin-top: 16px;
}

.pm-risk-card__section--secondary {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--dashv3-danger) 14%, transparent);
}

.pm-risk-card__section-title {
    margin-bottom: 10px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--pm-ink-600);
}

.pm-risk-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: normal;
    border: 1px solid transparent;
}

.pm-risk-badge--fabrications {
    background: rgba(220, 38, 38, 0.10);
    color: color-mix(in srgb, var(--dashv3-danger) 84%, var(--pm-ink-900));
    border-color: rgba(220, 38, 38, 0.16);
}

.pm-risk-badge--hallucinations {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.18);
}

.pm-risk-badge--contradictions {
    background: rgba(124, 58, 237, 0.10);
    color: #7c3aed;
    border-color: rgba(124, 58, 237, 0.18);
}

.pm-risk-kpi {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    flex: 1 1 180px;
    min-width: 180px;
    padding: 14px 16px 13px;
    border-radius: 18px;
    border: 1px solid transparent;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.78),
        0 10px 24px rgba(15, 23, 42, 0.06);
    color: inherit;
    text-decoration: none;
}

.pm-risk-kpi::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    opacity: 0.65;
}

.pm-risk-kpi__value {
    font-size: 1.75rem;
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: -0.8px;
    font-variant-numeric: tabular-nums;
}

.pm-risk-kpi__label {
    margin-top: 6px;
    font-size: 0.76rem;
    line-height: 1.35;
    font-weight: 750;
    opacity: 0.92;
}

.pm-risk-kpi__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-top: 10px;
    padding: 4px 0 0;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.2;
    color: inherit;
    opacity: 0.92;
}

.pm-risk-kpi__link:hover {
    opacity: 1;
    text-decoration: underline;
}

.pm-risk-kpi--fabrications {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.12), rgba(255, 255, 255, 0.90));
    border-color: rgba(220, 38, 38, 0.18);
    color: color-mix(in srgb, var(--dashv3-danger) 88%, var(--pm-ink-900));
}

.pm-risk-kpi--hallucinations {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(255, 255, 255, 0.90));
    border-color: rgba(245, 158, 11, 0.18);
    color: #b45309;
}

.pm-risk-kpi--contradictions {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(255, 255, 255, 0.90));
    border-color: rgba(124, 58, 237, 0.18);
    color: #6d28d9;
}

.pm-fab-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pm-fab-heading { color: var(--pm-ink-900); font-weight: 800; font-size: 1.02rem; }
.pm-fab-sub { color: var(--pm-ink-600); font-size: 0.8rem; }
.pm-fab-count { color: var(--dashv3-danger); font-weight: 900; font-size: 1.35rem; line-height: 1; }

.pm-fab-item {
    background: color-mix(in srgb, var(--dashv3-danger) 7%, var(--pm-card-bg));
    border: 1px solid color-mix(in srgb, var(--dashv3-danger) 22%, transparent);
    border-radius: 11px;
    padding: 11px 13px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);
}

.pm-fab-model { color: var(--dashv3-danger); font-weight: 700; font-size: 0.72rem; }
.pm-fab-excerpt { color: var(--pm-ink-600); font-size: 0.83rem; font-style: italic; line-height: 1.5; }
.pm-fab-claims { margin-top: 8px; }
.pm-fab-claims__label {
    font-size: 0.7rem;
    color: #b91c1c;
    font-weight: 700;
    margin-bottom: 4px;
}
.pm-fab-claims__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pm-claim-chip {
    background: var(--pm-card-bg);
    border: 1px solid color-mix(in srgb, var(--dashv3-danger) 40%, transparent);
    border-radius: 6px;
    padding: 2px 9px;
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--dashv3-danger) 78%, var(--pm-ink-900));
}

.pm-disinfo {
    background: color-mix(in srgb, var(--dashv3-warning) 8%, var(--pm-card-bg));
    border: 1px solid color-mix(in srgb, var(--dashv3-warning) 30%, transparent);
    border-radius: 14px;
    padding: 13px;
    margin-bottom: 14px;
}

.pm-disinfo__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.pm-disinfo__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pm-disinfo-title { color: var(--pm-ink-900); font-weight: 800; font-size: 0.92rem; }
.pm-disinfo__score { font-weight: 900; font-size: 1.15rem; line-height: 1; }
.pm-disinfo__score small { font-size: 0.7rem; color: var(--pm-ink-400); font-weight: 700; }
.pm-disinfo__sub { color: var(--pm-ink-600); font-size: 0.76rem; margin-bottom: 8px; }
.pm-disinfo__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pm-disinfo__list li { color: var(--pm-ink-700, var(--pm-ink-600)); font-size: 0.82rem; }

body.dark-mode .pm-risk-card::before {
    background:
        radial-gradient(circle at 92% 8%, rgba(220, 38, 38, 0.12), transparent 18%),
        radial-gradient(circle at 16% 0%, rgba(245, 158, 11, 0.10), transparent 22%);
}

body.dark-mode .pm-risk-card__icon {
    background: linear-gradient(145deg, rgba(15,23,42,0.94), rgba(30,41,59,0.72));
    box-shadow:
        0 12px 26px rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

body.dark-mode .pm-risk-card__pulse {
    background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(17,24,39,0.92));
    border-color: rgba(255,255,255,0.10);
    box-shadow:
        0 12px 28px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.06);
}

body.dark-mode .pm-risk-card__pulse-value {
    color: #fecaca;
}

body.dark-mode .pm-risk-card__pulse-label {
    color: rgba(255,255,255,0.68);
}

body.dark-mode .pm-risk-card__title,
body.dark-mode .pm-disinfo-title {
    color: #f8fafc;
}

body.dark-mode .pm-risk-card__subtitle,
body.dark-mode .pm-risk-card__section-title,
body.dark-mode .pm-fab-sub,
body.dark-mode .pm-disinfo__sub {
    color: rgba(255,255,255,0.70);
}

body.dark-mode .pm-risk-badge--fabrications {
    background: rgba(220, 38, 38, 0.14);
    color: rgba(255,255,255,0.86);
    border-color: rgba(220, 38, 38, 0.22);
}

body.dark-mode .pm-risk-badge--hallucinations {
    background: rgba(245, 158, 11, 0.14);
    color: rgba(255,255,255,0.86);
    border-color: rgba(245, 158, 11, 0.22);
}

body.dark-mode .pm-risk-badge--contradictions {
    background: rgba(124, 58, 237, 0.16);
    color: rgba(255,255,255,0.86);
    border-color: rgba(124, 58, 237, 0.22);
}

body.dark-mode .pm-risk-kpi {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 12px 26px rgba(0, 0, 0, 0.20);
}

body.dark-mode .pm-risk-kpi--fabrications {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.16), rgba(15, 23, 42, 0.82));
    border-color: rgba(220, 38, 38, 0.24);
    color: #fecaca;
}

body.dark-mode .pm-risk-kpi--hallucinations {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(15, 23, 42, 0.82));
    border-color: rgba(245, 158, 11, 0.24);
    color: #fed7aa;
}

body.dark-mode .pm-risk-kpi--contradictions {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(15, 23, 42, 0.82));
    border-color: rgba(124, 58, 237, 0.24);
    color: #ddd6fe;
}

body.dark-mode .pm-fab-item,
body.dark-mode .pm-disinfo {
    background: rgba(15,23,42,0.72);
    border-color: rgba(255,255,255,0.08);
}

body.dark-mode .pm-fab-model,
body.dark-mode .pm-disinfo__score {
    color: #fca5a5;
}

body.dark-mode .pm-fab-excerpt,
body.dark-mode .pm-disinfo__list li,
body.dark-mode .pm-fab-claims__label {
    color: rgba(255,255,255,0.78);
}

body.dark-mode .pm-claim-chip {
    background: rgba(15,23,42,0.88);
    color: rgba(255,255,255,0.84);
    border-color: rgba(220, 38, 38, 0.22);
}

@media (max-width: 991.98px) {
    .pm-risk-card__head {
        padding-right: 0;
    }
    .pm-risk-card__identity {
        flex-basis: 100%;
    }
    .pm-risk-card__pulse {
        position: static;
        width: 100%;
        align-items: flex-start;
    }
    .pm-risk-card__help {
        position: static;
        margin-top: 8px;
    }
}

@media (max-width: 575.98px) {
    .pm-risk-card {
        padding: 18px 16px 16px !important;
    }
    .pm-risk-card__icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }
    .pm-risk-card__icon i {
        font-size: 1.2rem;
    }
    .pm-risk-card__pulse {
        width: 100%;
        position: static;
    }
    .pm-risk-kpi {
        min-width: 100%;
        flex-basis: 100%;
    }
    .pm-fab-item,
    .pm-disinfo {
        border-radius: 14px;
    }
    .pm-fab-claims__chips {
        gap: 5px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   PLAN D'ACTION — encarts « preuve » (OR, écho du sceau) + « gain mesuré »
   ═══════════════════════════════════════════════════════════════════════ */
.pm-proof {
    display: flex; align-items: flex-start; gap: 7px;
    background: var(--pm-gold-soft);
    border: 1px solid color-mix(in srgb, var(--pm-gold) 42%, transparent);
    border-radius: 8px;
    padding: 6px 10px;
}
.pm-proof small { color: var(--pm-gold-ink, #8a6a12); font-size: 0.72rem; line-height: 1.4; }
.pm-proof .bi { color: var(--pm-gold); font-size: 0.78rem; }
.pm-gain {
    display: flex; align-items: center; gap: 7px;
    background: color-mix(in srgb, var(--dashv3-success) 9%, var(--pm-card-bg));
    border: 1px solid color-mix(in srgb, var(--dashv3-success) 35%, transparent);
    border-radius: 8px;
    padding: 6px 10px;
}
.pm-gain small { color: var(--pm-gain-ink, #056646); font-size: 0.72rem; }
.pm-gain .bi { color: var(--dashv3-success); }

/* Titres de carte génériques (sortie des #1a1a2e codés en dur) */
.pm-card-title { color: var(--pm-ink-900); font-weight: 800; }

/* Inversions d'encre + accents dark mode */
body.dark-mode {
    --pm-ink-900: #e9ebf4;
    --pm-ink-700: #c3c8d8;
    --pm-ink-600: #a6adc2;
    --pm-ink-400: #7b8299;
    --pm-ink-amber: #fbbf24;
    --pm-ink-green: #86efac;
    --pm-gold-ink: #e7c46b;
    --pm-gain-ink: #6ee7b7;
}

/* ═══════════════════════════════════════════════════════════════════════
   CARTES KPI — chiffre confiant, deltas plats adaptatifs, jauge dark-safe
   ═══════════════════════════════════════════════════════════════════════ */
.metric-value {
    font-size: 2.35rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.8px;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(150deg, var(--pm-ink-900), color-mix(in srgb, var(--dashv3-brand, #5b3f9c) 50%, var(--pm-ink-900)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.dark-mode .metric-value {
    background: linear-gradient(150deg, #f1f3fb, #c6b9ef);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.metric-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.55px;
    text-transform: uppercase;
    color: var(--pm-ink-400);
}
.metric-suffix { font-size: 0.95rem; font-weight: 700; opacity: 0.5; }

/* Deltas : pastilles plates qui s'adaptent clair/sombre via color-mix
   (--_dc = couleur de tendance). Écrase les dégradés « bootstrap » d'origine. */
.delta-up, .delta-down, .delta-neutral, .delta-first {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 0.72rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--_dc) 13%, var(--pm-card-bg)) !important;
    color: var(--_dc) !important;
    border: 1px solid color-mix(in srgb, var(--_dc) 28%, transparent);
}
.delta-up { --_dc: #16a34a; }
.delta-down { --_dc: #e0475b; }
.delta-neutral { --_dc: var(--pm-ink-400); }
.delta-first { --_dc: var(--dashv3-brand, #5b3f9c); }
body.dark-mode .delta-up { --_dc: #4ade80; }
body.dark-mode .delta-down { --_dc: #fb7185; }
body.dark-mode .delta-neutral { --_dc: #9aa3ba; }
body.dark-mode .delta-first { --_dc: #a78bfa; }

/* Jauge Position/Sentiment : disque interne dark-safe (avant : blanc figé) +
   léger relief, chiffre tabulaire */
.gauge-ring::before {
    background: var(--pm-card-bg);
    box-shadow: inset 0 1px 3px rgba(16, 24, 40, 0.10);
}
body.dark-mode .gauge-ring::before {
    background: var(--pm-card-bg);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.gauge-ring .gauge-value { font-variant-numeric: tabular-nums; font-weight: 750; }

/* La carte KPI respire : le chiffre prend de la place, l'icône est posée dans
   une pastille douce de sa couleur (cohérent avec les zones) */
.kpi-card-wrap .card-body > .d-flex:first-child > .d-flex > .bi:first-child {
    padding: 5px;
    border-radius: 9px;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   TABLE DES MODÈLES IA — épurée, lignes hairline, pastilles plates adaptatives
   ═══════════════════════════════════════════════════════════════════════ */
.model-table thead th {
    background: transparent;
    color: var(--pm-ink-400);
    font-size: 0.68rem;
    letter-spacing: 0.7px;
    font-weight: 700;
    border-bottom: 1px solid var(--pm-card-border);
    padding: 10px 16px;
}
body.dark-mode .model-table thead th {
    background: transparent;
    color: var(--pm-ink-400);
    border-bottom-color: var(--pm-card-border);
}
.model-table tbody td { border-top: 1px solid color-mix(in srgb, var(--pm-card-border) 55%, transparent); }
.model-table tbody tr:hover { background: color-mix(in srgb, var(--dashv3-brand, #5b3f9c) 5%, transparent) !important; }

/* Pastilles de score : plates, teinte color-mix (cohérent deltas KPI) */
.score-pill { border-radius: 8px; padding: 3px 10px; font-size: 0.8rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.score-pill-success { background: color-mix(in srgb, var(--dashv3-success) 13%, var(--pm-card-bg)) !important; color: color-mix(in srgb, var(--dashv3-success) 72%, var(--pm-ink-900)) !important; }
.score-pill-warning { background: color-mix(in srgb, var(--dashv3-warning) 15%, var(--pm-card-bg)) !important; color: color-mix(in srgb, var(--dashv3-warning) 78%, var(--pm-ink-900)) !important; }
.score-pill-danger  { background: color-mix(in srgb, var(--dashv3-danger) 13%, var(--pm-card-bg)) !important; color: color-mix(in srgb, var(--dashv3-danger) 78%, var(--pm-ink-900)) !important; }
body.dark-mode .score-pill-success { color: #6ee7a0 !important; }
body.dark-mode .score-pill-warning { color: #fcd34d !important; }
body.dark-mode .score-pill-danger  { color: #fca5a5 !important; }

/* Barre de sentiment : rail dark-safe (avant #e9ecef figé) + fill marque */
.mini-bar { background: var(--pm-ring-track) !important; height: 6px; border-radius: 999px; }
.mini-bar-fill { border-radius: 999px; background: linear-gradient(90deg, var(--dashv3-brand, #5b3f9c), #8b6fd4) !important; }

/* Badges de mode (WEB / NATIF / NATIF+WEB) — dark-safe */
.pm-mode-badge { font-size: 0.63rem; font-weight: 700; padding: 1px 6px; border-radius: 7px; margin-left: 4px; letter-spacing: 0.3px; }
.pm-mode-web { background: color-mix(in srgb, var(--dashv3-success) 14%, var(--pm-card-bg)); color: color-mix(in srgb, var(--dashv3-success) 70%, var(--pm-ink-900)); }
.pm-mode-both { background: color-mix(in srgb, #8b5cf6 15%, var(--pm-card-bg)); color: color-mix(in srgb, #8b5cf6 70%, var(--pm-ink-900)); }
.pm-mode-native { background: color-mix(in srgb, var(--pm-ink-400) 15%, var(--pm-card-bg)); color: var(--pm-ink-600); }
body.dark-mode .pm-mode-web { color: #6ee7a0; }
body.dark-mode .pm-mode-both { color: #c4b5fd; }

/* ═══════════════════════════════════════════════════════════════════════
   CARTES KPI — équilibre vertical : la carte est étirée par h-100 pour aligner
   la rangée ; le contenu doit REMPLIR (fini le grand vide en bas sur les
   cartes courtes / 1er audit). card-body en colonne, la ligne du chiffre
   grandit et centre → carte pleine et pro quel que soit le contenu.
   ═══════════════════════════════════════════════════════════════════════ */
.kpi-card-wrap > .dash-card { display: flex; flex-direction: column; }
.kpi-card-wrap .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* la ligne (jauge + gros chiffre) occupe l'espace libre et se centre */
.kpi-card-wrap .card-body > .d-flex.align-items-center.gap-3 {
    flex: 1 1 auto;
    min-height: 3rem;
}
/* Deltas jamais sur 2 lignes ; badge « 1er audit » plus discret */
.delta-up, .delta-down, .delta-neutral, .delta-first { white-space: nowrap; }
.delta-first {
    font-size: 0.66rem;
    padding: 3px 8px;
    align-self: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════════
   FOND UNIQUE PORTÉ PAR LA CARTE (fix bug dark « le noir s'arrête au milieu »)
   dashboard-v3 posait un fond #1a1a1a SUR LE CARD-BODY, différent du fond de
   la carte. Quand le body est plus court que la carte étirée par h-100 (état
   N/A, contenu court), les deux fonds se voyaient = couture. Ici : la carte
   porte LE fond, le card-body est transparent → surface unie quelle que soit
   la hauteur du contenu.
   ═══════════════════════════════════════════════════════════════════════ */
.dash-card > .card-body,
.chart-card > .card-body,
body.dark-mode .dashv3-zone .dash-card > .card-body,
body.dark-mode .dashv3-zone .chart-card > .card-body,
body.dark-mode .dash-card .card-body {
    background: transparent !important;
}
body.dark-mode .dash-card,
body.dark-mode .chart-card,
body.dark-mode .dashv3-zone .dash-card,
body.dark-mode .dashv3-zone .chart-card {
    background: var(--pm-card-bg) !important;
}
/* La jauge SVG « N/A » (piste #e9ecef codée en dur) s'adapte au dark */
body.dark-mode .dash-card svg path[stroke="#e9ecef"] { stroke: var(--pm-ring-track); }

/* ═══════════════════════════════════════════════════════════════════════
   MÉDAILLONS GAMIFIÉS (07/2026) — recherche : les 3 leviers qui marchent
   sont la progression vers le prochain palier, la jauge animée, le trophée.
   Ici : matière « macaron » (crantage + reflet, écho du sceau AGS), arc qui
   se remplit au chargement, et palier suivant affiché sous le grade.
   ═══════════════════════════════════════════════════════════════════════ */
@property --pct {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}
.hero-medallion {
    transition: --pct 1100ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
/* Crantage du pourtour (matière macaron, très discret) + reflet supérieur */
.hero-medallion::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    z-index: -2;
    background: repeating-conic-gradient(
        from -4deg,
        color-mix(in srgb, var(--ring, #94a3b8) 26%, transparent) 0deg 4deg,
        transparent 4deg 8deg);
    opacity: 0.55;
}
.hero-medallion::before {
    background:
        radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.85), transparent 42%),
        #fff;
}
body.dark-mode .hero-medallion::before {
    background:
        radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.07), transparent 42%),
        var(--pm-card-bg);
}
/* Graduations : 4 ticks cardinaux sur la piste */
.hero-medallion .hm-ticks {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background:
        conic-gradient(transparent 0 24.6%, rgba(120,130,160,0.5) 24.6% 25.4%, transparent 25.4% 49.6%, rgba(120,130,160,0.5) 49.6% 50.4%, transparent 50.4% 74.6%, rgba(120,130,160,0.5) 74.6% 75.4%, transparent 75.4% 99.6%, rgba(120,130,160,0.5) 99.6%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    pointer-events: none;
}

/* ── Prochain palier (levier n°1 : la carotte visible) ── */
.hm-next {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding: 3px 10px 3px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ring, #667eea) 9%, var(--pm-card-bg));
    border: 1px solid color-mix(in srgb, var(--ring, #667eea) 26%, transparent);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--pm-ink-600);
    white-space: nowrap;
}
.hm-next .hm-next-grade {
    font-weight: 900;
    color: color-mix(in srgb, var(--ring, #667eea) 80%, var(--pm-ink-900));
}
.hm-next-bar {
    width: 64px;
    height: 4px;
    border-radius: 999px;
    background: var(--pm-ring-track);
    overflow: hidden;
}
.hm-next-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ring, #667eea), color-mix(in srgb, var(--ring, #667eea) 60%, #fff));
    transition: width 900ms 300ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
/* Meilleur niveau : petit trait doré, écho du sceau */
.hm-next.hm-next-max {
    background: var(--pm-gold-soft);
    border-color: color-mix(in srgb, var(--pm-gold) 45%, transparent);
    color: var(--pm-gold-ink, #8a6a12);
}

/* ── Célébration discrète : le delta positif pulse UNE fois au chargement ── */
@keyframes hm-delta-pop {
    0% { transform: scale(1); }
    35% { transform: scale(1.18); }
    100% { transform: scale(1); }
}
.delta-up { animation: hm-delta-pop 700ms 800ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
    .hero-medallion { transition: none; }
    .delta-up { animation: none; }
    .hm-next-bar > span { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PLAN D'ACTION EN QUÊTES (07/2026) — l'XP relie le plan aux médaillons :
   chaque action réalisée = points débloqués vers le prochain palier.
   ═══════════════════════════════════════════════════════════════════════ */
.pm-xp-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 9px 13px;
    border-radius: 11px;
    background:
        radial-gradient(300px 60px at 12% 0%, var(--pm-gold-soft), transparent 70%),
        color-mix(in srgb, var(--pm-gold) 5%, var(--pm-card-bg));
    border: 1px solid color-mix(in srgb, var(--pm-gold) 30%, transparent);
}
.pm-xp-earned {
    font-weight: 900;
    font-size: 1.02rem;
    color: var(--pm-gold-ink, #8a6a12);
    white-space: nowrap;
}
.pm-xp-earned .bi { color: var(--pm-gold); }
.pm-xp-rest { font-size: 0.78rem; color: var(--pm-ink-600); }
.pm-xp-rest strong { color: var(--pm-ink-900); }
.pm-xp-goal {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    background: color-mix(in srgb, var(--dashv3-success) 12%, var(--pm-card-bg));
    color: color-mix(in srgb, var(--dashv3-success) 75%, var(--pm-ink-900));
    border: 1px solid color-mix(in srgb, var(--dashv3-success) 30%, transparent);
    white-space: nowrap;
}
body.dark-mode .pm-xp-goal { color: #6ee7a0; }

/* Barre d'XP : rail token + segments animés + reflet */
.pm-xp-bar {
    height: 10px;
    border-radius: 999px;
    background: var(--pm-ring-track);
    overflow: hidden;
    display: flex;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.12);
}
.pm-xp-bar > .pm-xp-done {
    background: linear-gradient(90deg, #d4a017, #f0c24b 60%, #16a34a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: width 900ms 200ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
.pm-xp-bar > .pm-xp-inprogress {
    background: color-mix(in srgb, var(--dashv3-brand, #5b3f9c) 55%, transparent);
    transition: width 900ms 350ms cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* Récompense de quête sur chaque carte d'action : chip saillante */
.pm-quest-reward {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, var(--pm-gold-soft), color-mix(in srgb, var(--dashv3-success) 10%, var(--pm-card-bg)));
    color: color-mix(in srgb, var(--dashv3-success) 72%, var(--pm-ink-900));
    border: 1px solid color-mix(in srgb, var(--pm-gold) 38%, transparent);
    white-space: nowrap;
}
.pm-quest-reward .bi { color: var(--pm-gold); font-size: 0.75rem; }
body.dark-mode .pm-quest-reward { color: #6ee7a0; }
/* Quête accomplie : la chip vire au doré plein, discret */
.action-card[data-status="done"] .pm-quest-reward {
    background: var(--pm-gold-soft);
    color: var(--pm-gold-ink, #8a6a12);
}

/* ==========================================================================
   WOW PASS 07/2026 - first screen, light/dark parity
   ========================================================================== */

body:not(.dark-mode) {
    background:
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 46%, #f9fafb 100%),
        linear-gradient(90deg, rgba(91, 63, 156, 0.05), rgba(14, 165, 233, 0.04), rgba(16, 185, 129, 0.035));
}

body.dark-mode {
    background:
        linear-gradient(180deg, #0b1020 0%, #111827 48%, #0f172a 100%),
        linear-gradient(90deg, rgba(139, 92, 246, 0.12), rgba(14, 165, 233, 0.08), rgba(16, 185, 129, 0.06));
}

.page-header {
    overflow: visible;
    margin-bottom: 3rem;
    padding-top: 1.8rem;
    padding-bottom: 2.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    background:
        linear-gradient(135deg, rgba(8, 13, 32, 0.98) 0%, rgba(26, 16, 64, 0.98) 38%, rgba(27, 38, 84, 0.98) 70%, rgba(10, 20, 36, 0.98) 100%),
        linear-gradient(90deg, rgba(212, 160, 23, 0.18), rgba(14, 165, 233, 0.10), rgba(16, 185, 129, 0.08));
    box-shadow: 0 18px 48px rgba(15, 12, 41, 0.34), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.page-header::before {
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.55;
}

.page-header::after {
    top: auto;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.70), rgba(14, 165, 233, 0.45), transparent);
}

.page-header h1 {
    letter-spacing: 0;
    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

.page-header h1 .bi {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-right: 8px;
    border-radius: 12px;
    color: #dbeafe !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 12px 26px rgba(0, 0, 0, 0.20);
}

.dashboard-container {
    position: relative;
    z-index: 1;
}

body:not(.dark-mode) .container.dashboard-container {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0)),
        linear-gradient(90deg, rgba(91, 63, 156, 0.045), rgba(14, 165, 233, 0.035), rgba(16, 185, 129, 0.03));
    border-radius: 18px;
}

body.dark-mode .container.dashboard-container {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
        linear-gradient(90deg, rgba(139, 92, 246, 0.08), rgba(14, 165, 233, 0.055), rgba(16, 185, 129, 0.04));
    border-radius: 18px;
}

.dash-header-view-switch {
    margin-top: 20px;
    margin-bottom: -52px;
}

.dash-view-toggle {
    border-color: rgba(255, 255, 255, 0.52);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    box-shadow: 0 24px 50px rgba(15, 12, 41, 0.28), 0 0 0 1px rgba(15, 23, 42, 0.04);
}

body.dark-mode .dash-view-toggle {
    border-color: rgba(167, 139, 250, 0.42);
    background:
        linear-gradient(180deg, rgba(28, 31, 55, 0.98), rgba(15, 23, 42, 0.94));
}

.dash-view-btn[aria-pressed="true"] {
    background: linear-gradient(135deg, #5b3f9c, #2563eb);
}

.dashboard-narrative-banner {
    position: relative;
    overflow: hidden;
    border-radius: 20px !important;
    padding: 0 !important;
    box-shadow:
        0 18px 54px rgba(15, 23, 42, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dashboard-narrative-banner::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 8px;
    background: linear-gradient(180deg, #f59e0b, #fbbf24 55%, #10b981);
}

.dashboard-narrative-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.65), transparent 22%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.45), transparent 30%),
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16));
    pointer-events: none;
}

.dashboard-narrative-banner > .dashboard-narrative-banner__content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
    gap: 18px 24px;
    align-items: stretch;
    padding: 22px 24px 22px 28px;
}

.dashboard-narrative-banner__lead {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

.dashboard-narrative-banner__icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: inline-grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(255,255,255,0.56));
    box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dashboard-narrative-banner__icon .bi {
    font-size: 1.5rem;
    line-height: 1;
}

.dashboard-narrative-banner__text {
    min-width: 0;
}

.dashboard-narrative-banner__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--pm-ink-600);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.dashboard-narrative-banner__verdict {
    margin: 0;
    color: var(--pm-ink-900);
    font-size: 1.18rem;
    line-height: 1.35;
    font-weight: 750;
    letter-spacing: 0;
    text-wrap: balance;
}

.dashboard-narrative-banner__delta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    color: var(--dashv3-success);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.2;
}

.dashboard-narrative-banner__action-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    position: relative;
    overflow: hidden;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 249, 230, 0.92), rgba(255, 242, 205, 0.72));
    border: 1px solid rgba(245, 158, 11, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.90),
        0 16px 32px rgba(15, 23, 42, 0.08);
    min-width: 0;
}

.dashboard-narrative-banner__action-panel::before {
    content: "";
    position: absolute;
    inset: -18px -18px auto auto;
    width: 110px;
    height: 110px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.24) 0%, rgba(245, 158, 11, 0.10) 42%, transparent 72%);
    pointer-events: none;
}

.dashboard-narrative-banner__action-panel::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.45), rgba(16, 185, 129, 0.35), transparent);
}

.dashboard-narrative-banner__status {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 6px;
    margin-bottom: 10px;
    padding: 5px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(91, 63, 156, 0.12), rgba(37, 99, 235, 0.12));
    color: var(--dashv3-brand-strong);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.dashboard-narrative-banner__action-label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pm-ink-600);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.dashboard-narrative-banner__action-label .bi {
    color: #d97706;
    font-size: 0.9rem;
}

.dashboard-narrative-banner__action-copy {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    color: var(--pm-ink-900);
    font-size: 0.95rem;
    line-height: 1.45;
    font-weight: 650;
}

.dashboard-narrative-banner__cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin-top: 14px;
    padding: 11px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b, #d97706 60%, #b45309);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow:
        0 14px 30px rgba(217, 119, 6, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(127, 29, 29, 0.16);
}

.dashboard-narrative-banner__cta:hover {
    transform: translateY(-1px);
    color: #fff !important;
    box-shadow:
        0 18px 36px rgba(217, 119, 6, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.dashboard-narrative-banner__cta .bi {
    font-size: 1.1rem;
}

.dashboard-narrative-banner > div {
    position: relative;
    z-index: 1;
}

body.dark-mode .dashboard-narrative-banner {
    box-shadow:
        0 20px 54px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.dark-mode .dashboard-narrative-banner::after {
    background:
        radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.08), transparent 22%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.06), transparent 34%);
}

body.dark-mode .dashboard-narrative-banner__icon {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.68));
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.dark-mode .dashboard-narrative-banner__eyebrow {
    background: rgba(15, 23, 42, 0.66);
    color: rgba(255, 255, 255, 0.78);
}

body.dark-mode .dashboard-narrative-banner__verdict {
    color: #f8fafc;
}

body.dark-mode .dashboard-narrative-banner__delta {
    background: rgba(15, 23, 42, 0.66);
}

body.dark-mode .dashboard-narrative-banner__action-panel {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.74), rgba(15, 23, 42, 0.52));
    border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .dashboard-narrative-banner__action-label,
body.dark-mode .dashboard-narrative-banner__action-copy {
    color: rgba(255, 255, 255, 0.86);
}

body.dark-mode .dashboard-narrative-banner__status {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(59, 130, 246, 0.18));
    color: rgba(255, 255, 255, 0.82);
}

body.dark-mode .dashboard-narrative-banner__cta {
    box-shadow: 0 12px 28px rgba(217, 119, 6, 0.22);
}

@media (max-width: 991.98px) {
    .dashboard-narrative-banner > .dashboard-narrative-banner__content {
        grid-template-columns: 1fr;
        padding: 18px 18px 18px 22px;
    }
    .dashboard-narrative-banner__action-panel {
        padding: 14px 15px;
    }
}

@media (max-width: 575.98px) {
    .dashboard-narrative-banner__lead {
        gap: 12px;
    }
    .dashboard-narrative-banner__icon {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }
    .dashboard-narrative-banner__icon .bi {
        font-size: 1.2rem;
    }
    .dashboard-narrative-banner__verdict {
        font-size: 1.02rem;
        line-height: 1.38;
    }
    .dashboard-narrative-banner__action-copy {
        font-size: 0.9rem;
    }
    .dashboard-narrative-banner__cta {
        padding: 10px 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Fidélité crawler IA — “ce que l'IA voit de votre site”
   ═══════════════════════════════════════════════════════════════════════ */
.fidelity-runtime-card {
    --fidelity-color: #0ea5e9;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 24px 24px 20px;
    border: 1px solid color-mix(in srgb, var(--fidelity-color) 22%, var(--pm-card-border));
    background:
        radial-gradient(900px 220px at 14% 0%, color-mix(in srgb, var(--fidelity-color) 12%, transparent), transparent 50%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.fidelity-runtime-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, var(--fidelity-color), color-mix(in srgb, var(--fidelity-color) 45%, #10b981));
}

.fidelity-runtime-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 90% 6%, rgba(255,255,255,0.72), transparent 18%),
        linear-gradient(120deg, rgba(255,255,255,0.36), transparent 28%);
    pointer-events: none;
}

.fidelity-runtime-card__head,
.fidelity-runtime-card__chips,
.fidelity-runtime-card__negotiation,
.fidelity-runtime-card__findings,
.fidelity-runtime-card__ok {
    position: relative;
    z-index: 1;
}

.fidelity-runtime-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px 18px;
    padding-right: 34px;
}

.fidelity-runtime-card__identity {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    flex: 1 1 420px;
}

.fidelity-runtime-card__icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: inline-grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(255,255,255,0.64));
    color: var(--fidelity-color);
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.9);
}

.fidelity-runtime-card__icon i {
    font-size: 1.45rem;
}

.fidelity-runtime-card__titlewrap {
    min-width: 0;
}

.fidelity-runtime-card__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fidelity-color) 10%, white);
    color: color-mix(in srgb, var(--fidelity-color) 70%, #111827);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.fidelity-runtime-card__title {
    margin: 8px 0 6px;
    font-size: 1.16rem;
    font-weight: 850;
    color: var(--pm-ink-900);
    line-height: 1.25;
}

.fidelity-runtime-card__subtitle {
    font-size: 0.8rem;
    color: var(--pm-ink-600);
    line-height: 1.45;
    max-width: 58ch;
}

.fidelity-runtime-card__score {
    display: grid;
    justify-items: end;
    min-width: 156px;
    flex: 0 0 auto;
    padding: 13px 15px 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,250,240,0.88));
    border: 1px solid color-mix(in srgb, var(--fidelity-color) 16%, rgba(255,255,255,0.8));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.fidelity-runtime-card__score-value {
    font-size: 2rem;
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.8px;
    color: var(--fidelity-color);
}

.fidelity-runtime-card__score-value small {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--pm-ink-400);
    margin-left: 2px;
}

.fidelity-runtime-card__score-label {
    margin-top: 4px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--pm-ink-600);
    letter-spacing: 0;
}

.fidelity-runtime-card__score-track {
    width: 100%;
    height: 7px;
    margin-top: 10px;
    border-radius: 999px;
    background: var(--pm-ring-track);
    overflow: hidden;
}

.fidelity-runtime-card__score-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--fidelity-color), color-mix(in srgb, var(--fidelity-color) 52%, #10b981));
    box-shadow: 0 0 18px color-mix(in srgb, var(--fidelity-color) 34%, transparent);
}

.fidelity-runtime-card__help {
    position: absolute;
    top: 18px;
    right: 18px;
    margin: 0;
    z-index: 2;
}

.fidelity-runtime-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.fidelity-runtime-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 9px 12px;
    border-radius: 14px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: rgba(255,255,255,0.9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);
    font-size: 0.8rem;
    color: var(--pm-ink-600);
}

.fidelity-runtime-chip i {
    font-size: 0.95rem;
    color: var(--fidelity-color);
}

.fidelity-runtime-chip__lang {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.fidelity-runtime-chip__lang .pm-flag,
.fidelity-runtime-chip__lang .bi {
    display: inline-block;
}

.fidelity-runtime-chip span {
    font-weight: 700;
}

.fidelity-runtime-chip strong {
    color: var(--pm-ink-900);
    font-variant-numeric: tabular-nums;
}

.fidelity-runtime-chip em {
    font-size: 0.72rem;
    font-style: normal;
    color: var(--pm-ink-400);
}

.fidelity-runtime-chip--ai {
    background: rgba(14, 165, 233, 0.10);
    border-color: rgba(14, 165, 233, 0.18);
}

.fidelity-runtime-chip--human {
    background: rgba(15, 23, 42, 0.05);
}

.fidelity-runtime-chip--market {
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.18);
}

.fidelity-runtime-card__negotiation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.16);
    color: var(--pm-ink-600);
    font-size: 0.8rem;
    font-weight: 700;
}

.fidelity-runtime-card__negotiation > i {
    color: var(--fidelity-color);
}

.fidelity-runtime-card__negotiation-values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--pm-ink-900);
}

.fidelity-runtime-card__negotiation-values strong {
    font-variant-numeric: tabular-nums;
}

.fidelity-runtime-card__negotiation-values span {
    color: var(--pm-ink-400);
    font-weight: 700;
}

.fidelity-runtime-card__findings {
    margin-top: 16px;
    padding: 14px 14px 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(248,250,252,0.88));
    border: 1px solid rgba(226, 232, 240, 0.85);
}

.fidelity-runtime-card__section-label {
    margin-bottom: 10px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--pm-ink-600);
}

.fidelity-runtime-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}

.fidelity-runtime-card__finding {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(226, 232, 240, 0.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);
}

.fidelity-runtime-card__finding--high {
    border-left: 3px solid #dc2626;
}

.fidelity-runtime-card__finding--medium {
    border-left: 3px solid #f59e0b;
}

.fidelity-runtime-card__finding-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--finding-color) 12%, white);
    color: var(--finding-color);
    margin-top: 1px;
}

.fidelity-runtime-card__finding-icon i {
    font-size: 0.85rem;
}

.fidelity-runtime-card__finding-text {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--pm-ink-900);
    font-weight: 600;
}

.fidelity-runtime-card__ok {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.18);
    color: #15803d;
    font-size: 0.82rem;
    font-weight: 700;
}

.fidelity-runtime-card__ok i {
    color: #16a34a;
}

body.dark-mode .fidelity-runtime-card {
    background:
        radial-gradient(900px 220px at 14% 0%, color-mix(in srgb, var(--fidelity-color) 22%, transparent), transparent 50%),
        linear-gradient(180deg, rgba(15,23,42,0.96), rgba(15,23,42,0.92));
    border-color: color-mix(in srgb, var(--fidelity-color) 30%, rgba(255,255,255,0.08));
    box-shadow:
        0 22px 54px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

body.dark-mode .fidelity-runtime-card::after {
    background:
        radial-gradient(circle at 90% 6%, rgba(255,255,255,0.08), transparent 18%),
        linear-gradient(120deg, rgba(255,255,255,0.06), transparent 28%);
}

body.dark-mode .fidelity-runtime-card__icon {
    background: linear-gradient(145deg, rgba(15,23,42,0.94), rgba(30,41,59,0.72));
    box-shadow:
        0 12px 28px rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

body.dark-mode .fidelity-runtime-card__title {
    color: #f8fafc;
}

body.dark-mode .fidelity-runtime-card__subtitle,
body.dark-mode .fidelity-runtime-card__score-label,
body.dark-mode .fidelity-runtime-card__section-label,
body.dark-mode .fidelity-runtime-card__negotiation,
body.dark-mode .fidelity-runtime-chip,
body.dark-mode .fidelity-runtime-card__finding-text {
    color: rgba(255,255,255,0.78);
}

body.dark-mode .fidelity-runtime-card__score {
    background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(30,41,59,0.84));
    border-color: rgba(255,255,255,0.10);
}

body.dark-mode .fidelity-runtime-card__score-value small {
    color: rgba(255,255,255,0.48);
}

body.dark-mode .fidelity-runtime-chip {
    background: rgba(15,23,42,0.68);
    border-color: rgba(255,255,255,0.10);
}

body.dark-mode .fidelity-runtime-chip strong {
    color: #f8fafc;
}

body.dark-mode .fidelity-runtime-chip--ai {
    background: rgba(14, 165, 233, 0.16);
}

body.dark-mode .fidelity-runtime-chip--human {
    background: rgba(255,255,255,0.05);
}

body.dark-mode .fidelity-runtime-chip--market {
    background: rgba(16, 185, 129, 0.14);
}

body.dark-mode .fidelity-runtime-card__negotiation {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.18);
}

body.dark-mode .fidelity-runtime-card__findings {
    background: rgba(15,23,42,0.72);
    border-color: rgba(255,255,255,0.08);
}

body.dark-mode .fidelity-runtime-card__finding {
    background: rgba(15,23,42,0.72);
    border-color: rgba(255,255,255,0.08);
}

body.dark-mode .fidelity-runtime-card__finding-text {
    color: rgba(255,255,255,0.88);
}

body.dark-mode .fidelity-runtime-card__ok {
    color: #86efac;
}

@media (max-width: 991.98px) {
    .fidelity-runtime-card__head {
        padding-right: 0;
    }
    .fidelity-runtime-card__score {
        justify-items: start;
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .fidelity-runtime-card {
        padding: 18px 16px 16px;
        border-radius: 18px;
    }
    .fidelity-runtime-card__identity {
        gap: 12px;
        flex-basis: 100%;
    }
    .fidelity-runtime-card__icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }
    .fidelity-runtime-card__icon i {
        font-size: 1.2rem;
    }
    .fidelity-runtime-card__help {
        top: 14px;
        right: 14px;
    }
    .fidelity-runtime-chip,
    .fidelity-runtime-card__finding {
        width: 100%;
    }
}

.dashboard-hero-grid {
    --pm-hero-gap-shadow: 0 22px 48px rgba(15, 23, 42, 0.10);
    margin-top: 2px;
}

#tour-step-heroes .dashboard-hero-card {
    min-height: 276px;
    border-radius: 18px;
    border-color: color-mix(in srgb, var(--pm-accent, #5b3f9c) 20%, var(--pm-card-border));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95)),
        linear-gradient(135deg, color-mix(in srgb, var(--pm-accent, #5b3f9c) 9%, transparent), color-mix(in srgb, var(--pm-accent-2, #0ea5e9) 7%, transparent));
    box-shadow: var(--pm-hero-gap-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    transform: translateZ(0);
}

#tour-step-heroes .dashboard-hero-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--pm-accent, #5b3f9c), var(--pm-accent-2, #0ea5e9));
    z-index: 2;
}

#tour-step-heroes .dashboard-hero-card::after {
    height: auto;
    inset: 5px 0 0 0;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.58) 0 18%, transparent 18% 100%),
        repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.028) 0 1px, transparent 1px 46px);
    opacity: 0.78;
    z-index: 0;
}

#tour-step-heroes .dashboard-hero-card > * {
    position: relative;
    z-index: 1;
}

.pm-hero-visibility { --pm-accent: #5b3f9c; --pm-accent-2: #0ea5e9; }
.pm-hero-geo { --pm-accent: #059669; --pm-accent-2: #22c55e; }
.pm-hero-aeo { --pm-accent: #e0475b; --pm-accent-2: #f59e0b; }
.pm-hero-offsite { --pm-accent: #0ea5e9; --pm-accent-2: #d4a017; }

.pm-hero-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--pm-ink-900) !important;
    line-height: 1.25;
}

.pm-hero-title .bi {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-right: 0 !important;
    border-radius: 9px;
    color: var(--pm-accent, #5b3f9c) !important;
    background: color-mix(in srgb, var(--pm-accent, #5b3f9c) 12%, var(--pm-card-bg));
}

#tour-step-heroes .dashboard-hero-card .metric-help {
    top: 10px;
    right: 12px;
    width: 24px;
    height: 24px;
    border: 1px solid color-mix(in srgb, var(--pm-accent, #5b3f9c) 22%, transparent);
    background: color-mix(in srgb, var(--pm-accent, #5b3f9c) 8%, var(--pm-card-bg));
    color: color-mix(in srgb, var(--pm-accent, #5b3f9c) 72%, var(--pm-ink-900));
}

#tour-step-heroes .dashboard-hero-card:hover .hero-medallion {
    transform: translateY(-2px) scale(1.025);
}

#tour-step-heroes .dashboard-hero-card [style*="color:#6b7280"],
#tour-step-heroes .dashboard-hero-card [style*="color: #6b7280"],
#tour-step-heroes .dashboard-hero-card [style*="color:#374151"],
#tour-step-heroes .dashboard-hero-card [style*="color: #374151"],
#tour-step-heroes .dashboard-hero-card [style*="color:#475569"],
#tour-step-heroes .dashboard-hero-card [style*="color: #475569"] {
    color: var(--pm-ink-600) !important;
}

#tour-step-heroes .dashboard-hero-card [style*="background:#f1f5f9"],
#tour-step-heroes .dashboard-hero-card [style*="background: #f1f5f9"] {
    background: color-mix(in srgb, var(--pm-accent, #0ea5e9) 8%, var(--pm-card-bg)) !important;
    border-color: color-mix(in srgb, var(--pm-accent, #0ea5e9) 22%, transparent) !important;
    color: var(--pm-ink-700, var(--pm-ink-600)) !important;
}

body.dark-mode #tour-step-heroes .dashboard-hero-card {
    background:
        linear-gradient(180deg, rgba(25, 26, 43, 0.98), rgba(15, 23, 42, 0.94)),
        linear-gradient(135deg, color-mix(in srgb, var(--pm-accent, #8b5cf6) 18%, transparent), color-mix(in srgb, var(--pm-accent-2, #0ea5e9) 13%, transparent));
    border-color: color-mix(in srgb, var(--pm-accent, #8b5cf6) 30%, rgba(255, 255, 255, 0.08));
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.dark-mode #tour-step-heroes .dashboard-hero-card::after {
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.08) 0 18%, transparent 18% 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 46px);
}

body.dark-mode .pm-hero-title {
    color: var(--pm-ink-900) !important;
}

body.dark-mode .pm-hero-title .bi {
    background: color-mix(in srgb, var(--pm-accent, #8b5cf6) 18%, rgba(255, 255, 255, 0.04));
}

.hero-medallion {
    width: 122px;
    height: 122px;
    margin-bottom: 13px;
    box-shadow:
        0 16px 32px -16px var(--ring, rgba(100, 116, 139, 0.70)),
        inset 0 1px 1px rgba(255, 255, 255, 0.74);
}

.hero-medallion-grade {
    letter-spacing: 0;
}

.hm-next {
    max-width: 100%;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

.dashv3-toc {
    top: 72px;
    gap: 6px;
    margin: 6px 0 24px;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(16px);
}

.dashv3-toc-item {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 8px 12px;
    font-weight: 720;
}

.dashv3-toc-item:hover,
.dashv3-toc-item.is-active,
.dashv3-toc-item[aria-current="true"] {
    background: linear-gradient(135deg, rgba(91, 63, 156, 0.10), rgba(14, 165, 233, 0.08));
    border-color: rgba(91, 63, 156, 0.18);
    color: var(--dashv3-brand);
}

body.dark-mode .dashv3-toc {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.86);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.dark-mode .dashv3-toc-item:hover,
body.dark-mode .dashv3-toc-item.is-active,
body.dark-mode .dashv3-toc-item[aria-current="true"] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.20), rgba(14, 165, 233, 0.12));
    border-color: rgba(167, 139, 250, 0.22);
    color: #e0e7ff;
}

body.dark-mode .dashv3-zone-header {
    border-bottom-color: rgba(148, 163, 184, 0.18);
}

@media (max-width: 768px) {
    .page-header {
        margin-bottom: 2.6rem;
        padding: 1.35rem 1rem 2.25rem;
    }

    .page-header h1 .bi {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .dash-header-view-switch {
        margin: 16px 0 -44px;
    }

    .dashboard-container {
        border-radius: 14px;
    }

    #tour-step-heroes .dashboard-hero-card {
        min-height: 0;
        border-radius: 16px;
    }

    .hero-medallion {
        width: 104px;
        height: 104px;
    }

    .dashv3-toc {
        top: 0;
        margin: 4px 0 18px;
        border-radius: 14px;
    }
}

@media (max-width: 430px) {
    .pm-hero-title {
        display: flex;
        padding-right: 18px;
    }

    .hm-next {
        white-space: normal;
        justify-content: center;
    }

    .hm-next-bar {
        width: 46px;
    }
}

/* ── Célébration de quête (particules + toast + pulse) ── */
.pm-confetti {
    position: fixed;
    z-index: 100000;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    pointer-events: none;
    animation: pm-confetti-fly 850ms cubic-bezier(0.16, 0.8, 0.4, 1) both;
}
@keyframes pm-confetti-fly {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translate(var(--dx, 40px), var(--dy, -50px)) scale(0.4) rotate(260deg); opacity: 0; }
}
@keyframes pm-quest-pulse {
    0% { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.45); }
    100% { box-shadow: 0 0 0 22px rgba(212, 160, 23, 0); }
}
.pm-quest-complete { animation: pm-quest-pulse 1.2s ease-out; }

.pm-quest-toast {
    position: fixed;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    z-index: 100001;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff7e0, #fdf1c7);
    border: 1px solid color-mix(in srgb, var(--pm-gold) 55%, transparent);
    box-shadow: 0 12px 34px -10px rgba(146, 100, 20, 0.45);
    color: #6b4a08;
    font-size: 0.88rem;
    font-weight: 700;
    transition: opacity 400ms, transform 400ms;
    animation: pm-toast-in 350ms cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
.pm-quest-toast .bi { color: var(--pm-gold); }
.pm-quest-toast strong { color: #16a34a; }
@keyframes pm-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(0.92); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.pm-quest-toast-out { opacity: 0; transform: translateX(-50%) translateY(10px); }
body.dark-mode .pm-quest-toast {
    background: linear-gradient(135deg, #2b2410, #3a2f12);
    color: #f0d896;
}
@media (prefers-reduced-motion: reduce) {
    .pm-confetti { display: none; }
    .pm-quest-complete { animation: none; }
    .pm-quest-toast { animation: none; }
}

/* ── Streak d'audits mensuels (header, à côté du sceau) ── */
.pm-streak {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    background:
        radial-gradient(90px 40px at 18% 0%, rgba(250, 176, 5, 0.22), transparent 70%),
        color-mix(in srgb, #f59e0b 9%, var(--pm-card-bg));
    border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
    box-shadow: 0 6px 16px -10px rgba(217, 119, 6, 0.5);
}
.pm-streak-flame { font-size: 1.05rem; filter: drop-shadow(0 1px 2px rgba(217, 119, 6, 0.4)); }
.pm-streak-alive .pm-streak-flame { animation: pm-flame 1.8s ease-in-out infinite; }
@keyframes pm-flame {
    0%, 100% { transform: scale(1) rotate(-2deg); }
    50% { transform: scale(1.12) rotate(2deg); }
}
.pm-streak-n {
    font-size: 1.15rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #b45309;
    line-height: 1;
}
.pm-streak-label { font-size: 0.72rem; font-weight: 700; color: var(--pm-ink-600); line-height: 1.15; max-width: 130px; }
.pm-streak-nudge { color: #b45309; font-weight: 800; }
.pm-streak-risk { border-style: dashed; }
.pm-streak-risk .pm-streak-flame { opacity: 0.55; }
body.dark-mode .pm-streak-n { color: #fbbf24; }
body.dark-mode .pm-streak-nudge { color: #fbbf24; }
@media (prefers-reduced-motion: reduce) { .pm-streak-alive .pm-streak-flame { animation: none; } }

/* Le header du dashboard est TOUJOURS sombre (dégradé violet) : la chip
   streak y passe en verre clair + texte lumineux, quel que soit le thème. */
.dash-header-actions .pm-streak {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 200, 90, 0.55);
    box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
}
.dash-header-actions .pm-streak-n { color: #ffd569; }
.dash-header-actions .pm-streak-label { color: rgba(255, 255, 255, 0.85); }
.dash-header-actions .pm-streak-nudge { color: #ffd569; }

/* ═══════════════════════════════════════════════════════════════════════
   BADGE WALL des accomplissements (07/2026) — mini-macarons : débloqués =
   dorés/colorés, verrouillés = grisés avec la condition en tooltip (montrer
   ce qui reste à gagner est la moitié de la motivation).
   ═══════════════════════════════════════════════════════════════════════ */
.pm-badge-wall {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    align-items: flex-start;
}
.pm-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 86px;
    text-align: center;
    cursor: help;
}
.pm-badge-coin {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    isolation: isolate;
}
/* Débloqué : mini-macaron doré crânté (écho direct du sceau) */
.pm-badge-unlocked .pm-badge-coin {
    color: #6b3506;
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,0.85) 0 10%, transparent 24%),
        linear-gradient(145deg, #ffe9a3, #f5c542 55%, #d99012);
    box-shadow:
        0 8px 18px -8px rgba(180, 120, 20, 0.55),
        inset 0 1px 1px rgba(255,255,255,0.8),
        inset 0 -3px 6px rgba(120,53,15,0.25);
}
.pm-badge-unlocked .pm-badge-coin::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    z-index: -1;
    background: repeating-conic-gradient(from -4deg,
        rgba(217, 144, 18, 0.5) 0deg 5deg, transparent 5deg 10deg);
    opacity: 0.6;
}
/* Verrouillé : gris, cadenas en surimpression */
.pm-badge-locked .pm-badge-coin {
    color: var(--pm-ink-400);
    background: var(--pm-ring-track);
    box-shadow: inset 0 1px 3px rgba(16,24,40,0.12);
    filter: saturate(0.15);
}
.pm-badge-locked .pm-badge-lock {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.62rem;
    background: var(--pm-card-bg);
    color: var(--pm-ink-400);
    border: 1px solid var(--pm-card-border);
    box-shadow: 0 2px 6px rgba(16,24,40,0.15);
}
.pm-badge-label {
    font-size: 0.66rem;
    font-weight: 750;
    line-height: 1.15;
    color: var(--pm-ink-600);
}
.pm-badge-unlocked .pm-badge-label { color: var(--pm-ink-900); }
.pm-badge-locked .pm-badge-label { opacity: 0.75; }
body.dark-mode .pm-badge-unlocked .pm-badge-coin {
    box-shadow:
        0 8px 18px -8px rgba(240, 180, 60, 0.35),
        inset 0 1px 1px rgba(255,255,255,0.55),
        inset 0 -3px 6px rgba(120,53,15,0.35);
}

/* ============================================================
   Drapeaux images (flagcdn) — les emoji drapeaux ne sont pas
   rendus sous Windows, on sert de vraies images partout.
   ============================================================ */
.pm-flag {
    width: auto;
    border-radius: 3px;
    vertical-align: -0.14em;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--pm-ink-900) 14%, transparent),
        0 1px 2px rgba(16, 24, 40, 0.18);
}

/* ============================================================
   SIGNAUX AVANCÉS — niveau « bannière narrative » (07/2026).
   Même grammaire que le hero de Codex : carte 20px + voile
   lumineux, barre latérale dégradée, chips pilules, médaillon.
   ============================================================ */
.pm-adv-hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px !important;
    box-shadow:
        0 18px 54px rgba(15, 23, 42, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.pm-adv-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 8px;
    background: linear-gradient(180deg, #7c3aed, #a78bfa 55%, #2563eb);
    z-index: 1;
}
.pm-adv-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 14%, rgba(167, 139, 250, 0.18), transparent 26%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.45), transparent 30%);
    pointer-events: none;
}
.pm-adv-hero > .card-body { position: relative; z-index: 1; }
body.dark-mode .pm-adv-hero {
    box-shadow:
        0 20px 54px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.dark-mode .pm-adv-hero::after {
    background:
        radial-gradient(circle at 12% 14%, rgba(167, 139, 250, 0.10), transparent 26%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.05), transparent 34%);
}

/* --- Header : médaillon + couverture + chips --- */
.pm-adv-header {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.pm-adv-score-wrap { text-align: center; flex: 0 0 auto; }
.pm-adv-medallion, .pm-medallion {
    --pct: 0;
    --size: 92px;
    position: relative;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background:
        conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--pm-ring-track) 0);
    display: grid;
    place-items: center;
    box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.14),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
.pm-adv-medallion::before, .pm-medallion::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,0.9), transparent 55%),
        var(--pm-card-bg);
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.10);
}
.pm-adv-medallion::after, .pm-medallion::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        color-mix(in srgb, var(--ring) 26%, transparent) 0deg 3deg,
        transparent 3deg 9deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    opacity: 0.85;
}
.pm-adv-medallion-value, .pm-medallion-value {
    position: relative;
    z-index: 1;
    font-size: 1.7rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    /* --ring-ink : encre optionnelle plus lisible quand la teinte de
       l'anneau est trop claire (jaunes/roses pâles du portefeuille) */
    color: var(--ring-ink, var(--ring));
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
body.dark-mode .pm-adv-medallion-value, body.dark-mode .pm-medallion-value { text-shadow: none; }
.pm-adv-score-label {
    margin-top: 7px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pm-ink-400);
}
.pm-adv-header-main { flex: 1 1 260px; min-width: 0; }
.pm-adv-coverage {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.pm-adv-coverage-count {
    font-size: 1.35rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    color: var(--pm-ink-900);
}
.pm-adv-coverage-total {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--pm-ink-400);
}
.pm-adv-coverage-label {
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--pm-ink-600);
}
.pm-adv-coverage-bar {
    height: 7px;
    margin: 8px 0 12px;
    border-radius: 999px;
    background: var(--pm-ring-track);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.10);
}
.pm-adv-coverage-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7c3aed, #a78bfa 60%, #2563eb);
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.45);
    transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Chips compteurs (pilules) --- */
.pm-adv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-adv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.2;
    background: color-mix(in srgb, var(--_cc, #64748b) 10%, var(--pm-card-bg));
    color: color-mix(in srgb, var(--_cc, #64748b) 82%, var(--pm-ink-900));
    border: 1px solid color-mix(in srgb, var(--_cc, #64748b) 26%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
body.dark-mode .pm-adv-chip { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.pm-adv-chip .bi { font-size: 0.82rem; }
.pm-adv-chip--pass    { --_cc: #10b981; }
.pm-adv-chip--warn    { --_cc: #d97706; }
.pm-adv-chip--fail    { --_cc: #dc2626; }
.pm-adv-chip--neutral { --_cc: #64748b; }
.pm-adv-chip--na      { --_cc: #94a3b8; opacity: 0.8; }

/* --- Tuiles de la grille (couleurs par data-status, dark-safe) --- */
.pm-adv-tile {
    --_tc: #64748b;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 11px;
    border: 1px solid color-mix(in srgb, var(--_tc) 34%, transparent);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--_tc) 11%, var(--pm-card-bg)),
            color-mix(in srgb, var(--_tc) 6%, var(--pm-card-bg)));
    color: color-mix(in srgb, var(--_tc) 80%, var(--pm-ink-900));
    text-align: left;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 650;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
body.dark-mode .pm-adv-tile { box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05); }
.pm-adv-tile:hover, .pm-adv-tile:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--_tc) 60%, transparent);
    box-shadow:
        0 10px 22px -8px color-mix(in srgb, var(--_tc) 45%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.pm-adv-tile[data-status="pass"]    { --_tc: #10b981; }
.pm-adv-tile[data-status="warn"],
.pm-adv-tile[data-status="timeout"] { --_tc: #d97706; }
.pm-adv-tile[data-status="fail"],
.pm-adv-tile[data-status="error"]   { --_tc: #dc2626; }
.pm-adv-tile[data-status="no_data"],
.pm-adv-tile[data-status="not_configured"] { --_tc: #64748b; }
.pm-adv-tile--na { border-style: dashed; opacity: 0.55; }
.pm-adv-tile-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--_tc);
    box-shadow: 0 0 6px color-mix(in srgb, var(--_tc) 55%, transparent);
}
.pm-adv-tile-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-adv-tile-score {
    font-weight: 850;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--_tc) 16%, var(--pm-card-bg));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_tc) 28%, transparent);
}
.pm-adv-tile-star {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    padding: 1px 6px;
    border-radius: 7px;
    font-size: 0.6rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.45);
}

/* ============================================================
   BILAN PAR MARCHÉ — cartes marché premium (accent par score)
   ============================================================ */
.pm-insights-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px !important;
    border: 1px solid color-mix(in srgb, #667eea 18%, transparent) !important;
}
.pm-insights-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 8% 0%, rgba(102, 126, 234, 0.10), transparent 32%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.35), transparent 28%);
    pointer-events: none;
}
.pm-insights-card > .card-body { position: relative; z-index: 1; }
.pm-insights-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--pm-ink-900);
}
.pm-insights-bulb {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.05));
    color: #f59e0b;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body.dark-mode .pm-insights-bulb { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.pm-insights-list { font-size: 0.88rem; line-height: 1.55; }
.pm-insights-list > li {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}
.pm-insights-list > li > .bi { font-size: 1.05rem; line-height: 1.4; flex-shrink: 0; }
.pm-insights-list > li > span { color: var(--pm-ink-600); }

.pm-market-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px !important;
    box-shadow:
        0 14px 40px rgba(15, 23, 42, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.pm-market-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 20px 48px rgba(15, 23, 42, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.pm-market-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg,
        var(--ms-accent),
        color-mix(in srgb, var(--ms-accent) 55%, #ffffff) 60%,
        color-mix(in srgb, var(--ms-accent) 75%, #2563eb));
    z-index: 1;
}
.pm-market-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 88% 6%, color-mix(in srgb, var(--ms-accent) 12%, transparent), transparent 34%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.35), transparent 26%);
    pointer-events: none;
}
.pm-market-card > .card-body { position: relative; z-index: 1; }
body.dark-mode .pm-market-card {
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
body.dark-mode .pm-market-card::before {
    background: linear-gradient(180deg,
        var(--ms-accent),
        color-mix(in srgb, var(--ms-accent) 65%, #0f172a) 60%,
        color-mix(in srgb, var(--ms-accent) 70%, #2563eb));
}

.pm-market-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pm-market-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pm-market-flag {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.55));
    box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
body.dark-mode .pm-market-flag {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.65));
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pm-market-name h6 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--pm-ink-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-market-code {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--pm-ink-400);
    text-transform: uppercase;
}
.pm-market-score {
    position: relative;
    overflow: hidden;
    min-width: 84px;
    padding: 9px 15px;
    text-align: center;
    border-radius: 14px;
    background:
        radial-gradient(circle at 78% 0%, color-mix(in srgb, var(--ms-accent) 16%, transparent), transparent 65%),
        color-mix(in srgb, var(--ms-accent) 7%, var(--pm-card-bg));
    border: 1px solid color-mix(in srgb, var(--ms-accent) 22%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
body.dark-mode .pm-market-score { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.pm-market-score-value {
    font-size: 1.65rem;
    font-weight: 850;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--ms-accent);
}
.pm-market-score-scale {
    margin-top: 2px;
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pm-ink-400);
}
.pm-market-stats { display: flex; gap: 8px; }
.pm-market-stat {
    flex: 1;
    padding: 7px 8px;
    text-align: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--pm-ink-900) 4%, var(--pm-card-bg));
    border: 1px solid color-mix(in srgb, var(--pm-ink-900) 7%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body.dark-mode .pm-market-stat { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.pm-market-stat-value {
    font-weight: 800;
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
    color: var(--pm-ink-900);
}
.pm-market-stat-unit { font-size: 0.68rem; font-weight: 700; color: var(--pm-ink-400); }
.pm-market-stat-label { font-size: 0.64rem; font-weight: 650; color: var(--pm-ink-400); }
.pm-market-best {
    padding: 9px 12px;
    border-radius: 12px;
    background:
        radial-gradient(circle at 92% 0%, rgba(245, 158, 11, 0.14), transparent 42%),
        color-mix(in srgb, #667eea 6%, var(--pm-card-bg));
    border: 1px solid color-mix(in srgb, #667eea 16%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body.dark-mode .pm-market-best { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.pm-market-sub-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pm-ink-600);
}
.pm-market-sub-label .bi { color: #f59e0b; font-size: 0.82rem; }
.pm-market-sub-label--weak .bi { color: #dc2626; }
.pm-market-best-name {
    margin-top: 3px;
    font-weight: 750;
    font-size: 0.85rem;
    color: var(--pm-ink-900);
}
.pm-market-best-name > span { color: #667eea; font-weight: 700; }
.pm-market-weak-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    padding: 3px 0;
    color: var(--pm-ink-600);
}
.pm-market-weak-score {
    font-size: 0.66rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, #dc2626 12%, var(--pm-card-bg));
    color: color-mix(in srgb, #dc2626 82%, var(--pm-ink-900));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #dc2626 22%, transparent);
}

/* ============================================================
   BANDEAU XP — élevé au niveau « action panel » du hero
   ============================================================ */
.pm-xp-banner {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 16px 32px rgba(15, 23, 42, 0.08);
}
.pm-xp-banner::before {
    content: "";
    position: absolute;
    inset: -18px -18px auto auto;
    width: 110px;
    height: 110px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.22) 0%, rgba(245, 158, 11, 0.09) 42%, transparent 72%);
    pointer-events: none;
}
.pm-xp-banner::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.45), rgba(16, 185, 129, 0.35), transparent);
}
body.dark-mode .pm-xp-banner {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 16px 32px rgba(0, 0, 0, 0.30);
}

/* --- Dark : reprendre la main sur les patchs !important de dark-theme.css
   (écrits pour les anciennes tuiles inline) — cette feuille charge APRÈS. --- */
body.dark-mode .pm-adv-medallion-value, body.dark-mode .pm-medallion-value { color: var(--ring-ink, var(--ring)) !important; }
body.dark-mode .pm-adv-tile[data-status="pass"],
body.dark-mode .pm-adv-tile[data-status="warn"],
body.dark-mode .pm-adv-tile[data-status="timeout"],
body.dark-mode .pm-adv-tile[data-status="fail"],
body.dark-mode .pm-adv-tile[data-status="error"],
body.dark-mode .pm-adv-tile[data-status="no_data"],
body.dark-mode .pm-adv-tile[data-status="not_configured"] {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--_tc) 20%, var(--pm-card-bg)),
            color-mix(in srgb, var(--_tc) 11%, var(--pm-card-bg))) !important;
    border-color: color-mix(in srgb, var(--_tc) 48%, transparent) !important;
    color: color-mix(in srgb, var(--_tc) 55%, #f8fafc) !important;
}

/* ============================================================
   FUNNEL « où ça fuit » + FEED CONCURRENTS + HEATMAP (07/2026)
   — même grammaire hero que la bannière narrative.
   ============================================================ */
.pm-block-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--pm-ink-900);
}
.pm-block-title-icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(102, 126, 234, 0.16), rgba(102, 126, 234, 0.05));
    color: #667eea;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.pm-block-title-icon--indigo {
    background: linear-gradient(145deg, rgba(79, 70, 229, 0.16), rgba(79, 70, 229, 0.05));
    color: #4f46e5;
}
body.dark-mode .pm-block-title-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }

/* --- Funnel --- */
.pm-funnel-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px !important;
    box-shadow:
        0 14px 40px rgba(15, 23, 42, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.pm-funnel-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 6% 0%, rgba(102, 126, 234, 0.10), transparent 30%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.35), transparent 26%);
    pointer-events: none;
}
.pm-funnel-card > .card-body { position: relative; z-index: 1; }
body.dark-mode .pm-funnel-card {
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.pm-funnel {
    display: flex;
    align-items: stretch;
    gap: 6px;
    flex-wrap: wrap;
}
.pm-funnel-step {
    --fc: #667eea;
    position: relative;
    overflow: hidden;
    flex: 1 1 130px;
    min-width: 128px;
    padding: 14px 12px 12px;
    text-align: center;
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--fc) 14%, transparent), transparent 62%),
        color-mix(in srgb, var(--fc) 6%, var(--pm-card-bg));
    border: 1px solid color-mix(in srgb, var(--fc) 22%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pm-funnel-step:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 26px -10px color-mix(in srgb, var(--fc) 50%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
body.dark-mode .pm-funnel-step { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.pm-funnel-step::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--fc), transparent);
    opacity: 0.55;
}
.pm-funnel-step-icon {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--fc) 14%, var(--pm-card-bg));
    color: var(--fc);
    font-size: 0.95rem;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc) 24%, transparent);
}
.pm-funnel-step-value {
    font-size: 1.45rem;
    font-weight: 850;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--fc) 78%, var(--pm-ink-900));
}
.pm-funnel-step-unit { font-size: 0.85rem; font-weight: 750; opacity: 0.75; }
.pm-funnel-step-label {
    margin-top: 3px;
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--pm-ink-600);
}
.pm-funnel-arrow {
    align-self: center;
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pm-ink-900) 5%, var(--pm-card-bg));
    color: var(--pm-ink-400);
    font-size: 0.85rem;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pm-ink-900) 8%, transparent);
}
.pm-funnel-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--pm-ink-600);
    background:
        radial-gradient(circle at 96% 0%, rgba(245, 158, 11, 0.16), transparent 40%),
        color-mix(in srgb, #f59e0b 6%, var(--pm-card-bg));
    border: 1px solid rgba(245, 158, 11, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body.dark-mode .pm-funnel-hint { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.pm-funnel-hint-icon { color: #f59e0b; font-size: 0.95rem; line-height: 1.4; }

/* --- Feed concurrents (timeline) --- */
.pm-feed-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px !important;
    box-shadow:
        0 14px 40px rgba(15, 23, 42, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.pm-feed-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 94% 0%, rgba(79, 70, 229, 0.09), transparent 30%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.35), transparent 26%);
    pointer-events: none;
}
.pm-feed-card > .card-body { position: relative; z-index: 1; }
body.dark-mode .pm-feed-card {
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.pm-feed {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 22px;
}
.pm-feed::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg,
        color-mix(in srgb, #4f46e5 45%, transparent),
        color-mix(in srgb, #4f46e5 10%, transparent));
}
.pm-feed-item {
    position: relative;
    padding: 4px 0 12px;
    font-size: 0.84rem;
}
.pm-feed-item:last-child { padding-bottom: 0; }
.pm-feed-dot {
    position: absolute;
    left: -22px;
    top: 9px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #4f46e5;
    box-shadow:
        0 0 0 3px color-mix(in srgb, #4f46e5 18%, transparent),
        0 0 10px rgba(79, 70, 229, 0.5);
}
.pm-feed-dot--threat {
    background: #dc2626;
    box-shadow:
        0 0 0 3px color-mix(in srgb, #dc2626 18%, transparent),
        0 0 10px rgba(220, 38, 38, 0.5);
}
.pm-feed-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pm-feed-head > strong { color: var(--pm-ink-900); font-weight: 750; }
.pm-feed-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.14), rgba(79, 70, 229, 0.14));
    color: #4f46e5;
    box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.22);
}
body.dark-mode .pm-feed-badge { color: #a5b4fc; }
.pm-feed-threat {
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--pm-ink-600);
}

/* --- Heatmap cross-marchés (CSS only, structure a11y intacte) --- */
#multilang-heatmap-section {
    position: relative;
    overflow: hidden;
    border-radius: 20px !important;
    box-shadow:
        0 18px 54px rgba(15, 23, 42, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}
#multilang-heatmap-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 8px;
    background: linear-gradient(180deg, #2563eb, #667eea 55%, #8b5cf6);
    z-index: 2;
    pointer-events: none;
}
#multilang-heatmap-section > .card-header {
    position: relative;
    z-index: 1;
    background:
        radial-gradient(circle at 10% 0%, rgba(102, 126, 234, 0.10), transparent 36%),
        var(--pm-card-bg) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--pm-ink-900) 8%, transparent);
    padding: 16px 20px 14px 24px;
}
#multilang-heatmap-section > .card-header h5 { font-weight: 800; color: var(--pm-ink-900); }
body.dark-mode #multilang-heatmap-section {
    box-shadow:
        0 20px 54px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
.multilang-heatmap-table th[style*="#f8fafc"] {
    background: color-mix(in srgb, var(--pm-ink-900) 4%, var(--pm-card-bg)) !important;
    color: var(--pm-ink-600) !important;
}
.multilang-cell {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.multilang-cell:hover, .multilang-cell:focus-visible {
    transform: scale(1.04);
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--pm-ink-900) 22%, transparent),
        0 6px 16px rgba(15, 23, 42, 0.18);
    z-index: 1;
    position: relative;
}

/* ============================================================
   MÉDAILLON PARTOUT (demande user 04/07) — composant .pm-medallion
   généralisé (taille --size) + crantage ajouté aux anneaux
   coniques existants (KPI gauge-ring, sections geo-score-ring)
   sans toucher leur HTML/JS.
   ============================================================ */
.pm-medallion { --size: 72px; }
/* Taille auto-adaptative : --vlen (nb de chiffres, posé par le template
   pour les grandes valeurs type pool de crédits) borne la largeur pour
   que la valeur reste DANS le disque. Défaut 3 → comportement standard. */
.pm-medallion .pm-medallion-value, .pm-medallion-value {
    font-size: min(calc(var(--size, 72px) * 0.30), calc(var(--size, 72px) * 0.98 / var(--vlen, 3)));
}
.pm-adv-medallion .pm-adv-medallion-value { font-size: 1.7rem; }
.pm-medallion-scale {
    margin-top: 5px;
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--pm-ink-400);
}

/* Crantage + reflet sur les anneaux KPI existants (le JS pilote le
   conic-gradient inline ; on n'ajoute que la matière par-dessus). */
.gauge-ring {
    position: relative;
    box-shadow:
        0 10px 24px rgba(15, 23, 42, 0.12),
        inset 0 1px 1px rgba(255, 255, 255, 0.45);
}
.gauge-ring::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        color-mix(in srgb, var(--pm-ink-900) 14%, transparent) 0deg 3deg,
        transparent 3deg 9deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    opacity: 0.7;
    pointer-events: none;
}
body.dark-mode .gauge-ring {
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.10);
}
body.dark-mode .gauge-ring::after {
    background: repeating-conic-gradient(
        rgba(255, 255, 255, 0.16) 0deg 3deg,
        transparent 3deg 9deg);
}
.geo-score-ring {
    position: relative;
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.12),
        inset 0 1px 1px rgba(255, 255, 255, 0.45);
}
.geo-score-ring::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        color-mix(in srgb, var(--pm-ink-900) 14%, transparent) 0deg 3deg,
        transparent 3deg 9deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    opacity: 0.7;
    pointer-events: none;
}
body.dark-mode .geo-score-ring {
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.10);
}
body.dark-mode .geo-score-ring::after {
    background: repeating-conic-gradient(
        rgba(255, 255, 255, 0.16) 0deg 3deg,
        transparent 3deg 9deg);
}

/* Variante N/A du médaillon (pas de mesure) : arc gris, valeur discrète */
.pm-medallion--na { --ring: #cbd5e1; --pct: 0; }
.pm-medallion--na .pm-medallion-value { color: var(--pm-ink-400) !important; font-size: 0.85rem; }
body.dark-mode .pm-medallion--na { --ring: #475569; }

/* ============================================================
   HARMONISATION FINALE des indicateurs circulaires (04/07) :
   score-circle (natif/web), geo-score-circle (GEO/AEO hero),
   geo-score-ring — tous reçoivent la matière médaillon (disque
   tokenisé + reflet, crantage, ombre) SANS toucher leur HTML/JS.
   ============================================================ */
.score-circle, .geo-score-circle {
    position: relative;
    box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.14),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
/* Disque interne : token + reflet (était blanc codé en dur = flash en dark) */
.score-circle::before, .geo-score-circle::before {
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.9), transparent 55%),
        var(--pm-card-bg) !important;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.10);
}
body.dark-mode .score-circle::before, body.dark-mode .geo-score-circle::before {
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.07), transparent 55%),
        var(--pm-card-bg) !important;
}
/* Crantage périphérique (::after libre sur ces composants) */
.score-circle::after, .geo-score-circle::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        color-mix(in srgb, var(--pm-ink-900) 16%, transparent) 0deg 3deg,
        transparent 3deg 9deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    opacity: 0.8;
    pointer-events: none;
}
body.dark-mode .score-circle, body.dark-mode .geo-score-circle {
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.10);
}
body.dark-mode .score-circle::after, body.dark-mode .geo-score-circle::after {
    background: repeating-conic-gradient(
        rgba(255, 255, 255, 0.16) 0deg 3deg,
        transparent 3deg 9deg);
}
.score-circle .score-sub, .geo-score-circle .score-sub {
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pm-ink-400);
}
/* geo-score-ring : disque interne tokenisé + reflet (était #fff dur) */
.geo-score-ring::before {
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.9), transparent 55%),
        var(--pm-card-bg) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.10);
}
body.dark-mode .geo-score-ring::before {
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.07), transparent 55%),
        var(--pm-card-bg) !important;
}
.geo-score-ring .score-val { font-variant-numeric: tabular-nums; font-weight: 800; }

/* Sous-label interne du médaillon (« /100 », « AEO », « GEO »…) */
.pm-medallion-value { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.pm-medallion-sub {
    font-size: 0.34em;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pm-ink-400);
    margin-top: 2px;
}

/* ============================================================
   LISIBILITÉ des valeurs de médaillons (demande user 04/07) :
   contour inversé du fond + profondeur 3D. Fond clair → liseré
   sombre ; fond sombre → liseré clair. Contour en 4 ombres
   directionnelles semi-transparentes (un vrai text-stroke dur
   empâterait les chiffres fins) + ombre portée douce.
   ============================================================ */
/* v2 (retour user : « les chiffres se fondent ») — triple détachement :
   1. encre RENFORCÉE : la teinte de l'anneau assombrie en light /
      éclaircie en dark (le chiffre n'est plus la même valeur tonale
      que l'anneau et le disque) ;
   2. contour NET 8 directions, inverse du fond ;
   3. ombre portée marquée = relief 3D. */
.pm-medallion-value, .pm-adv-medallion-value {
    color: color-mix(in srgb, var(--ring-ink, var(--ring)) 68%, var(--pm-ink-900)) !important;
    text-shadow:
        -1px -1px 0 rgba(15, 23, 42, 0.35),
        1px -1px 0 rgba(15, 23, 42, 0.35),
        -1px 1px 0 rgba(15, 23, 42, 0.35),
        1px 1px 0 rgba(15, 23, 42, 0.35),
        0 -1px 0 rgba(15, 23, 42, 0.30),
        0 1px 0 rgba(15, 23, 42, 0.30),
        0 2px 3px rgba(15, 23, 42, 0.40),
        0 4px 10px rgba(15, 23, 42, 0.22) !important;
}
body.dark-mode .pm-medallion-value, body.dark-mode .pm-adv-medallion-value {
    color: color-mix(in srgb, var(--ring-ink, var(--ring)) 62%, #ffffff) !important;
    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, 0.30),
        1px -1px 0 rgba(255, 255, 255, 0.30),
        -1px 1px 0 rgba(255, 255, 255, 0.30),
        1px 1px 0 rgba(255, 255, 255, 0.30),
        0 -1px 0 rgba(255, 255, 255, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.80),
        0 0 12px rgba(255, 255, 255, 0.10) !important;
}
/* Sous-label : halo léger seulement (un contour empâterait ce corps minuscule) */
.pm-medallion-sub { text-shadow: 0 1px 2px rgba(15, 23, 42, 0.22); }
body.dark-mode .pm-medallion-sub { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
/* Médaillons hero (sur cartes claires en light, sombres en dark) :
   même logique inversée que les autres. */
.hero-medallion-grade {
    text-shadow:
        0 1px 0 rgba(22, 24, 43, 0.30),
        0 -1px 0 rgba(22, 24, 43, 0.22),
        1px 0 0 rgba(22, 24, 43, 0.22),
        -1px 0 0 rgba(22, 24, 43, 0.22),
        0 2px 5px rgba(15, 23, 42, 0.28) !important;
}
body.dark-mode .hero-medallion-grade {
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28),
        0 -1px 0 rgba(255, 255, 255, 0.20),
        1px 0 0 rgba(255, 255, 255, 0.20),
        -1px 0 0 rgba(255, 255, 255, 0.20),
        0 2px 6px rgba(0, 0, 0, 0.70) !important;
}

/* Rail de jauge dark-safe (pool de crédits agence — était rgba blanc,
   invisible sur fond clair) */
.pm-pool-track {
    background: var(--pm-ring-track);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
}

/* ============================================================
   RÉSEAU D'AUTORITÉ (co-citations) — titre intégré + classement
   lumineux (retour user : section « divisée » et plate).
   ============================================================ */
.pm-block-title-icon--cyan {
    background: linear-gradient(145deg, rgba(8, 145, 178, 0.16), rgba(8, 145, 178, 0.05));
    color: #0891b2;
}
.pm-cocite-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px !important;
    box-shadow:
        0 18px 54px rgba(15, 23, 42, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.pm-cocite-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 8px;
    background: linear-gradient(180deg, #0891b2, #667eea 55%, #8b5cf6);
    z-index: 1;
}
.pm-cocite-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 0%, rgba(8, 145, 178, 0.10), transparent 30%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.40), transparent 28%);
    pointer-events: none;
}
.pm-cocite-card > .card-body { position: relative; z-index: 1; }
body.dark-mode .pm-cocite-card {
    box-shadow:
        0 20px 54px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pm-cocite-intro {
    margin: 0 0 14px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--pm-ink-600);
    max-width: 72ch;
}
.pm-cocite-list { display: flex; flex-direction: column; gap: 7px; }
.pm-cocite-row {
    --cc: #667eea;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--cc) 5%, var(--pm-card-bg));
    border: 1px solid color-mix(in srgb, var(--cc) 14%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transition: transform 0.13s ease, box-shadow 0.13s ease;
}
body.dark-mode .pm-cocite-row { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.pm-cocite-row:hover {
    transform: translateX(3px);
    box-shadow:
        0 8px 20px -10px color-mix(in srgb, var(--cc) 50%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.pm-cocite-row--comp { --cc: #dc2626; }
.pm-cocite-rank {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--cc) 80%, var(--pm-ink-900));
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.85), transparent 60%),
        color-mix(in srgb, var(--cc) 12%, var(--pm-card-bg));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--cc) 30%, transparent),
        0 2px 5px rgba(15, 23, 42, 0.10);
}
body.dark-mode .pm-cocite-rank {
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.10), transparent 60%),
        color-mix(in srgb, var(--cc) 18%, var(--pm-card-bg));
}
.pm-cocite-main { flex: 1; min-width: 0; }
.pm-cocite-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    min-width: 0;
}
.pm-cocite-domain {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--pm-ink-900);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.pm-cocite-domain:hover { color: color-mix(in srgb, var(--cc) 70%, var(--pm-ink-900)); }
.pm-cocite-domain .bi { font-size: 0.68rem; opacity: 0.5; margin-left: 4px; }
.pm-cocite-flag {
    flex-shrink: 0;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.40);
}
.pm-cocite-count {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.74rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    padding: 1px 9px;
    border-radius: 999px;
    color: color-mix(in srgb, var(--cc) 80%, var(--pm-ink-900));
    background: color-mix(in srgb, var(--cc) 12%, var(--pm-card-bg));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc) 26%, transparent);
}
.pm-cocite-bar {
    height: 7px;
    border-radius: 999px;
    background: var(--pm-ring-track);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.10);
}
.pm-cocite-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--cc) 80%, #ffffff),
        var(--cc));
    box-shadow: 0 0 8px color-mix(in srgb, var(--cc) 50%, transparent);
}

/* Dark : les liens de domaines co-cités battent la règle générique des <a> */
body.dark-mode .pm-cocite-domain { color: #f1f5f9 !important; }
body.dark-mode a.pm-cocite-domain:hover { color: color-mix(in srgb, var(--cc) 55%, #f1f5f9) !important; }

/* ============================================================
   PASSAGE CRITIQUE AUTO (04/07) — défauts repérés sans attendre :
   emoji OS-dépendants des titres de zones → pastilles d'icônes,
   « VS » plat → badge, sous-labels de médaillons trop pâles.
   ============================================================ */
.pm-zone-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-right: 4px;
    border-radius: 12px;
    vertical-align: -8px;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--zi, #667eea) 16%, transparent),
        color-mix(in srgb, var(--zi, #667eea) 5%, transparent));
    color: var(--zi, #667eea);
    font-size: 1.05rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 4px 10px color-mix(in srgb, var(--zi, #667eea) 18%, transparent);
}
body.dark-mode .pm-zone-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 10px rgba(0, 0, 0, 0.35); }
.dashv3-toc-item .bi { font-size: 0.85em; margin-right: 2px; opacity: 0.85; }

.pm-vs-badge {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 0.95rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow:
        0 10px 24px rgba(102, 126, 234, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

/* Sous-label de médaillon : plus lisible (était trop pâle et trop espacé) */
.pm-medallion-sub {
    letter-spacing: 0.03em;
    color: var(--pm-ink-600);
    max-width: 12ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   CARTES AEO/GEO CONSOLIDÉES (retour user : médaillon posé mais
   TOUT le reste laissé à l'ancienne) — breakdown premium.
   ============================================================ */
.pm-break-list { display: flex; flex-direction: column; gap: 7px; }
.pm-break-row {
    --bc: #667eea;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pm-break-label {
    flex: 0 0 175px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--pm-ink-600);
}
/* Le texte seul se tronque : la pastille de poids reste toujours visible
   (libellés longs ES/DE — la troncature avalait le chip %). */
.pm-break-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-break-weight {
    display: inline-block;
    flex: 0 0 auto;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--pm-ink-400);
    background: color-mix(in srgb, var(--pm-ink-900) 5%, var(--pm-card-bg));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pm-ink-900) 8%, transparent);
}
.pm-break-bar {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--pm-ring-track);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.10);
}
.pm-break-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--bc) 78%, #ffffff),
        var(--bc));
    box-shadow: 0 0 8px color-mix(in srgb, var(--bc) 50%, transparent);
    transition: width 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pm-break-value {
    flex: 0 0 auto;
    min-width: 44px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    padding: 1px 8px;
    border-radius: 999px;
    color: color-mix(in srgb, var(--bc) 80%, var(--pm-ink-900));
    background: color-mix(in srgb, var(--bc) 12%, var(--pm-card-bg));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 26%, transparent);
}
body.dark-mode .pm-break-value { color: color-mix(in srgb, var(--bc) 55%, #f8fafc); }

/* Icônes des titres de sous-sections : pastille (cohérence globale,
   même geste que pm-zone-icon mais compact) */
.section-header .section-title > .bi:first-child {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 0.92rem;
    color: #667eea;
    background: linear-gradient(145deg, rgba(102, 126, 234, 0.14), rgba(102, 126, 234, 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    vertical-align: -8px;
    margin-right: 2px;
}
body.dark-mode .section-header .section-title > .bi:first-child {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Bouton « Actualiser » AEO/checklist : pilule premium */
.aeo-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #667eea 26%, transparent);
    background: linear-gradient(135deg,
        color-mix(in srgb, #667eea 10%, var(--pm-card-bg)),
        color-mix(in srgb, #764ba2 8%, var(--pm-card-bg)));
    color: color-mix(in srgb, #667eea 80%, var(--pm-ink-900));
    font-size: 0.78rem;
    font-weight: 750;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.aeo-refresh-btn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 8px 18px -8px rgba(102, 126, 234, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body.dark-mode .aeo-refresh-btn {
    color: #c7d2fe;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Barres geo-cat (sections GEO avancées) : rail tokenisé + lueur douce */
.geo-cat-bar {
    background: var(--pm-ring-track) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.10);
    overflow: hidden;
}
.geo-cat-bar .geo-cat-fill, .geo-cat-bar .geo-cat-bar-fill {
    border-radius: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════
   Agent Dashboard — zones groupées (refonte 07/2026)
   Même langage que le dashboard client (dashv3-zone), avec un eyebrow
   paramétrable via data-zone-eyebrow (le client hardcode « Zone x / 5 »
   dans dashboard-v3.css ; l'agent en a 4). Chargé en dernier → gagne.
   ═══════════════════════════════════════════════════════════════════════ */
.dashv3-zone .dashv3-zone-header[data-zone-eyebrow]::after {
    /* specificite (0,3,0) : doit battre .dashv3-zone[data-zone=x] .dashv3-zone-header::after */
    content: attr(data-zone-eyebrow);
}

/* Distribution des scores — état « peu de clients » : 4 tuiles compteur.
   Une barre proportionnelle à 1-3 clients serait un aplat trompeur. */
.pd-dist-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.pd-dist-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px dashed rgba(148, 163, 184, 0.35);
    color: #94a3b8;
}
.pd-dist-tile-active {
    background: linear-gradient(135deg, var(--dt1), var(--dt2));
    border: 1px solid transparent;
    color: #fff;
    box-shadow: 0 6px 16px -6px var(--dt1);
}
.pd-dist-count {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    font-feature-settings: "tnum";
}
.pd-dist-range {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    opacity: 0.85;
}
body.dark-mode .pd-dist-tile {
    background: rgba(148, 163, 184, 0.06);
    border-color: rgba(148, 163, 184, 0.22);
    color: #64748b;
}
body.dark-mode .pd-dist-tile-active {
    border-color: transparent;
    color: #fff;
}
@media (max-width: 576px) {
    .pd-dist-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Select de statut du plan d'action — habillage premium (07/2026) :
   pill, chevron custom, hover/focus nets, dark-safe. Remplace le rendu
   natif brut « Pending » repéré dans la passe design. */
.dashv3-zone .action-status-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(100, 116, 139, 0.35);
    border-radius: 999px;
    padding: 5px 30px 5px 14px !important;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    color: #334155;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.dashv3-zone .action-status-select:hover {
    border-color: #667eea;
}
.dashv3-zone .action-status-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.18);
}
body.dark-mode .dashv3-zone .action-status-select {
    /* pas de shorthand background ailleurs : on refixe repeat/position,
       le `background: #16213e` de client-dashboard.css les reset (zigzag) */
    background-color: rgba(30, 34, 53, 0.9);
    border-color: rgba(148, 163, 184, 0.28);
    color: #cbd5e1;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* ============================================================
   BANNIÈRES PÉDAGOGIQUES (pm-note) — retour user 04/07 : encres
   codées en dur (#1e1b4b/#475569/#7c2d12) quasi invisibles en
   mode sombre. Composant tokenisé, teinte via --nc.
   ============================================================ */
.pm-note {
    --nc: #6366f1;
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 22px;
    border-radius: 18px !important;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--nc) 7%, var(--pm-card-bg)),
        var(--pm-card-bg) 62%) !important;
    box-shadow:
        0 14px 40px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.pm-note::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg,
        var(--nc),
        color-mix(in srgb, var(--nc) 55%, #ffffff) 60%,
        var(--nc));
}
.pm-note-icon {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--nc) 18%, var(--pm-card-bg)),
        color-mix(in srgb, var(--nc) 6%, var(--pm-card-bg)));
    color: var(--nc);
    font-size: 1.1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.pm-note-title {
    font-weight: 800;
    font-size: 0.98rem;
    color: var(--pm-ink-900);
    margin-bottom: 3px;
}
.pm-note-body {
    font-size: 0.86rem;
    color: var(--pm-ink-600);
    line-height: 1.5;
}
.pm-note-body strong { color: var(--pm-ink-900); }
.pm-note-kicker {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 800;
    color: color-mix(in srgb, var(--nc) 72%, var(--pm-ink-900));
}
body.dark-mode .pm-note {
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.dark-mode .pm-note-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
body.dark-mode .pm-note-kicker { color: color-mix(in srgb, var(--nc) 60%, #ffffff); }

/* ============================================================
   KPI hero — score centré (retour user : big number collé à
   gauche « pas très joli » sur les cartes sans médaillon).
   ============================================================ */
.pm-kpi-center {
    justify-content: center !important;
    text-align: center;
}

/* ============================================================
   VOUS vs VOTRE SECTEUR (pm-bench) — fusion premium : médaillon
   « Vous », chips moyenne/écart, percentile en pilule. Accent
   par métrique via --bc.
   ============================================================ */
.pm-bench-card {
    --bc: #667eea;
    position: relative;
    overflow: hidden;
    border-radius: 18px !important;
    border: none !important;
    background: var(--pm-card-bg) !important;
    box-shadow:
        0 14px 40px rgba(15, 23, 42, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.pm-bench-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 20px 48px rgba(15, 23, 42, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.pm-bench-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg,
        var(--bc),
        color-mix(in srgb, var(--bc) 55%, #ffffff) 60%,
        var(--bc));
    z-index: 1;
}
.pm-bench-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 88% 6%, color-mix(in srgb, var(--bc) 10%, transparent), transparent 34%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.35), transparent 26%);
    pointer-events: none;
}
.pm-bench-card > .card-body { position: relative; z-index: 1; }
.pm-bench-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.pm-bench-title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 750;
    color: var(--pm-ink-900);
}
.pm-bench-pctile {
    flex-shrink: 0;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: color-mix(in srgb, var(--bc) 75%, var(--pm-ink-900));
    background: color-mix(in srgb, var(--bc) 13%, var(--pm-card-bg));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 28%, transparent);
}
.pm-bench-body {
    display: flex;
    align-items: center;
    gap: 14px;
}
.pm-bench-rows {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.pm-bench-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--pm-ink-600);
}
.pm-bench-row > strong {
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--pm-ink-900);
    background: var(--pm-ring-track);
}
.pm-bench-delta > strong {
    --dc: #64748b;
    color: color-mix(in srgb, var(--dc) 80%, var(--pm-ink-900));
    background: color-mix(in srgb, var(--dc) 12%, var(--pm-card-bg));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc) 26%, transparent);
}
body.dark-mode .pm-bench-delta > strong {
    color: color-mix(in srgb, var(--dc) 55%, #ffffff);
}
.pm-bench-nodata {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px dashed color-mix(in srgb, var(--pm-ink-400) 55%, transparent);
    font-size: 0.7rem;
    font-weight: 650;
    color: var(--pm-ink-400);
}
body.dark-mode .pm-bench-card {
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
body.dark-mode .pm-bench-card::before {
    background: linear-gradient(180deg,
        var(--bc),
        color-mix(in srgb, var(--bc) 65%, #0f172a) 60%,
        var(--bc));
}

/* Étiquette contextuelle du titre de section (ex. « — Technologie »)
   en pilule au lieu du text-muted inline. */
.pm-title-tag {
    padding: 2px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--pm-ink-600);
    background: var(--pm-ring-track);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pm-ink-900) 7%, transparent);
}

/* Top modèles du secteur (pm-topmodel) */
.pm-topmodel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg,
        color-mix(in srgb, #6366f1 6%, var(--pm-card-bg)),
        var(--pm-card-bg) 70%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #6366f1 12%, transparent);
}
.pm-topmodel-rank {
    --rc: #94a3b8;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 850;
    color: color-mix(in srgb, var(--rc) 72%, var(--pm-ink-900));
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--rc) 22%, var(--pm-card-bg)),
        color-mix(in srgb, var(--rc) 8%, var(--pm-card-bg)));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body.dark-mode .pm-topmodel-rank {
    color: color-mix(in srgb, var(--rc) 60%, #ffffff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pm-topmodel-name {
    font-size: 0.82rem;
    font-weight: 750;
    color: var(--pm-ink-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-topmodel-meta { font-size: 0.7rem; color: var(--pm-ink-600); }
.pm-topmodel-meta strong { color: var(--pm-ink-900); }

/* Note contextuelle libre dans un titre (sous-titres longs : pas de pilule,
   elle se briserait sur 2 lignes en DE). */
.pm-title-note {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--pm-ink-400);
    letter-spacing: 0.01em;
}
.pm-block-title-icon--amber {
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.05));
    color: #d97706;
}
body.dark-mode .pm-block-title-icon--amber { color: #fbbf24; }

/* La pilule « Données limitées » ne doit pas s'étirer sur toute la
   colonne flex (elle ressemblait à un champ vide). */
.pm-bench-nodata { align-self: flex-start; }

/* ============================================================
   ANALYSE PAR SECTION GEO (pm-geosec) — fusion en bloc unique :
   les 6 anciennes cartes deviennent des sous-panneaux du bloc,
   teinte de section via --gs (lueur de coin + barre latérale).
   ============================================================ */
.pm-geosec {
    --gs: #667eea;
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: 14px;
    color: var(--pm-ink-900);
    background:
        radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--gs) 10%, transparent), transparent 42%),
        color-mix(in srgb, var(--pm-ink-900) 2.5%, var(--pm-card-bg));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pm-ink-900) 7%, transparent);
    transition: box-shadow 0.16s ease;
}
.pm-geosec:hover {
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--gs) 32%, transparent),
        0 8px 24px -12px color-mix(in srgb, var(--gs) 35%, transparent);
}
/* La bande d'accent (gradient inline conservé) passe en barre latérale,
   cohérente avec la grammaire premium. */
.pm-geosec > .accent-strip {
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    height: auto;
    border-radius: 0;
}
.pm-geosec h6 { color: var(--pm-ink-900); }
.pm-geosec .text-muted { color: var(--pm-ink-400) !important; }
.pm-geosec .btn-link.text-muted { color: var(--pm-ink-400) !important; }
.pm-geosec .geo-cat-label { color: var(--pm-ink-600); }
body.dark-mode .pm-geosec {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    background:
        radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--gs) 14%, transparent), transparent 42%),
        color-mix(in srgb, #ffffff 2%, var(--pm-card-bg));
}

/* pm-geosec : pas d'étirement vertical (le panneau court à côté d'un long
   créait un grand vide) et le liseré vert legacy « featured » est remplacé
   par un anneau subtil dans la teinte de section. */
.pm-geosec { height: auto; }
.pm-geosec.geo-section-featured {
    border: none !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gs) 30%, transparent);
}
body.dark-mode .pm-geosec.geo-section-featured {
    border: none !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gs) 38%, transparent);
}
/* Section pleine largeur : les catégories coulent sur 2 colonnes au lieu
   de laisser la moitié droite vide. */
@media (min-width: 992px) {
    .pm-geosec.geo-section-featured .collapse.show,
    .pm-geosec.geo-section-featured .collapsing {
        column-count: 2;
        column-gap: 28px;
    }
}
.pm-geosec .geo-cat-row { break-inside: avoid; }

/* Barre « couvrir les catégories manquantes » du bloc GEO sections */
.pm-geosec-fill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: -4px 0 14px;
    padding: 9px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, #667eea 7%, var(--pm-card-bg)),
        var(--pm-card-bg) 70%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #667eea 14%, transparent);
}
.pm-geosec-fill-txt {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--pm-ink-600);
}
.pm-geosec-fill-txt .bi { color: #667eea; }