/* ============================================================================
 * inkkore/v4.css — sidebar en sections + vues Portfolio, Clients, Flash,
 * Studio, Consentement.
 * ==========================================================================*/

/* ── Sidebar : sections ────────────────────────────────────────────────── */
.sb-nav { gap: 0; overflow-y: auto; flex: 1; }
.sb-section { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .5rem; }
.sb-section-title { font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); padding: .7rem .7rem .3rem; }
.sb-item .sb-ico { width: 28px; height: 28px; }
.sb-item .sb-text b { font-size: .88rem; }

/* ── Portfolio : aftercare ─────────────────────────────────────────────── */
.ac-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ac-card { display: flex; gap: 1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-900); padding: 1rem; }
.ac-thumb { width: 84px; flex: none; }
.ac-thumb .ref-tile { aspect-ratio: 3/4; }
.ac-thumb .ref-tag { display: none; }
.ac-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ac-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.ac-top b { font-size: .98rem; }
.ac-meta { display: block; font-size: .82rem; color: var(--fg-mute); margin-top: .1rem; }
.ac-stage { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; flex: none; }
.ac-stage.ok { color: var(--ok); background: rgba(143,185,138,.12); }
.ac-stage.warn { color: var(--warn); background: rgba(217,183,119,.12); }
.ac-stage.acc { color: var(--acc); background: var(--acc-soft); }
.ac-stage.mute { color: var(--fg-mute); background: var(--ink-800); }

.ci-track { display: flex; align-items: center; margin: 1rem 0; }
.ci-step { display: flex; align-items: center; }
.ci-node { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1px solid var(--line-2); background: var(--ink-800); color: var(--fg-faint); }
.ci-node.done { background: var(--acc); border-color: var(--acc); color: #fff; }
.ci-node.scheduled { border-color: var(--acc-line); color: var(--acc); }
.ci-day { font-size: .72rem; color: var(--fg-mute); margin: 0 .35rem 0 .3rem; }
.ci-bar { width: 26px; height: 2px; background: var(--line-2); }
.ci-bar.done { background: var(--acc); }

.ac-actions { display: flex; align-items: center; gap: .5rem; margin-top: auto; flex-wrap: wrap; }
.ac-actions .qa { flex: none; }
.ac-done { font-size: .8rem; color: var(--ok); display: inline-flex; align-items: center; gap: .35rem; }
.ac-pub { font-size: .76rem; color: var(--fg-mute); display: inline-flex; align-items: center; gap: .3rem; }

/* Portfolio : galerie */
.folio { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
.folio-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; align-content: start; }
.folio-item { margin: 0; }
.folio-item .ref-tile { aspect-ratio: 1; }
.folio-item .ref-tag { display: none; }
.folio-item figcaption { padding: .5rem 0; }
.folio-item figcaption b { font-size: .85rem; display: block; }
.folio-item figcaption span { font-size: .76rem; color: var(--fg-mute); }
.stars { display: inline-flex; gap: 1px; margin-top: .25rem; }
.folio-reviews { border-left: 1px solid var(--line); padding-left: 1.4rem; }
.review { border-bottom: 1px solid var(--line); padding: .9rem 0; }
.review-top { display: flex; align-items: center; gap: .5rem; }
.review-top .card-ava { width: 26px; height: 26px; }
.review-top b { font-size: .85rem; flex: 1; }
.review p { font-size: .86rem; color: var(--fg-dim); font-style: italic; line-height: 1.5; margin-top: .5rem; }

/* ── Clients (CRM) ─────────────────────────────────────────────────────── */
.cli-table, .cs-table, .art-table { display: flex; flex-direction: column; margin-top: .5rem; }
.cli-row { display: grid; grid-template-columns: 2fr 1.6fr .8fr .9fr 1.1fr; gap: 1rem; align-items: center; padding: .8rem .5rem; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .14s; }
.cli-row:hover:not(.cli-head) { background: var(--ink-900); }
.cli-head { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-mute); cursor: default; border-bottom-color: var(--line-2); }
.cli-id { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.cli-id .card-ava { width: 34px; height: 34px; flex: none; }
.cli-id b { font-size: .92rem; }
.cli-sub { display: block; font-size: .76rem; color: var(--fg-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cli-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.tag.warn { color: var(--warn); border-color: rgba(217,183,119,.3); background: rgba(217,183,119,.1); }
.cli-sessions, .cli-ltv { font-family: var(--serif); font-size: 1.1rem; }
.cli-sessions span, .cli-ltv span { display: block; font-family: var(--sans); font-size: .68rem; color: var(--fg-mute); text-transform: uppercase; letter-spacing: .04em; }
.cli-ltv { color: var(--acc); }
.cli-last { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--fg-dim); }
.cli-last .warn { color: var(--warn); font-weight: 600; }

/* ── Flash drops ───────────────────────────────────────────────────────── */
.flash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.flash-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-900); overflow: hidden; transition: border-color .18s, transform .18s; }
.flash-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.flash-card.soldout { opacity: .82; }
.flash-art { position: relative; }
.flash-art .ref-tile { aspect-ratio: 4/3; border-radius: 0; border: 0; }
.flash-art .ref-tag { display: none; }
.flash-num { position: absolute; top: .6rem; left: .6rem; font-family: ui-monospace, monospace; font-size: .76rem; font-weight: 700; color: var(--fg); background: rgba(10,8,7,.7); padding: .2rem .5rem; border-radius: 6px; }
.flash-uniq { position: absolute; top: .6rem; right: .6rem; font-size: .68rem; font-weight: 800; letter-spacing: .05em; color: #fff; background: var(--acc); padding: .2rem .5rem; border-radius: 6px; }
.flash-sold { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5rem; background: rgba(10,8,7,.66); color: #fff; font-family: var(--serif); font-size: 1.3rem; letter-spacing: .02em; backdrop-filter: blur(2px); }
.flash-body { padding: 1rem; }
.flash-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.flash-top b { font-size: .98rem; }
.flash-meta { display: block; font-size: .8rem; color: var(--fg-mute); margin-top: .1rem; }
.flash-price { font-family: var(--serif); font-size: 1.3rem; color: var(--acc); flex: none; }
.flash-stock { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .9rem 0; }
.flash-dots { display: flex; gap: 4px; }
.flash-dots .fd { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-700); border: 1px solid var(--line-2); }
.flash-dots .fd.taken { background: var(--acc); border-color: var(--acc); }
.flash-left { font-size: .78rem; color: var(--fg-mute); }
.flash-actions { display: flex; align-items: center; gap: .5rem; }
.flash-actions .qa { flex: 1; }

/* ── Studio (multi-artistes) ───────────────────────────────────────────── */
.art-row { display: grid; grid-template-columns: 2.2fr 1.6fr .8fr .9fr 1.1fr; gap: 1rem; align-items: center; padding: .85rem .4rem; border-bottom: 1px solid var(--line); }
.art-head { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-mute); border-bottom-color: var(--line-2); }
.art-id { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.art-ava { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; border: 1px solid; flex: none; }
.art-id b { font-size: .92rem; }
.art-spec { display: block; font-size: .76rem; color: var(--fg-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-fill { display: flex; align-items: center; gap: .6rem; }
.art-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--ink-800); overflow: hidden; }
.art-bar i { display: block; height: 100%; border-radius: 99px; }
.art-fill span { font-size: .82rem; color: var(--fg-dim); width: 34px; }
.art-stat { font-family: var(--serif); font-size: 1.15rem; }
.art-stat span { display: block; font-family: var(--sans); font-size: .66rem; color: var(--fg-mute); text-transform: uppercase; letter-spacing: .04em; }
.art-cut { font-family: var(--serif); font-size: 1.15rem; color: var(--acc); }
.art-cut span { display: block; font-family: var(--sans); font-size: .66rem; color: var(--fg-mute); text-transform: uppercase; letter-spacing: .04em; }

.chairs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1rem; }
.chair { border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.1rem 1rem; text-align: center; background: var(--ink-1000); }
.chair.free { border-style: dashed; }
.chair-n { display: block; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: .7rem; }
.chair-ava { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; margin: 0 auto .5rem; }
.chair b { font-size: .92rem; display: block; }
.chair-sub { font-size: .76rem; color: var(--fg-mute); }
.chair-free { color: var(--fg-faint); font-size: .9rem; font-style: italic; }

