/* Module pages — extends styles.css */

/* Module hero */
.mod-hero {
  position: relative;
  padding: 88px 0 56px;
  overflow: hidden;
}
.mod-hero::before {
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 70%; height: 80%;
  background: radial-gradient(closest-side, var(--mod-glow, rgba(46,107,255,0.18)), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.mod-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 980px) { .mod-hero-grid { grid-template-columns: 1fr; gap: 36px; } }

.mod-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 8px;
  border-radius: var(--r-full);
  background: var(--mod-faint, rgba(46,107,255,0.10));
  border: 1px solid var(--mod-c, var(--brand-blue));
  margin-bottom: 22px;
}
.mod-eyebrow svg { color: var(--mod-c, var(--brand-blue)); }
.mod-eyebrow span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--mod-c, var(--brand-blue));
  text-transform: uppercase;
  font-weight: 600;
}

.mod-hero h1 { margin: 0 0 20px; font-size: clamp(36px, 4.6vw, 56px); }
.mod-hero h1 .accent-mod { color: var(--mod-c); }
.mod-hero .lede {
  font-size: 18px;
  color: var(--t1);
  max-width: 540px;
  margin: 0 0 28px;
  line-height: 1.55;
}

.mod-hero-visual {
  position: relative;
  background: var(--s2);
  border: 1px solid var(--l1);
  border-radius: var(--r-xl);
  padding: 28px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Persona cards */
.persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
@media (max-width: 900px) { .persona-grid { grid-template-columns: 1fr; } }
.persona {
  background: var(--s2);
  border: 1px solid var(--l1);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.persona-head {
  display: flex;
  gap: 14px;
  align-items: center;
}
.persona-avatar {
  width: 48px; height: 48px;
  border-radius: var(--r-full);
  background: var(--mod-faint, var(--s3));
  border: 1px solid var(--mod-c, var(--l2));
  color: var(--mod-c, var(--t0));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 16px;
}
.persona-name { color: var(--t0); font-weight: 600; font-size: 15px; }
.persona-role { color: var(--t2); font-size: 12px; }
.persona dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.persona dt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--mod-c);
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 600;
}
.persona dd { margin: 0; font-size: 13px; color: var(--t1); line-height: 1.5; }

/* Use case cards */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 40px;
}
@media (max-width: 800px) { .usecase-grid { grid-template-columns: 1fr; } }
.usecase {
  background: var(--s2);
  border: 1px solid var(--l1);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.usecase::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--mod-c);
}
.usecase-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--mod-c);
  text-transform: uppercase;
  font-weight: 600;
}
.usecase h4 { margin: 0; color: var(--t0); font-size: 17px; font-weight: 600; }
.usecase p { margin: 0; color: var(--t1); font-size: 14px; line-height: 1.55; }
.usecase .stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--t2);
  letter-spacing: 0.05em;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--l1);
}

/* Steps (how it works) */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 40px;
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--s2);
  border: 1px solid var(--l1);
  border-radius: var(--r-lg);
  padding: 20px;
  position: relative;
}
.step .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--mod-c);
  letter-spacing: 0.14em;
  font-weight: 600;
  display: block;
  margin-bottom: 10px;
}
.step h5 { margin: 0 0 6px; color: var(--t0); font-size: 14px; font-weight: 600; }
.step p { margin: 0; color: var(--t2); font-size: 13px; line-height: 1.5; }

/* Features */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--l1);
  border: 1px solid var(--l1);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 40px;
}
@media (max-width: 900px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .features { grid-template-columns: 1fr; } }
.feature {
  background: var(--s2);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feature-ic {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: var(--mod-faint);
  color: var(--mod-c);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.feature h5 { margin: 0; color: var(--t0); font-size: 14px; font-weight: 600; }
.feature p { margin: 0; color: var(--t2); font-size: 13px; line-height: 1.5; }

/* Brief box */
.brief-box {
  background:
    radial-gradient(800px 300px at 20% 0%, var(--mod-faint), transparent 70%),
    var(--s1);
  border: 1px solid var(--l1);
  border-radius: var(--r-xl);
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .brief-box { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; }
}
.brief-box h3 { margin: 0 0 14px; }
.brief-box .brief-content p { margin: 0 0 14px; color: var(--t1); font-size: 15px; line-height: 1.6; }
.brief-box .brief-content p:last-child { margin: 0; }
.brief-box .brief-content blockquote {
  margin: 18px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--mod-c);
  background: var(--s2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-style: italic;
  color: var(--t0);
  font-size: 15px;
}

/* Page back link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--t2);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
  transition: var(--m-fast);
}
.back-link:hover { color: var(--t0); }
.back-link::before { content: "←"; }

/* Pulse-specific live demo */
.pulse-demo {
  background: linear-gradient(180deg, var(--s3) 0%, rgba(167,139,250,0.08) 100%);
  border-radius: var(--r-lg);
  padding: 18px;
  border: 1px solid rgba(124,58,237,0.18);
}
.pulse-q {
  background: var(--s2);
  border-radius: var(--r-md);
  padding: 11px 14px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--t1);
  border-left: 2px solid var(--pulse);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(11,20,48,0.05);
}
.pulse-q .badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  background: var(--pulse);
  color: #FFFFFF;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  letter-spacing: 0.1em;
  font-weight: 600;
  flex-shrink: 0;
}

