/* ------------------------------------------------------------------
   Le Cockpit — demonstrateur web (Maison Lauret)
   Palette alignee sur alexiszueras.fr : vert fonce, or, creme.
   ------------------------------------------------------------------ */
#cockpit {
  --vert: #1C2420;
  --vert-soft: #26302B;
  --or: #B8913A;
  --or-clair: #D8B463;
  --creme: #F7F3EA;
  --surface: #FFFFFF;
  --encre: #141A17;
  --gris: #5A6478;
  --trait: #E3DED2;
  --vert-pos: #2E8B6A;
  --rouge: #C0392B;
  --bleu: #3E6D9C;
  color: var(--encre);
  font-size: 16px;
  line-height: 1.5;
}
#cockpit *, #cockpit *::before, #cockpit *::after { box-sizing: border-box; }

/* ---------- Banniere ---------- */
#cockpit .ck-banner {
  background: var(--vert);
  border-radius: 14px;
  padding: 22px 26px;
  display: flex; align-items: center; gap: 18px;
  border: 1px solid rgba(184,145,58,.35);
}
#cockpit .ck-mark {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%;
  border: 2px solid var(--or); display: grid; place-items: center;
}
#cockpit .ck-mark svg { width: 24px; height: 24px; }
#cockpit .ck-kicker {
  color: var(--or); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 700; margin: 0 0 2px;
}
#cockpit .ck-banner h2 { color: #fff; font-size: 26px; margin: 0; font-weight: 700; }
#cockpit .ck-banner p { color: #C9D1CB; font-size: 13.5px; margin: 4px 0 0; }

/* ---------- Filtres ---------- */
#cockpit .ck-filters { margin-top: 16px; border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); }
#cockpit .ck-filters > summary {
  cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
#cockpit .ck-filters > summary::-webkit-details-marker { display: none; }
#cockpit .ck-filters > summary::before { content: "▸"; color: var(--or); transition: transform .15s; }
#cockpit .ck-filters[open] > summary::before { transform: rotate(90deg); }
#cockpit .ck-filters-body {
  padding: 4px 16px 18px; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border-top: 1px solid var(--trait);
}
#cockpit .ck-field > span { display: block; font-size: 12px; font-weight: 700; color: var(--gris); margin-bottom: 7px; text-transform: uppercase; letter-spacing: .05em; }
#cockpit .ck-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#cockpit .ck-chip {
  border: 1px solid var(--trait); background: var(--creme); color: var(--encre);
  border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer;
  font-family: inherit; transition: background .12s, border-color .12s;
}
#cockpit .ck-chip[aria-pressed="true"] { background: var(--or); border-color: var(--or); color: #fff; font-weight: 600; }
#cockpit .ck-dates { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#cockpit .ck-dates input {
  border: 1px solid var(--trait); border-radius: 8px; padding: 6px 9px;
  font: inherit; font-size: 13px; color: var(--encre); background: var(--surface); min-width: 0;
}
#cockpit .ck-reset {
  background: none; border: none; color: var(--or); font: inherit; font-size: 13px;
  text-decoration: underline; cursor: pointer; padding: 0; margin-top: 10px;
}

/* ---------- Titres ---------- */
#cockpit h3.ck-h { font-size: 22px; font-weight: 700; margin: 26px 0 4px; color: var(--encre); }
#cockpit .ck-caption { font-size: 13px; color: var(--gris); margin: 0 0 14px; }
#cockpit h4.ck-sub { font-size: 14px; font-weight: 700; margin: 18px 0 8px; color: var(--encre); }

/* ---------- Indicateurs ---------- */
#cockpit .ck-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
#cockpit .ck-kpi { background: var(--surface); border: 1px solid var(--trait); border-top: 3px solid var(--or); border-radius: 12px; padding: 14px 16px; }
#cockpit .ck-kpi-l { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gris); }
#cockpit .ck-kpi-v { font-size: 27px; font-weight: 700; margin-top: 4px; letter-spacing: -.02em; }
#cockpit .ck-kpi-d { font-size: 13px; font-weight: 600; margin-top: 3px; }
#cockpit .up { color: var(--vert-pos); }
#cockpit .down { color: var(--rouge); }
#cockpit .flat { color: var(--gris); }

/* ---------- Alertes ---------- */
#cockpit .ck-alert { border-radius: 10px; padding: 11px 14px; font-size: 14px; margin-bottom: 8px; border: 1px solid; }
#cockpit .ck-alert.bad { background: #FBEDEB; border-color: #F0C8C2; color: #7E241A; }
#cockpit .ck-alert.good { background: #E9F5F0; border-color: #BFE2D5; color: #1D5A45; }
#cockpit .ck-alert.info { background: var(--creme); border-color: var(--trait); color: var(--gris); }

/* ---------- Onglets ---------- */
#cockpit .ck-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--trait); margin: 26px 0 0; overflow-x: auto; }
#cockpit .ck-tab {
  background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px;
  padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--gris);
  cursor: pointer; white-space: nowrap;
}
#cockpit .ck-tab[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--or); }
#cockpit .ck-panel { padding-top: 6px; }
#cockpit .ck-panel[hidden] { display: none; }
#cockpit .ck-two { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ---------- Graphiques ---------- */
#cockpit .ck-chart { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px 6px; position: relative; }
#cockpit .ck-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
#cockpit .ck-axis { stroke: var(--trait); stroke-width: 1; }
#cockpit .ck-grid { stroke: var(--trait); stroke-width: 1; stroke-dasharray: 3 4; opacity: .75; }
#cockpit .ck-tick { fill: var(--gris); font-size: 11px; }
#cockpit .ck-hit { fill: transparent; cursor: pointer; }
#cockpit .ck-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--gris); padding: 4px 2px 8px; }
#cockpit .ck-legend span { display: inline-flex; align-items: center; gap: 6px; }
#cockpit .ck-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
#cockpit .ck-tip {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .1s;
  background: var(--vert); color: #fff; font-size: 12.5px; padding: 6px 9px;
  border-radius: 7px; white-space: nowrap; transform: translate(-50%, -115%); z-index: 5;
}
#cockpit .ck-tip.on { opacity: 1; }

/* ---------- Tableau ---------- */
#cockpit .ck-table-wrap { overflow-x: auto; }
#cockpit table.ck-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#cockpit table.ck-table th, #cockpit table.ck-table td { padding: 9px 11px; text-align: left; border-bottom: 1px solid var(--trait); }
#cockpit table.ck-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
#cockpit table.ck-table td.num, #cockpit table.ck-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Pied ---------- */
#cockpit .ck-foot { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--trait); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--gris); }
#cockpit .ck-dl { background: var(--creme); border: 1px solid var(--trait); border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 600; color: var(--encre); cursor: pointer; }
#cockpit .ck-dl:hover { background: var(--or); border-color: var(--or); color: #fff; }
#cockpit .ck-empty { background: var(--creme); border: 1px solid var(--trait); border-radius: 10px; padding: 16px; color: var(--gris); }

@media (max-width: 575px) {
  #cockpit .ck-banner { padding: 16px; gap: 12px; }
  #cockpit .ck-banner h2 { font-size: 20px; }
  #cockpit .ck-kpi-v { font-size: 23px; }
  #cockpit h3.ck-h { font-size: 19px; }
  #cockpit .ck-tab { padding: 9px 10px; font-size: 13px; }
}