/* Composant unique d'affichage des scores de candidature (lot 17).
   Cas 1 / Cas 2, modes compact (listes) et détaillé (fiches).
   Sémantique de score : vert >=80, bleu 60-79, orange 40-59, rouge <40.
   Présélection toujours en violet, pour ne jamais confondre les deux indicateurs. */
.score-inds {
  --si-green: #00b866; --si-blue: #0073ea; --si-orange: #f5a623; --si-red: #e2445c;
  --si-grey: #9aa0b0; --si-violet: #8a56d6;
  --si-track: #e7e9f0; --si-panel: #ffffff; --si-ink: #1a1d26; --si-soft: #5a6072; --si-faint: #8b90a0;
}
/* Couleur portée par la classe de seuil de chaque element */
.si-green  { --si-c: var(--si-green); }
.si-blue   { --si-c: var(--si-blue); }
.si-orange { --si-c: var(--si-orange); }
.si-red    { --si-c: var(--si-red); }
.si-na     { --si-c: var(--si-grey); }

/* ---------------- Jauge circulaire ---------------- */
.si-gauge {
  --v: 0; width: 46px; height: 46px; border-radius: 50%; flex: none; position: relative;
  display: grid; place-items: center;
  background: conic-gradient(var(--si-c, var(--si-blue)) calc(var(--v) * 1%), var(--si-track) 0);
}
.si-gauge::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--si-panel); }
.si-gauge b { position: relative; font-weight: 720; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--si-ink); }
.si-gauge b i { font-style: normal; font-size: 9px; color: var(--si-faint); font-weight: 600; }
.si-gauge--md { width: 52px; height: 52px; }
.si-gauge--md b { font-size: 15px; }
.si-gauge--lg { width: 74px; height: 74px; }
.si-gauge--lg::before { inset: 6px; }
.si-gauge--lg b { font-size: 21px; }
.si-gauge--lg b i { font-size: 12px; }
.si-presel { --si-c: var(--si-violet); }
.si-presel::before { background: var(--si-panel); }
.si-empty { background: var(--si-track); }
.si-empty b { color: var(--si-faint); }

/* ---------------- Compact (listes) ---------------- */
.score-inds--compact { display: flex; align-items: center; gap: 10px; }
.si-kpi { display: flex; align-items: center; gap: 9px; }
.si-lab { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--si-soft);
          font-weight: 600; max-width: 82px; line-height: 1.25; }
.si-lab--presel { color: var(--si-violet); }
.si-sep { width: 1px; align-self: stretch; min-height: 40px; background: var(--si-track); margin: 2px 0; }
/* Contexte dense (cartes pipeline, cellules etroites) : gauges seules, pas de libelles. */
.score-inds--nolabels .si-lab { display: none; }
.score-inds--nolabels .si-sep { min-height: 28px; }
.score-inds--nolabels .si-gauge { width: 38px; height: 38px; }
.score-inds--nolabels .si-gauge b { font-size: 11px; }
.score-inds--nolabels.score-inds--compact { gap: 7px; }

/* Non calculable (compact) */
.si-na { display: inline-flex; align-items: center; gap: 9px; }
.si-na-dot { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
             border: 2px solid color-mix(in srgb, var(--si-faint) 55%, var(--si-track));
             background: color-mix(in srgb, var(--si-track) 60%, transparent);
             color: var(--si-soft); font-weight: 700; }
.si-na-lab { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--si-soft); font-weight: 600; }

/* ---------------- Détaillé (fiches) ---------------- */
.si-card { border: 1px solid var(--si-track); border-radius: 12px; overflow: hidden; background: var(--si-panel); }
.si-head { display: flex; align-items: center; gap: 16px; padding: 16px; }
.si-meta { min-width: 0; }
.si-ttl { font-weight: 680; font-size: 15px; color: var(--si-ink); }
.si-sub { color: var(--si-faint); font-size: 12.5px; margin-top: 2px; }
.si-conf { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; font-weight: 600;
           padding: 3px 9px; border-radius: 999px; border: 1px solid var(--si-track); color: var(--si-soft); }
.si-conf .d { width: 7px; height: 7px; border-radius: 50%; }
.si-conf--high .d { background: var(--si-green); }
.si-conf--medium .d { background: var(--si-orange); }
.si-conf--low .d { background: var(--si-grey); }

.si-crit { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 11px; }
.si-crit-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.si-crit-row .nm { font-size: 13px; color: var(--si-soft); }
.si-crit-row .pt { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--si-c, var(--si-ink)); }
.si-crit-row .bar { grid-column: 1 / -1; height: 7px; border-radius: 999px; overflow: hidden;
                    background: color-mix(in srgb, var(--si-c, var(--si-grey)) 20%, var(--si-track)); }