/* Network demo: idea cloud */
.idea-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px;
}
.idea-bubble {
  padding: 8px 14px;
  background: var(--s3);
  border: 1px solid var(--l1);
  border-radius: var(--r-full);
  font-size: 13px;
  color: var(--t1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.idea-bubble .votes {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--network);
  letter-spacing: 0.05em;
  font-weight: 600;
}
.idea-bubble.hot { border-color: var(--network); background: rgba(46,107,255,0.06); }

/* ================================
   ACADEMY — RICH USE CASE CARDS
   ================================ */
.aca-case {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  background: var(--s1);
  border: 1px solid var(--l1);
  border-radius: var(--r-xl);
  padding: 48px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(11,20,48,0.04), 0 12px 30px -20px rgba(11,20,48,0.10);
}
.aca-case::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--case-c, var(--academy-care));
}
.aca-case::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 100% 0%, var(--case-faint, rgba(134,239,172,0.06)), transparent 60%);
  pointer-events: none;
}
.aca-case > * { position: relative; z-index: 1; }

.aca-case.care { --case-c: var(--academy-care); --case-faint: rgba(134,239,172,0.10); }
.aca-case.cert { --case-c: var(--academy-care); --case-faint: rgba(134,239,172,0.10); }
.aca-case.game { --case-c: var(--academy-care); --case-faint: rgba(134,239,172,0.10); }

.aca-case:nth-child(odd) {
  grid-template-columns: 1fr 1.05fr;
}
.aca-case:nth-child(odd) .aca-case-mock { order: -1; }

@media (max-width: 900px) {
  .aca-case, .aca-case:nth-child(odd) {
    grid-template-columns: 1fr;
    padding: 28px 22px;
    gap: 32px;
  }
  .aca-case:nth-child(odd) .aca-case-mock { order: 0; }
}

.aca-case-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.aca-case-mode {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--case-c);
  background: var(--case-faint);
  border: 1px solid var(--case-c);
  padding: 5px 10px;
  border-radius: var(--r-full);
  font-weight: 600;
}
.aca-case-pop {
  font-size: 12px;
  color: var(--t2);
  padding: 5px 10px;
  border: 1px solid var(--l2);
  border-radius: var(--r-full);
}
.aca-case h3 {
  margin: 0 0 14px;
  font-size: 26px;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.aca-case-lede {
  margin: 0 0 22px;
  font-size: 15px;
  color: var(--t1);
  line-height: 1.6;
}
.aca-case-points {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aca-case-points li {
  font-size: 14px;
  color: var(--t1);
  line-height: 1.55;
  padding-left: 22px;
  position: relative;
}
.aca-case-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--case-c);
  opacity: 0.85;
}
.aca-case-points strong { color: var(--t0); font-weight: 600; }
.aca-case-stats {
  display: flex;
  gap: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--l1);
  flex-wrap: wrap;
}
.aca-case-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aca-case-stats strong {
  font-size: 26px;
  font-weight: 600;
  color: var(--case-c);
  letter-spacing: -0.6px;
  line-height: 1;
}
.aca-case-stats span {
  font-size: 12px;
  color: var(--t2);
  line-height: 1.35;
}

/* ===== Case mocks ===== */
.aca-case-mock {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}

