/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE CSS — Aridong
   Optimisations et media queries pour appareils mobiles
   À importer APRÈS global.css pour override les styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── BOTTOM NAV ──────────────────────────────────────────────────────────── */
#mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    #mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 150;
        background: rgba(86, 14, 27, 0.97);
        border-top: 1px solid rgba(208, 187, 160, 0.25);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.45);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .mob-nav-inner {
        display: flex;
        width: 100%;
        justify-content: space-around;
    }

    .mob-nav-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        flex: 1;
        padding: 10px 0 8px;
        color: rgba(208, 187, 160, 0.65);
        font-size: 10px;
        font-weight: 600;
        text-decoration: none;
        letter-spacing: 0.02em;
        transition: color 0.2s;
        -webkit-tap-highlight-color: transparent;
    }

    .mob-nav-tab i {
        font-size: 18px;
        line-height: 1;
    }

    .mob-nav-tab:active { opacity: 0.7; }

    .mob-nav-active {
        color: #D0BBA0;
    }

    .mob-nav-active i {
        filter: drop-shadow(0 0 6px rgba(208, 187, 160, 0.4));
    }

    /* Body padding so content isn't covered by bottom nav */
    body.has-bottom-nav {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }
}

/* ── HAMBURGER: masquer quand bottom nav est actif ───────────────────────── */
body.has-bottom-nav #hamburger-btn,
body.has-bottom-nav nav button[aria-label="Menu"],
body.has-bottom-nav nav button[onclick*="toggleMobileMenu"],
body.has-bottom-nav button[aria-label="Menu"] {
    display: none !important;
}

/* Masquer le drawer mobile (le bottom nav le remplace) */
body.has-bottom-nav #mobile-drawer {
    display: none !important;
}

/* Auth container: masqué quand bottom nav actif (Profil dans bottom nav) */
body.has-bottom-nav .auth-container {
    display: none !important;
}

/* ── NAV: masquer la barre de recherche inline sur petit mobile ──────────── */
@media (max-width: 768px) {
    /* La barre de recherche dans le nav est masquée: l'Explorer tab du bottom nav suffit */
    nav .flex.items-center.gap-6 > div.relative {
        display: none;
    }

    /* Le nav devient juste logo + éventuellement titre */
    nav .max-w-\[1600px\] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Hauteur réduite de la nav */
    nav .h-16 {
        height: 52px;
    }
}

/* ── RÉDUCTIONS D'ANIMATIONS SUR MOBILE ────────────────────────────────── */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    * {
        animation-duration: 0.6s !important;
        transition-duration: 0.2s !important;
    }
}

/* Mobile avec données réduites */
@media (max-width: 768px) and (prefers-reduced-data: reduce) {
    .skeleton {
        animation: none;
        background: rgba(86, 14, 27, 0.5);
    }

    .glass {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }
}

/* ── DRAWER PANEL OPTIMISÉ ────────────────────────────────────────────── */
@media (max-width: 768px) {
    #drawer-panel {
        padding: 16px 16px 32px;
        border-radius: 20px 20px 0 0;
    }

    .drawer-link {
        padding: 12px 12px;
        font-size: 14px;
        gap: 12px;
    }

    .drawer-link i {
        width: 18px;
    }
}

/* ── FONT SIZES RESPONSIVES ──────────────────────────────────────────── */
@media (max-width: 768px) {
    h1 { font-size: clamp(1.4rem, 5vw, 2.2rem); }
    h2 { font-size: clamp(1.1rem, 4vw, 1.5rem); }
    h3 { font-size: clamp(0.95rem, 3vw, 1.2rem); }
}

/* ── VIEWPORT SPÉCIFIQUE ─────────────────────────────────────────────── */
@media (max-width: 360px) {
    html { font-size: 13px; }
    section, main { padding-left: 0.75rem; padding-right: 0.75rem; }
}

@media (min-width: 360px) and (max-width: 768px) {
    html { font-size: 14px; }
}

