/* =====================================================
   WhyGraph — POC labo
   Velzon (--vz-* variables + composants Bootstrap) gère tout le visuel "standard".
   Ce fichier ne contient que les patterns spécifiques qui n'existent pas dans Velzon :
     - Timeline horizontale 12 mois
     - Matrice 3×3 process×outcome (insight Annie Duke)
     - Bouton micro circulaire avec pulsation
     - Petits ajustements compactes
   Tout le reste (cards, btns, badges, alerts, modals, forms) = classes Velzon natives.
===================================================== */

/* Tabs : masquage des panels inactifs (Bootstrap d-none ne suffit pas car on cible
   par data-tab). On gère via une classe de notre côté. */
.tab-panel { display: none; }
.tab-panel:not(.d-none) { display: block; }

/* ----------------------------------------------------
   BOUTON MICRO : circulaire, pulsation pendant l'enregistrement
   N'existe pas dans Velzon : pattern propre au mode capture vocal.
---------------------------------------------------- */
.btn-mic {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--vz-primary);
  color: #fff;
  border: none;
  font-size: 40px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  box-shadow: 0 4px 16px rgba(var(--vz-primary-rgb), 0.3);
}
.btn-mic:hover { transform: scale(1.05); color: #fff; }
.btn-mic.recording {
  background: var(--vz-danger);
  animation: pulse-rec 1.2s ease-in-out infinite;
}
@keyframes pulse-rec {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--vz-danger-rgb), 0.4); }
  50% { box-shadow: 0 0 0 16px rgba(var(--vz-danger-rgb), 0); }
}

