/* ==========================================================================
   mobile.css — Responsive mobile #6.5
   --------------------------------------------------------------------------
   À inclure APRÈS design-system.css et app-header.css.
   Règles complémentaires pour les petits écrans (≤ 768px ; iPhone ≤ 430px).
   ========================================================================== */

/* ----- Layout global mobile ---------------------------------------------- */
@media (max-width: 768px) {

  .app-main {
    padding: var(--s-4) var(--s-3) calc(var(--s-4) + 72px);  /* place pour mobile-nav */
  }

  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 17px; }

  /* Cartes plus compactes */
  .card { padding: var(--s-4); border-radius: var(--r-md); }

  /* Formulaires : champs pleine largeur, plus gros pour tactile */
  .input, .select, .textarea {
    font-size: 16px;          /* ≥16 évite le zoom iOS sur focus */
    min-height: 44px;
    padding: 10px 14px;
  }
  .btn { min-height: 44px; padding: 10px 16px; font-size: var(--fs-md); }
  .btn.sm { min-height: 36px; padding: 8px 12px; }

  /* Grilles désempilées */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: var(--s-3); }

  /* Tables : scroll horizontal avec indicateur visuel */
  .table-wrap {
    margin-left: calc(var(--s-3) * -1);
    margin-right: calc(var(--s-3) * -1);
    padding-left: var(--s-3);
    padding-right: var(--s-3);
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .table thead th, .table tbody td {
    padding: 8px 10px;
    font-size: var(--fs-sm);
  }
  .table tbody td { max-width: 200px; }

  /* Alternative : tables "card" (chaque ligne = petite carte) */
  .table.as-cards thead { display: none; }
  .table.as-cards, .table.as-cards tbody,
  .table.as-cards tr, .table.as-cards td { display: block; width: 100%; }
  .table.as-cards tr {
    background: var(--c-bg-elev-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--s-3);
    margin-bottom: var(--s-3);
    box-shadow: var(--shadow-1);
  }
  .table.as-cards td {
    border: none;
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
  }
  .table.as-cards td::before {
    content: attr(data-label);
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
  }

  /* Modales : pleine largeur, arrondis réduits */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%;
    width: 100%;
    max-height: 95vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    animation: slide-up-mobile .25s ease-out;
  }
  @keyframes slide-up-mobile {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* Drawers : pleine largeur */
  .drawer { width: 100%; max-width: 100%; }

  /* Tabs : scroll horizontal */
  .tabs {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    padding-bottom: 2px;   /* espace pour l'underline active */
  }
  .tab { padding: 10px 14px; flex-shrink: 0; }

  /* Breadcrumbs compressés */
  .breadcrumbs { font-size: var(--fs-xs); }

  /* Toasts : pleine largeur en bas */
  .toast-root {
    left: var(--s-3);
    right: var(--s-3);
    bottom: calc(var(--s-3) + 64px);    /* au-dessus de la mobile-nav */
    max-width: none;
  }

  /* Stack "sticky actions" en bas de page */
  .sticky-actions {
    position: sticky;
    bottom: 72px;                       /* au-dessus de la mobile-nav */
    background: linear-gradient(to top, var(--c-bg) 70%, transparent);
    padding: var(--s-3) 0;
    margin: 0 calc(var(--s-3) * -1);
    padding-left: var(--s-3);
    padding-right: var(--s-3);
    z-index: 50;
  }
  .sticky-actions .btn { width: 100%; }

  /* Paramètres : onglets verticaux en mobile */
  .settings-panels .panel { padding: var(--s-4); }

  /* Signatures côte-à-côte → empilées */
  .signatures { grid-template-columns: 1fr; gap: var(--s-3); }

  /* Party blocks (devis) */
  .party-blocks { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* ----- Très petits écrans (≤ 420px) --------------------------------------- */
@media (max-width: 420px) {
  .app-header__inner { padding: 6px var(--s-3); min-height: 52px; }
  .tenant-name { max-width: 110px; }

  .tabs .tab { padding: 8px 12px; font-size: var(--fs-sm); }
  .card { padding: var(--s-3); }

  h1 { font-size: 22px; }
  .onboard-panel h1 { font-size: 22px; }
  .perks-grid { gap: var(--s-3); }
}

/* ----- Tablette (769–1024) ----------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .app-main { padding: var(--s-5) var(--s-4); }
}

/* ----- Landscape mobile (attention au header qui mange la hauteur) ------ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .app-header { position: static; }   /* libère la hauteur */
  .mobile-nav { display: none; }      /* on garde la nav haut */
  body { padding-bottom: 0; }
}

/* ----- Touch-first : zones de clic minimales 44×44 ------------------------ */
@media (pointer: coarse) {
  .btn, .tab, .pill, a[href], input[type="checkbox"], input[type="radio"] {
    min-height: 44px;
  }
  input[type="checkbox"], input[type="radio"] {
    min-width: 22px; min-height: 22px;
  }
  .table tbody tr { min-height: 44px; }
}