/* ============================================================
   Fichier  : kdp-diag.css
   Rôle     : Phase 1 de la refonte Diagnostic (voir
              PLAN-REFONTE-DIAGNOSTIC.md) — extraction, zéro
              changement visible. Règles déplacées telles quelles
              depuis Diagnostic.razor.css : cartes résumé
              (diag-resume-*), cartes placement (diag-placement-*,
              diag-pm-*) et cartes campagne (camp-*), désormais
              utilisées par les composants extraits
              Components/Shared/CampagnesVue.razor et
              PlacementsTableau.razor (isolation .razor.css ne
              s'applique qu'au balisage du même fichier, donc ces
              règles doivent être globales pour continuer à
              s'appliquer une fois extraites).

              Feuille de style GLOBALE (non scopée), même raison et
              même pattern que kdp-diag-tableaux.css /
              kdp-diag-fiche.css. Référencée une fois dans
              Components/App.razor.
   ============================================================ */

/* ── ONGLETS ──────────────────────────────────────────────── */
/* Partagé entre la barre d'onglets principale (Diagnostic.razor)
   et le sélecteur de grain de ExplorerVue.razor (Phase 2). */
.diag-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid #1c2638;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .diag-tabs::-webkit-scrollbar {
        display: none;
    }

.diag-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--sol-muted, #a7b6ca);
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .76rem;
    padding: 8px 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .12s;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -1px;
}

    .diag-tab:hover {
        color: #e6ecf3;
    }

.diag-tab-actif {
    color: #FF9900;
    border-bottom-color: #FF9900;
    font-weight: 700;
}