/* ----------------------------------------------------
   CARTE DÉCISION : carte cliquable avec bordure gauche colorée selon outcome.
   Réutilise .card de Velzon mais ajoute une classe pour l'indicateur de statut.
---------------------------------------------------- */
.decision-card {
  background: var(--vz-card-bg, #fff);
  border: 1px solid var(--vz-border-color);
  border-left: 4px solid var(--vz-secondary);
  border-radius: var(--vz-border-radius, 0.25rem);
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.05s;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.decision-card:hover { box-shadow: var(--vz-box-shadow); transform: translateY(-1px); }
.decision-card.status-positif { border-left-color: var(--vz-success); }
.decision-card.status-mixte { border-left-color: var(--vz-warning); }
.decision-card.status-negatif { border-left-color: var(--vz-danger); }
.decision-card.status-pending { border-left-color: var(--vz-warning); }
.decision-card.status-overdue { border-left-color: var(--vz-danger); background: rgba(var(--vz-danger-rgb), 0.05); }

/* ----------------------------------------------------
   TIMELINE 12 mois — pattern visuel unique, pas dans Velzon.
   Pastilles colorées selon outcome, positionnées proportionnellement.
---------------------------------------------------- */
/* ============================================================
   TIMELINE V2 — Gantt minimaliste
   Chaque décision = une barre horizontale (de la prise au verdict).
   Empilement automatique en lanes pour éviter les chevauchements.
   Scroll horizontal + labels année + grille verticale au début d'année.
============================================================ */

/* Wrapper scrollable horizontalement */
.timeline-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0 28px;
  scrollbar-width: thin;
  position: relative;
}
.timeline-scroll::-webkit-scrollbar { height: 8px; }
.timeline-scroll::-webkit-scrollbar-thumb {
  background: var(--vz-border-color);
  border-radius: 4px;
}
.timeline-scroll::-webkit-scrollbar-track { background: transparent; }

/* Conteneur principal — hauteur calculée par JS (lanes × 30px + axe) */
.timeline-gantt {
  position: relative;
  /* Background : grille verticale subtile par mois, plus marquée par an */
  background-image: var(--gantt-grid, none);
}

/* Axe inférieur : labels mois + année */
.gantt-axis {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 24px;
  width: 100%;
  border-top: 1px solid var(--vz-border-color);
}
.gantt-axis-month {
  position: absolute;
  bottom: 12px;
  font-size: 10px;
  color: var(--vz-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.gantt-axis-year {
  position: absolute;
  bottom: -2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--vz-primary);
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.gantt-year-divider {
  position: absolute;
  top: 0;
  bottom: 24px;
  width: 1px;
  background: rgba(var(--vz-primary-rgb, 64, 81, 137), 0.3);
}

/* Indicateur "aujourd'hui" : trait vertical pointillé sur la date du jour */
.gantt-today {
  position: absolute;
  top: 0;
  bottom: 24px;
  width: 0;
  border-left: 2px dashed var(--vz-info);
  pointer-events: none;
  z-index: 3;
}
.gantt-today::before {
  content: 'Aujourd''hui';
  position: absolute;
  top: -4px;
  left: 4px;
  font-size: 9px;
  font-weight: 600;
  color: var(--vz-info);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Barres de décisions */
.gantt-bar {
  position: absolute;
  height: 22px;
  border-radius: 11px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 11px;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  /* Animation d'apparition cascade gérée via animation-delay inline */
  animation: gantt-fade-in 0.5s ease-out backwards;
  z-index: 2;
}
.gantt-bar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  filter: brightness(1.05);
  z-index: 5;
}
@keyframes gantt-fade-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Couleurs par statut — gradient subtil pour donner du relief */
.gantt-bar.d-positif {
  background: linear-gradient(135deg, var(--vz-success) 0%, #6ee7b7 100%);
}
.gantt-bar.d-mixte {
  background: linear-gradient(135deg, var(--vz-warning) 0%, #fcd34d 100%);
  color: #78350f;
}
.gantt-bar.d-negatif {
  background: linear-gradient(135deg, var(--vz-danger) 0%, #fca5a5 100%);
}
.gantt-bar.d-pending {
  background: linear-gradient(135deg, var(--vz-secondary) 0%, #cbd5e1 100%);
  border: 1px dashed rgba(255, 255, 255, 0.5);
}
.gantt-bar.d-overdue {
  background: linear-gradient(135deg, var(--vz-danger) 0%, #fbbf24 100%);
  animation: gantt-fade-in 0.5s ease-out backwards, gantt-pulse-overdue 2s ease-in-out infinite;
}
@keyframes gantt-pulse-overdue {
  0%, 100% { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
  50% { box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.25), 0 1px 2px rgba(0, 0, 0, 0.08); }
}

/* Petite pastille à la fin de la barre = moment du verdict (différencie de la fin tronquée) */
.gantt-bar-end-dot {
  position: absolute;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  top: 50%;
  transform: translateY(-50%);
}

/* ============================================================
   TOAST PREMIUM — système de notifications fluide
   File d'attente, animations slide-in/out, icônes, actions cliquables.
============================================================ */
.toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}
.toast-item {
  background: var(--vz-dark, #0f172a);
  color: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
  animation: toast-slide-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 240px;
  max-width: 380px;
  border-left: 3px solid var(--vz-info);
  transform-origin: bottom right;
}
.toast-item.toast-leaving {
  animation: toast-slide-out 0.2s ease-in forwards;
}
.toast-item.toast-success { border-left-color: var(--vz-success); }
.toast-item.toast-warning { border-left-color: var(--vz-warning); }
.toast-item.toast-error   { border-left-color: var(--vz-danger); }
.toast-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.toast-success .toast-icon { color: var(--vz-success); }
.toast-warning .toast-icon { color: var(--vz-warning); }
.toast-error .toast-icon   { color: var(--vz-danger); }
.toast-info .toast-icon    { color: var(--vz-info); }
.toast-content { flex: 1; line-height: 1.4; }
.toast-action {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s;
}
.toast-action:hover { background: rgba(255, 255, 255, 0.2); }
.toast-close {
  cursor: pointer;
  opacity: 0.5;
  font-size: 14px;
  margin-left: 4px;
}
.toast-close:hover { opacity: 1; }
@keyframes toast-slide-in {
  from { opacity: 0; transform: translateX(40px) scale(0.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toast-slide-out {
  to { opacity: 0; transform: translateX(40px) scale(0.9); }
}

/* ============================================================
   SPARKLINE — mini courbe d'évolution dans la hero card
   Score moyen mensuel sur 6-12 mois, sans axes ni grille.
============================================================ */
.hero-sparkline {
  position: relative;
  width: 100%;
  height: 50px;
  margin-top: 8px;
}
.hero-sparkline-svg { width: 100%; height: 100%; }
.hero-sparkline-path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
}
.hero-sparkline-fill {
  fill: rgba(255, 255, 255, 0.08);
}
.hero-sparkline-dot {
  fill: #fff;
  stroke: var(--vz-primary);
  stroke-width: 2;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}
.hero-sparkline-label {
  font-size: 10px;
  fill: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ============================================================
   COMPTEURS ANIMÉS — count-up sur les KPI cards
============================================================ */
.counter-animated {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: transform 0.2s;
}
.counter-animated.bumping {
  transform: scale(1.15);
  color: var(--vz-success);
}

/* ============================================================
   EMPTY STATES — illustrations + messages encourageants
============================================================ */
.empty-state-rich {
  text-align: center;
  padding: 60px 20px;
}
.empty-state-illu {
  width: 120px;
  height: 120px;
  margin: 0 auto 16px;
  opacity: 0.85;
}
.empty-state-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--vz-body-color);
}
.empty-state-msg {
  font-size: 14px;
  color: var(--vz-secondary);
  max-width: 480px;
  margin: 0 auto 16px;
  line-height: 1.5;
}
.empty-state-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   KEYBOARD SHORTCUTS — modale d'aide + indicateurs
============================================================ */
.kbd {
  display: inline-block;
  padding: 2px 8px;
  background: var(--vz-light);
  border: 1px solid var(--vz-border-color);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--vz-body-color);
  min-width: 20px;
  text-align: center;
}
.shortcuts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.shortcut-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--vz-border-color);
  font-size: 13px;
}
.shortcut-row:last-child { border-bottom: none; }
.shortcut-label { flex: 1; color: var(--vz-body-color); }

/* Indicateur "?" en bas à droite, discret */
.shortcuts-hint {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  z-index: 100;
  transition: transform 0.15s, background 0.15s;
}
.shortcuts-hint:hover {
  transform: scale(1.1);
  background: var(--vz-dark, #0f172a);
}

/* ============================================================
   CONFETTI — célébration verdict très positif
   Particules animées qui retombent. Subtle, ~1 seconde.
============================================================ */
.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  width: 8px;
  height: 12px;
  top: -20px;
  animation: confetti-fall 1.6s linear forwards;
}
@keyframes confetti-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--cf-x, 0px), 100vh, 0) rotate(720deg); opacity: 0; }
}

/* ============================================================
   COACH PAUL FLOTTANT — bulle bottom-right discrète
   Apparaît avec un message contextuel, disparaît après 8s ou click.
============================================================ */
.paul-bubble {
  position: fixed;
  bottom: 80px;
  right: 24px;
  max-width: 340px;
  background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
  color: #fff;
  border-radius: 14px;
  padding: 14px 16px 14px 56px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
  z-index: 9999;
  font-size: 13px;
  line-height: 1.45;
  animation: paul-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: default;
}
.paul-bubble.leaving { animation: paul-pop-out 0.25s ease-in forwards; }
@keyframes paul-pop-in {
  from { opacity: 0; transform: translateY(20px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes paul-pop-out {
  to { opacity: 0; transform: translateY(20px) scale(0.85); }
}
.paul-bubble::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6ee7b7, #3b82f6);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 2a4 4 0 014 4v2a4 4 0 11-8 0V6a4 4 0 014-4zm0 12c4.418 0 8 2.239 8 5v3H4v-3c0-2.761 3.582-5 8-5z'/></svg>");
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: center;
}
.paul-bubble-action {
  display: inline-block;
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
}
.paul-bubble-action:hover { background: rgba(255, 255, 255, 0.22); }
.paul-bubble-close {
  position: absolute;
  top: 6px;
  right: 8px;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.4;
  line-height: 1;
}
.paul-bubble-close:hover { opacity: 1; }

/* ============================================================
   TAGS PERSONNALISÉS — labels libres pour grouper transversalement
   Couleurs auto-attribuées (palette stable basée sur hash du nom).
============================================================ */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: transform 0.1s;
}
.tag-chip:hover { transform: translateY(-1px); }
.tag-chip-remove {
  cursor: pointer;
  opacity: 0.5;
  font-size: 12px;
  margin-left: 2px;
}
.tag-chip-remove:hover { opacity: 1; }

/* Palette de 8 couleurs pour les tags, attribuées par hash du nom (déterministe) */
.tag-color-0 { background: rgba(59, 130, 246, 0.15); color: #1e40af; }
.tag-color-1 { background: rgba(16, 185, 129, 0.15); color: #065f46; }
.tag-color-2 { background: rgba(245, 158, 11, 0.15); color: #92400e; }
.tag-color-3 { background: rgba(239, 68, 68, 0.15); color: #991b1b; }
.tag-color-4 { background: rgba(139, 92, 246, 0.15); color: #5b21b6; }
.tag-color-5 { background: rgba(236, 72, 153, 0.15); color: #9f1239; }
.tag-color-6 { background: rgba(6, 182, 212, 0.15); color: #155e75; }
.tag-color-7 { background: rgba(132, 204, 22, 0.15); color: #3f6212; }

/* Input de saisie de tags : container avec input + chips inline */
.tag-input-wrap {
  border: 1px solid var(--vz-border-color);
  border-radius: var(--vz-border-radius);
  padding: 6px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  min-height: 38px;
  background: #fff;
}
.tag-input-wrap:focus-within {
  border-color: var(--vz-primary);
  box-shadow: 0 0 0 2px rgba(var(--vz-primary-rgb), 0.15);
}
.tag-input-field {
  border: none;
  outline: none;
  flex: 1;
  min-width: 100px;
  font-size: 13px;
  padding: 2px 4px;
  background: transparent;
}
/* Suggestions en dropdown */
.tag-suggestions {
  position: absolute;
  background: #fff;
  border: 1px solid var(--vz-border-color);
  border-radius: var(--vz-border-radius);
  box-shadow: var(--vz-box-shadow);
  z-index: 100;
  max-height: 180px;
  overflow-y: auto;
  margin-top: 2px;
  min-width: 200px;
}
.tag-suggestion-item {
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tag-suggestion-item:hover { background: var(--vz-light); }
.tag-suggestion-item.create { color: var(--vz-primary); font-weight: 500; }

/* ============================================================
   MODE DÉLIBÉRATION — parcours guidé 5 étapes pré-capture
   Visuel "session structurée" pour les décisions à fort enjeu.
============================================================ */
.deliberation-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #fafafa 0%, #f0f4f8 100%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  padding: 30px;
  overflow-y: auto;
}
.deliberation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.deliberation-stepper {
  display: flex;
  gap: 4px;
  flex: 1;
  margin: 0 30px;
}
.deliberation-step-dot {
  flex: 1;
  height: 6px;
  background: var(--vz-light);
  border-radius: 3px;
  transition: background 0.3s;
}
.deliberation-step-dot.active { background: var(--vz-primary); }
.deliberation-step-dot.done { background: var(--vz-success); }
.deliberation-content {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
  animation: deliberation-fade-in 0.3s ease-out;
}
@keyframes deliberation-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.deliberation-step-num {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--vz-primary);
  font-weight: 600;
  margin-bottom: 10px;
}
.deliberation-step-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
  color: var(--vz-body-color);
}
.deliberation-step-hint {
  color: var(--vz-secondary);
  font-size: 14px;
  margin-bottom: 24px;
  line-height: 1.5;
}
.deliberation-input {
  width: 100%;
  border: 1px solid var(--vz-border-color);
  border-radius: 8px;
  padding: 14px;
  font-size: 15px;
  background: #fff;
  resize: vertical;
}
.deliberation-input:focus {
  outline: none;
  border-color: var(--vz-primary);
  box-shadow: 0 0 0 3px rgba(var(--vz-primary-rgb), 0.15);
}
.deliberation-list-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.deliberation-nav {
  max-width: 800px;
  margin: 24px auto 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* ============================================================
   VOICE-TO-VERDICT — bouton vocal dans la modale verdict
============================================================ */
.voice-verdict-card {
  background: rgba(var(--vz-primary-rgb), 0.05);
  border: 1px dashed var(--vz-primary);
  border-radius: var(--vz-border-radius);
  padding: 12px;
  margin-bottom: 14px;
  text-align: center;
}
.voice-verdict-status {
  font-size: 12px;
  color: var(--vz-secondary);
  margin-top: 6px;
}
.voice-verdict-transcript {
  font-size: 13px;
  margin-top: 8px;
  padding: 8px;
  background: #fff;
  border-radius: 4px;
  text-align: left;
  white-space: pre-wrap;
  display: none;
}
.voice-verdict-transcript.visible { display: block; }

/* ============================================================
   VUE TRIBUNAL — modale focus pour enchaîner les verdicts pending
============================================================ */
.tribunal-card {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: var(--vz-border-radius);
  padding: 14px 18px;
  margin-bottom: 14px;
}
.tribunal-progress {
  font-size: 12px;
  color: #78350f;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.tribunal-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  overflow: hidden;
}
.tribunal-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  transition: width 0.3s;
}

/* ============================================================
   MODE DUEL — face à face A vs B
============================================================ */
.duel-grid {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 12px;
  align-items: stretch;
}
.duel-side {
  background: #fff;
  border: 2px solid var(--vz-border-color);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.15s, border-color 0.15s;
}
.duel-side.winner {
  border-color: var(--vz-success);
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
}
.duel-side.loser { opacity: 0.7; }
.duel-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 24px;
  color: var(--vz-secondary);
}
.duel-side-title-input {
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-bottom: 1px solid var(--vz-border-color);
  padding: 4px 0;
  margin-bottom: 4px;
}
.duel-side-title-input:focus {
  outline: none;
  border-bottom-color: var(--vz-primary);
}
.duel-criterion-row {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 8px;
  align-items: center;
}
.duel-score-buttons {
  display: flex;
  gap: 2px;
}
.duel-score-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--vz-border-color);
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.duel-score-btn.active { background: var(--vz-primary); color: #fff; border-color: var(--vz-primary); }
.duel-total {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -1px;
  color: var(--vz-body-color);
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--vz-border-color);
}
.duel-side.winner .duel-total { color: var(--vz-success); }

/* ============================================================
   COACH IA pré-décision — encart conseil
   Affiché en pleine largeur dans la modale capture après analyse GPT.
   Visuellement distinct (encart info), agrégé en sections claires.
============================================================ */
.coach-card {
  background: linear-gradient(135deg, #ecfeff 0%, #f0f9ff 100%);
  border: 1px solid #67e8f9;
  border-radius: var(--vz-border-radius);
  padding: 14px 16px;
  position: relative;
}
.coach-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #0e7490;
  font-size: 14px;
  margin-bottom: 10px;
}
.coach-section { margin-bottom: 10px; }
.coach-section:last-child { margin-bottom: 0; }
.coach-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #0e7490;
  font-weight: 600;
  margin-bottom: 4px;
}
.coach-questions, .coach-blind-spots, .coach-priors {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.5;
}
.coach-questions li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 4px;
}
.coach-questions li::before {
  content: '?';
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  background: var(--vz-info);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
}
.coach-blind-spots li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 4px;
}
.coach-blind-spots li::before {
  content: '⚠';
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  color: var(--vz-warning);
  font-size: 14px;
  line-height: 16px;
}
.coach-priors li {
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 12px;
  border-left: 3px solid var(--vz-info);
}
.coach-recommendation {
  background: rgba(14, 116, 144, 0.08);
  border-left: 3px solid #0e7490;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-style: italic;
}
.coach-loading {
  text-align: center;
  padding: 24px;
}

/* ============================================================
   LIENS CAUSE-CONSÉQUENCE entre décisions
   Affiche la chaîne causale dans la fiche détail (parents/enfants).
============================================================ */
.links-section {
  background: #fafbfc;
  border: 1px solid var(--vz-border-color);
  border-radius: var(--vz-border-radius);
  padding: 12px 14px;
  margin-top: 12px;
}
.links-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.links-row:last-child { margin-bottom: 0; }
.links-row-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--vz-secondary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.link-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--vz-border-color);
  border-left: 3px solid var(--vz-info);
  border-radius: var(--vz-border-radius);
  cursor: pointer;
  font-size: 12px;
  transition: transform 0.1s, box-shadow 0.1s;
  color: var(--vz-body-color);
  text-decoration: none;
}
.link-chip:hover {
  transform: translateX(2px);
  box-shadow: var(--vz-box-shadow-sm);
  color: var(--vz-body-color);
}
.link-chip.is-positif { border-left-color: var(--vz-success); }
.link-chip.is-mixte { border-left-color: var(--vz-warning); }
.link-chip.is-negatif { border-left-color: var(--vz-danger); }
.link-chip.is-pending { border-left-color: var(--vz-secondary); }
.link-chip-arrow {
  color: var(--vz-secondary);
  font-size: 11px;
}

/* Mini-graphe causal dans la fiche détail (ASCII-style) */
.causal-chain {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding-left: 8px;
  border-left: 2px dashed var(--vz-border-color);
}
.causal-chain-item {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--vz-border-color);
  cursor: pointer;
}
.causal-chain-item:hover { background: var(--vz-light); }
.causal-chain-item.current {
  background: var(--vz-info);
  color: #fff;
  font-weight: 600;
}

/* Modale de sélection pour lier une décision */
.link-picker-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--vz-border-color);
  border-radius: var(--vz-border-radius);
  padding: 4px;
}
.link-picker-item {
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.link-picker-item:hover { background: var(--vz-light); }
.link-picker-item-meta { font-size: 11px; color: var(--vz-secondary); }

/* ============================================================
   MODE PRÉSENTATION plein écran
   Slideshow magazine pour démo client, navigation ←→ + Esc.
============================================================ */
.presentation-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  color: #fff;
  padding: 40px 60px;
}
.presentation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.presentation-counter {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.presentation-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.presentation-close:hover { background: rgba(255, 255, 255, 0.2); }
.presentation-slide {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  animation: slide-fade-in 0.4s ease-out;
}
@keyframes slide-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.presentation-domain {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 12px;
  width: fit-content;
}
.presentation-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.2;
  margin-bottom: 24px;
}
.presentation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 16px;
}
.presentation-block {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
}
.presentation-block-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
}
.presentation-block-value {
  font-size: 14px;
  line-height: 1.5;
}
.presentation-verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
}
.presentation-verdict.v-positif { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
.presentation-verdict.v-mixte { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
.presentation-verdict.v-negatif { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.presentation-verdict.v-pending { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; }
.presentation-lesson {
  margin-top: 16px;
  background: linear-gradient(90deg, rgba(252, 211, 77, 0.15), rgba(252, 211, 77, 0.02));
  border-left: 3px solid #fcd34d;
  padding: 12px 16px;
  border-radius: 4px;
  font-style: italic;
  font-size: 14px;
}
.presentation-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.presentation-nav-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}
.presentation-nav-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }
.presentation-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.presentation-progress {
  flex: 1;
  margin: 0 30px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.presentation-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6ee7b7, #fcd34d);
  transition: width 0.3s;
}
.presentation-hint {
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 8px;
  letter-spacing: 0.5px;
}

/* ============================================================
   CALIBRATION — révèle les biais systématiques de prédiction
   Compare ce qui était attendu vs ce qui s'est passé.
============================================================ */
.calibration-card {
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border: 1px solid #fde68a;
  border-radius: var(--vz-border-radius);
  padding: 14px 16px;
  margin-top: 12px;
}
.calibration-stat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(146, 64, 14, 0.2);
}
.calibration-stat:last-child { border-bottom: none; }
.calibration-stat-label {
  font-size: 13px;
  color: #78350f;
  font-weight: 500;
}
.calibration-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #78350f;
  font-variant-numeric: tabular-nums;
}
.calibration-stat-value.warn { color: var(--vz-danger); }
.calibration-stat-value.ok { color: var(--vz-success); }
.calibration-takeaway {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  font-size: 12px;
  font-style: italic;
  color: #78350f;
}

