/* ============================================================
   KEERA — SHELL
   Aligne les métriques du gabarit sur Reference/vpro-app.html.
   Le markup est déjà correct : seules les mesures diffèrent.

   À charger EN DERNIER :
     app.css → tokens.css → motion.css → keera-components.css → keera-shell.css
   ============================================================ */

/* ------------------------------------------------------------
   1. GABARIT — la différence la plus visible
   1200px centrés donnent une app étroite ; la maquette respire
   sur toute la largeur.
------------------------------------------------------------ */
.page{
  max-width: 1480px;
  margin: 0;
  padding: 26px 30px 60px;
}

/* ------------------------------------------------------------
   2. RYTHME — 14px partout, pas 18px
------------------------------------------------------------ */
.kpi-grid,
.dash-row,
.grid-2{ gap: 14px; margin-bottom: 14px; }
.kpi-grid{ grid-template-columns: 1.35fr 1fr; }
.dash-row{ grid-template-columns: 1.45fr 1fr; }
.card{ border-radius: 18px; }
.page-head{ margin-bottom: 18px; }

/* ------------------------------------------------------------
   3. GRAISSES — la maquette n'est jamais en gras lourd
------------------------------------------------------------ */
.page-head h1{ font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; letter-spacing: -.03em; }
.dash-head h3{ font-size: 15.5px; font-weight: 600; }
.dash-head .big{ font-size: 20px; font-weight: 600; letter-spacing: -.04em; }
.brk-name{ font-weight: 500; font-size: 12.5px; }
.brk-pct{
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 500;
  color: var(--text-2);
  width: 42px;
}
.delta{ font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
.val-t{ font-size: 10.5px; font-weight: 500; }
.axis-t{ font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: .06em; }

/* ------------------------------------------------------------
   4. KPI — carte de tête (trésorerie) + colonne de contexte

   L'ambre, pas l'accent : « À encaisser » parle d'argent qui n'est pas
   rentré (règle 7). L'accent reste réservé à ce qui est sain ou actionnable.
------------------------------------------------------------ */
.kpi-lead{
  min-height: 190px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--k-amber) 7%, transparent), transparent 58%), var(--k-card);
}
.ico-tile{
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--k-tile);
  box-shadow: inset 0 0 0 1px var(--k-line-2);
  color: var(--k-accent);
  transition: transform var(--d) var(--e-spring), box-shadow var(--d);
}
.ico-tile.t-money{ color: var(--k-amber); }
.kpi-lead:hover .ico-tile{
  transform: translateY(-2px) rotate(-6deg);
  box-shadow: inset 0 0 0 1px var(--k-amber);
}
.kpi-lead-sub:empty{ display: none; }

/* Bandeau d'alerte : un chiffre alarmant doit mener quelque part. */
.kpi-alert{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; width: 100%;
  margin-top: 20px; padding: 12px 15px;
  border-radius: var(--radius-md);
  font-family: inherit; font-size: 13px; text-align: left;
  color: var(--k-text);
  background: color-mix(in srgb, var(--k-red) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--k-red) 22%, transparent);
  cursor: pointer;
  transition: background var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.kpi-alert:hover{ background: color-mix(in srgb, var(--k-red) 13%, transparent); transform: translateY(-1px); }