/* ── SCROLLBAR MOBILE ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    ::-webkit-scrollbar       { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(208, 187, 160, 0.5); border-radius: 999px; }
    ::-webkit-scrollbar-thumb:hover { background: #D0BBA0; }
}

/* ── HERO SECTION ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* pt-20 du wrapper → réduit pour compenser la nav plus courte */
    .pt-20 { padding-top: 52px !important; }

    /* Hauteur réduite */
    #hero-section,
    .relative.w-full.h-\[600px\],
    .relative.w-full.overflow-hidden.bg-liberty-card {
        height: 280px !important;
    }

    #hero-bg {
        object-fit: cover;
        object-position: center top;
        height: 100%;
    }

    /* Gradients plus forts pour lisibilité */
    .absolute.inset-0.bg-gradient-to-r {
        background: linear-gradient(
            to right,
            rgba(86, 14, 27, 0.98) 0%,
            rgba(86, 14, 27, 0.80) 60%,
            rgba(86, 14, 27, 0.3) 100%
        ) !important;
    }
    .absolute.inset-0.bg-gradient-to-t {
        background: linear-gradient(
            to top,
            rgba(86, 14, 27, 1) 0%,
            rgba(86, 14, 27, 0.5) 40%,
            rgba(86, 14, 27, 0) 100%
        ) !important;
    }

    /* Contenu hero: aligner en bas, pleine largeur */
    .absolute.inset-0.flex.items-end { padding-bottom: 0.75rem; }
    .absolute.inset-0.flex.items-end > .max-w-\[1600px\] {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }

    #hero-title {
        font-size: clamp(1.15rem, 4.5vw, 1.5rem) !important;
        line-height: 1.15;
        word-break: break-word;
        max-height: 3.5em;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    #hero-subtitle { font-size: 0.75rem; letter-spacing: 0.08em; margin-top: 0.25rem; }

    #hero-desc-container {
        max-width: 100%;
        padding-left: 0.6rem;
        border-left-width: 2px;
        margin-top: 0.35rem;
    }

    #hero-desc-container .h-4 { height: 0.65rem; }
    #hero-desc { font-size: 0.75rem; }

    /* Espacement interne du contenu hero réduit */
    #hero-section .space-y-6 > * + * { margin-top: 0.35rem !important; }

    /* Étoiles hero: masquées pour gagner de la place */
    #hero-stars { display: none !important; }

    /* Label "A LA UNE" + badge genre */
    .flex.items-center.gap-3 > span { font-size: 0.65rem; padding: 2px 8px; }

    /* Boutons hero: pleine largeur */
    .flex.gap-4.pt-4 {
        flex-direction: row;
        gap: 0.5rem;
        padding-top: 0.5rem;
    }
    #hero-btn {
        flex: 1;
        font-size: 0.78rem;
        padding: 0.55rem 0.75rem;
        justify-content: center;
    }
    #hero-plus-btn {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    #hero-section,
    .relative.w-full.h-\[600px\],
    .relative.w-full.overflow-hidden.bg-liberty-card { height: 260px !important; }
    #hero-title { font-size: 1.05rem !important; }
}

/* ── RECOMMANDATIONS "POUR TOI" ───────────────────────────────────── */
@media (max-width: 768px) {
    /* En-tête premium: moins de padding */
    #for-you-section > div > div:first-of-type {
        padding: 14px 16px !important;
        margin-bottom: 14px !important;
    }

    /* Orbes déco: cachées pour économiser l'espace vertical */
    #for-you-section > div > div:first-of-type > div[style*="position:absolute"] {
        display: none !important;
    }

    /* Icône ✨: plus petite */
    #for-you-section div[style*="width:46px;height:46px"] {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
    }

    /* Titre "Sélectionné pour toi" */
    #for-you-section span[style*="font-size:1.4rem"] {
        font-size: 1rem !important;
    }

    /* Sous-titre: masqué sur très petit écran */
    #for-you-section p[style*="font-size:12px"] {
        display: none !important;
    }

    /* Tags + bouton "Mes goûts": ligne horizontale scrollable */
    #for-you-section div[style*="display:flex;align-items:center;gap:10px"] {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px !important;
        margin-top: 8px;
    }
    #for-you-section div[style*="display:flex;align-items:center;gap:10px"]::-webkit-scrollbar {
        display: none;
    }

    /* Grille de cartes: 2 colonnes */
    #for-you-section div[style*="grid-template-columns:repeat(auto-fill,minmax(170px"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    /* Cover des cartes: hauteur réduite sur mobile */
    #for-you-section div[style*="position:relative;height:220px"],
    #because-you-like-section div[style*="position:relative;height:220px"] {
        height: 160px !important;
    }

    /* Padding des infos de carte: réduit */
    #for-you-section div[style*="padding:14px 14px 16px"],
    #because-you-like-section div[style*="padding:14px 14px 16px"] {
        padding: 8px 10px 10px !important;
        gap: 4px !important;
    }

    /* Titre de carte: 2 lignes max, taille réduite */
    #for-you-section h4,
    #because-you-like-section h4 {
        font-size: 11px !important;
    }

    /* Section entière: moins de marge bas */
    #for-you-section > div {
        margin-bottom: 2rem !important;
    }

    /* Section "Parce que tu aimes": grille 2 colonnes */
    #because-you-like-section div[style*="grid-template-columns:repeat(auto-fill,minmax(170px"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    #because-you-like-section > div {
        margin-bottom: 2rem !important;
    }
}