/* CASE 1 — Care: child mood app */
.care-mock { padding: 12px; }
.cm-app {
  width: 100%;
  max-width: 340px;
  background: linear-gradient(180deg, var(--s3) 0%, rgba(252,211,77,0.08) 100%);
  border-radius: 28px;
  padding: 22px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 60px -25px rgba(134,239,172,0.30),
    0 12px 24px -10px rgba(11,20,48,0.08);
  border: 1px solid rgba(134,239,172,0.15);
}
.cm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.cm-dots { display: flex; gap: 4px; }
.cm-dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(11,20,48,0.10);
  display: block;
}
.cm-title {
  font-size: 13px;
  font-weight: 600;
  color: #7C3F00;
}
.cm-q {
  font-size: 17px;
  font-weight: 600;
  color: #4A2200;
  margin-bottom: 18px;
  line-height: 1.3;
}
.cm-faces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.cm-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--s2);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: var(--m-fast);
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(11,20,48,0.06);
}
.cm-face:hover { transform: translateY(-2px); }
.cm-face.active { border-color: var(--academy-care); background: #FFF7E0; }
.cm-face span { font-size: 28px; line-height: 1; }
.cm-face label {
  font-size: 11px;
  color: #5A2F00;
  font-weight: 500;
}
.cm-progress {
  height: 6px;
  background: rgba(134,239,172,0.15);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}
.cm-progress span {
  display: block;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, #F59E0B, #FCD34D);
  border-radius: 3px;
}
.cm-foot {
  font-size: 11px;
  color: #7C3F00;
  text-align: center;
  font-weight: 500;
}

/* CASE 2 — Cert: teacher gradebook */
.cert-mock { padding: 12px; }
.cm-grade {
  width: 100%;
  max-width: 380px;
  background: var(--s2);
  border-radius: var(--r-lg);
  padding: 20px;
  border: 1px solid var(--l1);
  box-shadow:
    0 30px 60px -25px rgba(134,239,172,0.25),
    0 12px 24px -10px rgba(11,20,48,0.08);
}
.cm-grade-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--l1);
  margin-bottom: 14px;
}
.cm-grade-class {
  font-size: 14px;
  font-weight: 600;
  color: var(--t0);
  margin-bottom: 4px;
}
.cm-grade-meta {
  font-size: 11px;
  color: var(--t2);
}
.cm-grade-avg {
  text-align: right;
  flex-shrink: 0;
}
.cm-grade-avg .num {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--academy-care);
  letter-spacing: -0.5px;
  line-height: 1;
}
.cm-grade-avg .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t2);
  margin-top: 4px;
  display: block;
}
.cm-grade-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.cm-row {
  display: grid;
  grid-template-columns: 70px 1fr 50px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.cm-row .nm { color: var(--t1); font-weight: 500; }
.cm-row .bar {
  height: 6px;
  background: var(--s3);
  border-radius: 3px;
  overflow: hidden;
}
.cm-row .bar i {
  display: block;
  height: 100%;
  background: var(--academy-care);
  border-radius: 3px;
}
.cm-row.low .bar i { background: #DC2626; }
.cm-row .sc {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--t0);
  font-weight: 600;
}
.cm-row.low .sc { color: #DC2626; }
.cm-grade-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--l1);
}
.cm-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: rgba(134,239,172,0.08);
  color: var(--academy-care);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  font-weight: 600;
}

/* CASE 3 — Game: live quiz leaderboard */
.game-mock { padding: 12px; }
.cm-game {
  width: 100%;
  max-width: 360px;
  background: linear-gradient(165deg, #1F0B3E 0%, #2D1A52 60%, #3D1F5E 100%);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow:
    0 30px 60px -25px rgba(124,58,237,0.45),
    0 12px 24px -10px rgba(11,20,48,0.18);
  position: relative;
  overflow: hidden;
}
.cm-game::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 80% 0%, rgba(252,211,77,0.20), transparent 60%);
  pointer-events: none;
}
.cm-game > * { position: relative; }
.cm-game-q {
  text-align: center;
  margin-bottom: 18px;
}
.cm-game-pill {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--academy-care);
  color: #1F0B3E;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-weight: 700;
  margin-bottom: 12px;
}
.cm-game-text {
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.3;
}
.cm-game-board {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.cm-team {
  display: grid;
  grid-template-columns: 26px 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
}
.cm-team.me {
  background: rgba(252,211,77,0.16);
  border-color: var(--academy-care);
  box-shadow: 0 0 0 3px rgba(252,211,77,0.10);
}
.cm-team .rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--academy-care);
  text-align: center;
}
.cm-team .emoji { font-size: 22px; line-height: 1; }
.cm-team .tname {
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
}
.cm-team .tscore {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--academy-care);
}
.cm-game-foot {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.idea-bubble.hot .votes { color: var(--network); }

/* Academy demo */
.academy-q {
  background: var(--s3);
  border: 1px solid var(--l1);
  border-radius: var(--r-md);
  padding: 14px;
  margin-bottom: 8px;
}
.academy-q h6 { margin: 0 0 10px; font-size: 13px; color: var(--t0); font-weight: 500; line-height: 1.4; }
.academy-opt {
  padding: 8px 12px;
  background: var(--s2);
  border: 1px solid var(--l1);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--t1);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.academy-opt.correct { border-color: var(--academy-care); color: var(--t0); background: rgba(22,163,74,0.06); }
.academy-opt .check { color: var(--academy-care); }

/* Vote demo: ballot — palette orange/ambre lisible sur dark navy */
.ballot {
  background: var(--s2);
  border: 1px solid rgba(251,146,60,0.40);
  border-radius: var(--r-md);
  padding: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--t1);
  box-shadow: 0 0 0 1px rgba(251,146,60,0.10), 0 12px 32px -16px rgba(251,146,60,0.30);
}
.ballot .row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--l1); }
.ballot .row:last-child { border-bottom: none; }
.ballot .row strong { color: var(--t0); font-weight: 700; }
.ballot .hash {
  margin-top: 12px;
  padding: 10px;
  background: var(--s3);
  border-radius: var(--r-sm);
  font-size: 10px;
  color: var(--vote-engage);
  word-break: break-all;
  border: 1px solid rgba(251,146,60,0.25);
}