.kpi-alert:focus-visible{ outline: 2px solid var(--k-red); outline-offset: 2px; }
.kpi-alert > span:first-child{ flex: 1; min-width: 0; line-height: 1.45; }
.kpi-alert b{ font-family: var(--font-mono); font-weight: 600; color: var(--k-red); white-space: nowrap; }
.kpi-alert .go{ display: inline-flex; align-items: center; gap: 6px; color: var(--k-text-2); white-space: nowrap; }
.kpi-alert .go svg{ width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Sparklines : pleine largeur sous la carte de tête, miniature dans les lignes. */
.kpi-spark:empty{ display: none; }
.kpi-lead .kpi-spark{
  margin: auto -26px -24px; padding-top: 18px;
  pointer-events: none; opacity: .9;
}
.kpi-lead .kpi-spark svg{ display: block; width: 100%; height: 56px; }
.kpi-row .kpi-spark{
  width: 74px; flex-shrink: 0;
  pointer-events: none; opacity: .6;
}
.kpi-row .kpi-spark svg{ display: block; width: 100%; height: 24px; }

/* ------------------------------------------------------------
   5. RÉPARTITION ASSUREURS — point rond fin, piste plus discrète
------------------------------------------------------------ */
.brk{ gap: 13px; }
.brk-row{ grid-template-columns: 10px 1fr auto; }
.brk-dot{ width: 7px; height: 7px; border-radius: 50%; }
.brk-track{ height: 4px; border-radius: 99px; background: var(--k-tile); }
.brk-fill{ border-radius: 99px; }

/* ------------------------------------------------------------
   6. SIDEBAR — 238px, et le fond actif passe au glider
   (keera-motion.js insère .k-glider dans chaque .sb-nav)
------------------------------------------------------------ */
.sidebar{ width: 238px; padding: 20px 14px; }
.sb-nav{ position: relative; }
.sb-nav .tab{
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 13.5px; font-weight: 500;
  background: transparent;
  border: none;
  position: relative;
  z-index: 1;
}
.sb-nav .tab.is-active{
  background: transparent;
  border: none;
  font-weight: 500;
}
.sb-nav .tab.is-active::before{ display: none; }  /* remplacé par le liseré du glider */
.k-glider{
  position: absolute; left: 0; right: 0;
  border-radius: 11px;
  background: var(--k-tile);
  box-shadow: inset 0 0 0 1px var(--k-line-2);
  transition: transform .42s cubic-bezier(.34,1.4,.5,1);
  z-index: 0; pointer-events: none;
}
.k-glider::before{
  content: "";
  position: absolute; left: -10px; top: 11px; bottom: 11px; width: 2px;
  border-radius: 0 3px 3px 0;
  background: var(--k-accent);
  box-shadow: 0 0 12px var(--k-accent);
}
.sb-brand{ font-size: 19px; font-weight: 700; }
.gl{
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--label);
}

/* ------------------------------------------------------------
   7. TOPBAR — reprise de Reference/vpro-app.html (.top)
   Les aplats de la maquette (rgba blanc, thème sombre) sont remplacés
   par --k-tile / --k-line, qui s'inversent avec le thème.
------------------------------------------------------------ */
.topbar{ padding: 16px 28px; gap: 16px; }

/* Emplacement de marque : vide par défaut, il tient sa place pour un logo. */
.who{
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; min-height: 44px;
  border-radius: 13px;
  border: 1px solid var(--k-line);
  background: var(--k-tile);
  transition: border-color var(--d-fast) var(--e-out);
}
.who[hidden]{ display: none; }
.who:hover{ border-color: var(--k-line-2); }
.who img{ max-height: 30px; max-width: 160px; width: auto; display: block; }
.who b{ font-size: 13px; font-weight: 600; color: var(--k-text); white-space: nowrap; }

/* Recherche : le pavé entier réagit, l'icône et le raccourci l'encadrent. */
.topbar-search{
  flex: 1; max-width: 430px; width: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 13px;
  border: 1px solid var(--k-line);
  background: var(--k-tile);
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.topbar-search:hover{
  border-color: var(--k-accent);
  box-shadow: 0 0 0 4px var(--k-accent-dim);
}
/* L'icône n'est plus posée en absolu comme dans app.css : elle prend sa
   place dans le flux, à gauche du champ. */
.topbar-search > svg{
  position: static; transform: none;
  width: 15px; height: 15px; flex: none;
  stroke: var(--k-text-3);
}
.topbar-search input{
  flex: 1; min-width: 0;
  height: auto; padding: 0; margin: 0;
  border: none; background: none; box-shadow: none;
  font-size: 13px; color: var(--k-text);
  cursor: pointer;
}
.topbar-search input::placeholder{ color: var(--k-text-3); }
.topbar-search input:focus{ outline: none; border: none; box-shadow: none; }
.topbar-search kbd{
  flex: none;
  font-family: var(--font-mono); font-size: 10px;
  padding: 2px 6px; border-radius: 6px;
  border: 1px solid var(--k-line-2);
  color: var(--k-text-3);
}

/* Actions : boutons carrés bordés, la lune bascule en tournant. */
.topbar-right{ margin-left: auto; gap: 10px; }
.top-btn{
  width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--k-line);
  color: var(--k-text-2);
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out);
}
.top-btn:hover{
  color: var(--k-text); border-color: var(--k-line-2);
  background: none; transform: translateY(-1px);
}
.theme-btn svg{ transition: transform var(--d-slow) var(--e-spring); }
.theme-btn:hover svg{ transform: rotate(-25deg); }

