/* ============================================================================
   CHRONICLE - CORRECTIONS MOBILE (index_mobile_fixes.css)
   À ajouter à la fin de index.css ou importer après
   ============================================================================ */

/* ============================================================================
   BREAKPOINT TABLETTE (< 1024px) - Layout 2 colonnes puis 1
   ============================================================================ */

@media (max-width: 1024px) {
    
    /* Layout principal - passe en colonne unique */
    .main-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px;
        padding: 15px;
        min-height: auto;
    }
    
    /* Réorganiser l'ordre des éléments */
    .main-content {
        order: 1;  /* Contenu principal en premier */
        width: 100%;
    }
    
    .themes-panel {
        order: 3;  /* Thèmes après le contenu */
        width: 100%;
    }
    
    .right-column {
        order: 2;  /* Langue/Auth après contenu, avant thèmes */
        width: 100%;
    }
    
    .help-panel {
        order: 4;  /* Aide en dernier */
        width: 100%;
    }
    
    /* Panneaux latéraux en mode horizontal compact */
    .themes-panel,
    .language-panel {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 12px 15px;
    }
    
    .themes-panel h3,
    .language-panel h3 {
        width: 100%;
        text-align: center;
        margin-bottom: 8px;
        font-size: 0.95rem;
    }
    
    .theme-option,
    .language-option {
        flex: 0 1 auto;
        min-width: 100px;
        padding: 8px 15px;
        margin: 0;
        font-size: 0.85rem;
    }
    
    /* Right column en horizontal */
    .right-column {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        align-items: stretch;
    }
    
    .language-panel,
    .auth-status-panel {
        flex: 1 1 200px;
        max-width: 300px;
    }
    
    /* Cacher les éléments moins importants sur tablette */
    .sidebar-bottom {
        display: none;
    }
    
    .user-welcome {
        display: none !important;
    }
}

/* ============================================================================
   BREAKPOINT MOBILE (< 768px) - Optimisation téléphone
   ============================================================================ */
/* ============================================================================
   POLICE SYSTÈME LISIBLE SUR MOBILE
   ============================================================================ */


@media (max-width: 768px) {
    /* Police système pour tout le texte */
    body,
    h1, h2, h3, h4, h5, h6,
    p, span, div, a, button,
    .main-content,
    .themes-panel,
    .language-panel,
    .auth-status-panel,
    .help-panel,
    .pack-card,
    .pack-title,
    .pack-description,
    .btn,
    .mode-desc,
    .desc-content,
    .recent-story-title,
    .review-title,
    input, select, textarea {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    }
    
    /* Garder la police chinoise */
    .chinese-text,
    [lang="zh"] {
        font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
    }
	
    /* Layout encore plus compact */
    .main-layout {
        padding: 10px;
        gap: 12px;
    }
    
    /* Contenu principal */
    .main-content {
        padding: 15px;
        border-radius: 15px;
    }
    
    /* Logo réduit */
    .app-logo {
        height: 120px !important;
        max-width: 100%;
    }
    
    .title-row {
        flex-direction: column !important;
        gap: 0.25rem !important;
    }
    
    .title-row .version-badge {
        margin-top: 5px;
        font-size: 0.65rem;
    }
    
    /* Panneaux latéraux encore plus compacts */
    .themes-panel,
    .language-panel,
    .auth-status-panel {
        padding: 10px;
        border-radius: 10px;
    }
    
    .themes-panel h3,
    .language-panel h3 {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
    
    .theme-option,
    .language-option {
        padding: 6px 12px;
        font-size: 0.8rem;
        min-width: 80px;
    }
    
    /* Right column empilée sur mobile */
    .right-column {
        flex-direction: column;
        align-items: stretch;
    }
    
    .language-panel,
    .auth-status-panel {
        max-width: 100%;
        flex: 1 1 auto;
    }
    
    /* Auth panel compact */
    #authStatus {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    #authStatus button {
        flex: 1 1 120px;
        padding: 8px 12px;
        font-size: 0.85rem;
    }
    
    /* Section Flashcards */
    .review-cards-section {
        padding: 0.25rem 0;
    }
    
    .review-title {
        font-size: 1rem;
    }
    
    /* Section histoires récentes */
    .recent-stories-section {
		width: 100% !important;
		max-width: 500px !important;
		box-sizing: border-box !important;
	}
    
    .recent-stories-header h3 {
        font-size: 0.95rem;
    }
    
    .recent-story-item {
        padding: 8px 10px;
    }
    
    .recent-story-title {
        font-size: 0.85rem;
    }
    
    .recent-play-btn {
        width: 36px;
        height: 36px;
    }
    
    /* Boutons d'action */
    .buttons-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .buttons-row .btn {
        width: 100%;
        padding: 12px 20px;
    }
    
    /* Mode descriptions */
    .modes-descriptions {
        margin-top: 15px;
    }
    
    .mode-desc {
        padding: 12px;
    }
    
    .desc-content h4 {
        font-size: 0.95rem;
    }
    
    .desc-content p {
        font-size: 0.85rem;
    }
    
    .desc-badges {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .desc-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
    }
    
    /* Help panel compact */
    .help-panel {
        padding: 10px;
        max-height: 100px;
    }
    
    .help-panel h4 {
        font-size: 0.9rem;
    }
    
    .help-output {
        font-size: 0.8rem;
    }
    
    /* Info pack sélectionné */
    .selected-pack-info {
        font-size: 0.85rem;
        padding: 8px;
    }
}

