/* Version mobile (≤ 760 px) : menu du bas, tableaux en cartes, pas de zoom ni de saut à la saisie.
   Uniquement les variables du design system (style.css). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; }
td, th, a, p, li { overflow-wrap: anywhere; }
img, svg, video { max-width: 100%; }
.bottombar, .subnav, .sheet { display: none; }

@media (max-width: 760px) {
  html, body { overscroll-behavior-y: none; }
  body { -webkit-tap-highlight-color: transparent; }

  /* En-tête compact, collant ; la navigation du haut cède la place au menu du bas */
  header { position: sticky; top: 0; z-index: 30; padding-block: 10px; padding-top: max(10px, env(safe-area-inset-top)); }
  header nav { display: none; }
  .brand img, .brand picture { height: 18px; }
  .brand span { font-size: 22px; }

  /* Sous-onglets */
  .subnav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); }
  .subnav[hidden] { display: none; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav button { flex: 0 0 auto; min-height: 36px; padding: 6px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line);
    background: transparent; color: var(--ink); font: 700 14px/20px var(--font-sans); }
  .subnav button.on { background: var(--header); border-color: var(--header); color: var(--header-ink); }

  /* Menu du bas */
  .bottombar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    background: var(--surface-raised); border-top: 1px solid var(--line);
    padding: 4px max(4px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); }
  .bottombar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px;
    border: 0; background: transparent; color: var(--ink-muted); font: 700 11px/14px var(--font-sans); border-radius: var(--radius-sm); }
  .bottombar button.on { color: var(--ink); }
  .bottombar button.on svg { color: var(--lagoon-strong); }
  .bottombar button.on span { border-bottom: 2px solid var(--lagoon-strong); }

  /* Place réservée au menu du bas ; boutons flottants remplacés par le panneau « Plus » */
  .tab { padding-top: 14px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .dock-ai, .dock-feedback { display: none !important; }
  .act-toast, .fb-toast { bottom: calc(78px + env(safe-area-inset-bottom)); }

  /* Panneau « Plus » */
  .sheet { display: block; position: fixed; inset: 0; z-index: 60; }
  .sheet[hidden] { display: none; }
  .sheet-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--forest) 35%, transparent); }
  .sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; background: var(--surface); border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 8px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 8px; }
  .sheet-item { min-height: 50px; text-align: left; padding: 12px 14px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink);
    font: 700 16px/22px var(--font-sans); }
  .sheet-item:active { background: var(--surface-sunk); }
  body.sheet-open { overflow: hidden; }

  /* Saisie : 16 px minimum, sinon l'iPhone zoome au toucher et toute la page « bouge » */
  input, select, textarea { font-size: 16px !important; }
  button, select, input[type="checkbox"] + span { touch-action: manipulation; }
  form button, .btn, nav button { min-height: 44px; }

  /* Chiffres clés sur deux colonnes */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 12px; min-width: 0; }
  .kpi b { font-size: 24px; }
  h2 { font-size: 16px; margin-top: 22px; }

  /* Filtres : grille deux colonnes, recherche pleine largeur */
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filters input[name="q"], .filters .chk { grid-column: 1 / -1; }
  .filters > * { min-width: 0; width: 100%; }

  /* Tableaux en cartes (libellés posés par mobile.js) */
  .table-wrap { overflow: visible; border: 0; background: transparent; border-radius: 0; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards tr:first-child:has(> th) { display: none; }
  table.cards tr { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 10px; }
  table.cards td { border: 0; padding: 5px 0; text-align: left !important; }
  table.cards td::before { content: attr(data-label); display: block; color: var(--ink-muted); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
  table.cards td[data-label=""]::before { content: none; }
  table.cards td a[href^="tel:"], table.cards td a[href^="mailto:"] { display: inline-block; padding: 6px 0; }
  table.cards td:first-child { font-size: 15px; }
  table.cards td > * { min-width: 0; }
  table.cards td select, table.cards td button { max-width: 100%; }
}