/* ============================================================
   TEMPLATES DE DÉCISIONS — galerie de modèles pré-remplis
   Visible dans la modale capture (étape 1). Click = pré-remplit le formulaire.
============================================================ */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.template-card {
  border: 1px solid var(--vz-border-color);
  border-radius: var(--vz-border-radius);
  padding: 12px;
  cursor: pointer;
  background: var(--vz-card-bg, #fff);
  transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.template-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--vz-box-shadow);
  border-color: var(--vz-info);
}
.template-card-icon {
  font-size: 24px;
  color: var(--vz-info);
}
.template-card-title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
}
.template-card-desc {
  font-size: 11px;
  color: var(--vz-secondary);
  line-height: 1.4;
}
.template-card-criteria-count {
  font-size: 10px;
  color: var(--vz-info);
  margin-top: 4px;
  font-weight: 500;
}

/* ============================================================
   HEATMAP CALENDAIRE — grille 53 semaines × 7 jours
   Style GitHub contributions, signature visuelle annuelle.
============================================================ */
.heatmap-wrap {
  overflow-x: auto;
  padding: 8px 4px;
  scrollbar-width: thin;
}
.heatmap-grid {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 4px;
  min-width: 700px;
}
.heatmap-day-labels {
  display: grid;
  grid-template-rows: repeat(7, 14px);
  gap: 3px;
  font-size: 9px;
  color: var(--vz-secondary);
}
.heatmap-day-labels span {
  display: flex;
  align-items: center;
}
.heatmap-cells {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 14px);
  grid-auto-columns: 14px;
  gap: 3px;
}
.heatmap-cell {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--vz-light, #f3f3f9);
  cursor: default;
  transition: transform 0.1s, box-shadow 0.1s;
}
.heatmap-cell.has-data { cursor: pointer; }
.heatmap-cell.has-data:hover {
  transform: scale(1.6);
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.heatmap-cell.lvl-positif { background: var(--vz-success); }
.heatmap-cell.lvl-mixte { background: var(--vz-warning); }
.heatmap-cell.lvl-negatif { background: var(--vz-danger); }
.heatmap-cell.lvl-pending { background: var(--vz-secondary); opacity: 0.5; }
/* Variantes d'intensité : plusieurs décisions le même jour rendent la couleur plus saturée */
.heatmap-cell.intensity-2 { filter: brightness(1.1); }
.heatmap-cell.intensity-3 { filter: brightness(1.2) saturate(1.2); }

.heatmap-month-labels {
  display: flex;
  margin-left: 28px;
  margin-bottom: 4px;
  font-size: 9px;
  color: var(--vz-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  height: 12px;
}
.heatmap-month-label {
  position: absolute;
  white-space: nowrap;
}

.heatmap-tooltip {
  position: absolute;
  background: rgba(15, 23, 42, 0.95);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11px;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.heatmap-tooltip.visible { opacity: 1; }

/* ============================================================
   COMPARATEUR DE DÉCISIONS — modale plein écran multi-colonnes
============================================================ */
.compare-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding: 4px;
}
.compare-col {
  background: var(--vz-card-bg, #fff);
  border: 1px solid var(--vz-border-color);
  border-radius: var(--vz-border-radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 280px;
}
.compare-col-header {
  border-bottom: 1px solid var(--vz-border-color);
  padding-bottom: 10px;
  margin-bottom: 4px;
}
.compare-col-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
}
.compare-col-meta {
  font-size: 11px;
  color: var(--vz-secondary);
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.compare-row-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--vz-secondary);
  font-weight: 600;
  margin-top: 8px;
  margin-bottom: 2px;
}
.compare-row-value {
  font-size: 12px;
  line-height: 1.4;
  color: var(--vz-body-color);
}
.compare-row-value.empty { color: var(--vz-secondary); font-style: italic; }
.compare-criteria-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  font-size: 12px;
}
.compare-criteria-list li { padding: 2px 0; }
.compare-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.compare-status-badge.b-positif { background: rgba(16, 185, 129, 0.15); color: #065f46; }
.compare-status-badge.b-mixte { background: rgba(245, 158, 11, 0.15); color: #92400e; }
.compare-status-badge.b-negatif { background: rgba(239, 68, 68, 0.15); color: #991b1b; }
.compare-status-badge.b-pending { background: var(--vz-light); color: var(--vz-secondary); }
.compare-status-badge.b-overdue { background: rgba(244, 63, 94, 0.2); color: #7f1d1d; }

/* Mode sélection sur les cartes décision : checkbox visible dans le coin haut */
.decision-card.compare-selectable { padding-left: 36px; position: relative; }
.decision-card.compare-selectable::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid var(--vz-border-color);
  border-radius: 4px;
  background: #fff;
  transition: background 0.1s, border-color 0.1s;
}
.decision-card.compare-selected::before {
  background: var(--vz-info);
  border-color: var(--vz-info);
}
.decision-card.compare-selected::after {
  content: '✓';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}

/* Bandeau "Mode comparaison" qui apparaît en sticky en haut de Mon Carnet */
.compare-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--vz-info);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--vz-border-radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 12px;
}
.compare-bar .btn { font-size: 12px; padding: 4px 10px; }

/* ----------------------------------------------------
   GRAPH : scatter plot propre, style cockpit business.
   Axes gradués, grille subtile, points colorés selon outcome,
   trajectoire lissée pour visualiser l'évolution chronologique.
---------------------------------------------------- */
.graph-svg { width: 100%; height: 100%; }

/* Axes et grille */
.graph-grid-line {
  stroke: var(--vz-border-color);
  stroke-width: 0.5;
  stroke-dasharray: 2 4;
}
.graph-axis-line {
  stroke: var(--vz-border-color);
  stroke-width: 1;
}
.graph-zero-line {
  stroke: var(--vz-secondary);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: 0.5;
}
.graph-axis-label {
  fill: var(--vz-secondary);
  font-size: 11px;
  font-family: inherit;
}
.graph-axis-tick {
  fill: var(--vz-secondary);
  font-size: 10px;
  font-family: inherit;
}

/* Trajectoire lissée reliant les décisions résolues */
.graph-trajectory {
  fill: none;
  stroke: var(--vz-info);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.4;
}

/* Points : circles cliquables, hover = grossit + halo */
.graph-point {
  cursor: pointer;
  transition: r 0.15s, filter 0.15s;
  stroke: #fff;
  stroke-width: 1.5;
}
.graph-point:hover { filter: drop-shadow(0 0 6px currentColor); }
.graph-point.p-positif { fill: var(--vz-success); color: var(--vz-success); }
.graph-point.p-mixte { fill: var(--vz-warning); color: var(--vz-warning); }
.graph-point.p-negatif { fill: var(--vz-danger); color: var(--vz-danger); }
.graph-point.p-pending { fill: var(--vz-secondary); color: var(--vz-secondary); }
.graph-point.p-overdue { fill: var(--vz-danger); color: var(--vz-danger); stroke: var(--vz-warning); stroke-width: 2; }

/* Tooltip HTML overlay (plus joli que SVG <title>) */
.graph-tooltip {
  position: absolute;
  background: var(--vz-dark, #0f172a);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.15s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  max-width: 300px;
  white-space: normal;
  line-height: 1.4;
}
.graph-tooltip.visible { opacity: 1; }
.graph-tooltip-title { font-weight: 600; margin-bottom: 4px; }
.graph-tooltip-meta { opacity: 0.75; font-size: 11px; }

/* ----------------------------------------------------
   MATRICE 3×3 PROCESS × OUTCOME — insight Annie Duke
   N'existe nulle part dans Velzon ni Bootstrap : pattern spécifique du module.
---------------------------------------------------- */
.po-matrix {
  display: grid;
  grid-template-columns: 100px repeat(3, 1fr);
  grid-template-rows: 32px repeat(3, 90px);
  gap: 4px;
}
.po-axis-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--vz-secondary);
  font-weight: 600;
}
.po-cell {
  border-radius: var(--vz-border-radius);
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--vz-border-color);
}
.po-cell-count { font-size: 24px; font-weight: 700; line-height: 1; }
.po-cell-label { font-size: 11px; color: var(--vz-secondary); line-height: 1.2; }
/* 4 quadrants nommés : compétence réelle / malchance / chance / vraie erreur */
.po-cell.po-vrai-bon { background: rgba(var(--vz-success-rgb), 0.15); border-color: rgba(var(--vz-success-rgb), 0.4); }
.po-cell.po-vrai-bon .po-cell-count { color: var(--vz-success); }
.po-cell.po-malchance { background: rgba(var(--vz-warning-rgb), 0.15); border-color: rgba(var(--vz-warning-rgb), 0.4); }
.po-cell.po-malchance .po-cell-count { color: var(--vz-warning); }
.po-cell.po-chance { background: rgba(var(--vz-info-rgb), 0.15); border-color: rgba(var(--vz-info-rgb), 0.4); }
.po-cell.po-chance .po-cell-count { color: var(--vz-info); }
.po-cell.po-vrai-mauvais { background: rgba(var(--vz-danger-rgb), 0.15); border-color: rgba(var(--vz-danger-rgb), 0.4); }
.po-cell.po-vrai-mauvais .po-cell-count { color: var(--vz-danger); }
.po-cell.po-neutre { background: var(--vz-light); }

