/* =============================================================================
 * Dataviz CMA 2024 vs 2025 — feuille de style commune (DSFR)
 * Une viz par page ; chaque page embeddable en ?embed=1.
 * ========================================================================== */

:root {
  --cma-up: #18753c;            /* croissance / hausse (vert DSFR success) */
  --cma-up-fill: #3a8a5d;
  --cma-up-tint: #e8f6ee;
  --cma-down: #b3261e;          /* recul / baisse (corail sobre) */
  --cma-down-fill: #d0695a;
  --cma-down-tint: #fbe9e5;
  --cma-ko: #6a5a2f;            /* anomalie de saisie (ambre neutre, sans alarme) */
  --cma-ko-tint: #fdf3d8;
  --cma-blue: #000091;          /* bleu France */
  --cma-grey: #666;
  --cma-border: var(--border-default-grey, #ddd);
  --cma-alt: var(--background-alt-grey, #f6f6f6);
}

/* ===== Mise en page ========================================================= */
html, body { height: 100%; }
body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; }
/* flex:1 0 auto = #content remplit l'espace sur page courte (footer en bas)
   MAIS ne rétrécit jamais sous la hauteur de son contenu sur page longue
   (sinon le contenu déborde par-dessus le footer → barre bleue parasite). */
#content { flex: 1 0 auto; }

.viz-wrap {
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: 1.5rem 1.5rem 2.5rem;
}
.viz-head { margin-bottom: 1.1rem; }
.viz-head h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .35rem; }
.viz-head .viz-sub { color: var(--cma-grey); font-size: .95rem; margin: 0; max-width: 70ch; }
.viz-body { width: 100%; }
.viz-source { color: #888; font-size: .78rem; margin-top: 1.1rem; }
.viz-source button { font-size: .78rem; }

/* barre de contrôles (année, recherche…) */
.viz-controls { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: flex-end; margin: .25rem 0 1.1rem; }
.viz-controls .fr-segmented { margin: 0; }

/* ===== Lien retour / nav ===================================================== */
.viz-back { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; margin-bottom: .6rem; }

/* ===== Tableaux (vision totale, détail) ===================================== */
.cma-table-scroll { overflow: auto; border: 1px solid var(--cma-border); border-radius: 6px; }
.detail-scroll { max-height: calc(100vh - 280px); }
body.embed .detail-scroll { max-height: calc(100vh - 150px); }
table.cma-table { border-collapse: collapse; width: 100%; font-size: .9rem; background: #fff; }
table.cma-table th, table.cma-table td { padding: .5rem .7rem; text-align: right; white-space: nowrap; border-bottom: 1px solid #eee; }
table.cma-table th:first-child, table.cma-table td:first-child { text-align: left; }
table.cma-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--cma-blue); color: #fff; font-weight: 600;
  border-bottom: none; vertical-align: bottom;
}
/* en-tête sur deux niveaux (table détail) : la 2e ligne colle sous la 1re */
table.cma-table thead tr:nth-child(2) th { top: 39px; }
table.cma-table thead tr:first-child th[rowspan] { z-index: 3; }
table.cma-table thead th.col-group { background: #1212a8; border-left: 2px solid #fff; font-size: .82rem; }
table.cma-table tbody tr:hover { background: #f3f4fb; }
table.cma-table tbody tr.row-total td { font-weight: 700; border-top: 2px solid var(--cma-blue); background: #eef0fb; }
table.cma-table .cell-num { font-variant-numeric: tabular-nums; }

/* mise en forme conditionnelle (sobre) */
.tcell { text-align: center !important; font-variant-numeric: tabular-nums; }
.t-up   { background: var(--cma-up-tint);   color: var(--cma-up);   }
.t-down { background: var(--cma-down-tint); color: var(--cma-down); }
.t-nc   { color: #9a9a9a; }
.t-ko   { background: var(--cma-ko-tint); }
.trend-ico { font-weight: 700; }
.badge-ko { display: inline-block; font-size: .68rem; font-weight: 600; color: var(--cma-ko);
  background: var(--cma-ko-tint); border: 1px solid #e6d28a; border-radius: 3px; padding: 0 .3rem; margin-left: .3rem; }
/* « saisie à contrôler » : astérisque sobre dans la couleur ambre associée (sans boîte = plus pro) */
.flag-ctrl { color: var(--cma-ko); font-weight: 700; margin-left: .25rem; }

/* en-tête de groupe de colonnes par catégorie (table détail) */
.catgroup-fi   { box-shadow: inset 0 -3px 0 #5770be; }
.catgroup-fc   { box-shadow: inset 0 -3px 0 #6a9b5a; }
.catgroup-col  { box-shadow: inset 0 -3px 0 #c98a3a; }
.catgroup-sens { box-shadow: inset 0 -3px 0 #8a6bbe; }
.catgroup-fdf  { box-shadow: inset 0 -3px 0 #b8607a; }

/* ===== Tuiles KPI (synthèse) ================================================ */
.kpi-headline {
  border: 1px solid var(--cma-border); border-left: 5px solid var(--cma-blue);
  border-radius: 8px; padding: 1.1rem 1.3rem; margin-bottom: 1.4rem; background: #fff;
  display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; align-items: baseline;
}
.kpi-headline .kh-block .kh-num { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.kpi-headline .kh-block .kh-lab { font-size: .8rem; color: var(--cma-grey); margin-top: .25rem; }
.kpi-headline .kh-up { color: var(--cma-up); }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.kpi-card {
  border: 1px solid var(--cma-border); border-radius: 8px; background: #fff;
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .55rem;
}
.kpi-card .kc-title { font-weight: 700; font-size: 1rem; display: flex; align-items: center; gap: .45rem; }
.kpi-card .kc-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.kpi-card .kc-n { font-size: .8rem; color: var(--cma-grey); }
.kpi-card .kc-rows { display: flex; flex-direction: column; gap: .4rem; margin-top: .15rem; }
.kpi-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem; font-size: .85rem; }
.kpi-row .kr-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #eee; overflow: hidden; }
.kpi-row .kr-bar > span { display: block; height: 100%; border-radius: 3px; }
.kpi-row .kr-val { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ===== Graphiques SVG (montée, écarts) ====================================== */
.svg-chart { width: 100%; max-width: 1040px; height: auto; display: block; margin: 0 auto; font-family: Marianne, system-ui, sans-serif; }
.svg-chart text { fill: #1e1e1e; }
.svg-chart .axis-line { stroke: #b9b9c2; stroke-width: 1; }
.svg-chart .axis-label { fill: #8a8a93; font-size: 11px; }
.svg-chart .bar-label { font-weight: 700; font-size: 13px; }
.svg-chart .cat-label { font-size: 13px; }
.lollipop-stem { stroke-width: 2; }
.lollipop:hover .lollipop-dot { stroke: #1e1e1e; stroke-width: 1.5; }
.lollipop { cursor: default; }

/* conteneur cadran (ECharts) */
#cadran { width: 100%; height: 100%; min-height: 460px; }
.chart-host { width: 100%; height: 66vh; min-height: 480px; }
body.embed .chart-host { height: calc(100vh - 132px); min-height: 380px; }

/* ===== Infobulle partagée =================================================== */
.viz-tooltip {
  position: fixed; z-index: 1000; pointer-events: none;
  background: #fff; border: 1px solid var(--cma-border);
  border-left: 4px solid var(--cma-blue);
  border-radius: 5px; padding: .5rem .65rem;
  font-size: .8rem; line-height: 1.35; max-width: 280px;
  box-shadow: 0 4px 14px rgba(0,0,0,.16);
}
.viz-tooltip .tt-title { font-weight: 700; margin-bottom: .25rem; }
.viz-tooltip .tt-row { display: flex; justify-content: space-between; gap: 1.2rem; }
.viz-tooltip .tt-row span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.viz-tooltip .tt-sub { color: #666; font-size: .72rem; margin-top: .25rem; }

/* ===== Galerie (index) ====================================================== */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.25rem; }
.gcard {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--cma-border); border-top: 4px solid var(--cma-blue);
  border-radius: 8px; background: #fff; padding: 1.1rem 1.2rem 1.2rem;
}
.gcard h3 { font-size: 1.1rem; margin: 0 0 .3rem; display: flex; align-items: center; gap: .5rem; }
.gcard .gcard-dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.gcard .gcard-desc { color: var(--cma-grey); font-size: .9rem; margin: 0 0 .9rem; flex: 1 1 auto; }
.gcard .gcard-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.embed-snippet { margin-top: .75rem; }
.embed-snippet code { display: block; white-space: pre-wrap; word-break: break-all; background: var(--cma-alt);
  border: 1px solid var(--cma-border); border-radius: 4px; padding: .5rem .6rem; font-size: .72rem; line-height: 1.4; }
.copy-btn { margin-top: .4rem; }

/* ===== Mode embed =========================================================== */
body.embed #app-header,
body.embed #app-footer { display: none !important; }
body.embed #embed-about-btn { display: inline-flex !important; }
body.embed .viz-wrap { max-width: none; padding: 1rem 1.1rem 1.2rem; }
body.embed .viz-back { display: none; }
#embed-about-btn { position: fixed; right: 12px; top: 12px; z-index: 20; }

/* ===== Responsive =========================================================== */
@media (max-width: 720px) {
  .viz-head h1 { font-size: 1.25rem; }
  .viz-wrap { padding: 1rem 1rem 1.6rem; }
}