/* ============================================================================
   FLOWAYZ — PRIMITIVES « BENTO »  ·  Refonte 2026-07-23
   ----------------------------------------------------------------------------
   Briques réutilisables de la refonte (maquettes exports/*.dc.html). Consomment
   UNIQUEMENT les tokens sémantiques (var(--bg-surface), var(--accent-gradient),
   var(--ok)…) → s'adaptent automatiquement clair/sombre ET suivent l'accent
   personnalisé. La hiérarchie vient des bordures + du fond, jamais des ombres.
   ============================================================================ */

/* ----- Grille Bento : 4 col desktop → 2 (tablette) → 1 (mobile) ------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 148px;
  gap: var(--gap-bento, 16px);
}
.bento--dense { grid-auto-flow: dense; }

/* ----- Tuile de base ------------------------------------------------------- */
.tile {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-tile, 20px);
  padding: 22px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tile--hero {
  background: linear-gradient(160deg, var(--hero1), var(--hero2));
  border-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .22);
}
.tile--2   { grid-column: span 2; }
.tile--2x2 { grid-column: span 2; grid-row: span 2; }
.tile--3   { grid-column: span 3; }
.tile--4   { grid-column: span 4; }
.tile--row2 { grid-row: span 2; }
.tile__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tile__title {
  font-family: var(--font-heading);
  font-weight: 700; font-size: 15px; margin: 0; color: var(--text-primary);
}
.tile__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-default); }

/* ----- Titres / chiffres repères ------------------------------------------- */
.bento-h-hero { font-family: var(--font-heading); font-weight: 700; font-size: 52px; line-height: 1; letter-spacing: -.02em; color: var(--text-primary); }
.bento-num    { font-family: var(--font-heading); font-weight: 800; font-size: 27px; line-height: 1; color: var(--text-primary); }
.bento-label  { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.bento-meta   { font-size: 12px; color: var(--text-muted); }
@media (max-width: 640px) { .bento-h-hero { font-size: 40px; } }

/* ----- Pastilles de statut -------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  white-space: nowrap;
}
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill--ok   { color: var(--ok);   background: var(--ok-bg); }
.pill--wait { color: var(--wait); background: var(--wait-bg); }
.pill--late { color: var(--late); background: var(--late-bg); }
.pill--info { color: var(--info); background: var(--info-bg); }
.pill--misc { color: var(--misc); background: var(--misc-bg); }
.pill--accent { color: var(--accent); background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .15); }

/* ----- Delta de tendance (pastille colorée) --------------------------------
   ⚠️ DÉCISION PRODUIT Nelwep, 2026-07-24 : les deltas colorés du mockup sont
   RÉINTRODUITS, en révision partielle de COPY_RULES #7. Portée STRICTEMENT
   limitée à la pastille de tendance : les VALEURS restent neutres (aucun
   montant peint en rouge, aucun triangle d'alerte). Ne pas re-supprimer sans
   demander à Nelwep — c'est un arbitrage explicite, pas un oubli. */
.delta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.delta--up   { color: var(--ok);   background: var(--ok-bg); }
.delta--down { color: var(--late); background: var(--late-bg); }
.delta--flat { color: var(--text-muted); background: var(--bg-surface-hover); }

/* ----- KPI tuile (label + valeur + delta + icône teintée) ------------------ */
.kpi-tile { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-tile, 20px); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.kpi-tile__icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.kpi-tile__value { font-family: var(--font-heading); font-weight: 800; font-size: 26px; line-height: 1; color: var(--text-primary); }
.kpi-tile__label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ----- Segmented control (filtres période / statut) ------------------------ */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--bg-surface-hover); border: 1px solid var(--border-default); }
.seg > * {
  border: 0; background: transparent; color: var(--text-muted);
  font-family: var(--font-primary); font-weight: 700; font-size: 13px;
  padding: 6px 14px; border-radius: 8px; cursor: pointer; text-decoration: none;
  white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.seg > .is-active,
.seg > [aria-selected="true"] {
  background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .16);
  color: var(--accent);
}

/* ----- Piste / barre de progression ---------------------------------------- */
.track { height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; }
.track > i { display: block; height: 100%; border-radius: 999px; background: var(--accent-gradient); }
.track--sm { height: 5px; }
.track--ok   > i { background: var(--ok); }
.track--wait > i { background: var(--wait); }
.track--late > i { background: var(--late); }

/* ----- Ligne de liste (avatar-initiales + titre + meta + montant + pastille) - */
.list-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border-default); }
.list-row:first-child { border-top: 0; }
.list-row__avatar { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
.list-row__body { flex: 1; min-width: 0; }
.list-row__title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row__meta { font-size: 11.5px; color: var(--text-muted); }
.list-row__amount { font-size: 14px; font-weight: 800; color: var(--text-primary); }

/* Teintes d'avatar réutilisables (initiales) */
.tint-ok   { background: var(--ok-bg);   color: var(--ok); }
.tint-wait { background: var(--wait-bg); color: var(--wait); }
.tint-late { background: var(--late-bg); color: var(--late); }
.tint-info { background: var(--info-bg); color: var(--info); }
.tint-misc { background: var(--misc-bg); color: var(--misc); }
.tint-accent { background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .15); color: var(--accent); }

/* ----- Bouton d'action Bento (accent) -------------------------------------- */
.bento-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-primary); font-weight: 700; font-size: 13.5px;
  border: 0; border-radius: 11px; padding: 10px 16px; cursor: pointer;
  background: var(--accent-gradient); color: var(--accent-contrast);
  box-shadow: 0 8px 20px -8px hsla(var(--accent-h), var(--accent-s), var(--accent-l), .6);
  text-decoration: none; transition: box-shadow .15s ease;
}
.bento-btn:hover { box-shadow: 0 10px 26px -8px hsla(var(--accent-h), var(--accent-s), var(--accent-l), .75); }
.bento-btn--ghost { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-default); box-shadow: none; }

/* ----- État vide Bento (icône teintée + titre court + phrase + 1 CTA) ------- */
.bento-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 34px 24px; height: 100%; }
.bento-empty__icon { width: 64px; height: 64px; border-radius: var(--r-tile, 20px); background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .14); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.bento-empty__title { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--text-primary); }
.bento-empty__text  { font-size: 13px; color: var(--text-muted); line-height: 1.5; max-width: 34ch; }

/* ----- Graphiques SVG : largeur fluide, viewBox conservé ------------------- */
.bento-chart { display: block; width: 100%; height: auto; }
.bento-chart__grid { stroke: var(--grid); stroke-width: 1; }
.bento-chart__area { fill: url(#bento-area-grad); }
.bento-chart__line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bento-chart__dot  { fill: var(--accent); stroke: var(--bg-surface); stroke-width: 2.5; }
.bento-chart__bar      { fill: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .38); }
.bento-chart__bar--on  { fill: var(--accent); }
.bento-chart__label { fill: var(--text-tertiary); font-size: 10px; font-family: var(--font-primary); }

/* ----- Responsive : 4 → 2 → 1 colonnes ------------------------------------- */
@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile--2x2, .tile--3, .tile--4 { grid-column: span 2; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .tile, .tile--2, .tile--2x2, .tile--3, .tile--4 { grid-column: span 1; grid-row: auto; }
  .tile--2x2 { min-height: 220px; }
}