/* Logo showcase strip on home */
.logo-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  background: var(--s1);
  border: 1px solid var(--l1);
  border-radius: var(--r-lg);
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 20px;
}
.logo-strip .item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t2);
}
.logo-strip .item svg { display: block; }

/* ================================
   PULSE — RICH USE CASE CARDS
   Pattern parallèle à .aca-case mais accents Pulse (live=violet, mod=violet/sky).
   ================================ */
.pul-case {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  background: var(--s1);
  border: 1px solid var(--l1);
  border-radius: var(--r-xl);
  padding: 48px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(11,20,48,0.04), 0 12px 30px -20px rgba(11,20,48,0.10);
}
.pul-case::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--case-c, var(--pulse));
}
.pul-case::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 100% 0%, var(--case-faint, rgba(124,58,237,0.06)), transparent 60%);
  pointer-events: none;
}
.pul-case > * { position: relative; z-index: 1; }

.pul-case.live { --case-c: var(--pulse); --case-faint: rgba(124,58,237,0.10); }
.pul-case.mod  { --case-c: var(--pulse-live); --case-faint: rgba(219,39,119,0.08); }

.pul-case:nth-child(odd) {
  grid-template-columns: 1fr 1.05fr;
}
.pul-case:nth-child(odd) .pul-case-mock { order: -1; }

@media (max-width: 900px) {
  .pul-case, .pul-case:nth-child(odd) {
    grid-template-columns: 1fr;
    padding: 28px 22px;
    gap: 32px;
  }
  .pul-case:nth-child(odd) .pul-case-mock { order: 0; }
}

.pul-case-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.pul-case-mode {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--case-c);
  background: var(--case-faint);
  border: 1px solid var(--case-c);
  padding: 5px 10px;
  border-radius: var(--r-full);
  font-weight: 600;
}
.pul-case-pop {
  font-size: 12px;
  color: var(--t2);
  padding: 5px 10px;
  border: 1px solid var(--l2);
  border-radius: var(--r-full);
}
.pul-case h3 {
  margin: 0 0 14px;
  font-size: 26px;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.pul-case-lede { margin: 0 0 22px; font-size: 15px; color: var(--t1); line-height: 1.6; }
.pul-case-points {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.pul-case-points li {
  font-size: 14px; color: var(--t1); line-height: 1.55;
  padding-left: 22px; position: relative;
}
.pul-case-points li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--case-c); opacity: 0.85;
}
.pul-case-points strong { color: var(--t0); font-weight: 600; }
.pul-case-stats {
  display: flex; gap: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--l1);
  flex-wrap: wrap;
}
.pul-case-stats > div { display: flex; flex-direction: column; gap: 2px; }
.pul-case-stats strong {
  font-size: 26px; font-weight: 600;
  color: var(--case-c);
  letter-spacing: -0.6px;
  line-height: 1;
}
.pul-case-stats span { font-size: 12px; color: var(--t2); line-height: 1.35; }
.pul-case-mock {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}