/* ── WEEKLY CAROUSEL ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    #weekly-container {
        gap: 0.75rem;
        padding-bottom: 0.5rem;
    }
    /* Chaque carte de la semaine */
    #weekly-container > div,
    #weekly-container > a {
        min-width: clamp(130px, 38vw, 170px) !important;
    }
}

/* ── ORACLE IA MOBILE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    #oracle-container {
        padding: 1.25rem 1rem !important;
    }

    /* Chips: scroll horizontal */
    #oracle-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
        gap: 6px !important;
        margin-bottom: 1rem !important;
    }
    #oracle-chips::-webkit-scrollbar { display: none; }

    .oracle-chip { white-space: nowrap; padding: 5px 10px; font-size: 11px; }

    /* Input + bouton: empilés */
    #oracle-container > div[style*="display:flex;gap:10px"] {
        flex-direction: column !important;
        gap: 8px !important;
    }
    #oracle-submit-btn {
        width: 100%;
        text-align: center;
        padding: 12px !important;
        border-radius: 12px !important;
    }

    /* Orbes d'ambiance: désactivées sur mobile pour la perf */
    #oracle-section .absolute.inset-0.pointer-events-none > div {
        display: none;
    }
}

/* ── GRILLE RÉPERTOIRE + SIDEBAR ──────────────────────────────────── */
@media (max-width: 768px) {
    /* Sidebar activité: cachée sur mobile */
    .lg\:col-span-4 {
        display: none;
    }
    /* La grille de webtoons prend toute la largeur */
    .lg\:col-span-8 {
        grid-column: span 12 / span 12;
    }

    /* Tabs de genre: scroll horizontal propre */
    #genre-tabs {
        gap: 0.35rem;
        padding-bottom: 0.25rem;
    }
    #genre-tabs button {
        font-size: 0.7rem;
        padding: 0.3rem 0.7rem;
        white-space: nowrap;
    }

    /* Grille webtoons: 2 col sur mobile */
    #webtoon-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    /* Section headers */
    .flex.justify-between.items-center.mb-6 {
        margin-bottom: 0.75rem;
    }
    .flex.justify-between.items-end.mb-6 {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }
    #genre-tabs { width: 100%; }
}

/* ── CONTENU PRINCIPAL: espacements ─────────────────────────────── */
@media (max-width: 768px) {
    .max-w-\[1600px\].mx-auto.px-4.md\:px-6.mt-8 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        margin-top: 0.75rem;
    }

    section.mb-20 { margin-bottom: 1.75rem; }

    /* Titre de section */
    .flex.justify-between.items-center.mb-6 h2,
    .flex.justify-between.items-end.mb-6 h2 {
        font-size: 1rem;
    }
}

