/* ============================================================
   CUILLÈRE D'OR — RESPONSIVE
   Media queries mobile-first override
   Breakpoints :
     - sm  : <= 640px   (mobile)
     - md  : 641-960px  (tablette)
     - lg  : 961-1280px (laptop)
     - xl  : > 1280px   (desktop large)
   ============================================================ */

/* ============================================================
   TABLETTE & EN-DESSOUS (≤ 960px)
   - Sidebar admin masquée → bottom nav
   - Topnav public : menu burger
   - Grilles → 1 colonne
   ============================================================ */

@media (max-width: 960px) {

  /* Layout admin : sidebar devient bottom nav */
  .admin-main {
    margin-left: 0;
    margin-bottom: 64px; /* place pour bottom nav */
  }

  .admin-content {
    padding: var(--primitive-space-5);
  }

  /* Sidebar : devient bottom nav */
  .sidebar {
    top: auto;
    width: 100%;
    flex-direction: row;
    border-top: var(--primitive-border-1) solid var(--sidebar-border);
    height: 64px;
  }

  .sidebar-brand,
  .sidebar-user,
  .sidebar-cta,
  .sidebar-footer {
    display: none;
  }

  .sidebar-nav {
    display: flex;
    flex-direction: row;
    padding: 0;
    overflow-x: auto;
    flex: 1;
  }

  .sidebar-nav-item {
    flex: 1;
    flex-direction: column;
    gap: 2px;
    padding: var(--primitive-space-2);
    font-size: var(--fs-label-sm);
    border-left: 0;
    border-top: 3px solid transparent;
    text-align: center;
    justify-content: center;
    min-width: 72px;
  }

  .sidebar-nav-item.is-active {
    border-left-color: transparent;
    border-top-color: var(--sidebar-item-active-border);
  }

  /* Topnav public : nav cachée derrière burger */
  .topnav {
    padding: 0 var(--primitive-space-5);
  }

  .topnav-nav {
    display: none;
  }

  .topnav-cta .btn {
    padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
    font-size: var(--fs-label-md);
  }

  /* Public main */
  .public-main {
    padding: var(--primitive-space-8) var(--primitive-space-5);
  }

  /* Page header empilé */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-header-meta {
    align-items: flex-start;
  }

  /* Grilles passent à 1 colonne */
  .grid--cols-2,
  .grid--cols-3,
  .grid--cols-4,
  .grid--main-side,
  .grid--side-main {
    grid-template-columns: 1fr;
  }

  /* Dashboard topbar empilé */
  .dashboard-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-topbar-status {
    align-items: flex-start;
  }

  /* 3 priorités empilées */
  .priorities {
    grid-template-columns: 1fr;
  }

  .priority-card {
    min-height: auto;
  }

  /* KPIs : 2 colonnes au lieu de 4 */
  .kpi-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--primitive-space-4);
  }

  /* Dashboard 2col empilé */
  .dashboard-2col {
    grid-template-columns: 1fr;
    gap: var(--primitive-space-8);
  }

  /* Banner réduit */
  .dashboard-banner-title {
    font-size: var(--fs-heading-1);
  }

  /* Tailles typographie réduites pour mobile */
  .page-header-title,
  .dashboard-topbar-title {
    font-size: var(--fs-heading-1);
  }

  /* Footer */
  .footer-links {
    gap: var(--primitive-space-4);
  }
}

/* ============================================================
   MOBILE (≤ 640px)
   ============================================================ */

@media (max-width: 640px) {

  body {
    font-size: var(--fs-body-sm);
  }

  .admin-content,
  .public-main {
    padding: var(--primitive-space-4);
  }

  .dashboard-topbar-title {
    font-size: var(--fs-heading-2);
  }

  /* KPI : 1 colonne */
  .kpi-row {
    grid-template-columns: 1fr;
  }

  .stat-value {
    font-size: var(--fs-heading-1);
  }

  /* Cartes plus serrées */
  .card,
  .priority-card {
    padding: var(--primitive-space-4);
  }

  /* Tabs scroll horizontal */
  .tabs {
    margin-left: calc(-1 * var(--primitive-space-4));
    margin-right: calc(-1 * var(--primitive-space-4));
    padding-left: var(--primitive-space-4);
    padding-right: var(--primitive-space-4);
  }

  /* Page header : actions en colonne */
  .page-header-actions {
    width: 100%;
  }

  .page-header-actions .btn {
    flex: 1;
  }

  /* Photo block plus court */
  .photo-block {
    min-height: 160px;
    padding: var(--primitive-space-5);
  }

  .photo-block-title {
    font-size: var(--fs-heading-1);
  }

  /* Banner */
  .dashboard-banner-title {
    font-size: var(--fs-heading-2);
  }

  .dashboard-banner-photo {
    min-height: 160px;
  }
}

/* ============================================================
   PRINT (impression facture / devis)
   ============================================================ */

@media print {

  .sidebar,
  .topnav,
  .footer,
  .page-header-actions,
  .btn {
    display: none !important;
  }

  .admin-main {
    margin-left: 0;
  }

  body {
    background: white;
    color: black;
  }
}

/* ============================================================
   ACCESSIBILITÉ : reduced motion
   ============================================================ */

@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;
  }
}