/* ========================================
   NEXTICKET - CSS Mobile Responsive v2.0
   Fix complet page de connexion
   ======================================== */

@media screen and (max-width: 768px) {
    
    /* Base */
    html, body {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    
    body {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    
    #container {
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    
    /* CRITICAL FIX: Logo qui flotte */
    img:not(.flag) {
        position: static !important;
        float: none !important;
        max-width: 100px !important;
        display: block !important;
        margin: 10px auto !important;
    }
    
    /* Header */
    #header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 10px !important;
    }
    
    #header .pull-right {
        position: static !important;
        float: none !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Drapeaux */
    #header .flag:nth-child(n+4) {
        display: none !important;
    }
    
    /* Navigation */
    #nav {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    #nav li {
        flex: 1 !important;
        min-width: 120px !important;
    }
    
    #nav a {
        display: block !important;
        padding: 12px !important;
        text-align: center !important;
        background: #f5f5f5 !important;
        border-radius: 6px !important;
        margin: 2px !important;
    }
    
    #nav a.active {
        background: #667eea !important;
        color: white !important;
    }
    
    /* Content */
    #content {
        width: 100% !important;
        padding: 15px 10px !important;
    }
    
    h1, h2 {
        font-size: 20px !important;
        word-wrap: break-word !important;
    }
    
    p {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    /* PAGE DE CONNEXION - FIX COMPLET */
    #loginBox,
    .login-box {
        width: 95% !important;
        max-width: 450px !important;
        margin: 20px auto !important;
        padding: 20px !important;
        box-sizing: border-box !important;
    }
    
    #loginBox img:not(.flag),
    .login-box img:not(.flag) {
        max-width: 80px !important;
        position: static !important;
        float: none !important;
        display: block !important;
        margin: 10px auto !important;
        clear: both !important;
    }
    
    #loginBox input,
    .login-box input {
        width: 100% !important;
        font-size: 16px !important;
        padding: 14px !important;
        border-radius: 8px !important;
        border: 2px solid #ddd !important;
        box-sizing: border-box !important;
        margin: 10px 0 !important;
    }
    
    #loginBox button,
    #loginBox input[type="submit"],
    .login-box button,
    .login-box input[type="submit"] {
        width: 100% !important;
        padding: 16px !important;
        font-size: 17px !important;
        background: #667eea !important;
        color: white !important;
        border: none !important;
        border-radius: 10px !important;
    }
    
    /* Boutons généraux */
    button,
    .button,
    input[type="submit"] {
        width: 100% !important;
        padding: 14px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        min-height: 48px !important;
    }
    
    /* Formulaires */
    input, textarea, select {
        width: 100% !important;
        font-size: 16px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }
    
    /* Clear floats */
    .clear, .clearfix {
        clear: both !important;
        display: block !important;
    }
    
    #loginBox:after,
    #content:after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }
}