/* ============================================================
   DINOPIXEL — MOBILE FIX v4
   ============================================================ */

/* ── HAMBURGER : position fixed ── */
#galleryMenu {
  display: none;
  position: fixed !important;
  top: 44px !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
  min-width: 200px !important;
  max-width: 240px !important;
  max-height: calc(100dvh - 52px) !important;
  overflow-y: auto !important;
  z-index: 99999 !important;
  border-radius: 0 0 8px 0 !important;
  box-shadow: 4px 8px 28px rgba(0,0,0,.22) !important;
  background: #fff !important;
  padding: 6px !important;
}
#galleryMenu.open { display: block !important; }

@media (min-width: 769px) {
  #galleryMenu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    border-radius: 8px !important;
  }
}

/* ── PANNEAUX DESKTOP masqués sur mobile ── */
@media screen and (max-width: 820px) {
  #right_option,
  #left_menu,
  #palette_list,
  #color_shading,
  #pixel_preview,
  #control_bt {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    float: none !important;
    overflow: hidden !important;
    visibility: hidden !important;
    position: absolute !important;
  }

  /* Canvas zone : height auto, overflow auto (pan X+Y) */
  #drawing_only {
    float: none !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;        /* ← pas de height fixe */
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: auto !important;      /* scroll X ET Y */
    -webkit-overflow-scrolling: touch !important;
    background: transparent !important;
  }

  /* divMain : visible en overflow pour ne pas bloquer pan X */
  #divMain {
    float: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;   /* ← ne pas bloquer overflow-x */
    background: transparent !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  #middle_pixel_art_area {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Clearfix */
  #middle_pixel_art_area::after {
    content: ''; display: table; clear: both;
  }

  body { overflow-x: hidden !important; }
  .after_header,
  .after_header_mobile { margin-top: 44px !important; }

  .ad-banner, .space_a01 { display: none !important; }

  /* mobile_control : sticky (pas fixed) → page scrollable */
  #mobile_control {
    position: sticky !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    background: #fff !important;
    border-top: 2px solid #4caf50 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #palette_mobile {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    height: 30px !important;
    padding: 2px 4px !important;
    gap: 2px !important;
    align-items: center !important;
    scrollbar-width: none !important;
  }
  #palette_mobile::-webkit-scrollbar { display: none; }

  .flex_mobile {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 2px !important;
    padding: 3px 4px !important;
    align-items: center !important;
    height: 42px !important;
    scrollbar-width: none !important;
  }
  .flex_mobile::-webkit-scrollbar { display: none; }
  .flex_mobile > div { flex-shrink: 0 !important; }
  .flex_mobile > div img { width: 30px !important; height: 30px !important; }
}

/* ── Bouton PAN ── */
.btn_pan_mode_overlay {
  position: fixed !important;
  top: 50px !important;
  right: 6px !important;
  z-index: 500 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}
@media (min-width: 821px) { .btn_pan_mode_overlay { display: none !important; } }