﻿/*
 * Badge de Santé du périmètre — partagé entre TableauBordClient (fieldset "Santé du périmètre") et
 * Perimetre (même fieldset, voir Views/Catalogue/Perimetre/Index.cshtml), au lieu d'être redéclaré
 * dans chaque vue. Jamais couleur seule (icône "dot" + libellé texte).
 */
.sante-perimetre {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sante-label {
    font-weight: 600;
    color: #2d3748;
}

.sante-separateur {
    color: #ccc;
    margin: 0 4px;
}

.sante-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

    .sante-badge .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
    }

/* Couleurs sémantiques (voir 16-Design-System §3) */
.sante-succes {
    background-color: #e6f6ec;
    color: #1e7e34;
}

    .sante-succes .dot {
        background-color: #27ae60;
    }

.sante-attention {
    background-color: #fdf1e0;
    color: #b06400;
}

    .sante-attention .dot {
        background-color: #e07b00;
    }

.sante-danger {
    background-color: #fbe6e4;
    color: #a4291f;
}

    .sante-danger .dot {
        background-color: #c0392b;
    }

.sante-neutre {
    background-color: #e8eef5;
    color: #2c4e78;
}

    .sante-neutre .dot {
        background-color: #4a6fa5;
    }

/* Périmètres Client et PO : synthèse légère, indicateurs accessibles. */
.pm-light .pm-col-jauge { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; border:0; margin:16px 0 8px; text-align:center; }
.pm-light .pm-posture-card { flex:1 1 150px; max-width:240px; text-align:center; }
.pm-light .pm-jauge-wrapper { width:96px; height:96px; margin:8px auto; }
.pm-light .pm-jauge-valeur { font-size:20px; }
.pm-light .pm-jauge-legende { color:#596779; font-size:12px; margin:8px 0; }
.pm-posture-ring { position:relative; display:flex; align-items:center; justify-content:center; width:96px; height:96px; border-radius:50%; background:#eef1f4; margin:8px auto; }
.pm-posture-ring::before { content:""; position:absolute; inset:9px; background:white; border-radius:50%; }
.pm-posture-ring span { position:relative; font-size:20px; font-weight:600; }
.pm-light .pm-tableau { border:0; font-size:13px; }
.pm-light .pm-tableau th { color:#596779; font-weight:600; background:#f8fafc; border:0; padding:10px 12px; }
.pm-light .pm-tableau td { border:0; border-bottom:1px solid #f0f3f6; padding:9px 12px; vertical-align:middle; }
.pm-light .sante-badge { font-size:12px; padding:4px 10px; font-weight:500; max-width:100%; white-space:normal; }
.pm-light .pm-produit-header { cursor:pointer; background:#f8fafc; }
.pm-light .pm-produit-header:hover { background:#f0f4f8; }
.pm-light .pm-chevron { display:inline-block; margin-right:8px; transition:transform .15s; }
.pm-light .pm-replie .pm-chevron { transform:rotate(-90deg); }
.pm-light .pm-module-cliquable { cursor:pointer; }
.pm-light .pm-module-cliquable:hover .sante-badge { text-decoration:underline; }
.pm-light .pm-compteur-modules, .pm-aide { color:#687789; font-size:12px; }
.pm-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.pm-toolbar .ia-search-round { width:min(100%,360px); }
@media (max-width:575px) { .pm-light .pm-col-jauge { gap:8px; } .pm-light .pm-posture-card { flex:1 1 90px; } .pm-light .sante-perimetre { gap:6px; } }

/* Les onglets utilisent les classes natives du composant CERGI. */
.pm-produits-component .nav-tabs { flex-wrap:wrap; }
.pm-produits-component .tab-pane { min-height:90px; }

.pm-demande-cliquable { cursor:pointer; }
.pm-demande-cliquable:hover, .pm-demande-cliquable:focus { background:#f0f5fa; outline:2px solid #b9cee1; outline-offset:-2px; }