/* ── IMAGES LAZY ─────────────────────────────────────────────────── */
img[loading="lazy"] {
    background: linear-gradient(
        90deg,
        rgba(86, 14, 27, 0.6) 25%,
        rgba(208, 187, 160, 0.15) 50%,
        rgba(86, 14, 27, 0.6) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite;
}

/* ── OPTIMISATIONS TACTILES ──────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    * { -webkit-tap-highlight-color: rgba(208, 187, 160, 0.2); }

    nav a, nav button,
    .drawer-link,
    .tab-btn,
    .auth-container a,
    .auth-container button,
    #scroll-top-btn,
    #scroll-left, #scroll-right {
        min-height: 44px;
        min-width: 44px;
    }

    .mob-nav-tab {
        min-height: 56px;
    }

    button:active, a:active { opacity: 0.75; }
}

/* ── PERFORMANCE: REDUCE MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── CONNEXION LENTE ─────────────────────────────────────────────── */
@media (prefers-reduced-data: reduce) {
    * { animation: none !important; }
}

/* ── SOMBRE: Optimiser pour batterie faible ──────────────────────── */
@media (prefers-color-scheme: dark) {
    body { color: #E8E0D0; }
}

/* ── SCROLL TO TOP: au-dessus du bottom nav ─────────────────────── */
@media (max-width: 768px) {
    #scroll-top-btn {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        right: 16px !important;
    }
}

/* ── PROFILE PAGE ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .profile-banner { height: 80px; }

    .manga-card { width: 80px; }
    .manga-thumb { width: 80px !important; height: 116px !important; }

    .tab-btn { padding: 5px 10px; font-size: 0.7rem; }

    /* Toast: au-dessus du bottom nav */
    #toast {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        right: 1rem;
        left: 1rem;
        width: auto;
        justify-content: center;
    }
}

/* ── DETAILS PAGE ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Toast details: au-dessus du bottom nav */
    #toast-msg {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC MOBILE — Uniformisation app-like
   ═══════════════════════════════════════════════════════════════════ */

/* ── GLOBAL NAV: hauteur 52px uniforme sur TOUTES les pages ───── */
@media (max-width: 768px) {
    nav.glass .max-w-\[1600px\],
    nav.glass .max-w-7xl,
    nav.glass > div {
        height: 52px !important;
    }
    nav.glass .h-20,
    nav.glass .h-16 {
        height: 52px !important;
    }
    /* Padding top uniforme pour compenser le nav 52px */
    .pt-32 { padding-top: 64px !important; }
    .pt-24 { padding-top: 60px !important; }

    /* Logo: plus compact */
    nav.glass img[alt="Logo"] {
        height: 32px !important;
    }
    /* Titre WEBTOON.MANSION: masquer sur mobile sauf logo */
    nav .text-2xl.font-display {
        font-size: 1rem !important;
        letter-spacing: 0.08em !important;
    }
}

/* ── COMMUNITY PAGE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Masquer les deux sidebars */
    .max-w-7xl aside.hidden.lg\:flex {
        display: none !important;
    }
    /* Grille: une seule colonne pour le feed */
    .grid.grid-cols-1.lg\:grid-cols-\[280px_1fr_300px\] {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-top: 60px !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 1rem) !important;
    }

    /* Compose box: compact */
    .compose-box {
        padding: 12px !important;
        border-radius: 12px !important;
    }
    .compose-textarea {
        font-size: 0.95rem !important;
        min-height: 50px !important;
    }
    .compose-box img {
        width: 36px !important;
        height: 36px !important;
    }

    /* Tabs (Fil d'actu / Mes posts / Sauvegardés): sticky sous le nav */
    .flex.border-b.border-[rgba(208,187,160,0.2)]\/30.sticky {
        top: 52px !important;
        border-radius: 0 !important;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .tab-btn {
        font-size: 0.78rem !important;
        padding: 10px 0 !important;
    }

    /* Post cards */
    .post-card {
        padding: 12px !important;
        border-radius: 12px !important;
    }

    /* Action buttons row */
    .action-btn {
        font-size: 0.72rem !important;
        padding: 5px 8px !important;
        gap: 4px !important;
    }

    /* Compose modal: plein écran */
    #compose-modal > div:last-child {
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 16px !important;
    }

    /* Toast: au-dessus du bottom nav */
    #toast {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Bouton flottant poster (sidebar) masqué — on utilise l'inline */
    #compose-btn-sidebar { display: none !important; }
}

