/**
 * DROIT AU BUT - Optimisations mobile avancées Phase 2
 * CSS responsive avec gestes tactiles et performances optimisées
 */

/* ==============================================
   OPTIMISATIONS MOBILE AVANCÉES
   ============================================== */

/* Variables pour mobile */
@media (max-width: 768px) {
    :root {
        --mobile-spacing: 1rem;
        --mobile-touch-target: 44px;
        --mobile-font-scale: 0.9;
        --mobile-border-radius: 12px;
        --mobile-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
}

/* ==============================================
   HEADER MOBILE OPTIMISÉ
   ============================================== */

@media (max-width: 768px) {
    .header {
        padding: 1rem var(--mobile-spacing);
        text-align: center;
    }

    .header h1 {
        font-size: 1.8rem;
        margin: 0.5rem 0;
    }

    .header p {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .om-logo-img {
        width: 40px;
        height: 40px;
        margin-bottom: 0.5rem;
    }
}

/* ==============================================
   SECTION NEWS MOBILE
   ============================================== */

@media (max-width: 768px) {
    .news-section {
        margin: var(--mobile-spacing);
        padding: 0;
    }

    .news-section h2 {
        font-size: 1.4rem;
        padding: 0 var(--mobile-spacing);
        margin-bottom: 1rem;
    }

    .news-list {
        border-radius: var(--mobile-border-radius);
        overflow: hidden;
        box-shadow: var(--mobile-shadow);
    }

    .news-item {
        padding: 1rem var(--mobile-spacing);
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        min-height: var(--mobile-touch-target);
        transition: all 0.2s ease;
    }

    .news-item:active {
        background: rgba(0,168,230,0.1);
        transform: scale(0.98);
    }

    .news-source {
        margin-right: 0;
        margin-bottom: 0;
        font-size: 0.75rem;
        padding: 4px 8px;
        border-radius: 6px;
        align-self: flex-start;
    }

    .news-content {
        width: 100%;
    }

    .news-title {
        font-size: 0.95rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
        /* Permettre la sélection sur mobile */
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }

    .news-time {
        font-size: 0.8rem;
        color: #666;
    }
}

/* Très petits écrans */
@media (max-width: 480px) {
    .news-item {
        padding: 0.875rem;
    }

    .news-title {
        font-size: 0.9rem;
    }

    .news-source {
        font-size: 0.7rem;
        padding: 3px 6px;
    }
}

/* ==============================================
   VIDÉOS YOUTUBE MOBILE
   ============================================== */

@media (max-width: 768px) {
    .video-section {
        margin: var(--mobile-spacing);
        padding: 0;
    }

    .video-section h2 {
        font-size: 1.4rem;
        padding: 0 var(--mobile-spacing);
        margin-bottom: 1rem;
    }

    .video-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 var(--mobile-spacing);
    }

    .video-card {
        border-radius: var(--mobile-border-radius);
        overflow: hidden;
        box-shadow: var(--mobile-shadow);
        transition: all 0.2s ease;
    }

    .video-card:active {
        transform: scale(0.98);
    }

    .video-wrapper {
        aspect-ratio: 16/9;
        position: relative;
        background: #000;
        border-radius: var(--mobile-border-radius) var(--mobile-border-radius) 0 0;
    }

    .video-info {
        padding: 0.875rem;
        background: white;
    }

    .video-channel {
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
        color: #00a8e6;
        font-weight: 600;
    }

    .video-info h3 {
        font-size: 0.9rem;
        line-height: 1.3;
        margin-bottom: 0.5rem;
        /* Limiter à 3 lignes sur mobile */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .video-date {
        font-size: 0.75rem;
        color: #666;
        margin-bottom: 0.5rem;
    }

    .youtube-link {
        font-size: 0.8rem;
    }

    .youtube-link a {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0;
        min-height: var(--mobile-touch-target);
    }
}

/* Optimisation pour très petits écrans */
@media (max-width: 480px) {
    .video-grid {
        gap: 0.75rem;
    }

    .video-info {
        padding: 0.75rem;
    }

    .video-info h3 {
        font-size: 0.85rem;
        -webkit-line-clamp: 2;
    }
}

/* ==============================================
   LECTEUR PODCASTS MOBILE
   ============================================== */

@media (max-width: 768px) {
    .compact-podcast-section {
        margin: var(--mobile-spacing);
        padding: var(--mobile-spacing);
        border-radius: var(--mobile-border-radius);
        box-shadow: var(--mobile-shadow);
    }

    .compact-podcast-section h2 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
        text-align: center;
    }

    /* Lecteur principal mobile */
    .compact-audio-player {
        border-radius: var(--mobile-border-radius);
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .compact-player-header {
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .compact-podcast-icon {
        width: 35px;
        height: 35px;
        font-size: 16px;
        border-radius: 8px;
    }

    .compact-player-title {
        font-size: 0.9rem;
        line-height: 1.3;
        /* Permettre plusieurs lignes sur mobile */
        white-space: normal;
        overflow: visible;
        text-overflow: initial;
    }

    .compact-player-meta {
        font-size: 0.75rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Contrôles mobile */
    .compact-controls {
        border-radius: 10px;
        padding: 1rem;
    }

    .compact-control-buttons {
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .compact-control-btn {
        width: var(--mobile-touch-target);
        height: var(--mobile-touch-target);
        font-size: 1rem;
        border-width: 2px;
        /* Améliorer le feedback tactile */
        -webkit-tap-highlight-color: rgba(0,168,230,0.2);
        transition: all 0.15s ease;
    }

    .compact-control-btn:active {
        transform: scale(0.9);
        box-shadow: 0 2px 8px rgba(0,168,230,0.3);
    }

    .compact-play-btn {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    /* Barre de progression mobile */
    .compact-progress {
        height: 8px;
        border-radius: 4px;
        margin: 0.75rem 0;
        /* Zone de touch plus large */
        position: relative;
    }

    .compact-progress::before {
        content: '';
        position: absolute;
        top: -10px;
        left: 0;
        right: 0;
        bottom: -10px;
        /* Zone invisible pour faciliter le touch */
    }

    .compact-progress-bar {
        border-radius: 4px;
        min-width: 2px;
    }

    .compact-time-info {
        font-size: 0.75rem;
        margin-top: 0.5rem;
    }

    .compact-status {
        font-size: 0.8rem;
        margin-top: 0.75rem;
        padding-left: 20px;
    }

    /* Audio natif mobile */
    #mainAudio {
        height: 35px;
        border-radius: 8px;
        margin-top: 0.75rem;
    }
}

/* Liste des podcasts mobile */
@media (max-width: 768px) {
    .compact-podcast-list {
        gap: 0.75rem;
    }

    .compact-podcast-item {
        border-radius: 10px;
        padding: 1rem;
        min-height: var(--mobile-touch-target);
        transition: all 0.15s ease;
        /* Optimiser pour le touch */
        -webkit-tap-highlight-color: rgba(0,168,230,0.1);
    }

    .compact-podcast-item:active {
        transform: scale(0.98) translateX(2px);
        box-shadow: 0 4px 12px rgba(0,168,230,0.15);
    }

    .compact-podcast-header {
        gap: 0.75rem;
        align-items: flex-start;
    }

    .compact-podcast-icon-small {
        width: 28px;
        height: 28px;
        font-size: 11px;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .compact-podcast-source {
        font-size: 0.7rem;
        margin-bottom: 0.25rem;
    }

    .compact-podcast-title {
        font-size: 0.85rem;
        line-height: 1.3;
        margin-bottom: 0.5rem;
        /* Permettre plusieurs lignes sur mobile */
        white-space: normal;
        overflow: visible;
        text-overflow: initial;
        /* Limiter à 3 lignes maximum */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .compact-podcast-meta {
        font-size: 0.7rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* Très petits écrans pour podcasts */
@media (max-width: 480px) {
    .compact-podcast-section {
        margin: 0.75rem;
        padding: 0.75rem;
    }

    .compact-audio-player {
        padding: 0.875rem;
    }

    .compact-controls {
        padding: 0.875rem;
    }

    .compact-control-btn {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    .compact-play-btn {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }

    .compact-podcast-item {
        padding: 0.875rem;
    }

    .compact-podcast-title {
        font-size: 0.8rem;
        -webkit-line-clamp: 2;
    }
}

/* ==============================================
   GESTES TACTILES ET INTERACTIONS
   ============================================== */

@media (max-width: 768px) {
    /* Améliorer les zones de touch pour tous les éléments interactifs */
    .news-item,
    .video-card,
    .compact-podcast-item,
    .compact-control-btn {
        /* Supprimer le highlight par défaut */
        -webkit-tap-highlight-color: transparent;
        /* Ajouter notre propre feedback */
        position: relative;
    }

    /* Feedback visuel pour les touches */
    .news-item:active::after,
    .video-card:active::after,
    .compact-podcast-item:active::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,168,230,0.1);
        pointer-events: none;
        border-radius: inherit;
    }

    /* Optimiser la sélection de texte sur mobile */
    .news-title,
    .compact-podcast-title,
    .video-info h3 {
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }

    /* Améliorer les liens pour mobile */
    a {
        min-height: var(--mobile-touch-target);
        display: inline-flex;
        align-items: center;
    }
}

/* ==============================================
   FOOTER MOBILE
   ============================================== */

@media (max-width: 768px) {
    .footer {
        padding: 1.5rem var(--mobile-spacing);
        text-align: center;
    }

    .footer p {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .footer p:last-child {
        font-size: 0.8rem;
        line-height: 1.4;
        opacity: 0.9;
    }
}

/* ==============================================
   PERFORMANCES MOBILE
   ============================================== */

@media (max-width: 768px) {
    /* Réduire les animations complexes sur mobile */
    .compact-audio-player::before,
    .news-item::before,
    .video-wrapper::before {
        display: none;
    }

    /* Simplifier les transformations */
    * {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        /* Activer l'accélération matérielle */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* Optimiser les fonts */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeSpeed;
    }

    /* Réduire les box-shadows complexes */
    .video-card:hover,
    .compact-podcast-item:hover,
    .news-item:hover {
        box-shadow: 0 4px 12px rgba(0,168,230,0.15);
    }
}

/* ==============================================
   ACCESSIBILITÉ MOBILE
   ============================================== */

@media (max-width: 768px) {
    /* Focus visible amélioré pour navigation clavier sur mobile */
    .compact-control-btn:focus,
    .news-item:focus,
    .compact-podcast-item:focus {
        outline: 2px solid #00a8e6;
        outline-offset: 2px;
    }

    /* Améliorer le contraste sur petits écrans */
    .news-time,
    .compact-podcast-meta,
    .video-date {
        color: #555;
    }

    /* Taille de police minimale pour la lisibilité */
    .compact-status,
    .compact-time-info {
        font-size: max(0.75rem, 14px);
    }
}

/* ==============================================
   MODE PAYSAGE MOBILE
   ============================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .header {
        padding: 0.75rem var(--mobile-spacing);
    }

    .header h1 {
        font-size: 1.6rem;
        margin: 0.25rem 0;
    }

    .header p {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }

    /* Optimiser l'espace vertical en mode paysage */
    .news-section,
    .video-section,
    .compact-podcast-section {
        margin: 0.75rem var(--mobile-spacing);
    }

    .compact-audio-player {
        padding: 0.75rem;
    }

    .compact-controls {
        padding: 0.75rem;
    }

    .compact-control-buttons {
        margin-bottom: 0.75rem;
    }

    /* Réduire l'espacement vertical */
    .news-item {
        padding: 0.75rem var(--mobile-spacing);
    }

    .compact-podcast-item {
        padding: 0.75rem;
    }
}

/* ==============================================
   TOAST NOTIFICATIONS MOBILE
   ============================================== */

@media (max-width: 768px) {
    #toast-container {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
    }

    .toast {
        max-width: none !important;
        margin-bottom: 8px !important;
        font-size: 0.9rem !important;
        padding: 10px 16px !important;
        border-radius: 8px !important;
        transform: translateY(-100%) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }

    .toast.show {
        transform: translateY(0) !important;
    }
}

/* ==============================================
   OPTIMISATIONS POUR ÉCRANS HAUTE DENSITÉ
   ============================================== */

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    /* Optimiser les images et icônes pour les écrans rétina */
    .om-logo-img,
    .section-logo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }

    /* Améliorer le rendu des bordures sur écrans haute densité */
    .news-item,
    .compact-podcast-item,
    .video-card {
        border: 0.5px solid rgba(0,168,230,0.1);
    }
}

/* ==============================================
   DARK MODE MOBILE (préparation)
   ============================================== */

@media (max-width: 768px) and (prefers-color-scheme: dark) {
    /* Variables pour le mode sombre mobile */
    :root {
        --mobile-bg: #1a1a1a;
        --mobile-text: #ffffff;
        --mobile-surface: #2d2d2d;
        --mobile-border: #404040;
    }

    /* Adapter les couleurs pour le mode sombre si activé */
    body {
        background: var(--mobile-bg);
        color: var(--mobile-text);
    }

    .news-list,
    .video-card,
    .compact-podcast-section {
        background: var(--mobile-surface);
        border: 1px solid var(--mobile-border);
    }

    .news-item {
        border-bottom-color: var(--mobile-border);
    }

    .news-title {
        color: var(--mobile-text);
    }

    .news-time,
    .video-date,
    .compact-podcast-meta {
        color: #cccccc;
    }
}

/* ==============================================
   OPTIMISATIONS SPÉCIFIQUES iOS/ANDROID
   ============================================== */

/* iOS Safari optimisations */
@supports (-webkit-appearance: none) {
    @media (max-width: 768px) {
        /* Corriger les problèmes de viewport iOS */
        .header,
        .news-section,
        .video-section,
        .compact-podcast-section {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }

        /* Optimiser les animations pour iOS */
        .compact-control-btn,
        .news-item,
        .compact-podcast-item {
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        /* Améliorer le scroll iOS */
        .compact-podcast-list {
            -webkit-overflow-scrolling: touch;
        }

        /* Corriger les problèmes de focus iOS */
        input,
        button,
        select,
        textarea {
            border-radius: 0;
            -webkit-appearance: none;
        }
    }
}

/* Android Chrome optimisations */
@media (max-width: 768px) {
    /* Améliorer les performances sur Android */
    .video-wrapper iframe {
        will-change: transform;
    }

    /* Optimiser le rendu des ombres sur Android */
    .video-card,
    .compact-podcast-item,
    .news-list {
        box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.24);
    }
}

/* ==============================================
   ÉTAT DE CHARGEMENT MOBILE
   ============================================== */

@media (max-width: 768px) {
    /* Loader optimisé pour mobile */
    .om-loader {
        width: 32px;
        height: 32px;
        border-width: 3px;
    }

    /* Skeleton loading pour mobile */
    .skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
        border-radius: 8px;
    }

    @keyframes loading {
        0% {
            background-position: 200% 0;
        }
        100% {
            background-position: -200% 0;
        }
    }

    /* Skeleton pour les news */
    .news-skeleton {
        height: 60px;
        margin-bottom: 1px;
    }

    /* Skeleton pour les podcasts */
    .podcast-skeleton {
        height: 80px;
        margin-bottom: 8px;
        border-radius: 10px;
    }

    /* Skeleton pour les vidéos */
    .video-skeleton {
        aspect-ratio: 16/9;
        margin-bottom: 1rem;
        border-radius: var(--mobile-border-radius);
    }
}

/* ==============================================
   OPTIMISATIONS RÉSEAU MOBILE
   ============================================== */

@media (max-width: 768px) {
    /* Optimiser pour les connexions lentes */
    .video-wrapper iframe {
        loading: lazy;
    }

    /* Réduire les requêtes de fonts sur mobile */
    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    /* Précharger les éléments critiques */
    .compact-audio-player,
    .news-list {
        content-visibility: auto;
        contain-intrinsic-size: 200px;
    }
}

/* ==============================================
   ANIMATIONS RÉDUITES POUR ÉCONOMIE D'ÉNERGIE
   ============================================== */

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    /* Désactiver les animations pour les utilisateurs qui le préfèrent */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Garder seulement les feedbacks essentiels */
    .compact-control-btn:active,
    .news-item:active,
    .compact-podcast-item:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* ==============================================
   PRINT STYLES MOBILE
   ============================================== */

@media print {
    /* Optimiser pour l'impression depuis mobile */
    .compact-audio-player,
    .compact-control-buttons,
    .video-wrapper iframe {
        display: none;
    }

    .news-section,
    .video-section {
        page-break-inside: avoid;
    }

    .news-item,
    .video-card {
        break-inside: avoid;
        margin-bottom: 1rem;
    }

    /* Assurer une taille de police lisible à l'impression */
    body {
        font-size: 12pt;
        line-height: 1.4;
    }

    .news-title {
        font-size: 11pt;
        font-weight: 600;
    }

    .news-time,
    .video-date {
        font-size: 9pt;
    }
}