/**
 * Le Tour de Moi - Global Mobile Experience
 * Améliorations spécifiques pour le rendu "Application" sur mobile.
 */

.tab-bar,
.plus-panel,
.plus-panel-backdrop {
    display: none;
}

@media (max-width: 768px) {
    :root {
        /* Ajustements de spacing pour mobile */
        --space-2xl: 2.5rem;
        --space-3xl: 3.5rem;
        
        /* Hauteur de la barre de navigation inférieure */
        --tab-bar-height: calc(64px + env(safe-area-inset-bottom));
    }

    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    body {
        padding-bottom: var(--tab-bar-height); /* Espace pour la tab bar */
        -webkit-tap-highlight-color: transparent;
    }

    /* Typographie Responsive */
    h1 { font-size: clamp(2rem, 8vw, 2.75rem); }
    h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
    h3 { font-size: clamp(1.25rem, 5vw, 1.5rem); }
    
    .text-lg { font-size: 1.125rem; }
    .text-sm { font-size: 0.8125rem; }

    /* --- LAYOUT --- */
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Suppression des marges excessives héritées du desktop */
    .section {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }

    /* --- HEADER MOBILE COMPACT --- */
    .main-header {
        height: 70px !important;
        padding-top: env(safe-area-inset-top);
        box-sizing: content-box;
    }

    .main-header .site-logo img {
        height: 48px !important;
    }

    .mobile-toggle {
        width: 44px;
        height: 44px;
    }

    /* --- NAVIGATION INFÉRIEURE (TAB BAR) --- */
    .tab-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: var(--tab-bar-height);
        background-color: #FFFFFF;
        border-top: 1px solid var(--clr-border);
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom);
        z-index: 1000;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    }

    .tab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--clr-text-secondary);
        font-size: 0.625rem;
        font-weight: 700;
        gap: 4px;
        height: 100%;
        transition: color var(--transition-fast);
    }

    .tab-item i {
        font-size: 1.25rem;
    }

    .tab-item.is-active {
        color: var(--clr-primary);
    }

    .tab-item.is-active i {
        transform: translateY(-2px);
    }

    .tab-item.is-active::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 3px;
        background-color: var(--clr-primary);
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    .tab-item--plus {
        position: relative;
    }

    /* --- PANNEAU PLUS COMMUNAUTÉ --- */
    .plus-panel {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2000;
        visibility: hidden;
        transition: visibility var(--transition-medium);
    }

    .plus-panel.is-open {
        visibility: visible;
    }

    .plus-panel-backdrop {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity var(--transition-medium);
    }

    .plus-panel.is-open .plus-panel-backdrop {
        opacity: 1;
    }

    .plus-panel-content {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #FFFFFF;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        padding: var(--space-lg);
        padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
        transform: translateY(100%);
        transition: transform var(--transition-medium);
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
    }

    .plus-panel.is-open .plus-panel-content {
        transform: translateY(0);
    }

    .plus-panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-lg);
        padding-bottom: var(--space-sm);
        border-bottom: 1px solid var(--clr-border-light);
    }

    .plus-panel-header h3 {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 800;
        color: var(--clr-text-main);
    }

    .plus-panel-close {
        background: none;
        border: none;
        font-size: 1.25rem;
        color: var(--clr-text-secondary);
        padding: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .plus-panel-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .plus-panel-nav a, 
    .plus-panel-nav button {
        display: flex;
        align-items: center;
        gap: 1rem;
        width: 100%;
        padding: 0.875rem 1.25rem;
        background: var(--clr-bg-alt);
        border: 1px solid var(--clr-border-light);
        border-radius: 12px;
        color: var(--clr-text-main);
        text-decoration: none;
        font-weight: 700;
        font-size: 0.9375rem;
        text-align: left;
        transition: all var(--transition-fast);
        -webkit-appearance: none;
    }

    .plus-panel-nav button {
        cursor: pointer;
        font-family: inherit;
    }

    .plus-panel-nav a:active, 
    .plus-panel-nav button:active {
        background-color: #FFFFFF;
        border-color: var(--clr-primary);
        color: var(--clr-primary);
        transform: scale(0.98);
    }

    .plus-panel-divider {
        height: 1px;
        background-color: var(--clr-border-light);
        margin: var(--space-sm) 0;
    }

    .body-panel-open {
        overflow: hidden;
    }

    /* --- CARTES MOBILE --- */
    .card, .tracking-card, .weather-card {
        border-radius: 12px;
        margin-left: 0;
        margin-right: 0;
        width: 100% !important;
    }

    /* --- BOUTONS TACTILES --- */
    .btn {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn--full-mobile {
        width: 100%;
    }

    /* --- FORMULAIRES --- */
    input, select, textarea {
        font-size: 16px !important; /* Empêche le zoom auto sur iOS */
    }
}

/**
 * Protection explicite pour ordinateur et tablette large
 */
@media (min-width: 769px) {
    .plus-panel,
    .plus-panel-backdrop {
        display: none !important;
    }
}