/* ── SEARCH PAGE ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Hero search: hauteur réduite */
    .search-hero {
        padding-top: 64px !important;
        padding-bottom: 24px !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .search-hero h1 {
        font-size: 1.5rem !important;
    }
    .search-hero p {
        font-size: 0.8rem !important;
    }
    .search-glow {
        width: 250px !important;
        height: 250px !important;
    }

    /* Barre de recherche principale */
    .main-search-input {
        font-size: 0.9rem !important;
        padding: 14px 50px 14px 44px !important;
        border-radius: 14px !important;
    }
    .search-icon { left: 16px !important; font-size: 0.9rem !important; }
    .search-clear { right: 14px !important; }

    /* Filter bar: empilée */
    .filter-bar {
        border-radius: 12px !important;
        padding: 10px !important;
    }
    .filter-bar > div {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .filter-select {
        font-size: 0.75rem !important;
        padding: 6px 24px 6px 8px !important;
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }

    /* Genre chips: scroll horizontal */
    .filter-bar .flex.flex-wrap.gap-2 {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .filter-bar .flex.flex-wrap.gap-2::-webkit-scrollbar { display: none; }
    .genre-chip {
        font-size: 0.68rem !important;
        padding: 4px 10px !important;
    }

    /* Stats bar */
    .stats-bar { gap: 6px !important; }
    .stat-chip {
        font-size: 0.7rem !important;
        padding: 4px 10px !important;
    }

    /* Results grid: 2 colonnes */
    .grid.grid-cols-2.sm\:grid-cols-3.md\:grid-cols-4.lg\:grid-cols-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    /* Cards: compact */
    .card-info { padding: 8px !important; }
    .card-title { font-size: 0.78rem !important; }
    .card-sub { font-size: 0.65rem !important; }
    .card-genres { gap: 3px !important; margin-top: 5px !important; }
    .card-genre-tag { font-size: 0.58rem !important; padding: 1px 5px !important; }
    .card-meta { font-size: 0.62rem !important; gap: 5px !important; margin-top: 5px !important; }
    .card-score-badge { font-size: 0.65rem !important; padding: 2px 5px !important; top: 5px !important; right: 5px !important; }
    .card-status-badge { font-size: 0.58rem !important; padding: 2px 6px !important; top: 5px !important; left: 5px !important; }

    /* Pagination */
    .page-btn { min-width: 32px !important; height: 32px !important; font-size: 0.75rem !important; }

    /* Results header */
    .results-header { gap: 8px !important; }

    /* Suggestion chips */
    .suggestion-chip { font-size: 0.7rem !important; padding: 5px 10px !important; }

    /* Nav search dans barre: masquer (on a le hero search) */
    #nav-search { display: none !important; }

    /* View toggle */
    .view-btn { width: 30px !important; height: 30px !important; }

    /* Sort buttons */
    .sort-btn { font-size: 0.68rem !important; padding: 4px 10px !important; }

    /* Active filter tags */
    .active-filter-tag { font-size: 0.68rem !important; padding: 3px 8px !important; }
}

/* ── QUIZ PAGE ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Titre */
    .pt-32.pb-20.px-6 h1 {
        font-size: 1.75rem !important;
    }
    .pt-32.pb-20.px-6 > p {
        font-size: 0.85rem !important;
        margin-bottom: 1.5rem !important;
    }
    .pt-32.pb-20.px-6 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-bottom: 1rem !important;
    }

    /* Grid Oracle + Create: empilé */
    .grid.grid-cols-1.lg\:grid-cols-2 {
        gap: 1rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Oracle section */
    .grid.grid-cols-1.lg\:grid-cols-2 > div:first-child {
        padding: 1rem !important;
        border-radius: 16px !important;
    }

    /* Oracle chips: scroll horizontal */
    .grid.grid-cols-1.lg\:grid-cols-2 .flex.flex-wrap.gap-2 {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .grid.grid-cols-1.lg\:grid-cols-2 .flex.flex-wrap.gap-2::-webkit-scrollbar { display: none; }

    /* Input + button: empilés */
    .grid.grid-cols-1.lg\:grid-cols-2 .flex.gap-3 {
        flex-direction: column !important;
    }

    /* Difficulty buttons */
    .diff-btn { font-size: 11px !important; padding: 5px 12px !important; }

    /* Create section */
    .grid.grid-cols-1.lg\:grid-cols-2 > div:last-child {
        padding: 1.25rem !important;
    }
    .grid.grid-cols-1.lg\:grid-cols-2 > div:last-child h2 {
        font-size: 1.2rem !important;
    }

    /* Community quizzes grid */
    #community-quizzes {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    .quiz-card {
        padding: 14px !important;
    }

    /* Quiz modals: plein écran */
    #quiz-player-modal > div,
    #quiz-create-modal > div {
        border-radius: 16px !important;
        padding: 1rem !important;
        max-height: 85vh !important;
    }
}

