/* =============================================================
   RESPONSIVE — Adaptations pour ecrans plus petits que HD
   Ne touche RIEN au-dessus de 1280×900. Override progressif.
   Charger en DERNIER pour overrider les autres CSS.
   =============================================================
   Sommaire :
     1. Variables et reset utiles
     2. UI principale (sidebar, recherche, pieces, chat, slider)
     3. Modales generiques (regle commune via attribut/classe)
     4. Modales specifiques par feature
        4.1  Inventaire
        4.2  House manager (gestion maison)
        4.3  Character creator (creation perso)
        4.4  Supermarket (shop de ville)
        4.5  Shop principal
        4.6  Galerie photos personnage
        4.7  Giftbox (ouverture coffres)
        4.8  Stats
        4.9  Mairie / cartes postales
        4.10 Monument
        4.11 Quetes
        4.12 Settings
        4.13 Player search
        4.14 Building histoire
        4.15 Forms (creator-form, quantity)
        4.16 Player profile
        4.17 Cards binder
        4.18 Monnaies binder
        4.19 Family tree columns
        4.20 Roads editor / filter
        4.21 Fishing
        4.22 Logs / banners / toasts
     5. Hauteur d'ecran (ecrans courts)
   ============================================================= */


/* =============================================================
   2) UI PRINCIPALE
   ============================================================= */

