/* ═══════════════════════════════════════════════════════════════════════════
   UCDV — Page « Analyse » (tableau croisé libre)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Visibilité : la page Analyse remplace la scène A3 et les champs du rapport */
.an-page { display: none; }
body[data-view="analyse"] .an-page { display: grid; }
body[data-view="analyse"] .stage { display: none; }
body[data-view="analyse"] .app-bar-controls > .field,
body[data-view="analyse"] #btn-generer { display: none; }
body[data-view="analyse"] .app-bar-controls { justify-content: flex-end; }

.an-page {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  max-width: 1720px;
  margin: 0 auto;
  padding: 18px 20px 40px;
  align-items: start;
}

/* ─── Panneau de contrôle ───────────────────────────────────────────────── */
.an-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.an-box {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.an-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--ink-500);
}
.an-link {
  border: 0;
  background: none;
  color: var(--green-700);
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
}
.an-link:hover { text-decoration: underline; }

.an-vues { display: flex; flex-direction: column; gap: 2px; }
.an-vue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  border: 0;
  background: none;
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 12.5px;
  color: var(--ink-800);
  cursor: pointer;
}
.an-vue:hover { background: var(--green-50); color: var(--green-900); }
.an-vues-sep {
  margin: 6px 0 2px;
  padding-top: 6px;
  border-top: 1px solid var(--ink-100);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ink-400);
}
.an-vue-x {
  border: 0;
  background: none;
  color: var(--ink-400);
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
}
.an-vue-x:hover { color: var(--red-600); }

.an-segs { display: flex; flex-wrap: wrap; gap: 4px; }
.an-seg {
  border: 1px solid var(--ink-200);
  background: var(--paper);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-700);
}
.an-seg:hover { border-color: var(--ink-400); }
.an-seg.on { background: var(--green-700); border-color: var(--green-700); color: #fff; }

.an-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.an-dates label, .an-sel {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-500);
  min-width: 0;
}
.an-dates input, .an-sel select {
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink-900);
  border: 1px solid var(--ink-200);
  border-radius: 5px;
  padding: 5px 6px;
  background: var(--paper);
  min-width: 0;
}
.an-dates input:focus, .an-sel select:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px var(--green-50); }
.an-sel-row { display: flex; align-items: flex-end; gap: 6px; }
.an-sel-row .an-sel { flex: 1; }
.an-swap {
  border: 1px solid var(--ink-200);
  background: var(--paper);
  border-radius: 5px;
  height: 30px;
  width: 32px;
  font-size: 15px;
  color: var(--ink-500);
}
.an-swap:hover { border-color: var(--green-600); color: var(--green-700); }

.an-met-groupe { display: flex; flex-direction: column; gap: 1px; }
.an-met-groupe + .an-met-groupe { margin-top: 6px; }
.an-met-titre {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-400);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 2px;
}
.an-met {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-800);
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
}
.an-met:hover { background: var(--ink-50); }
.an-met.on { color: var(--green-900); font-weight: 600; }
.an-met input { accent-color: var(--green-700); margin: 0; }
.an-met i { font-style: normal; font-size: 10.5px; color: var(--ink-400); margin-left: auto; font-weight: 500; }

.an-f { display: flex; flex-direction: column; gap: 4px; }
.an-f-l { font-size: 10.5px; font-weight: 600; color: var(--ink-500); }
.an-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.an-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--ink-200);
  background: var(--paper);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11.5px;
  color: var(--ink-400);
}
.an-chip i { width: 8px; height: 8px; border-radius: 50%; opacity: .35; }
.an-chip.on { background: var(--green-50); border-color: var(--green-600); color: var(--green-900); font-weight: 600; }
.an-chip.on i { opacity: 1; }
.an-chip-all { border-style: dashed; color: var(--ink-500); }

/* ─── Zone principale ───────────────────────────────────────────────────── */
.an-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.an-card {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.an-card[hidden] { display: none; }
.an-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-left: 4px solid var(--green-700);
}
.an-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--green-700);
}
.an-titre { font-size: 20px; font-weight: 700; color: var(--ink-900); margin: 2px 0 3px; line-height: 1.2; }
.an-titre::first-letter { text-transform: uppercase; }
.an-resume { font-size: 12px; color: var(--ink-500); }
.an-resume b { color: var(--ink-800); }
.an-resume-f { color: var(--green-800); font-weight: 600; }
.an-head-actions { display: flex; gap: 8px; flex-shrink: 0; }

