runique 2.1.17

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.container, header {
  width: 80%;
}

/* ===== HEADER ===== */
.header {
  background: linear-gradient(135deg, var(--accent-red) 0%, #4b134f 100%);
  padding: var(--space-2xl);
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--space-2xl);
  box-shadow: var(--shadow-md);
}

.header h1 {
  font-size: 2.5rem;
  margin-bottom: var(--space-sm);
  color: var(--text-white);
  text-shadow: var(--text-shadow);
}

/* ===== COMMON INLINE ELEMENTS ===== */
.error-type, .badge, .level {
  display: inline-block;
  border-radius: var(--border-radius-md);
  font-weight: bold;
}

.error-type, .badge {
  padding: var(--space-xs) var(--space-md);
}

.error-type {
  background: rgba(255,255,255,0.2);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-lg);
}

.badge {
  font-size: 0.85rem;
  font-weight: 500;
}

.timestamp, .stack-frame .location {
  opacity: 0.8;
  font-size: 0.9rem;
}

/* ===== CONTENEURS AVEC FOND SECONDAIRE ===== */
.section, .stack-frame {
  background: var(--bg-secondary);
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--space-xl);
}

.section {
  padding: var(--space-xl);
  border-left: 4px solid var(--accent-red);
}

.section h2 {
  color: var(--accent-pink);
  margin-bottom: var(--space-lg);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.section h3 {
  color: var(--accent-orange);
  margin: var(--space-lg) 0 var(--space-sm) 0;
  font-size: 1.2rem;
}

/* ===== CONTENEURS AVEC FOND PRIMAIRE & BORDURE GAUCHE ===== */
.message-box, .stack-frame, .info-box, .info-card {
  background: var(--bg-primary);
  border-left: 3px solid var(--accent-orange);
  margin: var(--space-sm) 0;
  border-radius: var(--border-radius-md);
}

.message-box, .stack-trace, .info-box, .code-block {
  padding: var(--space-lg);
  overflow-x: auto;
}

.message-box, .code-block, pre.debug-repr, pre.debug-frame {
  font-family: 'Courier New', monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ===== STACK TRACE ===== */
.stack-frame {
  padding: var(--space-md);
  border-left-color: var(--accent-green);
}

.stack-frame:first-child {
  border-left-color: var(--accent-pink);
  background: var(--bg-error);
}

.stack-frame:first-child strong {
  color: var(--accent-pink);
}

.stack-frame .level {
  background: var(--accent-green);
  color: var(--bg-primary);
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.8rem;
  margin-right: var(--space-sm);
}

.stack-frame strong {
  color: var(--accent-orange);
}

.stack-frame .location {
  margin-top: var(--space-sm);
}

/* ===== ÉLÉMENTS CLIQUABLES ===== */
.debug-summary, summary {
  cursor: pointer;
  user-select: none;
  color: var(--accent-magenta);
}

.debug-summary {
  font-size: 0.85rem;
  margin-top: 0.4rem;
  color: var(--accent-purple);
}

.debug-summary:hover, summary:hover {
  opacity: 0.8;
}

.debug-summary:hover {
  color: var(--accent-magenta);
}

/* ===== INFO BOX & CARTES ===== */
.info-box, .info-card {
  border-left-color: var(--accent-blue);
  padding: var(--space-lg);
}

.info-box {
  margin-top: var(--space-lg);
}

.info-box strong {
  color: var(--accent-blue);
}

.code-block {
  font-size: 0.9rem;
}

.code-block .line-number {
  color: var(--text-dark);
  margin-right: var(--space-lg);
  user-select: none;
}

.code-block .highlight {
  background: rgba(255, 107, 107, 0.2);
  display: block;
}

/* ===== PRE DEBUG ===== */
pre.debug-repr, pre.debug-frame {
  border-radius: var(--border-radius-md);
  margin-top: var(--space-sm);
}

pre.debug-repr {
  background: var(--bg-tertiary);
  border: 1px solid var(--accent-magenta);
  padding: var(--space-lg);
  color: var(--text-light);
}

pre.debug-frame {
  background: var(--bg-dark);
  border: 1px solid #44475a;
  border-radius: var(--border-radius-sm);
  padding: 0.6rem 0.8rem;
  margin-top: 0.3rem;
  color: var(--accent-violet);
  font-size: 0.85rem;
}

/* ===== GRID ===== */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-lg) 0;
}

.info-card .label {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-xs);
}

.info-card .value {
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 500;
}

/* ===== TABLEAUX ===== */
.headers-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-lg) 0;
}

.headers-table th,
.headers-table td {
  padding: var(--space-md);
  text-align: left;
  border-bottom: 1px solid #3a3a3a;
}

.headers-table th {
  background: var(--bg-primary);
  color: var(--accent-orange);
  font-weight: 600;
}

.headers-table tr:hover {
  background: var(--bg-primary);
}

/* ===== BADGES COLORÉS ===== */
.badge-success {
  background: rgba(81, 207, 102, 0.2);
  color: var(--accent-green);
}

.badge-warning {
  background: rgba(255, 169, 77, 0.2);
  color: var(--accent-orange);
}

.badge-error {
  background: rgba(255, 107, 107, 0.2);
}

/* ===== TEMPLATES ===== */
.template-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}

.template-tag, .template-tag.current {
  background: var(--bg-primary);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--border-radius-md);
  font-size: 0.9rem;
}

.template-tag {
  border: 1px solid #3a3a3a;
}

.template-tag.current {
  border-color: var(--accent-pink);
  background: rgba(255, 107, 107, 0.1);
  color: var(--accent-pink);
  font-weight: 600;
}

/* ===== UTILITAIRES ===== */
.mb-1 {
  margin-bottom: var(--space-lg);
}

summary {
  font-weight: bold;
  padding: var(--space-sm) 0;
}

/* ===== OVERFLOW SAFETY (long messages / values, whatever the error) ===== */
.stack-frame,
.stack-frame strong,
.info-card .value,
.message-box,
.timestamp {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* ===== RESPONSIVE ===== */
/* The debug page renders highly variable content (stack traces, template
   source, headers table) depending on the error, so its width and code blocks
   must adapt down to mobile instead of staying at a fixed 80%. */
@media (max-width: 992px) {
  .container,
  header {
    width: 92%;
  }
}

@media (max-width: 768px) {
  .header {
    padding: var(--space-xl);
  }

  .header h1 {
    font-size: 2rem;
  }

  .section {
    padding: var(--space-lg);
  }

  .info-grid {
    grid-template-columns: 1fr;
  }
}

/* Headers table: scroll horizontally instead of pushing the page wider. */
@media (max-width: 600px) {
  .headers-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .container,
  header {
    width: 96%;
  }

  .header {
    padding: var(--space-lg);
  }

  .header h1 {
    font-size: 1.6rem;
  }

  .section h2 {
    font-size: 1.25rem;
  }

  .section h3 {
    font-size: 1.05rem;
  }

  .stack-frame .level {
    display: inline-block;
    margin-bottom: var(--space-xs);
  }

  .code-block,
  pre.debug-repr,
  pre.debug-frame {
    font-size: 0.8rem;
  }
}