/* ===== CASE 1 — Live townhall mock (poll bars + word cloud + vibe meter) ===== */
.live-mock { padding: 12px; }
.lm-stage {
  width: 100%; max-width: 380px;
  background: linear-gradient(180deg, var(--s3) 0%, rgba(167,139,250,0.10) 100%);
  border-radius: 22px;
  padding: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 60px -25px rgba(124,58,237,0.30),
    0 12px 24px -10px rgba(11,20,48,0.08);
  border: 1px solid rgba(124,58,237,0.18);
}
.lm-stage-bar {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--l1);
}
.lm-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--crit);
  box-shadow: 0 0 0 4px rgba(226,69,62,0.18);
}
.lm-stage-title {
  font-size: 12px; font-weight: 600; color: var(--t0);
  flex: 1;
}
.lm-stage-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--t2);
}
.lm-poll-q {
  font-size: 13px; font-weight: 600; color: var(--t0);
  margin-bottom: 10px;
}
.lm-poll-row {
  display: grid;
  grid-template-columns: 90px 1fr 36px;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
}
.lm-pl { color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-pbar {
  height: 8px; background: rgba(124,58,237,0.10);
  border-radius: 4px; overflow: hidden;
}
.lm-pbar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--pulse), var(--pulse-live));
  border-radius: 4px;
}
.lm-pn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--pulse); font-weight: 600;
  text-align: right;
}
.lm-cloud {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  align-items: baseline;
  justify-content: center;
  padding: 16px 6px 12px;
  margin-top: 12px;
  border-top: 1px solid var(--l1);
}
.lm-w { color: var(--pulse); font-weight: 600; line-height: 1; opacity: 0.9; }
.lm-w-xl { font-size: 24px; color: var(--t0); }
.lm-w-l  { font-size: 18px; }
.lm-w-m  { font-size: 14px; opacity: 0.75; }
.lm-w-s  { font-size: 11px; opacity: 0.6; }
.lm-vibe {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--l1);
}
.lm-vibe-l, .lm-vibe-r {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t2);
}
.lm-vibe-bar {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--crit) 0%, var(--warn) 35%, var(--pulse) 65%, var(--ok) 100%);
}
.lm-vibe-cursor {
  position: absolute;
  top: -3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--s2);
  border: 2px solid var(--t0);
  box-shadow: 0 2px 8px rgba(11,20,48,0.30);
  transform: translateX(-50%);
}

/* ===== CASE 2 — Q&A moderation board mock ===== */
.mod-mock { padding: 12px; }
.mm-board {
  width: 100%; max-width: 380px;
  background: var(--s2);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 60px -25px rgba(219,39,119,0.18),
    0 12px 24px -10px rgba(11,20,48,0.08);
  border: 1px solid var(--l1);
}
.mm-tabs {
  display: flex; gap: 6px;
  border-bottom: 1px solid var(--l1);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.mm-tab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--t2);
  padding: 4px 8px;
  border-radius: var(--r-sm);
}
.mm-tab.active {
  color: var(--pulse);
  background: rgba(124,58,237,0.10);
  font-weight: 600;
}
.mm-pinned {
  background: linear-gradient(180deg, rgba(219,39,119,0.06), rgba(124,58,237,0.06));
  border: 1px solid rgba(219,39,119,0.30);
  border-radius: var(--r-md);
  padding: 12px;
  margin-bottom: 12px;
}
.mm-pinned-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pulse-live);
  font-weight: 700;
  margin-bottom: 6px;
}
.mm-pinned-q {
  font-size: 13px; font-weight: 600; color: var(--t0);
  line-height: 1.35;
  margin-bottom: 6px;
}
.mm-pinned-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--t2);
}
.mm-vote {
  font-family: 'JetBrains Mono', monospace;
  color: var(--pulse); font-weight: 600;
}
.mm-cluster {
  background: var(--s3);
  border: 1px solid var(--l2);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.mm-cluster-head {
  display: flex; justify-content: space-between;
  margin-bottom: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mm-cluster-tag { color: var(--pulse); font-weight: 700; }
.mm-cluster-count { color: var(--t2); }
.mm-cluster-syn {
  font-size: 12px; color: var(--t1);
  font-style: italic;
  margin-bottom: 8px;
  line-height: 1.4;
}
.mm-cluster-actions { display: flex; gap: 6px; }
.mm-btn {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  border: 1px solid;
  cursor: pointer;
}
.mm-btn.primary {
  background: var(--pulse);
  color: #FFFFFF;
  border-color: var(--pulse);
}
.mm-btn.ghost {
  background: transparent;
  color: var(--t1);
  border-color: var(--l2);
}
.mm-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: 11px;
  border-top: 1px solid var(--l1);
}
.mm-row-vote {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--t2);
  font-size: 10px;
}
.mm-row-q {
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-row-verdict {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--r-full);
  font-weight: 600;
}
.mm-row-verdict.ok {
  background: rgba(33,185,122,0.10);
  color: var(--ok);
}
.mm-row-verdict.crit {
  background: rgba(245,158,11,0.10);
  color: var(--warn);
}

