/* ==============================================
   MOBILE PRO V3 — Fixes responsive audit vague 3
   ============================================== */

/* ===== 1. GRILLE VIDEOS — 2 col mobile (doigt) sur TOUTE page grid =====
   Corrige : mobile-pro.css force 2 col sur .grid.grid-cols-1,
   mobile-pro-v2.css section 6 force 1 col sur section .grid seulement.
   Résultat : hors <section> (ex: /videos, /categories) = 2 col ok
   mais les thumbnails faisaient ~165px width = trop petites.
   Fix : on normalise à 2 col partout avec largeur min 150px.          */
@media (max-width: 767px) {
    /* Grilles vidéo hors section (ex: videos/index, categories/show) */
    .grid.grid-cols-1,
    .grid[class*="min-\\[540px\\]:grid-cols-2"],
    .grid[class*="md:grid-cols-3"],
    .grid[class*="xl:grid-cols-4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    /* Override v2 qui force 1fr sur section .grid — 2 cols sur mobile
       est plus dense et conforme aux standards tube (xvideos, pornhub) */
    section .grid,
    section .grid[class*="grid-cols-2"],
    section .grid[class*="grid-cols-3"],
    section .grid[class*="grid-cols-4"],
    section .grid[class*="grid-cols-5"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    /* Thumbnail min-height adaptée aux 2 colonnes sur mobile */
    .vcard-hover .aspect-video {
        min-height: 0 !important; /* aspect-ratio 16/9 gère la hauteur */
        width: 100% !important;
    }
}

/* ===== 2. SIDEBAR /videos — cachée sur mobile (inutile, alourdit la page) ===== */
@media (max-width: 1023px) {
    /* La sidebar aside.lg\:w-72 sur la page /videos */
    .flex.flex-col.lg\:flex-row > aside.lg\:w-72,
    .flex.flex-col.lg\:flex-row > aside.lg\:w-80,
    .flex-col.lg\:flex-row > aside[class*="lg:w-"] {
        display: none !important;
    }
}

/* ===== 3. ZONES DE TAP — ≥44px pour boutons, onglets, liens ===== */
@media (max-width: 767px) {
    /* Onglets de tri dans /videos */
    .flex.flex-wrap.gap-1 a[class*="px-3"][class*="py-2"],
    .flex.flex-wrap.gap-1 a.flex.items-center.gap-1\.5 {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Barre de recherche mobile (h:36 → 44px) */
    .jdr-mobile-toolbar input[type="search"] {
        height: 44px !important;
    }
    .jdr-mobile-toolbar {
        padding: 6px 8px !important;
    }

    /* Boutons barre de recherche mobile */
    .jdr-mobile-toolbar a.tb-btn {
        width: 44px !important;
        height: 44px !important;
    }

    /* Liens de pagination */
    nav[aria-label="pagination"] a,
    nav[aria-label="Pagination"] a,
    [class*="pagination"] a,
    [class*="pagination"] button,
    [class*="pagination"] span {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Liens footer "Recherches populaires" */
    footer .flex.flex-wrap.gap-2 a {
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Bouton "Appliquer" et "Réinitialiser" dans les filtres */
    form button[type="submit"],
    form a[href*="videos.index"] {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Liens de catégories chips */
    .jdr-quick-cats a {
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

/* ===== 4. FOOTER 6 colonnes → 2 colonnes mobile sans débordement ===== */
@media (max-width: 767px) {
    /* Override v2 : déjà fait (2 colonnes) mais manque overflow control */
    footer .container {
        overflow-x: hidden !important;
    }
    /* Première colonne (brand) sur toute la largeur en 2 colonnes */
    footer .grid.grid-cols-2 > div:first-child,
    footer .grid > div.col-span-2 {
        grid-column: 1 / -1 !important;
    }
    /* Texte des liens footer ne dépasse pas */
    footer ul li a {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: block !important;
        max-width: 100% !important;
    }
    /* Section des catégories footer (flex-wrap) */
    footer .flex.flex-wrap.gap-2 {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    footer .flex.flex-wrap.gap-2 a {
        max-width: calc(50% - 4px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-align: center !important;
    }
}

/* ===== 5. LECTEUR PLYR — pleine largeur mobile, ratio garanti ===== */
@media (max-width: 767px) {
    /* Le wrapper du player doit prendre toute la largeur */
    #video-player-wrapper,
    .video-player-container {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* max-w-5xl sur la page show : désactivé sur mobile pour pleine largeur */
    .max-w-5xl.mx-auto {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Le container parent de la page show */
    .min-h-screen.py-8 > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Restaurer le padding sur le reste du contenu (sous le player) */
    .min-h-screen.py-8 > .container > .max-w-5xl > *:not(#video-player-wrapper):not(.video-player-container) {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    /* Overlay pre-roll : pleine largeur */
    .video-player-container {
        position: relative !important;
        overflow: hidden !important;
    }
    /* Plyr controls — hauteur min pour touch */
    .plyr__controls {
        min-height: 44px !important;
    }
    .plyr__control {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* ===== 6. DÉBORDEMENTS HORIZONTAUX — traque les éléments qui dépassent ===== */
@media (max-width: 767px) {
    /* Grilles de filtres (grid-cols-2 md:grid-cols-3 lg:grid-cols-5) */
    .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Select natif dans les filtres */
    select {
        max-width: 100% !important;
        min-width: 0 !important;
    }
    /* Input recherche */
    input[type="text"], input[type="search"] {
        max-width: 100% !important;
        min-width: 0 !important;
    }
    /* Titres longs (h1, h3) — wrapping forcé */
    h1, h2, h3 {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }
    /* Breadcrumb overflow */
    nav[aria-label*="Fil"] ol,
    .breadcrumb,
    [class*="breadcrumb"] {
        overflow-x: auto !important;
        white-space: nowrap !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        max-width: 100vw !important;
    }
    /* Tags badges dans la page show */
    .tag-badge {
        white-space: nowrap !important;
    }
    .flex.flex-wrap.gap-2.mb-2 {
        overflow-x: hidden !important;
    }
}

/* ===== 7. MOBILE PLAY BUTTON sur page show — assez grand ===== */
@media (max-width: 767px) {
    /* Bouton play overlay mobile dans iframe player */
    .absolute.inset-0.z-20 .w-16.h-16 {
        width: 64px !important;
        height: 64px !important;
    }
    /* Bouton skip pub */
    button.inline-flex.items-center.gap-2.bg-\[\#ff2d2d\] {
        min-height: 44px !important;
        min-width: 140px !important;
    }
}

/* ===== 8. HEADER STICKY — protection scroll sur mobile ===== */
@media (max-width: 767px) {
    /* Le disclaimer niche au-dessus du header */
    div[style*="font-size:11px"] {
        font-size: 10px !important;
        padding: 4px 8px !important;
        line-height: 1.3 !important;
    }
    /* La barre top "Nouveautés" réductible */
    header .bg-gradient-to-r.text-black {
        font-size: 11px !important;
        padding: 3px 8px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* Compenser la toolbar sticky pour le scroll */
    html {
        scroll-padding-top: 110px !important;
    }
}

/* ===== 9. TABLETTE (768px–1023px) — 3 colonnes grille ===== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Si la grille est en 4 colonnes sur md, passer à 3 pour tablette */
    .grid.md\:grid-cols-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    /* La sidebar s'affiche en dessous sur tablette = acceptable (flex-col) */
    /* On la réduit en hauteur */
    .flex.flex-col.lg\:flex-row > aside[class*="lg:w-"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }
    .flex.flex-col.lg\:flex-row > aside[class*="lg:w-"] > div {
        max-height: 240px !important;
    }
}

/* ===== 10. MOBILE BOTTOM NAV — espacement ===== */
@media (max-width: 767px) {
    /* S'assurer que le bottom nav ne chevauche pas le contenu */
    #mobile-bottom-nav {
        z-index: 2147483647 !important;
    }
    /* Padding body-bottom pour le bottom-nav (64px) déjà dans critical CSS */
}