/* Marmotte sur téléphone : une colonne, liste des pages ⇄ page ouverte */
body.web .dragbar { display: none; }
body.web { -webkit-tap-highlight-color: transparent; }
body.web .screen.center { padding-top: calc(env(safe-area-inset-top) + 24px); }

@media (max-width: 760px) {
  html, body { overscroll-behavior-y: none; }
  #app { grid-template-columns: 1fr; height: 100dvh; }
  #sidebar { border-right: 0; padding: calc(env(safe-area-inset-top) + 14px) 10px calc(env(safe-area-inset-bottom) + 10px); background: var(--bg); }
  body.m-page #sidebar { display: none; }
  body:not(.m-page) #main { display: none; }

  #search { font-size: 16px; padding: 10px 12px; }
  .page-item { padding: 10px 10px; font-size: 16px; }
  .pi-pin { opacity: 0.5; }
  .side-btn { padding: 10px 10px; font-size: 15px; }

  .topbar {
    display: flex; align-items: center; height: auto;
    padding: calc(env(safe-area-inset-top) + 6px) 8px 6px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .m-back { display: inline-flex !important; }

  #page, .trash-view { padding: 8px 18px calc(env(safe-area-inset-bottom) + 60px) 40px; max-width: none; }
  .trash-view { padding-left: 18px; }
  .page-head { margin-left: -6px; }
  .page-icon { font-size: 40px; }
  .page-title { font-size: 30px; }

  /* Blocs : poignée discrète toujours visible (pas de survol au doigt) */
  .block { margin-left: -30px; }
  .gutter { width: 26px; margin-right: 4px; opacity: 0.35; }
  .gutter .g-btn:first-child { display: none; }
  .rt, input, select, textarea { font-size: 16px; } /* évite le zoom automatique d'iOS */
  .rt.size-l { font-size: 23px; }
  .rt.size-s { font-size: 14px; }
  .f-row { grid-template-columns: minmax(78px, 112px) 1fr auto; gap: 8px; }
  .f-tools { opacity: 1; }

  .fmtbar { max-width: calc(100vw - 20px); overflow-x: auto; }
  .popover { max-width: calc(100vw - 20px); }
  .palette { grid-template-columns: repeat(9, minmax(24px, 1fr)); }

  .modal { align-items: end; }
  .modal-card { width: 100%; max-height: 88dvh; border-radius: 16px 16px 0 0; padding-bottom: calc(env(safe-area-inset-bottom) + 20px); }
  .toast { bottom: calc(env(safe-area-inset-bottom) + 20px); }
  .lock-btn { width: 34px; height: 34px; }
}