/* --- Laptop standard (≤ 1280 large ou ≤ 900 haut) --- */
@media (max-width: 1280px), (max-height: 900px) {
  .game-ui-container {
    gap: 5px;
    padding: 7px;
    left: 8px;
  }
  .game-ui-container .ui-button {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .game-ui-container .ui-button-icon {
    width: 30px;
    height: 30px;
  }
  .game-ui-container .ui-separator {
    margin: 2px 0;
  }
  .ui-resources {
    padding: 6px 10px;
    font-size: 13px;
  }
  .search-container {
    padding: 5px;
    top: 8px;
  }
  .search-input {
    width: 200px;
    height: 36px;
    font-size: 13px;
  }
  .chat-widget {
    width: 400px;
    height: 280px;
  }
}

/* --- Petit laptop / tablet paysage (≤ 1024px) --- */
@media (max-width: 1024px) {
  .game-ui-container {
    gap: 4px;
    padding: 6px;
    left: 6px;
  }
  .game-ui-container .ui-button {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .game-ui-container .ui-button-icon {
    width: 28px;
    height: 28px;
  }
  .ui-resources {
    padding: 5px 9px;
    font-size: 12px;
  }
  .search-container {
    top: 6px;
  }
  .search-input {
    width: 170px;
    height: 34px;
  }
  .search-container .ui-button {
    width: 36px;
    height: 36px;
  }
  .search-container .ui-button-icon {
    width: 24px;
    height: 24px;
  }
  .chat-widget {
    width: 360px;
    height: 260px;
    bottom: 8px;
    right: 8px;
  }
  .style-comparison-handle {
    width: 32px;
    height: 48px;
  }
}

/* --- Tablet portrait & mobile paysage (≤ 768px) --- */
@media (max-width: 768px) {
  /* Sidebar : passe de verticale a horizontale en bas, TOUJOURS
     visible en entier sans scroll (max-height auto, pas d'overflow). */
  .game-ui-container {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    top: auto !important;
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: none !important;     /* desactive le max-height qui forcait le scroll */
    overflow: visible !important;     /* plus aucun scroll */
    border-radius: 16px !important;
    padding: 5px !important;
    gap: 3px !important;
  }
  .game-ui-container .ui-button {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
  }
  .game-ui-container .ui-button-icon {
    width: 26px !important;
    height: 26px !important;
  }
  .game-ui-container .ui-separator {
    width: 1px !important;
    height: 22px !important;
    margin: 0 2px !important;
    background: rgba(255,255,255,0.15) !important;
  }
  .ui-resources,
  .ui-resources-standalone {
    top: 6px !important;
    left: 6px !important;
    padding: 4px 8px;
    font-size: 12px;
    z-index: 10000 !important;
  }
  /* Barre de recherche : pleine largeur sur sa propre ligne sous
     le compteur de pieces (qui est top-left) et a gauche du zoom +/-
     (qui est top-right). On cache les 2 boutons monde/jumelles. */
  .search-container {
    top: 6px !important;
    left: 130px !important;       /* a droite du compteur de pieces */
    right: 70px !important;       /* a gauche des boutons zoom +/- */
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 4px 6px !important;
    gap: 4px !important;
    box-sizing: border-box !important;
  }
  .search-container .ui-button {
    display: none !important;
  }
  .search-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    font-size: 16px !important;     /* >=16 pour bloquer le zoom auto iOS */
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }
  .search-input {
    width: 100%;
    flex: 1;
    height: 32px;
  }
  .search-container .ui-button {
    width: 32px;
    height: 32px;
  }
  .chat-widget {
    width: calc(100vw - 16px);
    max-width: none;
    height: 220px;
    right: 8px;
    /* Au-dessus de la sidebar (qui peut faire 2 lignes ~85px) */
    bottom: 100px;
  }
  .chat-widget.minimized {
    width: 180px;
    height: 32px;
    bottom: 100px;
  }
  .style-comparison-handle {
    display: none !important;
  }
}

/* --- Mobile portrait (≤ 480px) --- */
@media (max-width: 480px) {
  .game-ui-container {
    padding: 4px !important;
    gap: 2px !important;
    bottom: 6px !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .game-ui-container .ui-button {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }
  .game-ui-container .ui-button-icon {
    width: 22px !important;
    height: 22px !important;
  }
  .game-ui-container .ui-separator {
    height: 18px !important;
    margin: 0 1px !important;
  }
  .ui-resources,
  .ui-resources-standalone {
    font-size: 11px;
    padding: 3px 7px;
  }
  .search-container {
    padding: 3px 5px;
  }
  .search-input {
    height: 28px;
    font-size: 12px;
  }
  .search-container .ui-button {
    width: 28px;
    height: 28px;
  }
  .chat-widget {
    height: 180px;
    bottom: 95px;
  }
  .chat-widget.minimized {
    bottom: 95px;
  }
  #settingsButton,
  .settings-btn {
    transform: scale(0.85);
    transform-origin: top right;
  }
}

/* --- Ecrans tres courts (≤ 600 haut, mobile paysage) --- */
@media (max-height: 600px) {
  .game-ui-container {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    top: auto !important;
    bottom: 6px;
    left: 50% !important;
    right: auto;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 16px);
    max-height: 80px;
    padding: 5px;
    gap: 4px;
  }
  .game-ui-container .ui-button {
    width: 34px;
    height: 34px;
  }
  .game-ui-container .ui-button-icon {
    width: 26px;
    height: 26px;
  }
  .game-ui-container .ui-separator {
    width: 1px;
    height: 20px;
    margin: 0 2px;
    background: rgba(255,255,255,0.15);
  }
}


/* =============================================================
   3) MODALES — Regle commune sur petits ecrans
   ============================================================= */

@media (max-width: 768px) {
  /* Empeche le scroll horizontal sur toute la page */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* REGLE ULTIME : tout element a l'interieur d'une modale est
     contraint de ne jamais depasser la largeur du viewport.
     Cible toutes les variantes de noms (modal, overlay, container, etc.).
     Le selecteur d'attribut [class*="modal"] capture aussi les sous-elements. */
  [class*="modal"],
  [class*="overlay"],
  [class*="modal"] *,
  [class*="overlay"] *,
  [id*="modal" i] *,
  [id*="Overlay" i] *,
  .quests-container *,
  .inv-container *,
  .house-modal *,
  .character-creator-modal *,
  .stats-modal *,
  .mairie-modal *,
  .player-search-modal-content *,
  .pp-modal *,
  .character-gallery-content *,
  .settings-container *,
  .cards-binder-container *,
  .monnaies-binder-container *,
  .supermarket-container * {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Force le wrap du texte long (URLs, chemins, pseudos sans espaces) */
  [class*="modal"],
  [class*="overlay"],
  [class*="modal"] *,
  [class*="overlay"] * {
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* Toutes les modales : 100vw × 100vh, plus de border-radius,
     overflow-y auto pour scroll vertical, overflow-x hidden pour
     ne plus avoir a slider a droite. */
  .modal-content,
  .inv-modal,
  .inv-overlay,
  .inv-container,
  .house-modal,
  .house-modal-overlay,
  .house-assignment-modal,
  .character-creator-modal,
  .supermarket-container,
  .s2-modal,
  .character-gallery-content,
  .giftbox-overlay,
  .giftbox-stage,
  .stats-modal,
  .mairie-modal,
  .quests-container,
  .settings-container,
  .player-search-modal-content,
  .quantity-modal,
  .pp-modal,
  .cards-binder-container,
  .pk-modal,
  .monnaies-binder-container,
  #questsOverlay .quests-container,
  #shopModal .s2-modal,
  #shopOverlay .shop-container,
  #shopModal,
  #shopOverlay,
  #pkOverlay,
  #bjOverlay,
  #rlOverlay,
  #hsOverlay,
  #supermarketModal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  /* TOUS les enfants directs de modales ne peuvent pas depasser
     la largeur du parent. Empeche le contenu interne (grids, flex,
     images, tableaux) de forcer un scroll horizontal. */
  .modal-content > *,
  .inv-modal > *,
  .inv-container > *,
  .house-modal > *,
  .character-creator-modal > *,
  .s2-modal > *,
  .character-gallery-content > *,
  .stats-modal > *,
  .mairie-modal > *,
  .quests-container > *,
  .settings-container > *,
  .player-search-modal-content > *,
  .pp-modal > *,
  .cards-binder-container > *,
  .pk-modal > *,
  .monnaies-binder-container > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Images et media : jamais plus larges que leur conteneur */
  .modal-content img,
  .inv-modal img,
  .house-modal img,
  .character-creator-modal img,
  .quests-container img,
  .stats-modal img,
  .mairie-modal img,
  .pp-modal img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Grids communs : passent a auto-fill avec colonnes adaptatives */
  .inv-grid,
  .gallery-grid,
  .s2-grid,
  .mairie-postcards-grid,
  .stats-grid,
  .residents-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
    width: 100% !important;
    overflow: visible !important;
  }

  /* Flex containers communs : wrap force sur mobile */
  .inv-tabs,
  .quests-tabs,
  .stats-tabs,
  .mairie-tabs,
  .s2-tabs,
  .creator-tabs,
  .house-modal-tabs,
  .pp-tabs {
    flex-wrap: wrap !important;
  }

  /* Tableaux : passent en bloc scrollable */
  .modal-content table,
  .inv-modal table,
  .stats-modal table,
  .pp-modal table {
    display: block !important;
    overflow-x: auto !important;
    width: 100% !important;
  }

  /* Body scrollable interne (header reste visible) */
  .modal-body,
  .inv-body,
  .house-modal-body,
  .quests-body,
  .stats-body,
  .settings-body,
  .pp-content,
  .character-creator-content {
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* =============================================================
   4.1) INVENTAIRE
   ============================================================= */
@media (max-width: 1024px) {
  .inv-container { max-width: 95vw !important; max-height: 90vh !important; }
}
@media (max-width: 768px) {
  .inv-tabs { flex-wrap: wrap; gap: 4px; padding: 6px; }
  .inv-tab { font-size: 12px; padding: 6px 10px; }
  .inv-filters { flex-wrap: wrap; gap: 4px; padding: 4px 8px; }
  .inv-filter { font-size: 11px; padding: 4px 8px; }
  .inv-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important; gap: 6px !important; padding: 8px !important; }
  .inv-item { padding: 6px !important; }
  .inv-body { height: auto !important; max-height: calc(100vh - 180px) !important; }
}
@media (max-width: 480px) {
  .inv-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important; }
  .inv-tab { font-size: 11px; padding: 5px 8px; }
}


/* =============================================================
   4.2) HOUSE MANAGER (gestion maison + residents)
   ============================================================= */
@media (max-width: 1024px) {
  .house-modal { max-width: 95vw !important; max-height: 92vh !important; }
}
@media (max-width: 768px) {
  .house-modal-header { padding: 12px 14px !important; }
  .house-modal-body { padding: 10px !important; }
  .residents-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .resident-card { padding: 10px !important; }
  .house-section-title { font-size: 14px !important; }
  .house-rename-btn { font-size: 14px !important; padding: 4px 8px !important; }
  .house-modal-tabs { flex-wrap: wrap; gap: 4px; }
  .house-modal-tab { font-size: 12px; padding: 6px 10px; }
}


/* =============================================================
   4.3) CHARACTER CREATOR (creation perso) — 1800px en HD !
   Layout split en 2 panneaux (canvas + form). On stack en mobile.
   ============================================================= */
@media (max-width: 1280px) {
  .character-creator-modal { max-width: 99vw !important; }
  .character-creator-form { width: 360px !important; }
}
@media (max-width: 1024px) {
  .character-creator-form { width: 320px !important; }
  .character-creator-grid,
  .character-creator-content {
    flex-wrap: wrap !important;
  }
}
@media (max-width: 768px) {
  .character-creator-modal {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  .character-creator-content,
  .character-creator-grid,
  .character-creator-body {
    flex-direction: column !important;
    overflow-y: auto !important;
  }
  .character-creator-form {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
  }
  .character-creator-canvas,
  .character-preview,
  .creator-canvas-wrap {
    width: 100% !important;
    max-height: 50vh !important;
  }
  .character-creator-header { padding: 10px 14px !important; }
  .character-creator-header h2 { font-size: 16px !important; }
  .accessory-grid { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)) !important; }
  .creator-tabs { flex-wrap: wrap; gap: 4px; }
  .creator-tab { font-size: 11px; padding: 5px 8px; }
}


