/* ============================================================
   BEYENI.ma — Responsive CSS
   Breakpoints: 768px et 1200px
   ============================================================ */

/* --- Tablette (max 1200px) --- */
@media (max-width: 1200px) {
  .byn-grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .byn-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

/* --- Mobile (max 768px) --- */
@media (max-width: 768px) {
  /* Grid */
  .byn-grid-3,
  .byn-grid-4 {
    grid-template-columns: 1fr;
  }

  .byn-kpi-grid {
    grid-template-columns: 1fr;
  }

  /* Container */
  .byn-container {
    padding: 0 16px;
  }

  /* Section */
  .byn-section {
    padding: 48px 0;
  }

  /* Header */
  .byn-header__nav {
    display: none;
  }

  .byn-header__actions {
    gap: 8px;
  }

  .byn-header__burger {
    display: flex;
  }

  /* Footer */
  .byn-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .byn-footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Search bar */
  .byn-search-bar {
    flex-direction: column;
    padding: 16px;
  }

  .byn-search-bar__field {
    width: 100%;
  }

  /* Form row */
  .byn-form-row {
    grid-template-columns: 1fr;
  }

  /* Dashboard Sidebar */
  .byn-dash-layout {
    grid-template-columns: 1fr;
  }

  .byn-dash-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .byn-dash-sidebar.active {
    transform: translateX(0);
  }

  .byn-dash-main {
    margin-left: 0;
    padding: 20px 16px;
  }

  .byn-dash-sidebar__toggle {
    display: flex;
  }

  /* KPI Cards */
  .byn-kpi-card__value {
    font-size: 22px;
  }

  /* Tableaux */
  .byn-table-wrap {
    overflow-x: auto;
  }

  .byn-table {
    min-width: 700px;
  }

  /* Steps */
  .byn-step__line {
    width: 24px;
  }

  /* Hero titles */
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  /* Notif panel */
  .byn-notif-panel {
    width: 100%;
    right: -100%;
  }

  /* Page hero */
  .byn-page-hero {
    padding: 40px 16px 0;
  }

  .byn-page-hero__title {
    font-size: 22px;
  }
}