/* ============================================================================
   BREAKPOINT PETIT MOBILE (< 480px)
   ============================================================================ */

@media (max-width: 480px) {
    
    .main-layout {
        padding: 8px;
        gap: 10px;
    }
    
    .main-content {
        padding: 12px;
    }
    
    .app-logo {
        height: 100px !important;
    }
    
    /* Panneaux en mode minimal */
    .themes-panel,
    .language-panel {
        padding: 8px;
    }
    
    .themes-panel h3,
    .language-panel h3 {
        font-size: 0.85rem;
    }
    
    .theme-option,
    .language-option {
        padding: 5px 10px;
        font-size: 0.75rem;
        min-width: 70px;
    }
    
    /* Auth très compact */
    .auth-status-panel {
        padding: 8px;
    }
    
    #authStatus button {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
    
    .user-stats-mini {
        font-size: 0.75rem;
        gap: 10px;
    }
    
    /* Flashcards carousel réduit */
    .cards-carousel {
        height: 200px;
    }
    
    .carousel-card {
        width: 100px;
        height: 140px;
        margin-left: -50px;
        margin-top: -70px;
    }
    
    .carousel-card .card-count {
        font-size: 1.8rem;
    }
    
    .carousel-card .card-label {
        font-size: 0.6rem;
    }
    
    /* Boutons */
    .btn {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
    
    /* Help panel minimal */
    .help-panel {
        max-height: 80px;
    }
}

/* ============================================================================
   MODAL PACK BROWSER - CORRECTIONS MOBILE
   ============================================================================ */

@media (max-width: 900px) {
    
    /* Modal plein écran */
    .modal-content-large {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
    }
    
    /* Layout en colonne */
    .pack-browser-layout {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        overflow-y: auto;
        height: calc(100vh - 60px);
    }
    
    /* Section packs prend toute la largeur */
    .packs-section {
        width: 100%;
        order: 1;
        flex-shrink: 0;
    }
    
    /* Section profil en dessous */
    .user-profile-section {
        width: 100%;
        order: 2;
        padding-right: 0;
    }
    
    /* Header modal compact */
    .modal-header {
        padding: 1rem;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .modal-header h2 {
        font-size: 1.2rem;
    }
    
    .close-btn {
        font-size: 1.5em;
        top: 10px;
        right: 15px;
    }
}

@media (max-width: 768px) {
    
    /* Filtres compacts */
    .filters-bar-compact {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }
    
    /* Recherche pleine largeur */
    .search-input-wrapper {
        width: 100%;
        min-width: auto;
    }
    
    /* HSK pills scrollables */
    .hsk-pills-group {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .hsk-pill {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    .group-label {
        display: none;  /* Cacher le label HSK sur petit écran */
    }
    
    /* Séparateur caché */
    .filters-separator {
        display: none;
    }
    
    /* Dropdown catégories */
    .categories-dropdown-wrapper {
        width: 100%;
    }
    
    .categories-dropdown-trigger {
        width: 100%;
        justify-content: center;
    }
    
    .categories-dropdown-menu {
        width: 100%;
        max-width: none;
    }
    
    /* Reset button */
    .btn-reset-compact {
        width: 100%;
        justify-content: center;
    }
    
    /* Compteur packs */
    .packs-count-compact {
        text-align: center;
        font-size: 0.85rem;
    }
    
    /* Grille packs en colonne */
    .packs-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    /* Cards profil plus compactes */
    .profile-card {
        padding: 1rem;
    }
    
    .profile-card h3 {
        font-size: 1rem;
    }
    
    .strength-item,
    .weakness-item,
    .recommendation-item {
        padding: 0.5rem;
    }
    
    .item-label {
        font-size: 0.85rem;
    }
    
    .item-percentage {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    
    .pack-browser-layout {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    
    .modal-header {
        padding: 0.75rem;
    }
    
    .modal-header h2 {
        font-size: 1rem;
    }
    
    .hsk-pill {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
    
    /* Option: cacher la section profil sur très petit écran */
    .user-profile-section {
        display: none;  /* Désactiver si vous voulez montrer */
    }
}

/* ============================================================================
   CARROUSEL FLASHCARDS - CORRECTIONS MOBILE
   ============================================================================ */

@media (max-width: 768px) {
    
    .cards-carousel {
        height: 220px;
    }
    
    .carousel-card {
        width: 110px;
        height: 155px;
        margin-left: -55px;
        margin-top: -77px;
    }
    
    .carousel-card.pos-left {
        transform: translateX(-70px) translateZ(-80px) rotateY(20deg) scale(0.8);
    }
    
    .carousel-card.pos-right {
        transform: translateX(70px) translateZ(-80px) rotateY(-20deg) scale(0.8);
    }
    
    .hover-zone {
        width: 40px;  /* Plus large pour tactile */
    }
}

/* ============================================================================
   AMÉLIORATIONS TACTILES
   ============================================================================ */

@media (max-width: 768px) {
    
    /* Zones cliquables plus grandes */
    .theme-option,
    .language-option,
    .btn,
    .pack-card,
    .recent-story-item {
        min-height: 44px;  /* Minimum recommandé pour touch */
    }
    
    /* Pas de hover effects sur mobile (empêche sticky hover) */
    .theme-option:hover,
    .language-option:hover {
        transform: none;
    }
    
    .theme-option:active,
    .language-option:active {
        transform: scale(0.98);
        opacity: 0.8;
    }
}

/* ============================================================================
   FIX OVERFLOW ET SCROLL
   ============================================================================ */

@media (max-width: 1024px) {
    
    /* Empêcher overflow horizontal */
    body {
        overflow-x: hidden;
    }
    
    .main-layout {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }
    
    .main-content {
        overflow-x: hidden;
        word-wrap: break-word;
    }
}

/* ============================================================================
   THÈMES - Ajustements mobile
   ============================================================================ */

@media (max-width: 768px) {
    
    /* Fond plus simple sur mobile pour performance */
    body[data-theme="default"] {
        background-attachment: scroll;  /* Pas de fixed background */
    }
    
    /* Réduire les blurs sur mobile pour performance */
    .main-content,
    .themes-panel,
    .language-panel,
    .auth-status-panel,
    .help-panel {
        backdrop-filter: blur(5px);  /* Réduit de 10px */
    }
}

/* ============================================================================
   CORRECTIONS SECTION "REPRENDRE" (Recent Stories) - Mobile
   À ajouter à index_mobile_fixes.css ou à la fin de index.css
   ============================================================================ */

/* Fix largeur fixe → responsive */
.recent-stories-section {
    width: 100%; !important;  
    max-width: 500px; !important;
    box-sizing: border-box; !important;
}

@media (max-width: 768px) {
    
    .recent-stories-section {
        width: 100%; 
        max-width: 100%;
        padding: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .recent-stories-title {
        font-size: 0.95rem;
    }
    
    .recent-story-item {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }
    
    .recent-story-info {
        min-width: 0;       /* Permet le texte de se tronquer */
        flex: 1;
        overflow: hidden;
    }
    
    .recent-story-title {
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    
    .recent-story-meta {
        font-size: 0.75rem;
        flex-wrap: wrap;
    }
    
    .recent-play-btn {
        width: 36px;
        height: 36px;
        flex-shrink: 0;     /* Empêche le bouton de rétrécir */
    }
    
    .recent-play-btn .icon-audiobook {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 480px) {
    
    .recent-stories-section {
        padding: 0.5rem;
    }
    
    .recent-story-item {
        padding: 0.4rem 0.5rem;
    }
    
    .recent-story-title {
        font-size: 0.8rem;
    }
    
    .recent-story-meta {
        font-size: 0.7rem;
    }
    
    .recent-play-btn {
        width: 32px;
        height: 32px;
    }
}