/* Mobile-first correction layer — loaded after each page stylesheet. */
.nav-toggle { display: none; }

@media (max-width: 800px) {
    html, body { width: 100%; min-height: 100%; overflow-x: hidden !important; overflow-y: auto !important; }
    body { font-size: 16px; }

    .navbar {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: auto !important;
        min-height: 56px;
        padding: 6px 12px;
        justify-content: flex-end;
        z-index: 2000;
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        border: 1px solid rgba(var(--cyan-rgb), .7);
        border-radius: 8px;
        background: rgba(0, 140, 255, .16);
        color: #fff;
        font: 700 24px/1 Arial, sans-serif;
        cursor: pointer;
    }
    .nav-toggle:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

    .navigation {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: auto !important;
        padding: 12px 16px 18px;
        background: rgba(1, 5, 12, .98);
        border-bottom: 2px solid var(--blue);
        box-shadow: 0 16px 28px rgba(0, 0, 0, .5);
    }
    .navbar.is-open .navigation { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .navigation a,
    .navbar .navigation a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 10px 8px;
        border: 1px solid rgba(var(--blue-light-rgb), .24);
        border-radius: 7px;
        background: rgba(var(--blue-rgb), .10);
        color: var(--text);
        font-size: 15px !important;
        line-height: 1.15;
        letter-spacing: .3px;
        text-align: center;
        white-space: normal;
    }
    .navigation a::after { display: none !important; }
    .navigation a.active { color: #fff; border-color: var(--cyan); background: rgba(var(--blue-rgb), .32); }

    /* Home: turn the fixed desktop composition into a readable vertical page. */
    .home, .hero { height: auto !important; min-height: 100svh; }
    .hero { overflow: visible; padding: 72px 16px 24px; background-position: 58% center; }
    .hero-overlay { position: absolute; }
    .hero-content {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        flex-direction: column;
        align-items: center;
        gap: 18px !important;
        text-align: center;
    }
    .hero-logo, .hero-logo img { width: 164px !important; height: 164px !important; }
    .hero-logo { flex-basis: auto !important; }
    .hero-text { width: 100% !important; max-width: 620px; padding: 22px 18px !important; transform: none !important; }
    .hero-label { margin-bottom: 10px !important; font-size: 12px !important; letter-spacing: 2px !important; }
    .hero-text h1 { font-size: clamp(36px, 11vw, 52px) !important; line-height: 1 !important; letter-spacing: -1px !important; }
    .hero-text p { margin-top: 14px !important; font-size: 16px !important; line-height: 1.45 !important; }
    .join-button { min-width: 0 !important; min-height: 48px; margin-top: 16px !important; padding: 13px 20px !important; font-size: 15px !important; }

    .dashboard {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 620px;
        margin: 22px auto 0;
        padding: 20px 14px !important;
    }
    .dashboard-header h2 { font-size: 30px !important; }
    .dashboard-label { font-size: 11px !important; letter-spacing: 2px !important; }
    .dashboard-stats { grid-template-columns: 1fr !important; gap: 10px !important; }
    .dashboard-card { min-height: 104px !important; padding: 15px !important; }
    .dashboard-icon { width: 34px !important; height: 34px !important; margin-bottom: 7px !important; font-size: 20px !important; }
    .dashboard-number { font-size: 26px !important; }
    .dashboard-title { margin-top: 5px !important; font-size: 13px !important; letter-spacing: 1px !important; }
    .dashboard-description { display: block !important; margin-top: 5px; font-size: 13px !important; }
    .reviews-title { font-size: 13px !important; letter-spacing: 1px !important; }
    .review-slider { min-height: 0 !important; }
    .review-card { position: static !important; display: none; transform: none !important; }
    .review-card.active { display: block; opacity: 1; }
    .review-card p { font-size: 14px !important; line-height: 1.4 !important; }
    .review-author { font-size: 11px !important; }
    .footer { position: static !important; height: auto !important; min-height: 68px; }
    .footer-content { flex-wrap: wrap; justify-content: center; padding: 8px 12px !important; gap: 6px !important; }
    .footer-created, .footer-copyright { font-size: 10px !important; letter-spacing: 1px !important; }

    /* Public inner pages. */
    .presentation-page, .reglement-page, .team-page, .gallery-page, .donation-page, .top-server-page, .custom-page {
        min-height: auto !important;
        padding: 92px 16px 42px !important;
    }
    .presentation-container { height: auto !important; }
    .presentation-heading h1, .reglement-heading h1, .team-title { font-size: clamp(38px, 12vw, 52px) !important; }
    .presentation-intro p, .reglement-intro p, .team-description { font-size: 16px !important; line-height: 1.45 !important; }
    .presentation-features, .reglement-grid, .team-grid, .gallery-grid { grid-template-columns: 1fr !important; }
    .feature-card, .reglement-card { padding: 20px !important; min-height: auto !important; }
    .feature-card h2, .reglement-card h2 { font-size: 26px !important; }
    .feature-card p, .reglement-card p, .reglement-card ul, .reglement-card ol { font-size: 16px !important; line-height: 1.45 !important; }
    .blue-ia-card { grid-template-columns: 1fr !important; }
    .blue-ia-image { min-height: 180px !important; height: 180px !important; }
    .blue-ia-content { padding: 20px !important; }
    .team-card { height: auto !important; min-height: 250px; padding: 22px 16px !important; }

    /* Dashboard admin. */
    .admin-header { position: sticky; top: 0; z-index: 2100; align-items: center; }
    .admin-header-actions .admin-link { display: none; }
    .admin-workspace { padding: 22px 16px !important; }
    .admin-workspace .field input, .admin-workspace .field textarea, .admin-workspace .field select { min-height: 44px; font-size: 16px; }
    .table { display: block; width: 100%; overflow-x: auto; }
}

@media (max-width: 420px) {
    .navbar.is-open .navigation { grid-template-columns: 1fr; }
    .hero { padding-left: 12px; padding-right: 12px; }
    .hero-logo, .hero-logo img { width: 142px !important; height: 142px !important; }
    .hero-text { padding: 18px 14px !important; }
    .dashboard { padding: 16px 12px !important; }
    .presentation-page, .reglement-page, .team-page, .gallery-page, .donation-page, .top-server-page, .custom-page { padding-left: 12px !important; padding-right: 12px !important; }
}