/* ================================
   NETWORK + VOTE — RICH USE CASE CARDS
   Pattern parallèle à .aca-case et .pul-case.
   ================================ */
.net-case, .vot-case {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  background: var(--s1);
  border: 1px solid var(--l1);
  border-radius: var(--r-xl);
  padding: 48px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(11,20,48,0.04), 0 12px 30px -20px rgba(11,20,48,0.10);
}
.net-case::before, .vot-case::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--case-c, var(--network));
}
.net-case::after, .vot-case::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 100% 0%, var(--case-faint, rgba(46,107,255,0.06)), transparent 60%);
  pointer-events: none;
}
.net-case > *, .vot-case > * { position: relative; z-index: 1; }

.net-case.civic    { --case-c: var(--network-deep); --case-faint: rgba(30,64,175,0.10); }
.net-case.parents  { --case-c: var(--network);      --case-faint: rgba(46,107,255,0.10); }
.net-case.students { --case-c: var(--brand-blue-bright); --case-faint: rgba(251,146,60,0.10); }
.vot-case.engage    { --case-c: var(--vote-engage); --case-faint: rgba(251,146,60,0.12); }
.vot-case.certified { --case-c: var(--vote-engage); --case-faint: rgba(251,146,60,0.12); }
.vot-case.governance{ --case-c: var(--vote-engage); --case-faint: rgba(251,146,60,0.12); }

.net-case:nth-child(odd), .vot-case:nth-child(odd) { grid-template-columns: 1fr 1.05fr; }
.net-case:nth-child(odd) .net-case-mock,
.vot-case:nth-child(odd) .vot-case-mock { order: -1; }

@media (max-width: 900px) {
  .net-case, .net-case:nth-child(odd),
  .vot-case, .vot-case:nth-child(odd) {
    grid-template-columns: 1fr;
    padding: 28px 22px;
    gap: 32px;
  }
  .net-case:nth-child(odd) .net-case-mock,
  .vot-case:nth-child(odd) .vot-case-mock { order: 0; }
}

.net-case-meta, .vot-case-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.net-case-mode, .vot-case-mode {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--case-c); background: var(--case-faint);
  border: 1px solid var(--case-c);
  padding: 5px 10px; border-radius: var(--r-full); font-weight: 600;
}
.net-case-pop, .vot-case-pop {
  font-size: 12px; color: var(--t2);
  padding: 5px 10px; border: 1px solid var(--l2); border-radius: var(--r-full);
}
.net-case h3, .vot-case h3 {
  margin: 0 0 14px; font-size: 26px; letter-spacing: -0.5px; line-height: 1.2;
}
.net-case-lede, .vot-case-lede { margin: 0 0 22px; font-size: 15px; color: var(--t1); line-height: 1.6; }
.net-case-points, .vot-case-points {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.net-case-points li, .vot-case-points li {
  font-size: 14px; color: var(--t1); line-height: 1.55;
  padding-left: 22px; position: relative;
}
.net-case-points li::before, .vot-case-points li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--case-c); opacity: 0.85;
}
.net-case-points strong, .vot-case-points strong { color: var(--t0); font-weight: 600; }
.net-case-stats, .vot-case-stats {
  display: flex; gap: 28px;
  padding-top: 18px; border-top: 1px solid var(--l1); flex-wrap: wrap;
}
.net-case-stats > div, .vot-case-stats > div { display: flex; flex-direction: column; gap: 2px; }
.net-case-stats strong, .vot-case-stats strong {
  font-size: 26px; font-weight: 600; color: var(--case-c);
  letter-spacing: -0.6px; line-height: 1;
}
.net-case-stats span, .vot-case-stats span { font-size: 12px; color: var(--t2); line-height: 1.35; }
.net-case-mock, .vot-case-mock {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 380px;
}