/* ── NEW PAGE ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Header compact */
    .pt-32.pb-10.px-6 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-bottom: 0.5rem !important;
    }
    .pt-32.pb-10.px-6 h1 {
        font-size: 1.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    .pt-32.pb-10.px-6 p {
        font-size: 0.85rem !important;
    }

    /* Grid: 2 colonnes sur mobile (au lieu de 4-6) */
    #new-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Container padding */
    .max-w-\[1600px\].mx-auto.px-6.pb-20 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 1rem) !important;
    }
}

/* ── GENRE PAGE ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Title */
    .pt-32.pb-4.px-6 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    #genre-title {
        font-size: 1.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Genre pills: scroll horizontal */
    #genre-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px !important;
        padding-bottom: 4px;
    }
    #genre-pills::-webkit-scrollbar { display: none; }
    #genre-pills button {
        font-size: 0.72rem !important;
        padding: 6px 12px !important;
        white-space: nowrap;
    }

    /* Grid: 2 colonnes */
    #genre-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}

/* ── DETAILS PAGE ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Nav hauteur réduite */
    nav.glass[style*="height:72px"],
    nav[style*="height:72px"] {
        height: 52px !important;
    }
    nav.glass[style*="height:72px"] .h-full,
    nav[style*="height:72px"] .h-full {
        height: 52px !important;
    }

    /* Container principal */
    #webtoon-details-container {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ── LOGIN PAGE ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Card: pleine largeur, bords arrondis réduits */
    .auth-card {
        border-radius: 20px !important;
        max-width: 100% !important;
    }
    .auth-card .px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .auth-card .pt-8 {
        padding-top: 1.25rem !important;
    }

    /* Avatar presets: plus petits */
    .avatar-option {
        width: 42px !important;
        height: 42px !important;
    }

    /* Champs input */
    .field-input {
        font-size: 0.85rem !important;
        padding: 11px 40px 11px 40px !important;
    }

    /* Toast login: au-dessus du bottom nav */
    #auth-toast {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 8px) !important;
    }
}

/* ── 404 PAGE ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .empty-state { padding: 40px 16px !important; }
    .empty-icon { font-size: 2.5rem !important; }
}

/* ── SAFE AREA PADDING BOTTOM: global ────────────────────────────── */
@media (max-width: 768px) {
    /* Tous les containers principaux doivent avoir du padding-bottom pour le bottom nav */
    body.has-bottom-nav main,
    body.has-bottom-nav > div:last-of-type,
    body.has-bottom-nav .pb-20,
    body.has-bottom-nav .pb-16 {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Toasts, FAB, scroll-top: tous au-dessus du bottom nav */
    #toast-container {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 8px) !important;
        right: 0.75rem !important;
        left: 0.75rem !important;
    }
    .quiz-toast {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 8px) !important;
    }
}

/* ── CARTES ÉPURÉES ARIDONG : RESPONSIVE ──────────────────────── */
@media (max-width: 768px) {
    .wm-card,
    .webtoon-card,
    .wt-card {
        border-radius: 12px;
    }
    /* Sur tactile, éviter un halo persistant après le tap */
    @media (hover: none) {
        .wm-card:hover,
        .webtoon-card:hover,
        .wt-card:hover {
            transform: none;
        }
    }
}