/* =========================================================
   responsive.css — breakpoints pour les 3 espaces
   ========================================================= */

/* ---------- <= 1100px : admin sidebar réduit ---------- */
@media (max-width: 1100px) {
  .admin-shell { grid-template-columns: 76px minmax(0, 1fr); }
  .sidebar { padding: 22px 10px 14px; }
  .sidebar-brand, .side-link span:not(.nav-count), .demo-card { display: none; }
  .side-link { justify-content: center; padding: 11px 0; }
  .side-link.active::before { top: 6px; bottom: 6px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .preview { grid-template-columns: 1fr; gap: 32px; padding: 48px 40px; }
  .alert-grid { grid-template-columns: 1fr; gap: 32px; }
  .cases { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .auth-shell, .admin-login-shell { grid-template-columns: 1fr 1fr; }
}

/* ---------- <= 860px : landing reflow ---------- */
@media (max-width: 860px) {
  .landing .container { width: min(100% - 36px, var(--max)); }
  .public-header { width: min(100% - 36px, var(--max)); height: 60px; padding: 0 10px 0 16px; }
  .public-nav { display: none; }
  .public-nav.open {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px; background: var(--forest-900);
    border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-citizen);
    box-shadow: var(--shadow-lg);
  }
  .public-nav.open a { padding: 12px 14px; }
  .menu-toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-xs); color: #fff; border: 1px solid rgba(255, 255, 255, .12); }
  .hero, .trust-band, .section-dark, .preview, .section-ivory, .cta-final, .public-footer { border-radius: var(--r-citizen); }
  .hero { padding-top: 48px; }
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "visual" "copy";
    gap: 28px;
    padding: 0 28px 48px;
  }
  .hero h1 { font-size: 2.2rem; text-align: left; }
  .hero-visual { aspect-ratio: 4/5; }
  .trust-band { grid-template-columns: 1fr 1fr; gap: 18px; padding: 22px 24px; }
  .section-dark, .preview, .section-ivory, .cta-final, .public-footer { padding: 48px 28px; margin-left: 18px; margin-right: 18px; width: auto; }
  .public-header, .hero, .trust-band { margin-left: 18px; margin-right: 18px; width: auto; }
  .steps-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); padding: 24px 0 24px; }
  .step:last-child { border-bottom: 0; }
  .step:not(:first-child) { padding-left: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 6px; }
  .cases { grid-template-columns: 1fr; }
}

/* ---------- <= 600px : en-tête public compact ---------- */
@media (max-width: 600px) {
  .public-header { gap: 10px; padding-left: 10px; }
  .public-brand-icon { width: 42px; height: 42px; flex-basis: 42px; }
  .public-header .brand-mark { width: 40px; height: 40px; }
  .public-cta { margin-left: auto; }
  .public-cta .btn { min-height: 40px; padding-inline: 16px; }
  .cta-long { display: none; }
  .cta-short { display: inline; }
}

/* ---------- <= 760px : app citoyen mobile ---------- */
@media (max-width: 760px) {
  .auth-shell, .admin-login-shell { grid-template-columns: 1fr; }
  .auth-visual, .admin-login-visual { min-height: auto; padding: 36px 28px; }
  .auth-visual .auth-message, .admin-login-message { margin: 28px 0; }
  .auth-panel, .admin-login-panel { padding: 36px 28px; }

  .app-header { padding: 0 16px; }
  .app-link { display: none; }
  .app-menu-toggle { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-xs); border: 1px solid var(--line); }
  .bottom-nav { display: flex; }
  .app-main { padding-bottom: 80px; }
  .app-main .container { width: calc(100% - 28px); }
  .status-block, .block, .activation-card { padding: 20px; }

  .pay-wrap { width: calc(100% - 28px); padding-top: 20px; }

  /* admin app : sidebar en drawer */
  .admin-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; z-index: 55; top: 29px; bottom: 0; left: 0; width: 240px; height: auto;
    transform: translateX(-101%); transition: transform .24s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-brand, .side-link span:not(.nav-count), .demo-card { display: block; }
  .side-link { justify-content: flex-start; padding: 9px 11px; }
  .mobile-menu { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-xs); border: 1px solid var(--line-soft); background: var(--white); }
  .admin-topbar { padding: 0 18px; height: 64px; }
  .admin-greet h1 { font-size: 1rem; }
  .admin-greet p { display: none; }
  .profile-meta { display: none; }
  .admin-content { padding: 20px 18px 40px; }

  .kpi-grid { grid-template-columns: 1fr; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar select, .search-control { width: 100%; max-width: none; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .view-head { flex-direction: column; align-items: stretch; }

  /* table -> cards */
  .table-wrap { border: 0; background: transparent; box-shadow: none; }
  thead { display: none; }
  tbody td { display: block; border: 0; padding: 6px 16px; }
  tbody tr { display: block; border: 1px solid var(--line-soft); border-radius: var(--r-citizen); background: var(--white); margin-bottom: 10px; padding: 12px 0; box-shadow: var(--shadow-xs); }
  tbody tr td:first-child { padding-top: 4px; }
  tbody tr td:last-child { padding-bottom: 4px; }
  .table-actions { justify-content: flex-start; }
}

/* ---------- <= 480px ---------- */
@media (max-width: 480px) {
  .hero h1 { font-size: 1.95rem; }
  .trust-band { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .operator-grid { grid-template-columns: 1fr; }
}