/* ===== CASE 1 — Network civic (mairie) ===== */
.civic-mock { padding: 12px; }
.cv-board {
  width: 100%; max-width: 380px;
  background: var(--s2);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 60px -25px rgba(30,64,175,0.25),
    0 12px 24px -10px rgba(11,20,48,0.08);
  border: 1px solid rgba(30,64,175,0.18);
}
.cv-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--l1);
}
.cv-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--network-deep); font-weight: 700;
}
.cv-count { font-size: 11px; color: var(--t2); }
.cv-row {
  display: grid; grid-template-columns: 22px 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 4px;
  font-size: 12px;
  border-bottom: 1px solid var(--l1);
}
.cv-row:last-of-type { border-bottom: none; }
.cv-row.muted { opacity: 0.6; }
.cv-rank { color: var(--network-deep); font-weight: 700; }
.cv-q { color: var(--t1); }
.cv-vote {
  font-family: 'JetBrains Mono', monospace;
  color: var(--network); font-weight: 600; font-size: 11px;
}
.cv-spectrum {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 10px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--l1);
}
.cv-spec-l, .cv-spec-r {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t2);
}
.cv-spec-bar {
  position: relative; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--crit), var(--warn) 50%, var(--ok));
}
.cv-spec-bar i {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--network-deep); border-radius: 3px;
  opacity: 0.18;
}

/* ===== CASE 2 — Network parents école ===== */
.parents-mock { padding: 12px; }
.pm-app {
  width: 100%; max-width: 320px;
  background: linear-gradient(180deg, var(--s3) 0%, rgba(96,165,250,0.10) 100%);
  border-radius: 24px;
  padding: 22px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 60px -25px rgba(46,107,255,0.25),
    0 12px 24px -10px rgba(11,20,48,0.08);
  border: 1px solid rgba(46,107,255,0.18);
}
.pm-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.pm-school {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--network); font-weight: 700;
}
.pm-icon { font-size: 18px; }
.pm-q { font-size: 14px; font-weight: 600; color: var(--t0); margin-bottom: 14px; line-height: 1.35; }
.pm-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pm-opt {
  display: grid; grid-template-columns: 50px 1fr;
  gap: 10px; align-items: center;
  padding: 10px 12px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--l1);
  border-radius: var(--r-md);
}
.pm-opt.strong {
  background: rgba(46,107,255,0.08);
  border-color: rgba(46,107,255,0.4);
}
.pm-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 700; color: var(--network);
}
.pm-opt:not(.strong) .pm-pct { color: var(--t2); }
.pm-lbl { font-size: 12px; color: var(--t1); }
.pm-foot {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--t2);
  text-align: center;
  padding-top: 10px;
  border-top: 1px solid var(--l1);
}

/* ===== CASE 3 — Network événements étudiants (BDE feed) ===== */
.students-mock { padding: 12px; }
.sm-feed {
  width: 100%; max-width: 360px;
  background: var(--s2);
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 60px -25px rgba(96,165,250,0.20),
    0 12px 24px -10px rgba(11,20,48,0.08);
  border: 1px solid var(--l1);
}
.sm-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--l1);
}
.sm-tag{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-blue-bright); font-weight: 700;
}
.sm-live {
  display: flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--crit);
}
.sm-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--crit);
  box-shadow: 0 0 0 3px rgba(226,69,62,0.18);
}
.sm-card {
  background: var(--s3);
  border: 1px solid var(--l1);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.sm-card.hot {
  background: linear-gradient(180deg, rgba(96,165,250,0.10), rgba(96,165,250,0.04));
  border-color: rgba(96,165,250,0.4);
}
.sm-card-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.sm-cat{
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: 0.14em; color: var(--brand-blue-bright); font-weight: 700;
}
.sm-up{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--brand-blue-bright); font-weight: 700;
}
.sm-card-q { font-size: 12px; color: var(--t0); line-height: 1.35; margin-bottom: 4px; }
.sm-card-meta {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--t2);
}
.sm-flames{ color: var(--brand-blue-bright); font-weight: 600; }