/* =============================================================
   4.4) SUPERMARKET (1920×1080 hardcoded)
   Le scale est deja gere par les media queries du fichier source.
   On ne touche pas au scale sur mobile (sinon UX casse).
   On force juste le centrage et empêche le débordement.
   ============================================================= */
@media (max-width: 768px) {
  #supermarketModal {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .supermarket-container {
    /* Le scale 0.35 du CSS source nous donne une vue zoom-out.
       On centre proprement. */
    transform-origin: top center !important;
    margin: 10px auto !important;
  }
}


/* =============================================================
   4.5) SHOP PRINCIPAL
   ============================================================= */
@media (max-width: 1024px) {
  .s2-modal { max-width: 95vw !important; }
}
@media (max-width: 768px) {
  .s2-tabs { flex-wrap: wrap; gap: 4px; }
  .s2-tab { font-size: 12px; padding: 6px 10px; }
  .s2-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important; gap: 6px !important; }
  .s2-slot { width: auto !important; aspect-ratio: 1 !important; }
}
@media (max-width: 480px) {
  .s2-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important; }
}


/* =============================================================
   4.6) GALERIE PHOTOS PERSONNAGE
   ============================================================= */
@media (max-width: 768px) {
  .character-gallery-content { padding: 10px !important; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; gap: 8px !important; }
  .gallery-photo { aspect-ratio: 1 !important; }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important; gap: 6px !important; }
}