/* ----------------------------------------------------
   BREAKDOWN PAR DOMAINE : barre horizontale de qualité jugement
   Légèrement custom car le gradient passe par 3 couleurs (rouge → jaune → vert).
---------------------------------------------------- */
.domain-row {
  display: grid;
  grid-template-columns: 140px 1fr 80px;
  align-items: center;
  gap: 12px;
}
.domain-row-bar {
  background: var(--vz-light);
  border-radius: 4px;
  height: 12px;
  position: relative;
  overflow: hidden;
}
.domain-row-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--vz-danger) 0%, var(--vz-warning) 50%, var(--vz-success) 100%);
  transition: width 0.3s;
}

/* ----------------------------------------------------
   PRIORS LIST : items dans le panneau "Regards des précédents"
   Utilise alert-info de Velzon pour le wrapper, le custom est juste les items.
---------------------------------------------------- */
.prior-item {
  background: #fff;
  border-left: 3px solid var(--vz-secondary);
  padding: 8px 12px;
  border-radius: var(--vz-border-radius);
  font-size: 13px;
  cursor: pointer;
}
.prior-item.p-positif { border-left-color: var(--vz-success); }
.prior-item.p-mixte { border-left-color: var(--vz-warning); }
.prior-item.p-negatif { border-left-color: var(--vz-danger); }
.prior-item-lesson {
  margin-top: 4px;
  font-style: italic;
  background: rgba(var(--vz-warning-rgb), 0.1);
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
}

