/* Matrice attractivité x faisabilité (lot 2b).
   Feuille propre au module : elle s'ajoute et se retire avec lui, sans toucher à app.css.
   Variables reprises du thème de l'app (--navy, --cyan, --muted, --bg, --border...). */

.mx-wrap { display: flex; flex-direction: column; gap: 16px; }

.mx-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.mx-entete h2 { margin: 0; }
.mx-compteur {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; color: var(--muted);
}
.mx-intro { margin: 0; font-size: 13px; color: var(--muted); max-width: 70ch; }

/* ── Plan ── */
.mx-cadre { display: flex; gap: 10px; align-items: stretch; }
.mx-axe-y {
  flex: 0 0 20px; display: flex; align-items: center; justify-content: center;
}
.mx-axe-y span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.mx-axe-x {
  margin-left: 30px; text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}

.mx-points { position: absolute; inset: 0; }

.mx-plan {
  /* Plafonnée : sans max-height, le ratio donne près de 730 px sur un écran large et les points
     du bas sortent de la zone visible. */
  position: relative; flex: 1; aspect-ratio: 4 / 3; min-height: 300px; max-height: 440px;
  border: 1px solid var(--border, #d8dee8); border-radius: 10px;
  background:
    linear-gradient(to right, transparent calc(50% - 1px), var(--border, #d8dee8) 50%, transparent calc(50% + 1px)),
    linear-gradient(to top, transparent calc(50% - 1px), var(--border, #d8dee8) 50%, transparent calc(50% + 1px));
  overflow: visible;
}

/* Libellés de quadrants, en fond */
.mx-quad {
  position: absolute; font-size: 11px; line-height: 1.3; color: var(--muted);
  opacity: 0.75; pointer-events: none; max-width: 44%;
}
.mx-quad b { display: block; font-size: 12px; color: var(--body, var(--navy)); }
.mx-q-bloque { top: 10px; left: 12px; }
.mx-q-prio { top: 10px; right: 12px; text-align: right; }
.mx-q-ecarter { bottom: 10px; left: 12px; }
.mx-q-volume { bottom: 10px; right: 12px; text-align: right; }

/* ── Points ── */
.mx-pt {
  position: absolute; transform: translate(-50%, 50%);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 6px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border, #d8dee8); background: var(--card, #fff);
  font-family: inherit; font-size: 11.5px; color: var(--body, var(--navy));
  max-width: 170px; box-shadow: 0 1px 3px rgba(15, 30, 51, 0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.mx-pt::before {
  content: ''; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--muted);
}
.mx-pt:hover, .mx-pt:focus-visible {
  transform: translate(-50%, 50%) scale(1.06);
  box-shadow: 0 3px 10px rgba(15, 30, 51, 0.2); z-index: 5; outline: none;
}
.mx-pt:focus-visible { outline: 2px solid var(--cyan, #00CCF7); outline-offset: 2px; }
.mx-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-lbl em { font-style: normal; color: var(--muted); }

.mx-prio::before { background: #2F6B52; }
.mx-bloque::before { background: #A9762B; }
.mx-volume::before { background: #0A7EA4; }
.mx-ecarter::before { background: #94a3b8; }

/* Un plafond appliqué se voit sur le point lui-même, pas seulement dans l'infobulle */
.mx-plafonne { border-style: dashed; border-color: #9E3739; }

/* ── Cibles non plaçables ── */
.mx-hors-plan {
  border: 1px dashed var(--border, #d8dee8); border-radius: 10px; padding: 14px 16px;
  background: var(--bg-soft, rgba(148, 163, 184, 0.08));
}
.mx-hp-titre { margin: 0 0 4px; font-size: 14px; }
.mx-hp-intro { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); max-width: 70ch; }
.mx-hp-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mx-hp-item {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  padding: 7px 11px; border-radius: 8px; border: 1px solid var(--border, #d8dee8);
  background: var(--card, #fff); font-family: inherit;
}
.mx-hp-item:hover { border-color: var(--cyan, #00CCF7); }
.mx-hp-nom { font-size: 12.5px; color: var(--body, var(--navy)); }
.mx-hp-manque { font-size: 11px; color: var(--muted); }

@media (max-width: 720px) {
  .mx-plan { aspect-ratio: 1 / 1; min-height: 280px; }
  .mx-pt { max-width: 120px; font-size: 11px; }
  .mx-quad { font-size: 10px; }
}