/**
 * Composants opt-in pour les contributions : ajouter les classes ui-* au HTML.
 * Les tokens, le focus et le mouvement réduit restent ceux des feuilles existantes.
 */
@import url("./theme.css");
@import url("./ui.css");

:where(.ui-page, .ui-button, .ui-field, .ui-card, .ui-dialog, .ui-status, .ui-fieldset) {
  box-sizing: border-box;
}
.ui-page {
  margin: 0;
  padding: var(--space-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  line-height: 1.6;
}
.ui-container { max-width: 48rem; margin-inline: auto; min-width: 0; }
.ui-header, .ui-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.ui-header { justify-content: space-between; }
.ui-card {
  min-width: 0;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  overflow-wrap: anywhere;
}
.ui-button, .ui-field {
  min-height: 44px;
  max-width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  color: var(--color-text);
  font: inherit;
}
.ui-button { cursor: pointer; transition: border-color var(--transition-fast); }
.ui-button:hover:not(:disabled) { border-color: var(--color-accent); }
.ui-button-primary { background: var(--color-accent); color: var(--color-text-inverse); border-color: var(--color-accent); }
.ui-button-primary:hover:not(:disabled) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.ui-button:disabled { opacity: .6; cursor: not-allowed; }
.ui-label { display: block; }
.ui-form { display: grid; gap: var(--space-sm); min-width: 0; }
.ui-form > .ui-field { width: 100%; }
textarea.ui-field { resize: vertical; }
.ui-help { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.ui-fieldset { min-width: 0; border: 1px solid var(--color-border); padding: var(--space-md); margin: 0; }
.ui-choice { display: flex; align-items: center; gap: var(--space-sm); min-height: 44px; }
.ui-choice > input { flex-shrink: 0; width: 1.25rem; height: 1.25rem; accent-color: var(--color-accent); }
.ui-status { border-left: 4px solid var(--color-info); padding: var(--space-sm) var(--space-md); overflow-wrap: anywhere; }
.ui-status-success { border-color: var(--color-success); }
.ui-status-warning { border-color: var(--color-warning); }
.ui-status-error { border-color: var(--color-error); }
.ui-badge { display: inline-block; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-full); }
.ui-code { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--font-size-sm); padding: var(--space-md); border-radius: var(--radius-sm); background: var(--color-bg-secondary); }
.ui-dialog {
  width: min(36rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  overflow: auto;
  padding: var(--space-lg);
  background: var(--color-bg-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.ui-dialog::backdrop { background: var(--color-shadow); }
.ui-skip-link { position: absolute; top: var(--space-sm); left: var(--space-sm); transform: translateY(-200%); padding: var(--space-sm); background: var(--color-bg-secondary); color: var(--color-accent); z-index: var(--z-modal); }
.ui-skip-link:focus { transform: none; }
@media (max-width: 480px) { .ui-card { padding: var(--space-md); } }