/* ============================================
   MOBILE.CSS — Responsive PPBRO
   À inclure EN DERNIER dans jeu.html, pokedex.html, profil.html
   ============================================ */

/* Désactive le zoom au double-tap (Safari iOS, Chrome Android) — garde le scroll au doigt */
html,
body {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}

button,
a,
input,
select,
textarea,
label,
[role="button"],
[onclick] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================
   MOBILE — breakpoint global < 950px
   ============================================ */
   @media screen and (max-width: 950px) {
    /* BASE LAYOUT 100% */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    #main-content,
    #header-container,
    #navigation_horizontale,
    #carte-wrapper,
    #city-container,
    #app,
    #zone-aventure-container,
    #forum-wrapper,
    #forum-entete,
    #forum-nav-bar,
    #centre-container,
    #arene-wrapper,
    #arene-combats-wrapper,
    #conteneur-compte,
    #ggx-app,
    #centre-image-container,
    .message-confirmation,
    #repro-wrapper,
    #repro-header-img,
    .hex-wrap,
    #zz-wrap,
    #bgbrun,
    #salle-echange,
    #mp-wrapper,
    #rf-wrapper,
    #pokepedia-app,
    #lj-wrap,
    #ud-wrapper,
    #casino-wrapper,
    #bateau-wrapper,
    #admin-app,
    #chat-widget,
    #cl-wrapper,
    #st-wrapper,
    .ud-wrapper,
    .pb-wrap,
    [id$="-wrapper"],
    [id$="-container"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    /* CHAT WIDGET MOBILE */
    #chat-widget {
        width: 100% !important;
        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        max-height: 50vh !important;
        display: flex !important;
        flex-direction: column !important;
    }
    #chat-messages {
        height: 200px !important;
    }

    /* Override any div with fixed 686px, 674px or 520px width in app/container */
    #app div[style*="width:686px"],
    #app div[style*="width:674px"],
    #app div[style*="width:520px"],
    #zone-aventure-container div[style*="width:686px"],
    #zone-aventure-container div[style*="width:674px"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Zones sauvages — hauteur proportionnelle (évite le collapse du #bgbrun sous 950px) */
    #zone-aventure-container {
        display: block !important;
        overflow: visible !important;
        visibility: visible !important;
    }
    #zone-aventure-container #bgbrun {
        width: 100% !important;
        max-width: 686px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 686 / 651;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
        background-position: top center !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    #zone-aventure-container #bgbrun > div[style*="position:relative"] {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
    }
    #zone-aventure-container .taux-info {
        width: min(550px, 94%) !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #zone-aventure-container .pokesauvage-container {
        max-width: calc(100% - 16px) !important;
        box-sizing: border-box !important;
    }

    /* ===== REPRODUCTION ===== */
            #repro-wrapper {
                width: 100% !important;
                border-radius: 0 !important;
            }
            #repro-header-img {
                width: 100% !important;
                height: auto !important;
                max-height: 200px !important;
                object-fit: cover !important;
            }
            #repro-bandeau {
                padding: 10px 5px !important;
                gap: 5px !important;
            }
            #repro-onglets {
                flex-wrap: wrap !important;
            }
            .repro-onglet-btn {
                font-size: 9px !important;
                padding: 10px 5px !important;
                flex: 1 1 auto !important;
                min-width: 80px !important;
            }
            #repro-corps {
                padding: 15px 10px !important;
            }
            /* Grille de sélection PKM reproduction */
            .repro-select-grille {
                grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;
                gap: 8px !important;
            }
            /* VS/Aperçu */
            .repro-vs-container {
                flex-direction: column !important;
                align-items: center !important;
                gap: 15px !important;
            }

            /* ===== SALLE DES VENTES ===== */
            #sv-contenu {
                padding: 10px !important;
            }
            #sv-contenu div[style*="display:flex;gap:8px"] {
                flex-direction: column !important;
                align-items: stretch !important;
            }
            #sv-contenu select, #sv-contenu input {
                width: 100% !important;
                box-sizing: border-box !important;
            }
            /* Grille des PKM en vente */
            #sv-contenu div[style*="display:flex;flex-wrap:wrap"] {
                justify-content: center !important;
            }
            /* Section Rocket */
            #sv-rocket-section img {
                max-width: 100% !important;
                height: auto !important;
            }

            /* ===== SAFARI ===== */
            #miel-indicateur {
                width: 100% !important;
                border-left: none !important;
                border-right: none !important;
            }
            #btn-utiliser-miel, #btn-acheter-miel {
                width: 90% !important;
                padding: 12px 10px !important;
                font-size: 12px !important;
            }

            /* global overrides for 686px containers */
            #app > div[style*="width:686px"],
            #app > div[style*="width: 686px"] {
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 !important;
                border-radius: 0 !important;
            }
            #app > div[style*="width:686px"] > div,
            #app > div[style*="width: 686px"] > div {
                border-radius: 0 !important;
            }

            /* ===== SALLE D'ECHANGE ===== */
    #salle-echange {
        width: 100% !important;
        border-radius: 0 !important;
    }
    #echange-contenu > div[style*="display:grid"] {
        grid-template-columns: 1fr !important;
        margin: 8px !important;
        gap: 15px !important;
    }
    #echange-contenu .se-section {
        margin: 0 !important;
    }
    #echange-contenu div[style*="display:flex"] {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }
    #se-apercu-ajout {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 60px !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 20px !important;
    }
    .se-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .se-table {
        font-size: 11px !important;
        min-width: 450px !important; /* Force scroll on very small screens */
    }
    .se-table th, .se-table td {
        padding: 5px 4px !important;
    }
    /* Modal d'échange */
    #se-modal-overlay > div[style*="width:440px"] {
        width: 95% !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }
    #se-modal-overlay div[style*="display:flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #se-modal-overlay .se-apercu {
        width: 100% !important;
        margin-top: 10px !important;
    }

    /* ===== GROTTE MYSTÉRIEUSE ===== */
    #grotte-wrapper {
        width: 100% !important;
    }
    #grotte-image-container, #grotte-img {
        width: 100% !important;
        height: auto !important;
    }
    #grotte-resultat {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px !important;
    }
    #grotte-description {
        padding: 15px !important;
    }
    /* Grotte clickable zones scaling is handled in JS or via map/area if responsive */
    /* If they are absolute divs, they might need transform: scale() or % based positioning */

    /* ===== MESSAGERIE (MP) ===== */
    #mp-wrapper {
        width: 100% !important;
    }
    #mp-wrapper > div {
        padding: 10px !important;
        border-radius: 0 !important;
    }
    #mp-wrapper div[style*="display:flex;gap:12px"] {
        flex-direction: column !important;
        gap: 15px !important;
    }
    #mp-col-recus {
        flex: 1 1 auto !important;
        max-height: 250px !important;
        width: 100% !important;
    }
    #mp-col-main {
        width: 100% !important;
    }
    #mp-messages-box {
        height: 250px !important;
    }

    /* ===== ZONES SAUVAGES (Zones Engine) ===== */
    #bgbrun {
        width: 100% !important;
        background-size: cover !important;
        background-position: top center !important;
        height: auto !important;
        min-height: 400px !important; /* Increase min-height to accommodate absolute content */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    #bgbrun > div[style*="position:relative"] {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding-top: 10px !important;
    }
    /* Taux info bar */
    .taux-info {
        width: 95% !important;
        height: auto !important;
        padding: 8px 5px !important;
        font-size: 10px !important;
        display: block !important;
        margin: 10px auto !important;
    }
    /* Main Pokemon container in wild zone */
    .pokesauvage-container {
        width: 95% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 10px auto !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    #bgbrun div[style*="top:130px"],
    #bgbrun div[style*="top:175px"] {
        position: static !important;
        transform: none !important;
        margin-top: 10px !important;
    }
    /* Horde grid */
    #horde-grille {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* ===== BANQUE ===== */
    #banque-wrapper {
        width: 100% !important;
    }
    #banque-header-img {
        width: 100% !important;
        height: auto !important;
        max-height: 200px !important;
    }
    #banque-statut-bandeau {
        padding: 10px !important;
        gap: 8px !important;
    }
    #banque-onglets {
        flex-wrap: wrap !important;
    }
    .banque-onglet-btn {
        font-size: 10px !important;
        padding: 12px 5px !important;
    }
    .banque-deux-cols {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .banque-solde-montant {
        font-size: 24px !important;
    }

    /* ===== CLASSEMENTS & STATISTIQUES ===== */
    #cl-wrapper, #st-wrapper {
        width: 100% !important;
    }
    #cl-header-img, #st-header-img {
        width: 100% !important;
        height: auto !important;
        max-height: 200px !important;
        object-fit: cover !important;
    }
    #cl-wrapper table, #st-wrapper table {
        font-size: 11px !important;
    }
    #cl-wrapper th, #cl-wrapper td, #st-wrapper th, #st-wrapper td {
        padding: 6px 4px !important;
    }

    /* ===== CASINO ===== */
    #casino-wrapper {
        width: 100% !important;
    }
    #casino-header-img {
        width: 100% !important;
        height: auto !important;
        max-height: 250px !important;
    }
    .arene-cartes-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    #casino-wrapper div[style*="width:686px"],
    #casino-wrapper div[style*="width: 686px"] {
        width: 100% !important;
    }
    #casino-wrapper div[style*="padding:16px"] {
        padding: 12px !important;
    }
    #casino-wrapper div[style*="display:flex;align-items:center;justify-content:center;gap:10px"] {
        flex-direction: column !important;
        gap: 5px !important;
    }

    /* ===== CASINO BOUTIQUE ===== */
    #cb-wrapper {
        width: 100% !important;
    }
    .cb-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 10px !important;
    }
    #casino-boutique-tabs {
        flex-wrap: wrap !important;
    }

    /* ===== BIO-DÔME ===== */
    #biodome-wrapper, #app > div[style*="width:686px"][style*="padding:0 0 30px"] {
        width: 100% !important;
        padding: 0 0 20px !important;
    }
    #app div[style*="padding:18px 24px"],
    #app div[style*="padding:14px 24px"] {
        padding: 15px !important;
    }
    #app div[style*="display:grid"][style*="grid-template-columns:repeat(5, 1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .bd-palier-card {
        padding: 10px !important;
    }

    /* ===== LABORATOIRE ===== */
    #labo-tabs-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }
    #labo-tabs-container button {
        flex: 1 1 auto !important;
        min-width: 100px !important;
        font-size: 10px !important;
    }
    /* Grilles de cartes (Méga, Zygarde, Starters, Légendaires) */
    #app div[style*="display:grid"] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    }

    /* ===== PANTHÉON DES BADGES ===== */
    .pb-wrap {
        width: 100% !important;
    }
    .pb-grid {
        grid-template-columns: 1fr !important;
        padding: 10px !important;
    }
    .pb-badge-card {
        grid-template-columns: 40px 1fr !important;
        grid-template-areas: 
            "icon title"
            "icon progress"
            "stock stock"
            "controls controls"
            "claim claim";
        gap: 10px !important;
        padding: 12px !important;
    }
    .pb-badge-icon { grid-area: icon; width: 32px !important; height: 32px !important; }
    .pb-badge-title { grid-area: title; font-size: 12px !important; }
    .pb-badge-progress { grid-area: progress; font-size: 11px !important; }
    .pb-badge-stock { grid-area: stock; font-size: 11px !important; text-align: center; }
    .pb-s-controls { grid-area: controls; justify-content: center !important; }
    .pb-claim-mini { grid-area: claim; width: 100% !important; margin-top: 5px !important; }
    
    .pb-chip {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
    .pb-s-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .pb-btn {
        width: 100% !important;
    }

    /* ===== EXPERT FOSSILE (Overriding inline styles) ===== */
    #app > div[style*="width:686px"],
    #app > div[style*="width:674px"] {
        width: 100% !important;
        padding: 10px 5px !important;
    }
    #app > div[style*="width:686px"] > div[style*="display:flex"],
    #app > div[style*="width:674px"] > div[style*="display:flex"] {
        flex-direction: column !important;
        align-items: center !important;
    }
    #app div[style*="width:200px"] {
        width: 100% !important;
        min-width: 100% !important;
        border-right: none !important;
        border-bottom: 2px solid var(--neon) !important;
        border-radius: 0 !important;
        padding: 15px !important;
    }
    #app div[style*="flex:1"] {
        width: 100% !important;
        padding: 15px !important;
    }
    #app div[style*="display:grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* ===== SALLE DES VENTES (Overriding inline styles) ===== */
    #sv-contenu {
        padding: 10px 5px !important;
    }
    #sv-tab-pkm, #sv-tab-objets {
        font-size: 10px !important;
        padding: 12px 5px !important;
    }
    /* Tris et filtres */
    #sv-contenu div[style*="display:flex"] {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }
    #sv-contenu button[style*="padding:5px 12px"] {
        padding: 6px 10px !important;
        font-size: 10px !important;
        flex: 1 1 auto !important;
        min-width: 80px !important;
    }
    /* Grille des ventes */
    #sv-contenu div[style*="display:grid"] {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
        gap: 10px !important;
    }
    /* Formulaire de mise en vente */
    .sv-form-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    #sv-select-pkm, #sv-select-obj {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* ===== HALL DES EXPLOITS ===== */
    .hex-wrap {
        border-radius: 0 !important;
        margin-bottom: 10px !important;
    }
    .hex-header {
        flex-direction: column !important;
        padding: 15px !important;
    }
    .hex-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .hex-list {
        grid-template-columns: 1fr !important;
    }

    /* ===== SAFARI ===== */
    #safari-container, #safari-wrap {
        width: 100% !important;
    }
    .safari-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .ud-banner-split {
        flex-direction: column !important;
    }

    /* ===== ZONE ZÉRO ===== */
    #zz-wrap {
        padding: 0 5px 15px 5px !important;
    }
    #zz-sprite-wrap {
        width: 120px !important;
        height: 120px !important;
    }
    #zz-sprite-img {
        width: 120px !important;
        height: 120px !important;
    }
    #zz-wrap div[style*="width:720px"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    #zz-wrap div[style*="max-width:640px"],
    #zz-wrap div[style*="max-width:610px"] {
        max-width: 100% !important;
        padding: 10px !important;
    }

    /* ===== POKÉDEX ===== */
    .pokedex-grid, #pokedex-container {
        width: 100% !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        padding: 12px !important;
    }
    .pokedex-filters {
        width: 100% !important;
        padding: 12px !important;
    }
    .filter-buttons { gap: 6px !important; }
    .filter-btn  { padding: 6px 10px !important; font-size: 12px !important; }
    .gen-btn     { padding: 4px 8px !important;  font-size: 11px !important; }
    .pokemon-sprite           {
        width: 60px !important;
        height: 60px !important;
        object-fit: contain !important;
        object-position: center bottom !important;
    }
    .pokemon-sprite.pokemon-sprite--forme-alt {
        transform: scale(1.48) !important;
        transform-origin: center bottom !important;
    }
    .pokemon-sprite-container:hover .pokemon-sprite:not(.pokemon-sprite--forme-alt) {
        transform: scale(1.1) !important;
    }
    .pokemon-sprite-container:hover .pokemon-sprite.pokemon-sprite--forme-alt {
        transform: scale(1.628) !important;
    }
    .pokemon-sprite-container { padding: 6px !important; }
    .pokemon-sprite.pokemon-sprite--lumiere {
        transform: none !important;
        transform-origin: center bottom !important;
    }
    .pokemon-sprite-container:hover .pokemon-sprite.pokemon-sprite--lumiere {
        transform: scale(1.1) !important;
        transform-origin: center bottom !important;
    }
    .pokemon-sprite.pokemon-sprite--teracristal {
        transform: scale(var(--pkm-sprite-scale, 1)) !important;
        transform-origin: center bottom !important;
    }
    .pokemon-sprite-container:hover .pokemon-sprite.pokemon-sprite--teracristal {
        transform: scale(calc(var(--pkm-sprite-scale, 1) * 1.1)) !important;
        transform-origin: center bottom !important;
    }
    .pokemon-sprite.pokemon-sprite--obscure {
        transform: scale(var(--pkm-sprite-scale, 1.5)) !important;
        transform-origin: center bottom !important;
    }
    .pokemon-sprite-container:hover .pokemon-sprite.pokemon-sprite--obscure {
        transform: scale(calc(var(--pkm-sprite-scale, 1.5) * 1.1)) !important;
        transform-origin: center bottom !important;
    }
    .pokemon-sprite.pokemon-sprite--404[data-sprite-scale],
    .pokemon-sprite-container:hover .pokemon-sprite.pokemon-sprite--404[data-sprite-scale] {
        transform: scale(var(--pkm-sprite-scale, 1)) !important;
        transform-origin: center bottom !important;
    }
    .pokemon-sprite-container:hover .pokemon-sprite.pokemon-sprite--404[data-sprite-scale] {
        transform: scale(calc(var(--pkm-sprite-scale, 1) * 1.1)) !important;
    }
    .sprite-box img.pokemon-sprite--lumiere {
        transform: none !important;
        transform-origin: center bottom !important;
    }
    .sprite-box img.pokemon-sprite--teracristal {
        transform: scale(var(--pkm-sprite-scale, 1)) !important;
        transform-origin: center bottom !important;
    }
    .sprite-box img.pokemon-sprite--obscure {
        transform: scale(var(--pkm-sprite-scale, 1.45)) !important;
        transform-origin: center bottom !important;
    }
    .evolution-item img.pokemon-sprite--lumiere {
        transform: none !important;
        transform-origin: center bottom !important;
    }
    .evolution-item img.pokemon-sprite--teracristal {
        transform: scale(var(--pkm-sprite-scale, 1)) !important;
        transform-origin: center bottom !important;
    }
    .evolution-item img.pokemon-sprite--obscure {
        transform: scale(var(--pkm-sprite-scale, 1.42)) !important;
        transform-origin: center bottom !important;
    }

    /* Suite Pokédex (détail, évolutions) */
    .detail-container {
        width: 100% !important;
        padding: 12px !important;
    }
    .sprite-container  { flex-wrap: wrap !important; gap: 10px !important; }
    .sprite-box img    {
        width: 80px !important;
        height: 80px !important;
        object-fit: contain !important;
        object-position: center bottom !important;
    }
    .sprite-box img.pokemon-sprite--forme-alt {
        transform: scale(1.42) !important;
        transform-origin: center bottom !important;
    }
    .evolution-chain   { gap: 10px !important; }
    .evolution-item    { padding: 8px !important; min-width: 70px !important; }
    .evolution-item img {
        width: 60px !important;
        height: 60px !important;
        object-fit: contain !important;
        object-position: center bottom !important;
    }
    .evolution-item img.pokemon-sprite--forme-alt {
        transform: scale(1.38) !important;
        transform-origin: center bottom !important;
    }

    /* ===== BOUTIQUE (Overriding inline styles) ===== */
    #zone-aventure-container > div[style*="width:674px"] {
        width: 100% !important;
        padding: 15px 5px !important;
    }
    #zone-aventure-container div[style*="max-width:600px"] {
        max-width: 100% !important;
    }
    #zone-aventure-container div[style*="display:flex"] {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    /* Boutique buttons */
    #zone-aventure-container button[style*="padding:10px 30px"] {
        padding: 8px 15px !important;
        font-size: 11px !important;
        flex: 1 1 auto !important;
    }

    /* ===== CENTRE POKEMON ===== */
    .centre-content {
        flex-direction: column !important;
        align-items: center !important;
    }
    .joelle-image {
        width: 100% !important;
        height: auto !important;
        max-width: 300px !important;
    }

    /* ===== ARENE & COMBATS ===== */
    #arene-header, #ac-header-img {
        width: 100% !important;
        height: auto !important;
    }
    #arene-equipe-grid,
    .ac-equipe-cartes {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .ac-pkm-grille {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #ac-filtres {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
    #ac-zygarde-compteur {
        margin-left: 0 !important;
        width: 100% !important;
        justify-content: space-between !important;
    }

    /* ===== COMPTE & STOCKAGE & INVENTAIRE ===== */
    #compte-onglets { flex-wrap: wrap !important; }
    .compte-onglet-btn {
        font-size: 10px !important;
        padding: 8px 5px !important;
        flex: 1 1 auto !important;
        min-width: 80px !important;
    }
    #compte-equipe-layout, #stockage-layout, #inventaire-layout { 
        flex-direction: column !important; 
    }
    #compte-equipe-gauche, #stockage-col-gauche, #inventaire-col-gauche {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 2px solid var(--neon) !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    #compte-equipe-gauche {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
    }
    #stockage-col-droite, #inventaire-col-droite {
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    #inventaire-col-droite {
        min-height: 360px !important;
        max-height: none !important;
        overflow: hidden !important;
    }
    .inventaire-liste-scroll,
    #inventaire-liste-scroll {
        min-height: 280px !important;
        max-height: none !important;
    }
    .stockage-liste { 
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important; 
    }
    #liste-equipe.ac-equipe-cartes, .ac-equipe-cartes {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* ===== POPUP PKM ===== */
    #popup-pokemon {
        width: 95vw !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    #popup-body { flex-direction: column !important; padding: 10px !important; }
    #popup-col-gauche { width: 100% !important; border-right: none !important; border-bottom: 2px solid var(--neon) !important; padding-bottom: 15px !important; margin-bottom: 15px !important; }
    #popup-stats-grid { grid-template-columns: repeat(3, 1fr) !important; }

    /* ===== HEADER INTEGRATION ===== */
    #header-container, #forum-entete { 
        height: auto !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    #header-image, #forum-entete-image {
        width: 100% !important;
        height: auto !important;
        max-height: 120px !important;
        border-bottom: 2px solid var(--neon) !important;
        border-right: 2px solid var(--neon) !important;
    }

    #header-right, #forum-entete-carte { 
        display: flex !important; 
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 !important;
        flex-direction: column !important;
        gap: 15px !important;
        z-index: 10 !important;
        top: auto !important;
        left: auto !important;
        border: 2px solid var(--neon) !important;
        border-radius: 12px !important;
    }

    #cadreInfos, 
    #widget-news-wrapper, 
    #widget-ville-wrapper,
    .fec-infos {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        position: static !important;
    }

    /* Forum specific */
    #forum-entete-carte {
        flex-direction: row !important;
        padding: 15px !important;
        align-items: center !important;
    }
    .fec-avatar-wrap { width: 70px !important; }
    .fec-infos { gap: 10px !important; }

    /* Force visibility for elements the user reported as hidden */
    #header-right, #cadreInfos, #widget-news-wrapper, #widget-ville-wrapper, #forum-entete-carte {
        display: flex !important;
    }

    /* ===== NAVIGATION ===== */
    #navigation_horizontale ul {
        flex-wrap: wrap !important;
    }
    #navigation_horizontale ul li {
        flex: 1 1 auto !important;
        min-width: 120px !important;
    }
    #navigation_horizontale ul li a {
        border-bottom: 1px solid rgba(var(--neon-rgb),0.3) !important;
        font-size: 11px !important;
    }

    /* ===== ADMIN PANEL ===== */
    #admin-app {
        flex-direction: column !important;
    }
    #admin-sidebar {
        width: 100% !important;
        height: auto !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        border-right: none !important;
        border-bottom: 2px solid var(--neon) !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        background: var(--bg2) !important;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar-logo {
        display: none !important;
    }

    /* Admin Editor Inputs */
    .admin-input[style*="width:72px"],
    .admin-input[style*="width:90px"],
    .admin-input[style*="width: 72px"],
    .admin-input[style*="width: 90px"] {
        width: 60px !important;
        min-width: 50px !important;
        padding: 4px !important;
        font-size: 11px !important;
    }
    
    /* Tables in admin */
    #admin-content table {
        font-size: 11px !important;
    }
    #admin-content th, #admin-content td {
        padding: 4px 2px !important;
    }
    .admin-nav-btn {
        flex: 0 0 auto !important;
        padding: 15px 20px !important;
        border-left: none !important;
        border-bottom: 3px solid transparent !important;
        white-space: nowrap !important;
        font-size: 10px !important;
    }
    .admin-nav-btn.active {
        border-bottom-color: var(--neon) !important;
        background: rgba(var(--neon-rgb),0.1) !important;
    }
    .sidebar-footer {
        margin-top: 0 !important;
        padding: 0 15px !important;
        display: flex !important;
        align-items: center !important;
        border-top: none !important;
        border-left: 1px solid var(--border) !important;
    }
    #admin-user-email {
        display: none !important;
    }
    .btn-logout {
        padding: 6px 12px !important;
        white-space: nowrap !important;
    }
    #admin-main {
        padding: 15px !important;
        width: 100% !important;
    }
    .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    .histo-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 12px !important;
    }
    #pkm-autocomplete {
        min-width: 100% !important;
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-height: 50vh !important;
    }
    .mod-add-form {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .search-bar {
        flex-direction: column !important;
    }
}