/* =============================================================
   4.7) GIFTBOX (ouverture coffres)
   ============================================================= */
@media (max-width: 768px) {
  .giftbox-stage { padding: 10px !important; }
  .giftbox-box-wrap {
    width: 240px !important;
    height: 240px !important;
    max-width: 70vw;
    max-height: 70vw;
  }
  .giftbox-reward-card {
    width: 90vw !important;
    max-width: 360px !important;
  }
}


/* =============================================================
   4.8) STATS
   ============================================================= */
@media (max-width: 1024px) {
  .stats-modal { max-width: 95vw !important; }
}
@media (max-width: 768px) {
  .stats-tabs { flex-wrap: wrap; gap: 4px; }
  .stats-tab { font-size: 12px; padding: 6px 10px; }
  .stats-grid,
  .stats-cards { grid-template-columns: 1fr !important; gap: 8px !important; }
  .stats-card { padding: 10px !important; }
}


/* =============================================================
   4.9) MAIRIE / CARTES POSTALES
   ============================================================= */
@media (max-width: 1024px) {
  .mairie-modal { max-width: 95vw !important; }
}
@media (max-width: 768px) {
  .mairie-postcards-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 8px !important; }
  .mairie-tabs { flex-wrap: wrap; gap: 4px; }
  .mairie-tab { font-size: 12px; padding: 6px 10px; }
}
@media (max-width: 480px) {
  .mairie-postcards-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; }
}


/* =============================================================
   4.10) MONUMENT (form-based)
   ============================================================= */
