/* =====================================================================
   ADAPTATION MOBILE ET TABLETTE - mobile-tablet.css
   Optimisation pour Samsung Tab S6 et appareils mobiles
   ===================================================================== */

/* Media query pour tablettes et mobiles */
@media only screen and (max-width: 1024px) {
    
    /* ===== CARTE ===== */
    #map {
        height: 90vh !important;
        max-height: 90vh !important;
    }
    
    html, body {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Elements en bas de page */
    .zoom-level {
        bottom: 15px !important;
        font-size: 12px !important;
        height: 24px !important;
        line-height: 20px !important;
        width: 80px !important;
    }
    
    .NbArbres {
        bottom: 62px !important;
        font-size: 12px !important;
        height: 24px !important;
        line-height: 20px !important;
    }
    
    .NbArbresAdd {
        bottom: 38px !important;
        font-size: 12px !important;
        height: 24px !important;
        line-height: 20px !important;
    }
    
    #titreMap {
        bottom: 15px !important;
        font-size: 16px !important;
    }
    
    /* ===== BARRE D'OUTILS VERTICALE (.icon-container) ===== */
    .icon-container {
        top: 80px;
        left: 10px;
        width: 48px;
        height: auto;
    }
    
    .icon-container button {
        width: 48px;
        height: 48px;
        border-width: 2px;
        margin-bottom: 0px;
    }
    
    .icon-container button img,
    .icon-container button svg {
        width: 36px;
        height: 36px;
    }
    
    .icon-container button span {
        width: 36px;
        height: 36px;
    }
    
    .icon-container button span svg {
        width: 36px;
        height: 36px;
    }
    
    /* Ajustement pour les icones positionnees */
    .icon:nth-child(1) { top: 0px; }
    .icon:nth-child(2) { top: 50px; }
    .icon:nth-child(3) { top: 100px; }
    .icon:nth-child(4) { top: 150px; }
    .icon:nth-child(5) { top: 200px; }
    .icon:nth-child(6) { top: 250px; }
    .icon:nth-child(7) { top: 300px; }
    .icon:nth-child(8) { top: 350px; }
    .icon:nth-child(9) { top: 400px; }
    .icon:nth-child(10) { top: 450px; }
    .icon:nth-child(11) { top: 500px; }
    .icon:nth-child(12) { top: 550px; }
    
    /* ===== BARRE D'OUTILS HORIZONTALE (.icon-container-hz) ===== */
    .icon-container-hz {
        top: 10px;
        left: 60px;
        height: 48px;
        gap: 0px;
    }
    
    .icon-container-hz button {
        width: 48px;
        height: 48px;
        border-width: 2px;
    }
    
    .icon-container-hz button img,
    .icon-container-hz button svg {
        width: 36px !important;
        height: 36px !important;
    }
    
    /* Forcer les dimensions des spans conteneurs */
    .icon-container-hz button span {
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .icon-container-hz button span svg {
        width: 36px !important;
        height: 36px !important;
    }
    
    /* Masquer boutons GPX et print sur mobile/tablette */
    #btn_manageGPX,
    #btn_printMap {
        display: none !important;
    }
    
    /* ===== CONTENEUR DE SELECTEURS ===== */
    #global-selector-container {
        top: 65px;
        left: 60px;
    }
    
    #global-selector-container select {
        font-size: 13px;
        padding: 8px;
        min-height: 40px;
        width: 140px;
    }
    
    #global-selector-container label {
        font-size: 13px;
    }
    
    /* Titres des sections */
    #global-selector-container .legend h4,
    #global-selector-container #nominatim-search-container h4,
    #global-selector-container .selector-title,
    .section-title {
        font-size: 13px;
        padding: 8px 12px;
    }
    
    /* Panneaux de selection */
    #global-selector-container > div:not(#selector-yearPhoto) {
        font-size: 13px;
        padding: 8px;
        min-width: 140px;
    }
    
    #selector-yearPhoto {
        font-size: 13px;
        padding: 8px;
        min-width: 140px;
    }
    
    /* Elements de legende */
    #global-selector-container .legend div {
        font-size: 13px;
        padding: 4px 6px;
        margin-bottom: 6px;
        min-height: 36px;
        align-items: center !important;
    }
    
    #global-selector-container .legend img {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
        margin-right: 8px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
        display: block !important;
    }
    
    /* Selecteurs multiples */
    #numArbreSelect,
    #varieteSelect {
        font-size: 13px;
        max-height: 250px;
    }
    
    #numArbreSelect option,
    #varieteSelect option {
        padding: 8px;
        min-height: 36px;
    }
    
    /* ===== LOGOS ===== */
    #global-logo-container {
        bottom: 85px;
        left: 10px;
    }
    
    .logo {
        width: 56px;
        height: 56px;
        border-width: 2px;
        padding: 4px;
    }
    
    /* ===== BOUTONS D'ACTION ===== */
    .container-buttons button {
        font-size: 13px;
        padding: 10px 8px;
        min-height: 44px;
    }
    
    /* ===== LEAFLET CONTROLS ===== */
    .leaflet-control-zoom-in,
    .leaflet-control-zoom-out {
        width: 44px;
        height: 44px;
        font-size: 22px;
        line-height: 44px;
    }
    
    /* ===== PHOTO LIST ===== */
    #photo-list {
        max-height: 200px;
        font-size: 13px;
    }
    
    #selector-printHTML .container-buttons button {
        padding: 10px 14px;
        font-size: 13px;
        min-height: 44px;
    }
}

/* Media query specifique pour petits mobiles */
@media only screen and (max-width: 480px) {
    
    .icon-container {
        left: 5px;
        width: 44px;
    }
    
    .icon-container button {
        width: 44px;
        height: 44px;
    }
    
    .icon-container-hz {
        left: 50px;
        height: 44px;
        flex-wrap: wrap;
    }
    
    .icon-container-hz button {
        width: 44px;
        height: 44px;
    }
    
    #global-selector-container {
        top: 60px;
        left: 50px;
    }
    
    #global-selector-container select {
        width: 126px;
        font-size: 13px;
    }
    
    /* Reduction police pour les selecteurs multiples sur smartphone */
    #numArbreSelect,
    #varieteSelect {
        font-size: 12px !important;
    }
    
    #numArbreSelect option,
    #varieteSelect option {
        font-size: 12px !important;
        padding: 6px !important;
        min-height: 32px !important;
    }
    
    /* Titres et labels plus petits sur smartphone */
    #global-selector-container label {
        font-size: 12px !important;
    }
    
    #global-selector-container .legend h4,
    #global-selector-container #nominatim-search-container h4,
    #global-selector-container .selector-title,
    .section-title {
        font-size: 12px !important;
    }
    
    /* Panneaux plus compacts sur smartphone */
    #global-selector-container > div:not(#selector-yearPhoto) {
        font-size: 12px !important;
        padding: 6px !important;
    }
    
    #selector-yearPhoto {
        font-size: 12px !important;
        padding: 6px !important;
    }
    
    /* Boutons du tableau ViewData - réduire taille et permettre 2 lignes */
    #data-table-container button {
        padding: 6px 8px !important;
        font-size: 11px !important;
        min-width: auto !important;
        white-space: nowrap !important;
    }
    
    /* Conteneur des boutons - permettre passage sur 2 lignes */
    #data-table-container div[style*="display: flex"][style*="gap: 10px"] {
        flex-wrap: wrap !important;
        gap: 5px !important;
        justify-content: flex-end !important;
    }
    
    .logo {
        width: 48px;
        height: 48px;
    }
}