/* ==================================== */
/* CSS VARIABLES - DESIGN SYSTEM        */
/* ==================================== */
:root {
  /* Backgrounds */
  --bg-sidebar: #F9F5F0;
  --bg-sidebar-hover: #F0EBE4;
  --bg-main: #FDFCFA;
  --bg-canvas: #FFFFFF;
  --bg-input: #FFFFFF;

  /* Borders — medium = bordure des champs et contrôles : 3,26:1 sur blanc,
     3,01:1 sur bg-sidebar (contraste non textuel 3:1, A11Y-08) */
  --border-light: #E8E2DA;
  --border-medium: #978D7F;

  /* Text — muted : 4,63:1 (bg-sidebar-hover) à 5,49:1 (blanc), A11Y-04 */
  --text-primary: #1A1A1A;
  --text-secondary: #5C5C5C;
  --text-muted: #696969;

  /* Accent - Terracotta Claude.ai. Contrastes AA (A11Y-04) : en texte, 4,60:1
     (bg-sidebar-hover) à 5,45:1 (blanc) ; --text-on-accent sur l'accent 5,45:1,
     sur le survol 6,94:1 ; success et danger 5,43:1. Le survol reste plus sombre
     que la base (success et danger : teintes reprises des anciens dégradés de
     .btn-sym, qui vont désormais de la base au survol). */
  --accent-primary: #A8502F;
  --accent-primary-hover: #8F4427;
  --accent-secondary: #7C6C5C;
  --accent-success: #4A7353;
  --accent-success-hover: #3D6A46;
  --accent-danger: #B04848;
  --accent-danger-hover: #983C3C;
  /* Texte et icônes posés sur un fond d'accent (primary, success, danger) :
     redéfini par thème (dark-theme.css), au moins 4,5:1 dans chacun */
  --text-on-accent: #FFFFFF;

  /* Anatomical - tons chair neutres. Poignée : 3,63:1 sur blanc, 3,38:1 sur
     --anatomy-surface, 3,10:1 à l'opacité 0,9 de .handle-point (A11Y-08) ;
     le survol reste plus sombre (4,73:1) */
  --anatomy-surface: rgba(210, 180, 160, 0.12);
  --anatomy-handle: #9C8263;
  --anatomy-handle-hover: #86704F;

  /* Sizing */
  --sidebar-width: 260px;
  --sidebar-collapsed: 60px;
  --border-radius-pill: 24px;
  --border-radius-lg: 12px;
  --border-radius-md: 8px;
  --border-radius-sm: 4px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
}

/* Mouvement réduit (UX-13, WCAG 2.3.3) : glissements, fondus et toasts quasi
   instantanés, y compris les transitions posées en style inline ; 0.01ms plutôt
   que 0 pour que transitionend et animationend partent encore. Même bloc que
   GynePop/css/gynepop.css et css/onboarding.css. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Error panel */
.error-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem;
  border-radius: 12px;
  background: var(--surface-secondary, #fef2f2);
  border: 1px solid var(--border-error, #fecaca);
  text-align: center;
}
.error-panel__icon {
  font-size: 2rem;
}
.error-panel__message {
  color: var(--text-secondary, #6b7280);
  font-size: 0.9rem;
  margin: 0;
}
.error-panel__retry {
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  border: 1px solid var(--border-error, #fecaca);
  background: white;
  color: var(--text-primary, #1f2937);
  cursor: pointer;
  font-size: 0.85rem;
}
.error-panel__retry:hover {
  background: var(--surface-secondary, #fef2f2);
}