/* ── Consentement & santé ──────────────────────────────────────────────── */
.cs-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 1rem; align-items: center; padding: .8rem .5rem; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .14s; }
.cs-row:hover:not(.cs-head) { background: var(--ink-900); }
.cs-head { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-mute); cursor: default; border-bottom-color: var(--line-2); }
.cs-ok { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; color: var(--ok); }
.cs-warn { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; color: var(--acc); font-weight: 600; }
.cs-status { display: flex; align-items: center; gap: .6rem; }
.cs-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; }
.cs-pill.ok { color: var(--ok); background: rgba(143,185,138,.12); }
.cs-pill.warn { color: var(--warn); background: rgba(217,183,119,.12); }
.cs-pill.mute { color: var(--fg-mute); background: var(--ink-800); }
.cs-docs { display: flex; flex-direction: column; gap: .5rem; }
.cs-doc { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-1000); font-size: .9rem; }
.cs-doc svg { color: var(--fg-mute); flex: none; }
.cs-doc.done svg:first-child { color: var(--acc); }
.cs-doc span { flex: 1; }
.cs-doc-ck { color: var(--ok) !important; }
.cs-doc-wait { font-size: .74rem; color: var(--fg-faint); flex: none !important; }
.cs-alert { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1.4rem; padding: 1rem; border-radius: var(--r-md); background: var(--acc-soft); border: 1px solid var(--acc-line); color: var(--fg-dim); font-size: .86rem; line-height: 1.5; }
.cs-alert svg { color: var(--acc); flex: none; margin-top: 1px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .sb-section { display: contents; }
  .sb-section-title { display: none; }
  .ac-grid, .flash-grid, .folio { grid-template-columns: 1fr; }
  .folio-gallery { grid-template-columns: repeat(2, 1fr); }
  .folio-reviews { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1rem; }
  .chairs { grid-template-columns: 1fr 1fr; }
  .cli-row { grid-template-columns: 2fr 1fr; }
  .cli-row .cli-tags, .cli-row span:nth-child(3) { display: none; }
  .cli-head { display: none; }
  .art-row { grid-template-columns: 2fr 1fr; }
  .art-row .art-fill, .art-head { display: none; }
  .cs-row { grid-template-columns: 2fr 1fr; }
  .cs-row .cs-gdpr, .cs-head { display: none; }
  .flash-grid { grid-template-columns: 1fr 1fr; }
}