/* ============================================================
   captures.css — fausses interfaces logicielles (HTML/CSS pur)
   Échelle via container queries (cqh/cqw)
   ============================================================ */

.case-visual { position: relative; }

.shot {
  aspect-ratio: 4 / 3;
  container-type: size;
  border-radius: 14px;
  background: #fcfbf7;
  box-shadow:
    0 1px 0 rgba(25,35,46,0.06),
    0 24px 50px -24px rgba(25,35,46,0.28);
  border: 1px solid rgba(25,35,46,0.1);
  overflow: hidden;
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.case-visual:hover .shot {
  transform: translateY(-7px);
  box-shadow:
    0 1px 0 rgba(25,35,46,0.06),
    0 38px 70px -28px rgba(25,35,46,0.36);
}
.shot::after {
  content: ""; position: absolute; inset: 0; z-index: 10;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.35) 50%, transparent 62%);
  transform: translateX(-130%) skewX(-6deg);
  transition: transform 0.9s ease;
  pointer-events: none;
}
.case-visual:hover .shot::after { transform: translateX(130%) skewX(-6deg); }

/* --- barre macOS --- */
.shot-bar {
  height: 9cqh;
  display: flex; align-items: center; gap: 2.2cqh;
  padding: 0 3.4cqh;
  border-bottom: 1px solid rgba(25,35,46,0.08);
  background: #f3f1ea;
}
.shot-dots { display: flex; gap: 1.6cqh; }
.shot-dots i {
  width: 2.6cqh; height: 2.6cqh; border-radius: 50%;
  background: #d9d5ca;
}
.shot-dots i:nth-child(1) { background: #e8847a; }
.shot-dots i:nth-child(2) { background: #ecc56e; }
.shot-dots i:nth-child(3) { background: #8fc98b; }
.shot-title {
  font-family: var(--sans); font-size: 3cqh; font-weight: 500;
  color: var(--ink-muted);
}

.shot-body {
  position: absolute; inset: 9cqh 0 0 0;
  padding: 3.6cqh;
  font-family: var(--sans);
  display: flex; flex-direction: column; gap: 2.6cqh;
}

/* shared bits */
.app-head { display: flex; align-items: baseline; justify-content: space-between; }
.app-head .t { font-size: 4.4cqh; font-weight: 600; color: var(--ink); }
.app-head .s { font-size: 3cqh; color: var(--ink-muted); }
.chip {
  font-size: 2.6cqh; font-weight: 600;
  padding: 0.8cqh 1.8cqh; border-radius: 99px;
  display: inline-flex; align-items: center; gap: 1.2cqh;
}

/* ============ 1. DEVIS (artisan) ============ */
.dictation {
  display: flex; align-items: center; gap: 2.4cqh;
  background: color-mix(in srgb, var(--g1) 6%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--g1) 18%, transparent);
  border-radius: 2.2cqh;
  padding: 2.2cqh 2.8cqh;
}
.mic {
  width: 6cqh; height: 6cqh; border-radius: 50%; flex: none;
  background: var(--g1);
  position: relative;
}
.mic::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 1.7cqh; height: 2.6cqh; border-radius: 1cqh;
  background: #f8f6f0;
  transform: translate(-50%, -60%);
}
.mic::after {
  content: ""; position: absolute; inset: -1.2cqh; border-radius: 50%;
  border: 0.4cqh solid color-mix(in srgb, var(--g1) 50%, transparent);
  animation: mic-pulse 1.8s ease-out infinite;
}
@keyframes mic-pulse {
  0% { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}
.wave { display: flex; align-items: center; gap: 0.9cqh; height: 5cqh; flex: 1; }
.wave i {
  width: 0.9cqh; border-radius: 1cqh;
  background: var(--g2);
  height: 30%;
  animation: wave-b 1.1s ease-in-out infinite alternate;
}
.wave i:nth-child(2n) { animation-delay: -0.25s; }
.wave i:nth-child(3n) { animation-delay: -0.5s; height: 55%; }
.wave i:nth-child(5n) { animation-delay: -0.8s; height: 70%; }
@keyframes wave-b { from { transform: scaleY(0.45); } to { transform: scaleY(1.6); } }
.dictation .lbl { font-size: 2.8cqh; font-weight: 500; color: var(--g1); white-space: nowrap; }

.devis-items { display: flex; flex-direction: column; gap: 1.4cqh; flex: 1; }
.devis-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.9cqh 2.4cqh;
  background: #ffffff;
  border: 1px solid rgba(25,35,46,0.07);
  border-radius: 1.6cqh;
  font-size: 3.1cqh;
  opacity: 0;
  animation: devis-in 11s ease infinite;
}
.devis-row .p { font-weight: 600; font-variant-numeric: tabular-nums; }
.devis-row:nth-child(1) { animation-delay: 0.4s; }
.devis-row:nth-child(2) { animation-delay: 1.3s; }
.devis-row:nth-child(3) { animation-delay: 2.2s; }
.devis-row:nth-child(4) { animation-delay: 3.1s; }
@keyframes devis-in {
  0% { opacity: 0; transform: translateY(1.6cqh); }
  4%, 92% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; }
}
.devis-total {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(25,35,46,0.12);
  padding-top: 2.2cqh;
}
.devis-total .lab { font-size: 3cqh; color: var(--ink-muted); }
.devis-total .val { font-size: 4.6cqh; font-weight: 600; font-variant-numeric: tabular-nums; }
.devis-send {
  font-size: 2.9cqh; font-weight: 600; color: #f8f6f0;
  background: linear-gradient(120deg, var(--g1), var(--blue-deep) 150%);
  padding: 1.6cqh 3.2cqh; border-radius: 1.6cqh;
}