.si-crit-row .bar > i { display: block; height: 100%; width: calc(var(--v, 0) * 1%); border-radius: 999px;
                        background: var(--si-c, var(--si-blue)); }
.si-crit-row.off .nm { color: var(--si-faint); }
.si-crit-row.off .pt { color: var(--si-faint); font-weight: 550; }
.si-crit-row .note { grid-column: 1 / -1; font-size: 11.5px; color: var(--si-faint); }

.si-info { border-top: 1px dashed var(--si-track); margin: 0 16px; padding: 12px 0 15px; }
.si-info-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--si-faint); font-weight: 600; margin-bottom: 9px; }
.si-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.si-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; padding: 4px 10px; border-radius: 8px;
           background: color-mix(in srgb, var(--si-track) 55%, transparent); color: var(--si-soft); }
.si-chip b { font-weight: 650; color: var(--si-ink); font-variant-numeric: tabular-nums; }

.si-presel-block { border-top: 1px solid var(--si-track); background: color-mix(in srgb, var(--si-violet) 8%, var(--si-panel));
                   display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.si-presel-block .m .t { font-weight: 660; font-size: 14px; color: var(--si-ink); }
.si-presel-block .m .s { color: var(--si-soft); font-size: 12.5px; margin-top: 2px; }

.si-na--block { padding: 16px; gap: 13px; }
.si-na--block .si-na-dot { width: 46px; height: 46px; font-size: 18px; }
.si-na-txt { display: flex; flex-direction: column; }
.si-na-t { font-weight: 640; color: var(--si-ink); text-transform: none; letter-spacing: 0; font-size: 14px; }
.si-na-s { color: var(--si-faint); font-size: 12.5px; margin-top: 1px; }

/* ---------------- Thème sombre ---------------- */
@media (prefers-color-scheme: dark) {
  .score-inds { --si-track: #262a35; --si-panel: #171a22; --si-ink: #eef0f6; --si-soft: #a3a9ba; --si-faint: #6b7180; --si-violet: #a678e6; }
}
:root[data-theme="dark"] .score-inds { --si-track: #262a35; --si-panel: #171a22; --si-ink: #eef0f6; --si-soft: #a3a9ba; --si-faint: #6b7180; --si-violet: #a678e6; }
:root[data-theme="light"] .score-inds { --si-track: #e7e9f0; --si-panel: #ffffff; --si-ink: #1a1d26; --si-soft: #5a6072; --si-faint: #8b90a0; --si-violet: #8a56d6; }

/* ============================================================================
   MODE « CARTE » (liste des candidatures) : cercles agrandis + libelles courts
   sous le cercle + ventilation des 4 criteres en mini-barres.
   La ventilation passe automatiquement SOUS les cercles quand le conteneur est
   trop etroit (flex-wrap + min-width), pas d'ecrasement des barres.
   ============================================================================ */
.score-inds--card { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.si-card-gauges { display: flex; gap: 16px; }
.si-cg { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.si-gauge--card { width: 62px; height: 62px; }
.si-gauge--card::before { inset: 5px; }
.si-gauge--card b { font-size: 17px; }
.si-gauge--card b i { font-size: 10px; }
.si-cg-lab { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--si-soft); font-weight: 600; white-space: nowrap; }
.si-na-gauge { --si-c: var(--si-grey); }

.si-card-vent { display: grid; gap: 5px; flex: 1 1 200px; min-width: 200px; }
/* 5.2 : la colonne du libelle passe de 82px FIXE (troncature de « Disponibilite »,
   « Localisation ») a max-content : elle prend la largeur du plus long libelle, donc
   AUCUNE troncature, et reste adaptative en largeur reduite (pas de valeur px fragile).
   Police reduite (« rendre petite » cote client). L'ellipsis n'est plus necessaire. */
.si-cv-row { display: grid; grid-template-columns: max-content 36px 1fr; align-items: center;
  gap: 8px; font-size: 10.5px; }
.si-cv-row .nm { color: var(--si-soft); white-space: nowrap; }
.si-cv-row .pt { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--si-ink); text-align: right; }
.si-cv-row .bar { height: 6px; border-radius: 999px; background: var(--si-track); overflow: hidden; }
.si-cv-row .bar > i { display: block; height: 100%; border-radius: 999px; background: var(--si-c, var(--si-blue)); }
.si-cv-row.off .nm, .si-cv-row.off .pt { color: var(--si-faint); }

/* Fiabilite du score en mode carte : mention discrete sous le cercle de compatibilite. */
.si-cg-conf { font-size: 9.5px; font-weight: 600; line-height: 1.2; text-align: center;
  max-width: 96px; margin-top: 1px; color: var(--si-soft); }
.si-cg-conf.si-conf--low    { color: var(--si-grey); }
.si-cg-conf.si-conf--medium { color: var(--si-orange); }
.si-cg-conf.si-conf--high   { color: var(--si-green); }