/* =========================
   📱 responsive.css — Styles responsifs et accessibilité
   ========================= */

/* Large screens (1200px+) */
@media (min-width: 1200px) {
  .container { max-width: 1100px; }
  .concept-table th, .concept-table td { font-size: 1.1em; }
}

/* Medium screens (768px-1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
  .container { max-width: 900px; }
  .level-card { padding: 1.2em 0.8em; }
}

/* Small screens (576px-767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .container { max-width: 98vw; padding: 1rem 0.2rem; }
  .level-card { font-size: 0.98em; }
  .concept-table th, .concept-table td { padding: 0.7em; }
}

/* Extra small screens (<576px) */
@media (max-width: 575px) {
  .container { max-width: 100vw; padding: 0.5rem 0.1rem; }
  .level-card { font-size: 0.93em; padding: 0.7em 0.3em; }
  .concept-table th, .concept-table td { font-size: 0.95em; padding: 0.5em; }
}

/* Orientation paysage mobile */
@media (max-width: 900px) and (orientation: landscape) {
  .container { padding: 0.5rem 0.1rem; }
  .level-card { font-size: 0.9em; }
}

/* Écrans tactiles et haute densité */
@media (pointer: coarse) {
  button, .btn { min-height: 48px; font-size: 1.1em; }
}

/* Impression */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .container, .level-card, .concept-table { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  header, nav, footer, .notification, .modal-overlay { display: none !important; }
}

/* Préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Mode sombre système */
@media (prefers-color-scheme: dark) {
  .concept-table { background: #232a36; color: #f5f6fa; }
  .level-card { background: #232a36; color: #f5f6fa; }
  .modal-content { background: #232a36; color: #f5f6fa; }
}