/* ----------------------------------------------------
   LEÇONS RETENUES : items style "post-it"
---------------------------------------------------- */
.lesson-item {
  background: linear-gradient(90deg, rgba(var(--vz-warning-rgb), 0.08), rgba(var(--vz-warning-rgb), 0.02));
  border-left: 3px solid var(--vz-warning);
  padding: 8px 12px;
  border-radius: var(--vz-border-radius);
  font-size: 13px;
}

/* ----------------------------------------------------
   BIAIS CHIPS : badges Velzon avec compteur
   Réutilise .badge mais structure custom pour le compteur intégré.
---------------------------------------------------- */
.bias-chip {
  background: var(--vz-light);
  border: 1px solid var(--vz-border-color);
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bias-chip .bias-count {
  background: var(--vz-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
}

/* ----------------------------------------------------
   VERDICT BUTTONS : affinage des btn-soft Velzon pour qu'ils prennent
   toute la hauteur et restent sélectables.
---------------------------------------------------- */
.verdict-btn { padding: 12px 8px; transition: transform 0.05s; }
.verdict-btn.selected { box-shadow: 0 0 0 2px var(--vz-primary); }
.verdict-btn[data-outcome="positif"].selected { box-shadow: 0 0 0 2px var(--vz-success); }
.verdict-btn[data-outcome="mixte"].selected { box-shadow: 0 0 0 2px var(--vz-warning); }
.verdict-btn[data-outcome="negatif"].selected { box-shadow: 0 0 0 2px var(--vz-danger); }
.verdict-btn[data-process="bon"].selected { box-shadow: 0 0 0 2px var(--vz-info); }
.verdict-btn[data-process="moyen"].selected { box-shadow: 0 0 0 2px var(--vz-warning); }
.verdict-btn[data-process="mauvais"].selected { box-shadow: 0 0 0 2px var(--vz-danger); }

/* ----------------------------------------------------
   ALT ROW : ligne d'édition des alternatives écartées
---------------------------------------------------- */
.alt-row { display: flex; gap: 6px; margin-bottom: 6px; }
.alt-row input { flex: 1; }
.alt-row .btn-remove-alt {
  color: var(--vz-danger);
  border: none;
  background: transparent;
  padding: 4px 8px;
}

/* ----------------------------------------------------
   DETAIL VIEW : sections claires
---------------------------------------------------- */
.detail-section { margin-bottom: 16px; }
.detail-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--vz-secondary);
  font-weight: 600;
  margin-bottom: 4px;
}
.detail-value { font-size: 14px; line-height: 1.5; }
.detail-alt-list { padding-left: 0; list-style: none; }
.detail-alt-list li {
  padding: 6px 0;
  border-bottom: 1px dashed var(--vz-border-color);
}
.detail-alt-list li:last-child { border-bottom: none; }
.detail-alt-name { font-weight: 500; }
.detail-alt-reason { color: var(--vz-secondary); font-size: 13px; }

.detail-verdict-box {
  padding: 12px 14px;
  border-radius: var(--vz-border-radius);
  margin-top: 12px;
  border-left: 3px solid var(--vz-secondary);
  background: var(--vz-light);
}
.detail-verdict-box.v-positif {
  background: rgba(var(--vz-success-rgb), 0.08);
  border-left-color: var(--vz-success);
}
.detail-verdict-box.v-mixte {
  background: rgba(var(--vz-warning-rgb), 0.08);
  border-left-color: var(--vz-warning);
}
.detail-verdict-box.v-negatif {
  background: rgba(var(--vz-danger-rgb), 0.08);
  border-left-color: var(--vz-danger);
}

/* ----------------------------------------------------
   RESPONSIVE
---------------------------------------------------- */
@media (max-width: 768px) {
  .po-matrix { grid-template-columns: 80px repeat(3, 1fr); }
  .domain-row { grid-template-columns: 100px 1fr 60px; }
}

/* 2026-06-07 — Intégration Up-me : cacher les contrôles du labo standalone
   (userPicker = sélecteur Fabrice/Marie/Paul, n'a pas de sens en Up-me natif
    où l'user est unique via auth-ui.js). */
#view-whygraph #userPicker { display: none !important; }