@media (max-width: 768px) {
  .monument-form-row { flex-direction: column !important; gap: 6px !important; }
  .monument-form-row label { width: 100% !important; }
  .monument-form-row input,
  .monument-form-row select { width: 100% !important; }
}


/* =============================================================
   4.11) QUETES
   ============================================================= */
@media (max-width: 1024px) {
  .quests-container { max-width: 95vw !important; max-height: 92vh !important; }
}
@media (max-width: 768px) {
  .quests-header { padding: 12px !important; flex-wrap: wrap; gap: 8px; }
  .quests-tabs { padding: 0 12px 4px !important; flex-wrap: wrap; }
  .quests-tab { font-size: 12px !important; padding: 8px 10px !important; }
  .quest-card {
    grid-template-columns: 60px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .quest-action {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
  .quest-icon img { width: 50px !important; height: 50px !important; }
}


/* =============================================================
   4.12) SETTINGS (800×600 hardcoded en HD !)
   ============================================================= */
@media (max-width: 1024px) {
  .settings-container {
    width: 95vw !important;
    height: auto !important;
    max-height: 90vh !important;
  }
}
@media (max-width: 768px) {
  .settings-container {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  .settings-header { padding: 12px !important; }
  .settings-body { padding: 12px !important; }
  .settings-section { padding: 10px !important; margin-bottom: 12px !important; }
}


/* =============================================================
   4.13) PLAYER SEARCH
   ============================================================= */
@media (max-width: 1024px) {
  .player-search-modal-content { max-width: 95vw !important; }
}
@media (max-width: 768px) {
  .player-search-results { grid-template-columns: 1fr !important; }
  .player-search-card { padding: 10px !important; }
}


/* =============================================================
   4.14) BUILDING HISTOIRE
   ============================================================= */
@media (max-width: 768px) {
  .histoire-textarea { min-height: 200px !important; font-size: 13px !important; }
  .histoire-tools { flex-wrap: wrap; gap: 4px; }
  .histoire-tool-btn { font-size: 12px; padding: 5px 8px; }
}


/* =============================================================
   4.15) FORMS (creator-form, quantity)
   ============================================================= */
@media (max-width: 768px) {
  .quantity-modal { width: calc(100vw - 24px) !important; max-width: 360px !important; }
  .quantity-modal-input { font-size: 16px !important; }  /* evite zoom iOS */
  .form-row { flex-direction: column !important; gap: 6px !important; }
  .form-row label { width: 100% !important; }
}


/* =============================================================
   4.16) PLAYER PROFILE
   ============================================================= */
@media (max-width: 768px) {
  .pp-modal { width: 100vw !important; max-width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; }
  .pp-header { padding: 12px !important; }
  .pp-content { padding: 12px !important; }
  .pp-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}


/* =============================================================
   4.17) CARDS BINDER (1800px max + scale 0.8)
   ============================================================= */
@media (max-width: 1280px) {
  .cards-binder-container { max-width: 95vw !important; }
}
@media (max-width: 768px) {
  .cards-binder-container {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  /* Le page-flip ne marche plus bien sur petit ecran : on cache la 2e page */
  .cards-binder-page.right-page { display: none !important; }
  .cards-binder-page { width: 100% !important; }
  .cards-binder-controls { font-size: 12px !important; }
}


/* =============================================================
   4.18) MONNAIES BINDER (grid 14×3 hardcoded)
   ============================================================= */
@media (max-width: 1280px) {
  .monnaies-grid {
    grid-template-columns: repeat(7, minmax(80px, 1fr)) !important;
    grid-template-rows: auto !important;
  }
}
@media (max-width: 768px) {
  .monnaies-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
    grid-template-rows: auto !important;
    gap: 6px !important;
  }
  .monnaies-card { width: auto !important; aspect-ratio: 0.7 !important; }
}
@media (max-width: 480px) {
  .monnaies-grid {
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)) !important;
  }
}


/* =============================================================
   4.19) FAMILY TREE COLUMNS
   ============================================================= */
@media (max-width: 768px) {
  .family-tree-columns-container { padding: 8px !important; gap: 8px !important; }
  .family-tree-column { min-width: 120px !important; }
  .family-person-card { width: 60px !important; padding: 4px !important; }
  .family-person-card img { width: 50px !important; height: 50px !important; }
  .family-person-name { font-size: 10px !important; }
}


/* =============================================================
   4.20) ROADS EDITOR / FILTER (panneaux droite, 350/300px)
   ============================================================= */
@media (max-width: 768px) {
  .roads-editor-panel {
    width: calc(100vw - 16px) !important;
    max-width: 320px !important;
    right: 8px !important;
    max-height: 60vh !important;
  }
  .roads-filter-panel {
    width: calc(100vw - 16px) !important;
    max-width: 280px !important;
    right: 8px !important;
    max-height: 50vh !important;
  }
  .roads-editor-tools { flex-wrap: wrap; gap: 4px; }
  .roads-editor-tool { font-size: 11px; padding: 5px 8px; }
}
@media (max-width: 480px) {
  .roads-editor-panel,
  .roads-filter-panel {
    /* En portrait mobile : on les passe en bas pour pas masquer la sidebar */
    top: auto !important;
    bottom: 70px !important;
    right: 8px !important;
    transform: none !important;
    max-height: 40vh !important;
  }
}


/* =============================================================
   4.21) FISHING (sidebar)
   ============================================================= */
@media (max-width: 768px) {
  .fishing-sidebar {
    width: calc(100vw - 16px) !important;
    max-width: 360px !important;
    right: 8px !important;
    max-height: 60vh !important;
  }
  .fishing-rod-list { max-height: 200px !important; }
  .fishing-bait-list { max-height: 200px !important; }
}


/* =============================================================
   4.22) LOGS / BANNERS / TOASTS / CONTEXT MENUS
   ============================================================= */
@media (max-width: 768px) {
  /* Tutoriel / banners en haut */
  .tutorial-banner,
  .banner-info,
  .deco-mode-banner {
    width: calc(100vw - 16px) !important;
    max-width: 100vw !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
  /* Toast notifications */
  .toast,
  .utils-toast {
    width: calc(100vw - 24px) !important;
    max-width: 100vw !important;
    left: 12px !important;
    right: 12px !important;
    font-size: 13px !important;
  }
  /* Menu contextuel clic-droit */
  .context-menu,
  .pm-ctx-menu {
    max-width: calc(100vw - 16px) !important;
    font-size: 13px !important;
  }
}


/* =============================================================
   5) HAUTEUR D'ECRAN — Modales adaptees aux ecrans courts
   ============================================================= */

/* Empeche tout depassement vertical */
@media (max-height: 700px) {
  .quests-container,
  .inv-container,
  .house-modal,
  .stats-modal,
  .mairie-modal,
  .player-search-modal-content,
  .pk-modal,
  .pp-modal,
  .character-creator-modal,
  #shopModal .s2-modal,
  .settings-container {
    max-height: 95vh !important;
  }
  .quests-body,
  .inv-body,
  .house-modal-body,
  .stats-body,
  .mairie-body,
  .pk-modal-body,
  .pp-content,
  .settings-body,
  .modal-body {
    max-height: calc(95vh - 90px) !important;
    overflow-y: auto !important;
  }
}

/* Tres petit en hauteur (<= 500) : header + body en colonne sans gap */
@media (max-height: 500px) {
  .quests-header,
  .inv-header,
  .house-modal-header,
  .stats-header,
  .mairie-header,
  .character-creator-header,
  .settings-header {
    padding: 8px 12px !important;
  }
  .quests-tabs,
  .inv-tabs,
  .stats-tabs,
  .mairie-tabs {
    padding: 0 8px 2px !important;
  }
}


/* =============================================================
   6) BONUS — Anti-zoom iOS sur les inputs (police >= 16px)
   Sinon Safari mobile zoom automatiquement quand on focus un champ.
   ============================================================= */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important;
  }
}


/* =============================================================
   7) MAP CONTROLS (zoom +/-, pan)
   ============================================================= */
@media (max-width: 768px) {
  .maplibregl-ctrl-zoom-in,
  .maplibregl-ctrl-zoom-out {
    width: 36px !important;
    height: 36px !important;
  }
  .maplibregl-ctrl-group {
    margin-right: 6px !important;
    margin-top: 6px !important;
  }
  /* Zoom indicator : remontee au-dessus de la sidebar (qui est en bas) */
  .zoom-indicator {
    bottom: 95px !important;
    left: 8px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
  }
}