.diag-tab-badge {
    background: #ef5a5a;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

/* ── COULEURS SÉMANTIQUES D'ÉTAT (ClasseNiveau) ──────────────
   Partagées entre Diagnostic.razor (piliers, Budget) et
   PlacementsTableau.razor (extrait) — DiagnosticAffichage.ClasseNiveau
   renvoie ces noms de classe, donc elles doivent être globales dès
   qu'au moins un composant qui les utilise n'est plus Diagnostic.razor
   lui-même (l'isolation .razor.css ne suivrait pas l'extraction). */
.diag-badge-vert-border,
.diag-badge-amber-border,
.diag-badge-rouge-border,
.diag-badge-gris-border,
.diag-badge-suspendu-border {
    border-left: 3px solid transparent;
}

.diag-badge-vert {
    color: #2EC98A;
}

.diag-badge-amber {
    color: #E0A040;
}

.diag-badge-rouge {
    color: #ef5a5a;
}

.diag-badge-gris {
    color: var(--sol-muted, #a7b6ca);
}

.diag-badge-suspendu {
    font-size: .65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(69,196,220,.10);
    border: 1px solid rgba(69,196,220,.3);
    color: #45C4DC;
}

.diag-m-val-accent {
    color: #FF9900;
    font-size: 1.18rem;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

/* ── DELTAS DE COMPARAISON (Phase 5, mode N=2) ───────────────
   DeltaBadge.razor — utilisé dans Diagnostic.razor (cartes résumé),
   CampagnesVue, CiblagesTableauView, SearchTermsTableauView. */
.diag-delta {
    display: block;
    font-size: .62rem;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    margin-top: 2px;
}

.diag-delta-up {
    color: #2EC98A;
}

.diag-delta-down {
    color: #ef5a5a;
}

/* Valeur de la période comparée (colorée par le sens) · pourcentage en gris discret, comme la maquette « séparateur discret » */
.diag-delta-sep, .diag-delta-pct { color: var(--sol-muted, #a7b6ca); font-weight: 500; }
.diag-delta-flat {
    color: var(--sol-muted, #a7b6ca);
}

/* ── MATRICE MENSUELLE ───────────────────────────────────────
   MatriceMensuelle.razor — vue "Mensuel" de l'Explorer.
   Le dégradé de fond par cellule (.diag-matrice-cellule) a été
   retiré : plafonné ou non, il finissait en aplat turquoise où
   aucun écart ne se lisait. Les chiffres alignés suffisent. */
.diag-sparkline {
    width: 100%;
    height: 22px;
    display: block;
}

.diag-matrice-erreur {
    background: rgba(224, 86, 106, .10);
    border: 1px solid rgba(224, 86, 106, .35);
    color: #ef5a5a;
    border-radius: 8px;
    font-size: .82rem;
    padding: 10px 14px;
}

/* ── BANDEAU "À TRAITER" (Phase 4) ───────────────────────────
   BandeauActions.razor — 6 compteurs cliquables triés par euros
   en jeu, au-dessus de l'Explorer. */
.diag-todo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
}

.diag-todo-c {
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #1c2638;
    border-left-width: 3px;
    border-radius: 0 8px 8px 0;
    padding: 10px 12px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background .15s, transform .15s;
    cursor: pointer;
}

    .diag-todo-c:hover {
        background: var(--sol-panel-raised, #16263b);
        transform: translateY(-1px);
    }

/* Carte du bandeau dont le filtre est actuellement appliqué à l'Explorer
   (Fix 1 — clic filtrant, voir ExplorerVue._filtreAction) : la couleur de
   niveau (border-left) reste inchangée, un anneau accent la distingue des
   cartes inactives sans se confondre avec elle. */
.diag-todo-c-actif {
    background: var(--sol-panel-raised, #16263b);
    box-shadow: inset 0 0 0 1px var(--sol-accent, #FF9900);
}

.diag-todo-n {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

.diag-todo-l {
    font-size: .72rem;
    color: var(--sol-muted, #a7b6ca);
}

.diag-todo-eur {
    font-size: .65rem;
    color: var(--sol-muted, #a7b6ca);
    margin-top: 1px;
}

.diag-todo-rouge {
    border-left-color: #ef5a5a;
}

    .diag-todo-rouge .diag-todo-n {
        color: #ef5a5a;
    }

.diag-todo-amber {
    border-left-color: #E0A040;
}

    .diag-todo-amber .diag-todo-n {
        color: #E0A040;
    }

.diag-todo-vert {
    border-left-color: #2EC98A;
}

    .diag-todo-vert .diag-todo-n {
        color: #2EC98A;
    }

/* Message unique du livre (royalty / prix modifié) — au-dessus des compteurs "À traiter" */
.diag-info-livre {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid var(--sol-line, #22304a);
    border-left: 3px solid var(--sol-accent, #FF9900);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: .8rem;
    color: var(--sol-text, #e6edf7);
}

/* Fenêtre mature utilisée par le moteur — ligne discrète au-dessus des compteurs */
.diag-fenetre-decision {
    color: var(--sol-muted, #a7b6ca);
    font-size: .74rem;
    line-height: 1.35;
}

.diag-info-livre-i {
    color: var(--sol-accent, #FF9900);
    font-weight: 700;
}

.diag-todo-gris {
    border-left-color: #5a7a9a;
}

    .diag-todo-gris .diag-todo-n {
        color: var(--sol-muted, #a7b6ca);
    }

/* ── RÉSUMÉ RAPIDE ────────────────────────────────────────── */
.diag-resume-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.diag-resume-item {
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #1c2638;
    border-radius: 8px;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 120px;
    transition: border-color .15s;
}

    .diag-resume-item:hover {
        border-color: #2a3a50;
    }

.diag-resume-label {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sol-muted, #a7b6ca);
}

.diag-resume-val {
    font-size: 1.15rem;
    font-weight: 700;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    color: #e6ecf3;
}

.diag-resume-val-empty {
    font-size: .85rem;
    font-weight: 500;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    color: var(--sol-muted, #a7b6ca);
    font-style: italic;
}

/* Matérialise dépense (sort) vs gain réel (rentre) — juste le chiffre,
   même taille/poids que les autres cartes, rien d'autre ne change. */
.diag-resume-val-amber {
    color: var(--amber);
}

.diag-resume-val-green {
    color: var(--green);
}

.diag-resume-val-rouge {
    color: var(--red);
}

.diag-resume-note {
    font-size: .62rem;
    color: var(--sol-muted, #a7b6ca);
    cursor: help;
}

.diag-resume-info {
    display: inline-block;
    margin-left: 3px;
    font-size: .7rem;
    color: var(--sol-muted, #a7b6ca);
    cursor: help;
}

/* ── PLACEMENTS ──────────────────────────────────────────── */
.diag-placements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.diag-placement-card {
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #1c2638;
    border-radius: 10px;
    padding: 18px;
}

.diag-placement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #1c2638;
}

.diag-placement-nom {
    font-size: .92rem;
    font-weight: 700;
    color: #e6ecf3;
}

.diag-placement-badge {
    font-size: .70rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
}

.diag-placement-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.diag-pm {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.diag-pm-label {
    font-size: .60rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sol-muted, #a7b6ca);
}

.diag-pm-val {
    font-size: .84rem;
    font-weight: 700;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    color: #e6ecf3;
}

/* ── ONGLET CAMPAGNES ─────────────────────────────────────────
   Préfixe : camp-
   Même palette que le reste : #151b24 / #1c2638 / #2a3a50
   Monospace sur tous les chiffres.
   ─────────────────────────────────────────────────────────── */

.camp-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.camp-card {
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #1c2638;
    border-radius: 8px;
    overflow: hidden;
}

.camp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #1c2638;
    gap: 12px;
    flex-wrap: wrap;
}

.camp-name {
    font-size: .82rem;
    font-weight: 500;
    color: #e6ecf3;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

.camp-badges {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.camp-badge {
    font-size: .65rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.camp-badge-strat-up {
    background: rgba(69,196,220,.12);
    color: #45C4DC;
    border: 1px solid rgba(69,196,220,.3);
}

.camp-badge-strat-down {
    background: rgba(224,160,64,.12);
    color: #E0A040;
    border: 1px solid rgba(224,160,64,.3);
}

.camp-badge-ok {
    background: rgba(46,201,138,.12);
    color: #2EC98A;
    border: 1px solid rgba(46,201,138,.3);
}

.camp-badge-warn {
    background: rgba(224,86,106,.12);
    color: #ef5a5a;
    border: 1px solid rgba(224,86,106,.3);
}

.camp-badge-neutre {
    background: var(--sol-panel-raised, #16263b);
    color: var(--sol-muted, #a7b6ca);
    border: 1px solid #2a3a50;
}

.camp-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.camp-section {
    padding: 14px 16px;
}

.camp-section-right {
    border-left: 1px solid #1c2638;
}

.camp-section-label {
    font-size: .65rem;
    color: var(--sol-muted, #a7b6ca);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 10px;
}

/* ── Drill-down campagne (en-tête de la vue "Détail campagne") ─── */
.camp-drilldown-header {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #1c2638;
}

.camp-drilldown-back {
    background: transparent;
    border: 1px solid #2a3a50;
    border-radius: 6px;
    color: var(--sol-muted, #a7b6ca);
    font-size: .78rem;
    padding: 6px 12px;
    cursor: pointer;
}

    .camp-drilldown-back:hover {
        border-color: rgba(255,153,0,.5);
        color: #FF9900;
    }

.camp-drilldown-nom {
    font-weight: 700;
    color: #e6ecf3;
    font-size: .85rem;
}

.camp-drilldown-toggle {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.camp-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 4px;
}

.camp-m {
    min-width: 65px;
}

.camp-m-lbl {
    font-size: .65rem;
    color: var(--sol-muted, #a7b6ca);
    display: block;
    margin-bottom: 2px;
}

.camp-m-val {
    font-size: .95rem;
    font-weight: 500;
    color: #e6ecf3;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

.camp-val-vert {
    color: #2EC98A !important;
}

.camp-val-rouge {
    color: #ef5a5a !important;
}

.camp-val-amber {
    color: #E0A040 !important;
}

.camp-val-neutre {
    color: #5a7a9a !important;
}

.camp-budget-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.camp-budget-txt {
    font-size: .7rem;
    color: var(--sol-muted, #a7b6ca);
}

.camp-barre-track {
    height: 4px;
    background: var(--sol-panel-raised, #16263b);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 2px;
}

.camp-barre-fill {
    height: 100%;
    border-radius: 2px;
    transition: width .3s;
}

.camp-barre-rouge {
    background: #ef5a5a;
}

.camp-barre-amber {
    background: #E0A040;
}

.camp-barre-vert {
    background: #2EC98A;
}

.camp-barre-gris {
    background: #3d5070;
}

.camp-placement-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
}

    .camp-placement-table th {
        font-size: .65rem;
        color: var(--sol-muted, #a7b6ca);
        font-weight: 400;
        padding: 3px 0;
        text-align: left;
    }

        .camp-placement-table th:not(:first-child) {
            text-align: right;
        }

    /* Texte principal (#e6ecf3) et non plus le gris secondaire : ce tableau
       porte des chiffres de pilotage — impressions, dépense, ACOS par
       placement — au même titre que les métriques de la carte au-dessus.
       Le gris le faisait passer pour une annexe. */
    .camp-placement-table td {
        font-size: .75rem;
        padding: 5px 0;
        border-top: 1px solid #1c2638;
        color: #e6ecf3;
    }

        .camp-placement-table td:not(:first-child) {
            text-align: right;
        }

.camp-mult-bar {
    height: 12px;
    border-radius: 2px;
}

.camp-mult-actif {
    background: #2EC98A;
}

.camp-mult-zero {
    background: var(--sol-panel-raised, #16263b);
}

.camp-mult-lbl {
    font-size: .65rem;
    color: var(--sol-muted, #a7b6ca);
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

.camp-meta {
    margin-top: 12px;
    font-size: .65rem;
    color: #3d5070;
}

.camp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-top: 1px solid #1c2638;
    background: #0f131a;
    flex-wrap: wrap;
    gap: 8px;
}

.camp-footer-modif {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.camp-footer-modif-lbl {
    font-size: .65rem;
    color: #3d5070;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.camp-footer-modif-val {
    font-size: .72rem;
    color: var(--sol-muted, #a7b6ca);
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

.camp-footer-modif-date {
    color: #3d5070;
    margin-left: 4px;
}

.camp-footer-stats {
    display: flex;
    gap: 16px;
}

.camp-footer-stat {
    font-size: .72rem;
    color: var(--sol-muted, #a7b6ca);
}

    .camp-footer-stat strong {
        font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
        color: #e6ecf3;
        margin-left: 4px;
    }

/* Phase 2 — boutons "N ciblages ›"/"N termes ›" (remplacent l'ancien
   drill-down "Détail campagne", retiré avec l'arrivée de l'Explorer) */
.camp-acts {
    display: flex;
    gap: 7px;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   Breakpoints : 768px tablette / 640px mobile — mêmes seuils que
   Diagnostic.razor.css, pour rester cohérent avec le reste de la
   page au moment où le viewport change.
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .diag-resume-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .diag-placements-grid {
        grid-template-columns: 1fr;
    }

    .camp-body {
        grid-template-columns: 1fr;
    }

    .camp-section-right {
        border-left: none;
        border-top: 1px solid #1c2638;
    }
}

@media (max-width: 640px) {
    .diag-resume-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .diag-resume-item {
        padding: 10px 12px;
        min-width: 0;
    }

    .diag-resume-val {
        font-size: 1rem;
    }
}

/* ============================================================
   POLICE DE L'HABILLAGE — ajout 2026-09-13
   ------------------------------------------------------------
   .diag-page impose 'Space Mono' à toute la page par héritage.
   Le mono aligne parfaitement des colonnes de chiffres, mais il
   est large et lourd sur des libellés, des badges et des boutons :
   c'est ce qui donnait cet aspect "terminal" aux étiquettes.
   La maquette réservait le mono aux VALEURS et passait tout
   l'habillage en sans — c'est exactement ce que fait ce bloc.

   Règle : si l'élément porte un nombre, il reste en mono
   (.diag-td-num, .diag-resume-val, .camp-m-val, .diag-enchere,
   .diag-acos-*, .fiche-kpi-v, .diag-delta… : non listés ici).
   S'il porte du texte d'interface, il passe en sans.

   AUCUNE TAILLE N'EST MODIFIÉE ICI — uniquement font-family.
   ============================================================ */
.diag-tab,
.diag-th,
.diag-filtre,
.diag-recherche,
.diag-vide,
.diag-targeting-nom,
.diag-targeting-meta,
.diag-lien-fiche,
.diag-cascade-badge,
.diag-badge-conflit,
.diag-badge-suspendu,
.diag-badge-candidat-exclusion,
.diag-badge-candidat-recolte,
.diag-badge-exact-non,
.diag-resume-label,
.diag-pm-label,
.diag-placement-nom,
.diag-placement-badge,
.diag-todo-l,
.diag-todo-eur,
.camp-section-label,
.camp-m-lbl,
.camp-badge,
.camp-footer-modif-lbl,
.camp-placement-table th,
.diag-mens-pied,
.diag-mens-plus {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

/* Ligne cliquable : même affordance que les tableaux de l'Explorer. */
.diag-tr-clic {
    cursor: pointer;
}

/* ============================================================
   EXPLORER — GRAIN × VUE (2026-09-13)
   ------------------------------------------------------------
   Deux axes, deux contrôles. À gauche le grain (de quoi on
   parle : campagnes, ciblages, termes), à droite la vue
   (comment on le regarde : les métriques de la période, ou
   l'évolution mois par mois). Les croiser dans un seul jeu
   d'onglets aurait donné six onglets redondants.
   ============================================================ */
.diag-explorer-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Sélecteur de vue : même mécanique que .diag-filtres — un seul
   boîtier, des segments sans bordure, un seul en relief. */
.diag-vues {
    display: inline-flex;
    gap: 2px;
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #1c2638;
    border-radius: 7px;
    padding: 2px;
}

.diag-vue {
    background: transparent;
    border: none;
    border-radius: 5px;
    color: var(--sol-muted, #a7b6ca);
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .70rem;
    letter-spacing: .02em;
    padding: 5px 14px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .diag-vue:hover {
        background: rgba(255,255,255,.04);
        color: #e6ecf3;
    }

.diag-vue-actif {
    background: #232e3d;
    color: #e6ecf3;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* ============================================================
   VUE MENSUELLE — MatriceMensuelle.razor
   ------------------------------------------------------------
   Un tableau de chiffres, sans code couleur : la hiérarchie vient
   de l'alignement, du tri et du filet avant le total, pas d'un
   dégradé de fond. Ce qui porte une couleur en porte une pour une
   raison : l'enchère (ambre), la pastille de match type, la
   sparkline (turquoise).
   ============================================================ */
.diag-mens-barre {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── SÉLECTEUR DE PLAGE DE MOIS ──────────────────────────────
   Deux listes déroulantes de 24 entrées faisaient le travail, mais on
   n'y voyait jamais la PLAGE — seulement ses deux bornes, et il fallait
   dérouler pour se rappeler ce qu'on avait choisi. Le calendrier montre
   l'année entière d'un coup et surligne ce qui est retenu. */
.diag-cal {
    position: relative;
    display: inline-block;
}

.diag-cal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--sol-panel-raised, #16263b);
    border: 1px solid #2a3a50;
    border-radius: 6px;
    color: #e6ecf3;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .74rem;
    padding: 6px 11px;
    cursor: pointer;
    transition: border-color .12s;
}

    .diag-cal-btn:hover {
        border-color: #45C4DC;
    }

.diag-cal-btn-ouvert {
    border-color: #FF9900;
    box-shadow: 0 0 0 2px rgba(255,153,0,.10);
}

.diag-cal-val {
    text-transform: capitalize;
}

.diag-cal-fleche {
    color: var(--sol-muted, #a7b6ca);
}

/* Le nombre de colonnes que la plage va produire — l'information qui
   manquait le plus : « de janvier à août » ne dit pas « 8 colonnes ». */
.diag-cal-compte {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .62rem;
    color: var(--sol-muted, #a7b6ca);
    border-left: 1px solid #2a3a50;
    padding-left: 8px;
}

/* Voile plein écran : ferme le panneau au clic ailleurs, sans JavaScript. */
.diag-cal-voile {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.diag-cal-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 41;
    width: 272px;
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #2a3a50;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0,0,0,.50);
    padding: 12px;
}

.diag-cal-annee {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.diag-cal-annee-val {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .86rem;
    font-weight: 700;
    color: #e6ecf3;
    letter-spacing: .04em;
}

.diag-cal-nav {
    background: transparent;
    border: 1px solid #2a3a50;
    border-radius: 6px;
    color: var(--sol-muted, #a7b6ca);
    font-size: .84rem;
    line-height: 1;
    width: 26px;
    height: 26px;
    cursor: pointer;
    transition: border-color .12s, color .12s;
}

    .diag-cal-nav:hover:not(:disabled) {
        border-color: #45C4DC;
        color: #45C4DC;
    }

    .diag-cal-nav:disabled {
        opacity: .25;
        cursor: default;
    }

.diag-cal-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.diag-cal-mois {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--sol-muted, #a7b6ca);
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .70rem;
    text-transform: capitalize;
    padding: 7px 0;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .diag-cal-mois:hover:not(:disabled) {
        background: var(--sol-panel-raised, #16263b);
        color: #e6ecf3;
    }

/* Intérieur de la plage : une surface, pas une couleur — la plage se lit
   comme un bloc continu entre ses deux bornes. */
.diag-cal-mois-dans {
    background: var(--sol-panel-raised, #16263b);
    color: #e6ecf3;
}

/* Les deux bornes portent seules l'accent. */
.diag-cal-mois-borne {
    background: #FF9900;
    color: #151b24;
    font-weight: 700;
}

/* Première borne posée, seconde en attente. */
.diag-cal-mois-attente {
    border-color: #FF9900;
    color: #FF9900;
}

.diag-cal-mois-hors {
    opacity: .22;
    cursor: default;
}

.diag-cal-raccourcis {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #1c2638;
}

.diag-cal-raccourci {
    background: transparent;
    border: 1px solid #2a3a50;
    border-radius: 20px;
    color: var(--sol-muted, #a7b6ca);
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .63rem;
    padding: 3px 10px;
    cursor: pointer;
    transition: border-color .12s, color .12s;
}

    .diag-cal-raccourci:hover {
        border-color: #45C4DC;
        color: #45C4DC;
    }

.diag-cal-raccourci-actif {
    border-color: #FF9900;
    color: #FF9900;
}

.diag-cal-aide {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .62rem;
    color: var(--sol-muted, #a7b6ca);
    margin-top: 8px;
    text-align: center;
}

.diag-mens-recherche {
    max-width: 220px;
}

/* Colonne d'identité figée : avec huit mois, le tableau défile
   horizontalement et on perdait le nom de la ligne qu'on lisait. */
.diag-mens-table .diag-mens-nom {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 230px;
    background: var(--sol-panel, #0e1b2d);
}

.diag-mens-table thead .diag-mens-nom {
    z-index: 3;
    background: var(--sol-panel-raised, #16263b);
}

.diag-mens-table .diag-tr:hover .diag-mens-nom {
    background: var(--sol-panel-raised, #16263b);
}

/* Un mois sans aucune donnée : l'entité n'existait pas encore, ou ne
   diffusait plus. Le tiret s'efface pour que l'œil ne le compte pas
   comme une valeur faible. */
.diag-mens-absent {
    color: #2a3a50;
}

/* Total séparé des mois par un filet — sinon il se lit comme un mois
   de plus, le plus fort de tous. */
.diag-mens-total {
    border-left: 1px solid #2a3a50;
    font-weight: 700;
    color: #e6ecf3;
}

.diag-mens-spark {
    width: 90px;
}

.diag-mens-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: .66rem;
    color: var(--sol-muted, #a7b6ca);
    padding: 8px 2px 0;
}

.diag-mens-plus {
    background: transparent;
    border: 1px solid #2a3a50;
    border-radius: 6px;
    color: var(--sol-muted, #a7b6ca);
    font-size: .66rem;
    padding: 4px 12px;
    cursor: pointer;
    transition: border-color .12s, color .12s;
}

    .diag-mens-plus:hover {
        border-color: #45C4DC;
        color: #45C4DC;
    }

/* Rattachement d'une ligne : la campagne au grain Ciblage, le ciblage
   d'origine au grain Terme. Sans lui, une liste de termes était une liste
   de mots sans propriétaire — on ne savait pas lequel de ses ciblages les
   payait, et c'est justement la question. */
.diag-mens-rattache {
    color: var(--sol-muted, #a7b6ca);
}

/* Indique que la ligne descend d'un cran, sans en faire un bouton : c'est
   toute la ligne qui est cliquable, pas cette étiquette. */
.diag-mens-descente {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .66rem;
    color: var(--sol-muted, #a7b6ca);
}

.diag-mens-table .diag-tr:hover .diag-mens-descente {
    color: #45C4DC;
}

/* Second cran du fil d'Ariane (Campagne › Ciblage) : la campagne redevient
   cliquable pour remonter, le ciblage reste le niveau courant. */
.camp-drilldown-lien {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--sol-muted, #a7b6ca);
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .78rem;
    cursor: pointer;
}

    .camp-drilldown-lien:hover {
        color: #45C4DC;
        text-decoration: underline;
    }

.camp-drilldown-sep {
    color: #2a3a50;
}

/* ============================================================
   ONGLET JOURNAL — cartes de période par ciblage suivi
   ------------------------------------------------------------
   Une carte de ciblage = un axe du temps (un repère par période,
   création ou changement d'enchère) suivi d'une rangée de cartes
   de période défilable horizontalement — même grid-template-columns
   sur les deux rangées pour qu'elles restent alignées. Inspiré de
   BidLab_Analyse_Encheres_KDP.html (maquette fournie par
   l'utilisateur), mais avec la palette de l'app plutôt que les
   couleurs brutes de la maquette, et sans score/tag qualitatif ni
   texte généré — décision explicite de garder les cartes purement
   factuelles (chiffres + deltas), cohérent avec le reste du moteur
   (aucun jugement automatisé en dehors des règles SQL/Tbl_Parametres).

   Migré vers les tokens --sol-* du thème "compact black / Amazon
   orange" (wwwroot/css/solyvr-theme.css) le lendemain du premier jet
   — même schéma var(--sol-X, fallback) déjà utilisé partout ailleurs
   dans ce fichier pour panel/muted/font, étendu ici à --sol-line/
   --sol-text/--sol-accent (jamais utilisés avec fallback ailleurs :
   ces trois-là ne sont normalement surchargés que depuis
   solyvr-theme.css lui-même — choix délibéré de les garder
   autonomes ici plutôt que d'ajouter ces classes aux listes :is()
   du thème). Le cyan d'origine de l'axe du temps (#45C4DC) est
   devenu --sol-accent (même orange que l'enchère) : le nouveau thème
   est mono-accent, un cyan orphelin n'avait plus sa place.
   ============================================================ */

.diag-journal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.diag-journal-select-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .diag-journal-select-wrap label {
        font-size: .72rem;
        color: var(--sol-muted, #a7b6ca);
    }

/* Propre au Journal, pas .diag-select : cette classe vit dans Diagnostic.razor.css,
   scopée (isolation CSS Blazor) au balisage écrit dans Diagnostic.razor lui-même —
   elle ne s'appliquerait pas ici, JournalEncheres.razor est un fichier différent
   (même piège déjà rencontré pour .diag-select dans MatriceMensuelle). */
.diag-journal-select {
    background: var(--sol-panel-raised, #16263b);
    border: 1px solid var(--sol-line, #2a3a50);
    border-radius: 6px;
    color: var(--sol-text, #e6ecf3);
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .80rem;
    padding: 6px 10px;
    min-width: 260px;
    max-width: 420px;
}

.diag-journal-carte-ciblage {
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid var(--sol-line, #2a3a50);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.diag-journal-entete {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    cursor: pointer;
}

.diag-journal-scroll {
    overflow-x: auto;
    padding-bottom: 4px;
}

/* Axe du temps : une ligne horizontale continue derrière les repères, un peu
   comme un fil sur lequel les événements sont accrochés. */
.diag-journal-axe {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    gap: 12px;
    min-width: max-content;
    margin-bottom: 4px;
}

    .diag-journal-axe:before {
        content: '';
        position: absolute;
        left: 6%;
        right: 6%;
        top: 28px;
        height: 1px;
        background: linear-gradient(90deg, var(--sol-line, #2a3a50), var(--sol-accent, #FF9900), var(--sol-line, #2a3a50));
        opacity: .8;
    }

.diag-journal-repere {
    position: relative;
    text-align: center;
    padding-top: 40px;
}

    .diag-journal-repere:after {
        content: '';
        position: absolute;
        left: 50%;
        top: 20px;
        width: 14px;
        height: 14px;
        margin-left: -7px;
        border: 3px solid var(--sol-panel, #0e1b2d);
        border-radius: 50%;
        background: var(--sol-accent, #FF9900);
        box-shadow: 0 0 0 2px var(--sol-line, #2a3a50);
    }

.diag-journal-repere-label {
    display: block;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sol-muted, #a7b6ca);
}

.diag-journal-repere-enchere {
    display: block;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-weight: 700;
    color: var(--sol-text, #e6ecf3);
    margin-top: 2px;
}

.diag-journal-phases {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    gap: 12px;
}

.diag-journal-phase {
    background: var(--sol-bg, #0e1520);
    border: 1px solid var(--sol-line, #2a3a50);
    border-radius: 10px;
    padding: 13px;
}

.diag-journal-phase-haut {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 10px;
}

.diag-journal-phase-enchere {
    font-size: 1.55rem;
    font-weight: 800;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    color: var(--sol-accent, #FF9900);
}

.diag-journal-phase-dates {
    font-size: .68rem;
    color: var(--sol-muted, #a7b6ca);
}

.diag-journal-phase-delta-enchere {
    margin-left: auto;
    font-size: .66rem;
    background: var(--sol-panel-raised, #16263b);
    color: var(--sol-muted, #a7b6ca);
    border-radius: 6px;
    padding: 2px 6px;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

.diag-journal-metriques {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 6px;
    font-size: .72rem;
}

    .diag-journal-metriques label {
        color: var(--sol-muted, #a7b6ca);
    }

    .diag-journal-metriques b {
        display: flex;
        align-items: baseline;
        justify-content: flex-end;
        gap: 4px;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

        /* .diag-delta est display:block partout ailleurs (le delta se place sous
           la valeur dans un tableau dense) — ici, comme dans la maquette
           (`<b>${valeur} ${delta}</b>`), valeur et delta restent sur une seule
           ligne : override local, pas touché à la règle globale. */
        .diag-journal-metriques b .diag-delta {
            display: inline;
            margin-top: 0;
        }

/* Sépare le groupe "portée" (Impressions/Clics/CTR) du groupe "conversion"
   (CPC/Dépenses/Ventes/Commandes/ACOS) — même repère visuel que le .divider
   de la maquette, sur les deux colonnes de la grille. */
.diag-journal-metriques-separateur {
    grid-column: 1 / -1;
    border-top: 1px solid var(--sol-line, #2a3a50);
    margin: 2px 0;
}

/* ============================================================
   COMPARAISON À RECUL IDENTIQUE
   ------------------------------------------------------------
   Remplace le bloc Impact (avant/après le seul dernier changement) —
   celui-ci compare TOUTES les enchères pratiquées sur le ciblage,
   chacune tronquée à ReculCommun jours (ses premiers jours réels),
   pour une comparaison à maturité égale. Inspiré de
   maquette_recul_identique_v4.html, mêmes tokens --sol-* que le
   reste du Journal, pas les couleurs brutes de la maquette.
   ============================================================ */
.diag-recul {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--sol-line, #2a3a50);
}

.diag-recul-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.diag-recul-titre {
    font-weight: 700;
    color: var(--sol-text, #e6ecf3);
    font-size: .85rem;
}

.diag-recul-sous-titre {
    font-size: .76rem;
    color: var(--sol-muted, #a7b6ca);
    margin-top: 3px;
}

.diag-recul-commun {
    background: rgba(255, 153, 0, .10);
    border: 1px solid rgba(255, 153, 0, .35);
    border-radius: 10px;
    padding: 8px 16px;
    text-align: center;
    white-space: nowrap;
}

.diag-recul-commun-label {
    display: block;
    font-size: .70rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sol-muted, #a7b6ca);
    font-weight: 700;
}

.diag-recul-commun-valeur {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--sol-accent, #FF9900);
    margin-top: 2px;
}

.diag-recul-explication {
    background: var(--sol-bg, #0e1520);
    border: 1px solid var(--sol-line, #2a3a50);
    border-radius: 10px;
    padding: 11px 15px;
    color: var(--sol-muted, #a7b6ca);
    font-size: .78rem;
    line-height: 1.5;
    margin-bottom: 16px;
}

.diag-recul-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.diag-recul-carte {
    background: var(--sol-bg, #0e1520);
    border: 1px solid var(--sol-line, #2a3a50);
    border-radius: 12px;
    padding: 15px 17px;
}

.diag-recul-carte-haut {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.diag-recul-carte-actuelle {
    border-color: var(--sol-accent, #FF9900);
}

.diag-recul-tag {
    display: inline-block;
    background: rgba(255, 153, 0, .16);
    color: var(--sol-accent, #FF9900);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: .70rem;
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 auto;
}

.diag-recul-carte-enchere {
    font-size: 1.4rem;
    font-weight: 800;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    color: var(--sol-accent, #FF9900);
}

.diag-recul-carte-dates {
    font-size: .78rem;
    color: var(--sol-muted, #a7b6ca);
    margin-top: 4px;
}

.diag-recul-incomplet {
    background: rgba(224, 160, 64, .10);
    border: 1px solid rgba(224, 160, 64, .35);
    border-radius: 8px;
    padding: 7px 10px;
    color: var(--amber, #e0a040);
    font-size: .72rem;
    line-height: 1.4;
    margin-top: 10px;
}

.diag-recul-metriques {
    margin-top: 12px;
}

.diag-recul-mrow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--sol-line, #2a3a50);
    font-size: .80rem;
}

    .diag-recul-mrow:last-child {
        border-bottom: 0;
    }

    .diag-recul-mrow span {
        color: var(--sol-muted, #a7b6ca);
    }

    .diag-recul-mrow b {
        color: var(--sol-text, #e6ecf3);
        font-variant-numeric: tabular-nums;
    }

.diag-recul-note {
    margin-top: 16px;
    border: 1px dashed var(--sol-line, #2a3a50);
    border-radius: 10px;
    padding: 11px 15px;
    color: var(--sol-muted, #a7b6ca);
    font-size: .70rem;
    line-height: 1.5;
}

/* Bouton étoile "suivre dans le Journal" — CiblagesTableauView + FicheCiblage. */
.diag-suivi-btn {
    background: transparent;
    border: none;
    color: var(--sol-muted, #a7b6ca);
    font-size: .95rem;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
    transition: color .12s, transform .12s;
}

    .diag-suivi-btn:hover {
        color: var(--sol-accent, #FF9900);
        transform: scale(1.15);
    }

.diag-suivi-actif {
    color: var(--sol-accent, #FF9900);
}

/* ── GRAPHIQUE DE TENDANCE — Explorer (GraphiqueTendance.razor) ─────────
   Tuiles « façon Amazon Ads » : un liseré supérieur de la couleur de la
   série marque les 2 métriques tracées (couleur posée en style inline par
   le composant). Texte dans les tokens de texte, jamais la couleur de série. */
.diag-tendance {
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid var(--sol-line, #22304a);
    border-radius: 10px;
    padding: 12px 14px;
}

.diag-tendance-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-bottom: 10px;
}

.diag-tendance-titre {
    font-weight: 700;
    color: var(--sol-text, #e8eef6);
}

.diag-tendance-aide {
    font-size: .75rem;
    color: var(--sol-muted, #a7b6ca);
}

.diag-tendance-masquer {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--sol-muted, #a7b6ca);
    font-size: .78rem;
    cursor: pointer;
}

    .diag-tendance-masquer:hover {
        color: var(--sol-accent, #FF9900);
    }

.diag-tendance-tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.diag-tendance-tuile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    background: var(--sol-panel-raised, #13233a);
    border: 1px solid var(--sol-line, #22304a);
    border-top: 3px solid transparent;
    border-radius: 8px;
    padding: 8px 10px;
    min-height: 44px;
    cursor: pointer;
    transition: border-color .12s;
}

    .diag-tendance-tuile:hover {
        border-color: var(--sol-muted, #a7b6ca);
    }

    .diag-tendance-tuile:focus-visible {
        outline: 2px solid var(--sol-accent, #FF9900);
        outline-offset: 2px;
    }

.diag-tendance-tuile-libelle {
    font-size: .75rem;
    font-weight: 600;
    color: var(--sol-muted, #a7b6ca);
}

.diag-tendance-tuile-actif .diag-tendance-tuile-libelle {
    color: var(--sol-text, #e8eef6);
}

.diag-tendance-tuile-valeur {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sol-text, #e8eef6);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.diag-tendance-tuile-nature {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sol-muted, #a7b6ca);
}

.diag-tendance-vide,
.diag-tendance-chargement {
    padding: 24px 0;
    text-align: center;
    color: var(--sol-muted, #a7b6ca);
    font-size: .85rem;
}

/* Titres de groupe au-dessus des cartes de résumé (Vue Générale, 2026-10-09) :
   01 période et ciblages, 02 ventes du livre (KDP), 03 performance pub (Amazon Ads).
   Seul le regroupement change : taille et police des cartes sont inchangées. */
.diag-resume-groupe {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 10px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sol-muted, #b0b0b6);
}
.diag-resume-groupe::after { content: ""; flex: 1; height: 1px; background: var(--sol-line, #333336); }
.diag-resume-groupe-kdp { color: var(--dash-organique, #65ABE1); }
.diag-resume-groupe-ads { color: var(--dash-orange, #F1AF3D); }