/**
 * Styles responsive pour BacTracker Maroc
 * Mobile-first approach
 */

/* Tablette (768px et plus) */
@media (min-width: 768px) {
  .container {
    padding: 0 var(--spacing-lg);
  }

  .nav-menu {
    gap: var(--spacing-xl);
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Bureau (1024px et plus) */
@media (min-width: 1024px) {
  .container {
    padding: 0 var(--spacing-lg);
  }

  .nav-menu {
    display: flex;
  }
}

/* Petit mobile (moins de 480px) */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 20px;
  }

  .container {
    padding: 0 var(--spacing-md);
  }

  .nav-menu {
    flex-direction: column;
    gap: var(--spacing-md);
    display: none;
  }

  .nav-menu.active {
    display: flex;
  }

  .btn {
    width: 100%;
  }

  .card {
    padding: var(--spacing-md);
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  table {
    font-size: 12px;
  }

  th,
  td {
    padding: var(--spacing-sm);
  }

  .flex {
    flex-direction: column;
  }

  .flex-between {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }
}

/* Écran large (1400px et plus) */
@media (min-width: 1400px) {
  .container {
    max-width: 1400px;
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Écran très grand (1600px et plus) */
@media (min-width: 1600px) {
  .container {
    max-width: 1600px;
  }
}

/* Impression */
@media print {
  body {
    background-color: white;
  }

  header,
  footer,
  .nav-auth,
  .btn {
    display: none;
  }

  .card {
    box-shadow: none;
    border: 1px solid var(--border-color);
    page-break-inside: avoid;
  }
}

/* Accessibilité - Préférence de mouvement réduit */
@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;
  }
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
  .alert-success {
    background-color: #1b5e20;
    color: #c8e6c9;
  }

  .alert-error {
    background-color: #b71c1c;
    color: #ffcdd2;
  }

  .alert-info {
    background-color: #0d47a1;
    color: #bbdefb;
  }

  .alert-warning {
    background-color: #e65100;
    color: #ffe0b2;
  }
}

/* Support des appareils tactiles */
@media (hover: none) and (pointer: coarse) {
  .btn,
  a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card {
    cursor: pointer;
  }
}