/* ------------------------------------------------------------
   8. TABLEAUX — mono, en-têtes espacés
------------------------------------------------------------ */
.card table th{
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--label);
}
.card table td{ font-size: 12.5px; }
.card table td.col-num{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   9. ENTRÉE DE PANNEAU — cascade à l'ouverture d'un onglet
------------------------------------------------------------ */
.tab-panel.is-active > *{ animation: vp-rise .55s cubic-bezier(.2,.8,.3,1) both; }
.tab-panel.is-active > *:nth-child(2){ animation-delay: .06s; }
.tab-panel.is-active > *:nth-child(3){ animation-delay: .12s; }
.tab-panel.is-active > *:nth-child(4){ animation-delay: .18s; }
.tab-panel.is-active > *:nth-child(n+5){ animation-delay: .24s; }
@keyframes vp-rise{ from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform:none; } }

/* ------------------------------------------------------------
   10. BORDURE-PROJECTEUR sur les cartes
   keera-motion.js pose --mx / --my au survol.
------------------------------------------------------------ */
.card{ position: relative; overflow: hidden; }
.card::before{
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  opacity: 0; transition: opacity .35s; pointer-events: none; z-index: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--k-accent), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.card:hover::before{ opacity: .85; }
.card > *{ position: relative; z-index: 1; }

/* ------------------------------------------------------------
   11. TOPBAR — même surface sombre continue sur tous les écrans
   (Reference/header.png), pas seulement le tableau de bord.
------------------------------------------------------------ */
/* Même ambiance que <body> (--k-ambient-*, tokens.css, une valeur par
   thème) : la topbar est ancrée au viewport comme le fond de page, le halo
   et la trame de points se prolongent donc sans coupure au lieu de
   s'arrêter sous la barre. */
.topbar{
  background-color: var(--k-bg);
  background-image: var(--k-ambient-img);
  background-size: var(--k-ambient-size);
  background-repeat: var(--k-ambient-repeat);
  background-attachment: var(--k-ambient-attach);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Le titre du tableau de bord porte sa propre cascade (mot à mot), on le
   sort donc de l'animation d'entrée de panneau pour ne pas la cumuler. */
#tab-dashboard.tab-panel.is-active > .title-row{ animation: none; }
/* Le récapitulatif est collant : la translation d'entrée le décalerait sous
   le bas du viewport le temps de l'animation. */
#tab-editor.tab-panel.is-active > .recap{ animation: none; }

.dash-ticker{
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px; margin-bottom: 10px;
  border: 1px solid var(--k-line); border-radius: var(--r-md);
  background: var(--k-tile);
}
.dash-ticker .live{
  display: flex; align-items: center; gap: 7px; flex: none;
  font-family: var(--ff-mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--k-accent);
}
.dash-ticker .live .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--k-accent); animation: vp-led 2.4s infinite; }
.dash-ticker .feed{
  flex: 1; min-width: 0;
  font-size: 12.5px; color: var(--k-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-ticker .feed b{ color: var(--k-text); font-weight: 600; }
.dash-ticker .sync{ flex: none; font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--k-text-3); }
.dash-ticker.is-empty .live{ color: var(--k-text-3); }
.dash-ticker.is-empty .live .dot{ background: var(--k-line-2); animation: none; }

@media (max-width: 1240px){
  .kpi-grid{ grid-template-columns: 1fr; }
  .dash-row{ grid-template-columns: 1fr; }
}
@media (max-width: 880px){
  .page{ padding: 20px 16px 50px; }
  .kpi-grid{ grid-template-columns: 1fr; }
  .topbar{ padding: 12px 16px; }
  .dash-ticker .sync{ display: none; }
}
/* Sous cette largeur, le texte de l'alerte se casse sur plusieurs lignes :
   l'action passe dessous plutôt que de rester coincée à droite. */
@media (max-width: 560px){
  .kpi-alert{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .kpi-alert .go{ color: var(--k-text); }
}
@media (prefers-reduced-motion: reduce){
  .tab-panel.is-active > *, .card, .ico-tile, .k-glider, .kpi-alert, .cta,
  .seg button, .btn-sm{ animation: none !important; transition: none !important; }
  .kpi-alert:hover{ transform: none; }
  .cta:hover{ transform: none; }
  .cta:hover svg{ transform: none; }
  .cta::after{ display: none; }
  /* L'animation « mot » part de opacity:0 : sans elle, le titre resterait
     invisible. On rétablit l'état final. */
  .title-row h1 i{ animation: none !important; opacity: 1; filter: none; transform: none; }
  .dash-ticker .live .dot{ animation: none; }
}