/* ===== CASE 1 — Vote Engage (BDE ballot) ===== */
.engage-mock { padding: 12px; }
.em-ballot {
  width: 100%; max-width: 320px;
  background: linear-gradient(180deg, var(--s3) 0%, rgba(251,146,60,0.06) 100%);
  border-radius: 24px;
  padding: 20px;
  box-shadow:
    0 1px 0 rgba(251,146,60,0.10) inset,
    0 30px 60px -25px rgba(234,88,12,0.30),
    0 12px 24px -10px rgba(11,20,48,0.08);
  border: 1px solid rgba(234,88,12,0.20);
}
.em-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.em-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--vote-engage); font-weight: 700;
}
.em-live {
  display: flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; color: var(--ok); letter-spacing: 0.1em; text-transform: uppercase;
}
.em-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.em-q { font-size: 13px; font-weight: 600; color: var(--t0); margin-bottom: 12px; }
.em-list {
  display: grid; grid-template-columns: 24px 1fr;
  gap: 10px; align-items: center;
  padding: 10px 12px;
  background: var(--s2);
  border: 1px solid var(--l1);
  border-radius: var(--r-md);
  margin-bottom: 8px;
}
.em-list.selected {
  background: rgba(234,88,12,0.08);
  border-color: var(--vote-engage);
}
.em-radio { color: var(--vote-engage); font-size: 14px; text-align: center; }
.em-list-name { font-size: 13px; font-weight: 600; color: var(--t0); }
.em-list-desc { font-size: 11px; color: var(--t2); }
.em-validate {
  width: 100%; padding: 12px; margin-top: 8px;
  background: var(--vote-engage);
  color: #FFFFFF;
  border: none; border-radius: var(--r-md);
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.em-foot {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--t2); margin-top: 8px;
}

/* ===== CASE 2 — Vote Certified (CA asso) ===== */
.certified-mock { padding: 12px; }
.ce-panel {
  width: 100%; max-width: 380px;
  background: var(--s2);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow:
    0 1px 0 rgba(251,146,60,0.10) inset,
    0 30px 60px -25px rgba(251,146,60,0.25),
    0 12px 24px -10px rgba(11,20,48,0.08);
  border: 1px solid rgba(251,146,60,0.18);
}
.ce-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--l1);
}
.ce-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--vote-engage); font-weight: 700;
}
.ce-state {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--ok); font-weight: 600;
  padding: 3px 7px;
  background: rgba(33,185,122,0.10);
  border-radius: var(--r-full);
}
.ce-quorum { margin-bottom: 14px; }
.ce-q-head {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--t1); margin-bottom: 5px;
}
.ce-q-val { font-family: 'JetBrains Mono', monospace; color: var(--vote-engage); font-weight: 600; }
.ce-q-bar {
  height: 6px; background: rgba(251,146,60,0.10); border-radius: 3px; overflow: hidden;
}
.ce-q-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--vote-engage), var(--info));
  border-radius: 3px;
}
.ce-results { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ce-res {
  display: grid; grid-template-columns: 80px 1fr 36px;
  align-items: center; gap: 8px;
  font-size: 11px;
}
.ce-name { color: var(--t1); }
.ce-bar2 { height: 6px; background: rgba(251,146,60,0.08); border-radius: 3px; overflow: hidden; }
.ce-bar2 i {
  display: block; height: 100%;
  background: var(--vote-engage);
  border-radius: 3px;
}
.ce-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--vote-engage); font-weight: 600; text-align: right;
}
.ce-pv {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: rgba(251,146,60,0.06);
  border: 1px dashed rgba(251,146,60,0.4);
  border-radius: var(--r-md);
}
.ce-pv-icon { color: var(--vote-engage); font-size: 14px; }
.ce-pv-l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--vote-engage); font-weight: 600;
}

/* ===== CASE 3 — Vote Governance (référendum cohorte) ===== */
.governance-mock { padding: 12px; }
.gv-board {
  width: 100%; max-width: 380px;
  background: var(--s2);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow:
    0 1px 0 rgba(251,146,60,0.10) inset,
    0 30px 60px -25px rgba(251,146,60,0.20),
    0 12px 24px -10px rgba(11,20,48,0.08);
  border: 1px solid var(--l2);
}
.gv-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--l1);
}
.gv-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--vote-engage); font-weight: 700;
}
.gv-date { font-size: 10px; color: var(--t2); }
.gv-question { font-size: 12px; color: var(--t0); margin-bottom: 12px; line-height: 1.4; font-style: italic; }
.gv-bar {
  display: flex; height: 26px;
  border-radius: var(--r-md); overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid var(--l1);
}
.gv-yes { background: var(--ok); color: #FFFFFF; }
.gv-no { background: var(--crit); color: #FFFFFF; }
.gv-abst { background: var(--s3); color: var(--t2); }
.gv-bar > div {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
}
.gv-cohorts {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 10px; border-top: 1px solid var(--l1);
  margin-bottom: 12px;
}
.gv-coh {
  display: flex; justify-content: space-between;
  font-size: 11px;
}
.gv-coh-l { color: var(--t1); }
.gv-coh-v { color: var(--vote-engage); font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.gv-foot {
  padding-top: 10px; border-top: 1px solid var(--l1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--t2); text-align: center;
}