/* Vue d'ensemble — style aligné sur docs/maquettes/vue-ensemble.html.
 * Isolé sous .ve-root pour ne pas fuiter dans le reste de l'app.
 */
.ve-root {
  --ve-indigo:#36309C;
  --ve-indigo-2:#5B55B8;
  --ve-indigo-d:#231E5C;
  --ve-or:#F7CF07;
  --ve-hs:#C42B22;
  --ve-deg:#F26B0F;
  --ve-int:#FFC400; --ve-int-t:#7A5B00;
  --ve-vert:#1E6B45;
  --ve-ink:#171A26; --ve-mid:#565C70; --ve-faint:#878DA0;
  --ve-line:#E2E5EE; --ve-bg:#F4F5F9; --ve-card:#FFF;

  color: var(--ve-ink);
  font-size: 15px;
  line-height: 1.5;
}
.ve-root * { box-sizing: border-box; }

/* ─── Bandeau titre + période ─── */
.ve-band {
  background: var(--ve-indigo); color: #fff;
  padding: 20px 22px 18px; border-radius: 12px;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 18px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.ve-band h1 { font-size: 20px; margin: 0; font-weight: 600; }
.ve-band-sub { color: #C5C2E7; font-size: 13px; margin-top: 3px; }
.ve-band-per { color: #C5C2E7; font-size: 12.5px; text-align: right; line-height: 1.6; }

/* ─── KPI ─── */
.ve-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin: 0 0 26px;
}
.ve-kpi {
  background: var(--ve-card); border: 1px solid var(--ve-line);
  border-radius: 12px; padding: 15px 17px; position: relative;
  cursor: pointer; transition: border-color .12s;
}
.ve-kpi:hover { border-color: #B6BCD8; }
.ve-kpi .ve-n {
  font-size: 29px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
}
.ve-kpi .ve-l { font-size: 13.5px; margin-top: 1px; }
.ve-kpi .ve-m { font-size: 11.5px; color: var(--ve-faint); margin-top: 4px; }
.ve-kpi.ve-hero {
  background: var(--ve-vert); border-color: var(--ve-vert); color: #fff;
}
.ve-kpi.ve-hero .ve-m { color: #CBE4D6; }

/* Bulle : hover ET tap. Sur touch, .ve-open est ajoutée par JS. */
.ve-info {
  position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid #C2C7DC; color: #7A8096;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: #fff; user-select: none;
}
.ve-hero .ve-info { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.ve-bulle {
  position: absolute; top: 40px; right: 8px; width: 330px;
  background: #fff; color: var(--ve-ink);
  border: 1px solid var(--ve-line); border-radius: 10px;
  padding: 14px 15px;
  box-shadow: 0 12px 30px rgba(23, 26, 38, .18);
  opacity: 0; visibility: hidden;
  transform: translateY(-4px); transition: .14s;
  z-index: 20; text-align: left; font-weight: 400;
  font-size: 12.5px; line-height: 1.5;
}
.ve-kpi:hover .ve-info + .ve-bulle,
.ve-kpi .ve-bulle:hover,
.ve-kpi.ve-open .ve-bulle {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.ve-bulle h4 { margin: 0 0 8px; font-size: 13px; }
.ve-bulle .ve-cl {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; background: #F6F7FB; border-radius: 7px;
  padding: 10px 12px; line-height: 1.9; color: var(--ve-mid);
}
.ve-bulle .ve-cl b { color: var(--ve-ink); }
.ve-bulle p { margin: 9px 0 0; font-size: 11.5px; color: var(--ve-mid); line-height: 1.55; }

/* ─── Titres colonnes ─── */
.ve-root h2 { font-size: 14.5px; margin: 0 0 3px; font-weight: 600; }
.ve-sub { font-size: 12.5px; color: var(--ve-faint); margin: 0 0 12px; }
.ve-grid {
  display: grid; grid-template-columns: 1.12fr .88fr;
  gap: 20px; align-items: start;
  margin-top: 22px;
}

/* ─── Échelle de gravité ─── */
.ve-echelle {
  display: flex; border-radius: 11px; overflow: hidden; margin-bottom: 6px;
}
.ve-echelle > div {
  flex: 1; padding: 11px 14px; font-size: 12px; line-height: 1.35;
  cursor: pointer; color: #fff;
}
.ve-echelle b { display: block; font-size: 13.5px; margin-bottom: 1px; }

/* ─── Blocs curatif / préventif à fond plein ─── */
.ve-blocs { display: flex; flex-direction: column; gap: 9px; }
.ve-bloc {
  display: flex; align-items: center;
  border-radius: 11px; overflow: hidden; cursor: pointer;
  border: 1px solid transparent; transition: .12s;
}
.ve-bloc:hover { transform: translateX(2px); filter: brightness(.985); }
.ve-bloc .ve-pav {
  width: 78px; flex: none; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; color: #fff;
}
.ve-bloc .ve-bd { padding: 13px 16px; flex: 1; }
.ve-bloc .ve-t { font-size: 15px; font-weight: 700; }
.ve-bloc .ve-d { font-size: 12.5px; margin-top: 1px; opacity: .85; }
.ve-bloc .ve-v { padding: 0 6px 0 14px; font-size: 17px; font-weight: 700; }
.ve-bloc .ve-ch { padding: 0 15px 0 9px; font-size: 19px; opacity: .45; }

/* Ligne récap sous le bloc correctif — répartition auto-résolu vs mobilisation
   d'un tech. Reprend l'info de l'ex-onglet Flux entrant. */
.ve-resol {
  font-size: 12.5px; color: var(--ve-ink);
  margin: 10px 2px 0; line-height: 1.55;
}
.ve-resol b { color: var(--ve-ink); }
.ve-resol .muted { color: var(--ve-mid); }

/* ─── Cartes lignes (dégradations / machines) ─── */
.ve-card {
  background: var(--ve-card); border: 1px solid var(--ve-line);
  border-radius: 12px; padding: 16px 18px;
}
.ve-fl {
  display: flex; gap: 14px; align-items: center;
  padding: 11px 0; border-top: 1px solid var(--ve-line);
  cursor: pointer;
}
.ve-fl:first-of-type { border-top: 0; padding-top: 2px; }
.ve-fl:hover .ve-fl-t { color: var(--ve-indigo); }
.ve-fl-n { font-size: 21px; font-weight: 700; min-width: 42px; }
.ve-fl-t { font-size: 14px; font-weight: 600; }
.ve-fl-d { font-size: 12.5px; color: var(--ve-mid); }
.ve-fl-ch { margin-left: auto; color: #BFC4D8; }

/* ─── Graphiques ─── */
.ve-charts {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; margin: 24px 0 20px;
}
.ve-chart {
  background: var(--ve-card); border: 1px solid var(--ve-line);
  border-radius: 12px; padding: 16px 18px;
}
.ve-lg {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--ve-mid); margin-top: 8px;
}
.ve-lg span { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.ve-lg i { width: 11px; height: 11px; border-radius: 2px; display: block; }
.ve-lg-off { opacity: .35; text-decoration: line-through; }
.ve-seg { cursor: pointer; transition: opacity .12s; }
.ve-seg:hover { opacity: .82; }

/* ─── Refonte 2026-09-12 « deux moitiés franches » ─── */
/* Intertitres de moitié (haut / bas). Un intertitre = une ligne dorée
 * fine avec un tag capitale + un h2 + un sous-titre. Sépare visuellement
 * sans laisser de doute au lecteur.
 */
.ve-halfhead {
  display: flex; align-items: center; gap: 18px;
  margin: 30px 0 16px;
}
.ve-halfhead-line {
  flex: 1; height: 1px; background: var(--ve-line);
}
.ve-halfhead-block {
  text-align: center; padding: 0 4px; max-width: 520px;
}
.ve-halfhead-tag {
  font-size: 10.5px; letter-spacing: .16em; font-weight: 700;
  color: var(--ve-indigo); margin-bottom: 3px;
}
.ve-halfhead-haut .ve-halfhead-tag { color: var(--ve-hs); }
.ve-halfhead-bas  .ve-halfhead-tag { color: var(--ve-indigo); }
.ve-halfhead-t {
  font-size: 18px; font-weight: 700; margin: 0 0 4px;
  color: var(--ve-ink); letter-spacing: -.01em;
}
.ve-halfhead-s {
  font-size: 12.5px; color: var(--ve-mid); margin: 0; line-height: 1.5;
}
.ve-half { display: block; }

/* Trio de hero blocks (moitié haute) — 3 colonnes desktop, 2/1 responsive. */
.ve-heros {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-bottom: 16px;
}
.ve-hero-block {
  background: var(--ve-card); border: 1px solid var(--ve-line);
  border-radius: 12px; padding: 16px 18px 14px;
  position: relative; cursor: pointer; transition: border-color .12s;
  display: flex; flex-direction: column; min-height: 148px;
}
.ve-hero-block:hover { border-color: #B6BCD8; }
.ve-hero-hs   { border-top: 3px solid var(--ve-hs); }
.ve-hero-deg  { border-top: 3px solid var(--ve-deg); }
.ve-hero-int  { border-top: 3px solid var(--ve-int); }
.ve-hero-t {
  font-size: 13.5px; font-weight: 600; margin: 0 0 8px;
  color: var(--ve-ink);
}
.ve-hero-num {
  display: flex; align-items: baseline; gap: 8px; cursor: pointer;
}
.ve-hero-n {
  font-size: 40px; font-weight: 800; line-height: 1;
  letter-spacing: -.02em;
}
.ve-hero-u {
  font-size: 14px; font-weight: 600; color: var(--ve-mid);
}
.ve-hero-sub {
  margin: 8px 0 0; font-size: 12px; color: var(--ve-mid);
  line-height: 1.45;
}

/* Phrase pont — bandeau qui mélange les deux vocabulaires, SEUL endroit. */
.ve-pont {
  background: linear-gradient(90deg, #FBECEB 0%, #FBF6EA 55%, #EDECF7 100%);
  border-radius: 12px; padding: 16px 20px;
  margin: 4px 0 12px; text-align: center;
  position: relative;
}
.ve-pont-tag {
  font-size: 10.5px; letter-spacing: .12em; font-weight: 700;
  color: var(--ve-indigo-d); margin-bottom: 6px;
}
.ve-pont-t {
  font-size: 15px; margin: 0; color: var(--ve-ink); line-height: 1.55;
}
.ve-pont-t b { color: var(--ve-indigo-d); font-weight: 700; }
.ve-pont-s {
  font-size: 11.5px; color: var(--ve-mid); margin: 6px 0 0;
  line-height: 1.5;
}

/* Ligne « la somme tombe » — témoin arithmétique sous chaque bloc. */
.ve-somme {
  font-size: 12px; color: var(--ve-mid); margin: 8px 4px 0;
  line-height: 1.5;
}
.ve-somme b { color: var(--ve-ink); font-weight: 700; }
.ve-somme .muted { color: var(--ve-faint); }

/* ─── Interruptions : chiffre principal + tunnel + drawer réconciliation ─── */
.ve-interr-hero {
  display: flex; align-items: baseline; gap: 12px;
  cursor: pointer; user-select: none;
}
.ve-interr-hero:hover .ve-interr-n { color: var(--ve-hs, #C42B22); }
.ve-interr-n {
  font-size: 42px; font-weight: 800; line-height: 1;
  color: #C42B22; letter-spacing: -.02em;
}
.ve-interr-n span {
  font-size: 18px; font-weight: 600; color: var(--ve-mid);
  margin-left: 4px;
}
.ve-interr-sub {
  margin: 6px 0 14px; font-size: 12.5px; color: var(--ve-mid);
  line-height: 1.5;
}
.ve-tunnel { display: flex; flex-direction: column; gap: 4px; }
.ve-tn-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 5px 8px; border-radius: 6px; cursor: pointer;
  font-size: 12px; color: var(--ve-ink);
  transition: background .12s;
}
.ve-tn-row:hover { background: rgba(196, 43, 34, .07); }
.ve-tn-row b { min-width: 48px; text-align: right; font-weight: 700; }
.ve-tn-row span { flex: 1; color: var(--ve-mid); }
.ve-tn-neg b { color: #C42B22; }
.ve-tn-total { border-top: 1px solid var(--ve-line); margin-top: 4px; padding-top: 8px; }
.ve-tn-total b { color: var(--ve-ink); font-size: 13px; }
.ve-tn-total span { color: var(--ve-ink); font-weight: 600; }

/* Drawer plein écran, ouvert depuis la bulle info */
.ve-drw-backdrop {
  position: fixed; inset: 0; background: rgba(23, 26, 38, .6);
  z-index: 9000; display: flex; justify-content: center; align-items: flex-start;
  padding: 40px 20px; overflow-y: auto;
}
.ve-drw {
  background: #fff; border-radius: 12px; max-width: 900px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  display: flex; flex-direction: column;
}
.ve-drw-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding: 20px 24px 14px;
  border-bottom: 1px solid var(--ve-line);
}
.ve-drw-head h3 { margin: 0 0 4px; font-size: 17px; }
.ve-drw-head p  { margin: 0; font-size: 12.5px; color: var(--ve-mid); }
.ve-drw-close {
  background: transparent; border: none; font-size: 26px; line-height: 1;
  cursor: pointer; color: var(--ve-mid); padding: 0 4px;
}
.ve-drw-close:hover { color: var(--ve-ink); }
.ve-drw-body { padding: 16px 24px 24px; }
.ve-drw-note {
  margin: 0 0 14px; font-size: 12.5px; color: var(--ve-mid);
  background: #F7F8FB; border-left: 3px solid #BFC4D8;
  padding: 10px 12px; border-radius: 0 6px 6px 0;
}
.ve-drw-empty { color: var(--ve-faint); font-style: italic; }
.ve-drw-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ve-drw-tbl th {
  text-align: left; font-weight: 600; padding: 8px 10px;
  border-bottom: 2px solid var(--ve-line); color: var(--ve-mid);
}
.ve-drw-tbl td {
  padding: 8px 10px; border-bottom: 1px solid var(--ve-line);
  vertical-align: top;
}
.ve-drw-tbl tr:last-child td { border-bottom: none; }
.ve-drw-adr { color: var(--ve-faint); font-size: 11px; }

/* Bulle qui contient le tunnel a besoin d'un peu plus de largeur */
[data-interr-block] .ve-bulle { width: 340px; }
@media (max-width: 700px) {
  [data-interr-block] .ve-bulle { width: calc(100vw - 32px); }
}

/* ─── À retenir ─── */
.ve-retain {
  background: var(--ve-indigo-d); color: #fff; border-radius: 12px;
  padding: 14px 20px; font-size: 14px;
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
}
.ve-retain b { color: var(--ve-or); }
.ve-retain i { color: #6A66A6; font-style: normal; }
.ve-meth {
  font-size: 11.5px; color: var(--ve-faint);
  margin-top: 13px; line-height: 1.6;
}
.ve-clic {
  font-size: 11.5px; color: var(--ve-faint);
  margin: 16px 0 0; display: flex; align-items: center; gap: 7px;
}
.ve-clic i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #BFC4D8; display: block;
}

/* ─── Aide dépliable ─── */
details.ve-aide { margin: 18px 0 6px; }
details.ve-aide summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: 12.5px; font-weight: 600;
  color: var(--ve-indigo);
  background: #fff; border: 1px solid #CBC8E6; border-radius: 999px;
  padding: 6px 14px; transition: .12s; user-select: none;
}
details.ve-aide summary::-webkit-details-marker { display: none; }
details.ve-aide summary:hover { background: #F2F1FA; border-color: #A9A4D8; }
details.ve-aide summary .ve-plus {
  font-size: 15px; line-height: 1; transition: transform .18s;
}
details[open].ve-aide summary .ve-plus { transform: rotate(45deg); }
.ve-aide-panel {
  margin-top: 12px;
  background: linear-gradient(180deg, #FBFBFE, #F6F6FC);
  border: 1px solid #DCDAF0; border-radius: 14px;
  padding: 20px 22px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
}
.ve-aide-col > .ve-aide-ttl {
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  color: var(--ve-indigo); margin-bottom: 5px;
}
.ve-aide-col > .ve-aide-lead {
  font-size: 12.5px; color: var(--ve-mid);
  margin: 0 0 14px; line-height: 1.5;
}
.ve-aide-it {
  display: flex; gap: 11px; padding: 9px 0;
  border-top: 1px solid #E6E4F4;
}
.ve-aide-it:first-of-type { border-top: 0; padding-top: 0; }
.ve-aide-it .ve-sw {
  width: 4px; border-radius: 3px; flex: none; align-self: stretch;
}
.ve-aide-it b { font-size: 13.5px; display: block; }
.ve-aide-it span { font-size: 12.5px; color: var(--ve-mid); line-height: 1.45; }
.ve-aide-note {
  margin: 14px 0 0; font-size: 11.5px; color: var(--ve-faint);
  line-height: 1.55; border-left: 2px solid #DCDAF0; padding-left: 11px;
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .ve-aide-panel { grid-template-columns: 1fr; gap: 20px; }
  .ve-grid, .ve-charts { grid-template-columns: 1fr; }
  .ve-echelle { flex-direction: column; }
  .ve-bulle { right: auto; left: 8px; width: 270px; }
  .ve-heros { grid-template-columns: 1fr 1fr; }
  .ve-halfhead-block { max-width: 100%; }
}
@media (max-width: 640px) {
  .ve-kpis { grid-template-columns: 1fr 1fr; }
  .ve-heros { grid-template-columns: 1fr; }
  .ve-halfhead-line { display: none; }
  .ve-pont { padding: 14px 16px; }
  .ve-pont-t { font-size: 14px; }
}
@media (max-width: 375px) {
  .ve-band { padding: 16px 14px 14px; }
  .ve-band h1 { font-size: 17px; }
  .ve-kpi { padding: 12px 14px; }
  .ve-kpi .ve-n { font-size: 24px; }
  .ve-bloc .ve-pav { width: 62px; font-size: 22px; }
  .ve-bloc .ve-t { font-size: 14px; }
  .ve-bloc .ve-v { font-size: 15px; }
  .ve-fl-n { font-size: 19px; min-width: 36px; }
  .ve-bulle { width: calc(100vw - 32px); }
  .ve-hero-block { padding: 14px 15px 12px; min-height: 130px; }
  .ve-hero-n { font-size: 34px; }
  .ve-halfhead-t { font-size: 16px; }
  .ve-halfhead-s { font-size: 12px; }
}