.an-chart-card { padding: 10px 14px 12px; }
.an-chart-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.an-sel-inline { flex-direction: row; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .6px; font-size: 10.5px; }
.an-sel-inline select { text-transform: none; letter-spacing: 0; font-weight: 600; }
.an-chart-note { font-size: 11px; color: var(--amber-700); }
.an-chart-box { position: relative; height: 300px; }

.an-table-card { padding: 0; overflow: hidden; }
.an-notes:empty { display: none; }
.an-notes {
  padding: 8px 14px;
  background: var(--amber-50);
  border-bottom: 1px solid var(--amber-100);
  font-size: 11.5px;
  color: var(--amber-700);
}
.an-notes p { margin: 0; }
.an-table-wrap { overflow: auto; max-height: calc(100vh - 140px); }
.an-vide { padding: 40px 16px; text-align: center; color: var(--ink-400); font-size: 13px; }

/* ─── Tableau ───────────────────────────────────────────────────────────── */
.an-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 12.5px;
}
.an-table th, .an-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--ink-100);
  white-space: nowrap;
}
.an-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ink-50);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
  border-bottom: 1px solid var(--ink-200);
  cursor: pointer;
  user-select: none;
}
.an-table thead tr + tr th { top: 29px; }
.an-table thead th:hover { color: var(--green-800); }
.an-table thead th i { font-style: normal; font-weight: 500; color: var(--ink-400); }
.an-th-num { text-align: right; }
.an-th-col { text-align: center; border-left: 1px solid var(--ink-200); }
.an-th-dim, .an-td-dim {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 1;
}
.an-table thead .an-th-dim { z-index: 3; }
.an-td-dim { background: var(--paper); font-weight: 600; color: var(--ink-800); }
.an-sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.an-table tbody tr:hover td, .an-table tbody tr:hover .an-td-dim { background-color: #f6faf7; }

.an-v {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ink-900);
}
/* Cumuls : barre proportionnelle discrète en fond */
.an-bar {
  background-image: linear-gradient(90deg, rgba(42,147,70,.16) var(--pct), transparent var(--pct));
  background-repeat: no-repeat;
  background-size: calc(100% - 8px) 60%;
  background-position: 4px center;
}
/* Qualité : pastille de statut (mêmes seuils que les jauges) */
.an-st-good, .an-st-ok, .an-st-bad { position: relative; }
.an-st-good::before, .an-st-ok::before, .an-st-bad::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: 1px;
}
.an-st-good::before { background: #2a9346; }
.an-st-ok::before   { background: #eca100; }
.an-st-bad::before  { background: #e53935; }
.an-st-bad { color: var(--red-700); font-weight: 600; }

.an-col-total { background-color: #f7f9f8; border-left: 1px solid var(--ink-200); font-weight: 600; }
.an-table tfoot th, .an-table tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--green-50);
  border-top: 2px solid var(--green-600);
  border-bottom: 0;
  font-weight: 700;
  color: var(--green-900);
}
.an-table tfoot .an-td-dim { z-index: 2; }

/* ─── Écrans étroits ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .an-page { grid-template-columns: 1fr; padding: 12px 16px 32px; }
  .an-side { position: static; max-height: none; }
  .an-head { flex-direction: column; align-items: flex-start; }
}

/* ─── Impression : tableau + graphique, sans le panneau de réglages ─────── */
@media print {
  body[data-view="analyse"], body[data-view="analyse"] html { width: auto !important; height: auto !important; overflow: visible !important; }
  body[data-view="analyse"] .an-page { display: block; padding: 0; }
  body[data-view="analyse"] .an-side { display: none; }
  body[data-view="analyse"] .an-table-wrap { max-height: none; overflow: visible; }
  body[data-view="analyse"] .an-table thead th, body[data-view="analyse"] .an-table tfoot td,
  body[data-view="analyse"] .an-table tfoot th { position: static; }
}