/* ============ 2. AGENDA (cabinet) ============ */
.sync-pill { background: color-mix(in srgb, #2e9e5b 12%, #fff); color: #1d7a43; }
.sync-pill i {
  width: 1.6cqh; height: 1.6cqh; border-radius: 50%; background: #2e9e5b;
  animation: sync-blink 2s ease infinite;
}
@keyframes sync-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.agenda-legend { display: flex; gap: 1.6cqh; }
.agenda-legend .chip { background: #ffffff; border: 1px solid rgba(25,35,46,0.08); color: var(--ink-muted); }
.agenda-legend i { width: 1.8cqh; height: 1.8cqh; border-radius: 0.5cqh; }
.src-1 { background: var(--g2); }
.src-2 { background: var(--blue-deep); }
.src-3 { background: var(--g3); }

.agenda-grid {
  flex: 1;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1.4cqh;
}
.agenda-col { display: flex; flex-direction: column; gap: 1.2cqh; }
.agenda-col .day {
  font-size: 2.5cqh; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-muted);
  text-align: center; padding-bottom: 0.6cqh;
  border-bottom: 1px solid rgba(25,35,46,0.1);
}
.ev {
  border-radius: 1.1cqh;
  padding: 1.2cqh 1.4cqh;
  font-size: 2.4cqh; font-weight: 500;
  color: #fff; line-height: 1.25;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ev.e1 { background: color-mix(in srgb, var(--g2) 88%, #fff); }
.ev.e2 { background: color-mix(in srgb, var(--blue-deep) 90%, #fff); }
.ev.e3 { background: color-mix(in srgb, var(--g3) 92%, #fff); }
.ev.tall { padding-bottom: 5cqh; }
.ev.new {
  animation: ev-in 9s ease infinite;
  transform-origin: top center;
}
@keyframes ev-in {
  0%, 24% { opacity: 0; transform: scale(0.86); }
  30%, 96% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; }
}

/* ============ 3. RELANCES (agence) ============ */
.rel-table { display: flex; flex-direction: column; gap: 1.3cqh; flex: 1; }
.rel-head-row, .rel-row {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 1fr 1.1fr 1.4fr;
  gap: 1.6cqh; align-items: center;
  font-size: 2.8cqh;
}
.rel-head-row {
  font-size: 2.4cqh; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-muted);
  padding: 0 2.2cqh;
}
.rel-row {
  background: #ffffff;
  border: 1px solid rgba(25,35,46,0.07);
  border-radius: 1.5cqh;
  padding: 1.8cqh 2.2cqh;
  position: relative;
}
.rel-row .m { font-weight: 600; font-variant-numeric: tabular-nums; }
.badge-j {
  font-size: 2.3cqh; font-weight: 600;
  padding: 0.6cqh 1.4cqh; border-radius: 99px;
  justify-self: start;
}
.j7  { background: color-mix(in srgb, var(--g3) 16%, #fff); color: #a35a10; }
.j14 { background: color-mix(in srgb, var(--g2) 13%, #fff); color: var(--g2); }
.j30 { background: color-mix(in srgb, var(--g1) 12%, #fff); color: var(--g1); }
.rel-status { display: inline-flex; align-items: center; gap: 1.1cqh; font-weight: 500; color: #1d7a43; }
.rel-status::before {
  content: "✓";
  width: 3cqh; height: 3cqh; border-radius: 50%;
  background: color-mix(in srgb, #2e9e5b 14%, #fff);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 2cqh; flex: none;
}
.rel-status.pending { color: var(--ink-muted); }
.rel-status.pending::before { content: "···"; background: var(--bg2); letter-spacing: -0.05em; }
.rel-row .send-anim { animation: status-in 8s ease infinite; }
@keyframes status-in {
  0%, 30% { opacity: 0; }
  38%, 100% { opacity: 1; }
}
.fly {
  position: absolute; right: 3cqh; top: 50%;
  width: 3.4cqh; height: 2.5cqh;
  background: var(--g2);
  border-radius: 0.5cqh;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  opacity: 0;
  animation: fly-off 8s ease infinite;
  pointer-events: none;
}
.fly::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0;
  height: 55%;
  background: color-mix(in srgb, var(--g2) 70%, #fff);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}
@keyframes fly-off {
  0%, 30% { opacity: 0; transform: translate(0, -50%) rotate(0deg); }
  34% { opacity: 1; }
  46%, 100% { opacity: 0; transform: translate(9cqh, -9cqh) rotate(14deg) scale(0.8); }
}
.rel-footnote { font-size: 2.6cqh; color: var(--ink-muted); }

/* ============ 4. COCKPIT (dirigeant) ============ */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8cqh; }
.kpi {
  background: #ffffff;
  border: 1px solid rgba(25,35,46,0.07);
  border-radius: 1.6cqh;
  padding: 2cqh 2.2cqh;
  display: flex; flex-direction: column; gap: 0.7cqh;
}
.kpi .k-lab { font-size: 2.4cqh; color: var(--ink-muted); }
.kpi .k-val { font-size: 4.4cqh; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .k-delta { font-size: 2.4cqh; font-weight: 600; color: #1d7a43; }
.kpi .k-delta.neg { color: var(--g2); }

.cockpit-charts { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.8cqh; flex: 1; min-height: 0; }
.panel {
  background: #ffffff;
  border: 1px solid rgba(25,35,46,0.07);
  border-radius: 1.6cqh;
  padding: 2cqh 2.2cqh;
  display: flex; flex-direction: column; gap: 1.4cqh;
  min-height: 0;
}
.panel .p-lab { font-size: 2.5cqh; font-weight: 600; color: var(--ink-muted); }
.linechart { flex: 1; min-height: 0; }
.linechart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.linechart .area { fill: url(#lc-fill); opacity: 0; animation: area-in 7s ease infinite; }
.linechart .stroke {
  fill: none; stroke: var(--g2); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: draw-line 7s ease infinite;
}
@keyframes draw-line {
  0% { stroke-dashoffset: 320; }
  28%, 94% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes area-in {
  0%, 24% { opacity: 0; }
  34%, 94% { opacity: 0.5; }
  100% { opacity: 0; }
}
.donut-wrap { flex: 1; display: flex; align-items: center; gap: 2.2cqh; min-height: 0; }
.donut { width: 15cqh; height: 15cqh; flex: none; transform: rotate(-90deg); }
.donut circle {
  fill: none; stroke-width: 6;
  stroke-dasharray: 0 100;
  animation: donut-in 7s ease infinite;
}
.donut .d-bg { stroke: var(--bg2); stroke-dasharray: 100 0; animation: none; }
.donut .d1 { stroke: var(--g1); --seg: 52; }
.donut .d2 { stroke: var(--g2); --seg: 31; animation-delay: 0.25s; }
.donut .d3 { stroke: var(--g3); --seg: 17; animation-delay: 0.5s; }
@keyframes donut-in {
  0%, 8% { stroke-dasharray: 0 100; }
  30%, 94% { stroke-dasharray: var(--seg) calc(100 - var(--seg)); }
  100% { stroke-dasharray: var(--seg) calc(100 - var(--seg)); opacity: 0; }
}
.donut-legend { display: flex; flex-direction: column; gap: 1.1cqh; font-size: 2.5cqh; color: var(--ink-muted); }
.donut-legend span { display: flex; align-items: center; gap: 1.2cqh; white-space: nowrap; }
.donut-legend i { width: 1.8cqh; height: 1.8cqh; border-radius: 0.5cqh; flex: none; }
.donut-legend .l1 i { background: var(--g1); }
.donut-legend .l2 i { background: var(--g2); }
.donut-legend .l3 i { background: var(--g3); }

/* live dot for cockpit */
.live-pill { background: color-mix(in srgb, var(--g2) 9%, #fff); color: var(--g1); }
.live-pill i {
  width: 1.6cqh; height: 1.6cqh; border-radius: 50%; background: var(--g2);
  animation: sync-blink 1.6s ease infinite;
}