/* ============================================
   MOBILE — écrans < 700px
   ============================================ */
@media screen and (max-width: 700px) {

    /* ===== CITY CONTAINER ===== */
    #city-container {
        font-size: 11px !important;
        letter-spacing: 1px !important;
        height: 30px !important;
        line-height: 30px !important;
    }

    /* ===== CARTE VILLE ===== */
    #map_global {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
        position: relative !important;
    }
    #menu_map, #menu_map1 { display: none !important; }
    #carte_non_anim {
        width: 100% !important;
        float: none !important;
        position: relative !important;
    }
    #carte_non_anim img,
    #carte-image-non-anim {
        width: 100% !important;
        height: auto !important;
        opacity: 1 !important;
    }

    /* Zone aventure — barre scrollable */
    .zone-aventure-neon {
        position: relative !important;
        top: auto !important; right: auto !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 5px !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        -webkit-overflow-scrolling: touch;
    }
    .zone-aventure-neon a {
        white-space: nowrap !important;
        font-size: 9px !important;
        padding: 5px 7px !important;
        flex-shrink: 0 !important;
    }

    /* Lieux navigation — grille sous la carte */
    #liste-lieux {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        padding: 8px !important;
        margin: 0 !important;
        list-style: none !important;
        background: #f0f0f0 !important;
        border: 2px solid var(--neon) !important;
        border-top: none !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
    #liste-lieux li { flex: 1 1 auto !important; min-width: 75px !important; }
    #liste-lieux p  { display: none !important; }
    #liste-lieux a  {
        display: block !important;
        text-align: center !important;
        font-size: 8px !important;
        line-height: 1.2 !important;
        padding: 4px 3px !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }

    /* ===== COMPTE — onglets ===== */
    .compte-onglet-btn {
        font-size: 9px !important;
        padding: 8px 2px !important;
    }

    /* ===== ÉQUIPE compte ===== */
    .ac-carte-sprite { width: 54px !important; height: 54px !important; }

    /* ===== ARENE ===== */
    #arene-equipe-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .arene-pkm-slot img.arene-sprite { width: 54px !important; height: 54px !important; }
    .arene-cartes-grid { grid-template-columns: repeat(2, 1fr) !important; }
    #arene-header { width: 100% !important; height: auto !important; }

    /* ===== ARENE COMBATS ===== */
    .ac-pkm-grille { grid-template-columns: repeat(2, 1fr) !important; }
    #ac-header-img { width: 100% !important; }

    /* ===== REPRODUCTION ===== */
    #repro-wrapper {
        width: 100% !important;
        overflow: hidden !important;
    }
    /* Image header reproduction */
    #repro-wrapper img:first-child,
    [id^="repro"] img[style*="686"],
    [id^="repro"] img[style*="387"] {
        width: 100% !important;
        height: auto !important;
    }
    /* Grille sélection PKM */
    .repro-select-grille,
    [class*="repro-select"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Aperçu reproduction */
    .repro-apercu, .repro-vs {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* ===== BATEAU ===== */
    #bateau-carte-container, #bateau-map-img, #bateau-svg {
        width: 100% !important;
    }

    /* ===== ZONES SAUVAGES ===== */
    .zone-bg, [id*="zone-bg"],
    .zone-aventure-container-inner { width: 100% !important; }

    /* ===== CHAT ===== */
    #chat-widget {
        width: 100vw !important;
        right: 0 !important; left: 0 !important; bottom: 0 !important;
        border-radius: 12px 12px 0 0 !important;
        max-height: 60vh !important;
    }

    /* ===== TOOLTIP — inutile sur mobile ===== */
    .custom-tooltip, #dhtmltooltip { display: none !important; }
}

/* ============================================
   TABLETTE — 700px à 800px
   ============================================ */
@media screen and (min-width: 701px) and (max-width: 800px) {
    html, body { overflow-x: hidden !important; }
    #navigation_horizontale,
    #gigamax-banner-wrap,
    #gigamax-global-banner,
    #ggx-app,
    #carte-wrapper, #city-container,
    #conteneur-compte, #arene-wrapper, [id$="-wrapper"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #menu_map { width: 80px !important; }
    #carte_non_anim { width: calc(100% - 80px) !important; }
    .arene-cartes-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================
   SAFARI iOS
   ============================================ */
@supports (-webkit-touch-callout: none) {
    body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: none;
    }
    input, select, textarea { font-size: 16px !important; }
}