/**
 * AYA Shopping — Mobile compact (≤ 768px)
 * Optimisé pour usage téléphone (~360px)
 */

@media (max-width: 768px) {
    /* —— Règles globales (contenu principal uniquement) —— */
    body.client-site .site-main h1,
    body.client-site .site-main .hero-title {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }

    body.client-site .site-main h2,
    body.client-site .site-main .section-title,
    body.client-site .site-main .page-header h1 {
        font-size: 18px !important;
        line-height: 1.25 !important;
    }

    body.client-site .site-main h3 {
        font-size: 15px !important;
    }

    body.client-site .site-main p,
    body.client-site .site-main li,
    body.client-site .site-main .section-subtitle {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    body.client-site .site-main section,
    body.client-site .site-main .section {
        padding: 16px 12px !important;
    }

    body.client-site .site-main img:not(.navbar-brand img):not(.tab-icon svg):not(.category-image):not(.product-image):not(.home-ad-visual img):not(.catalog-products-grid img) {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Bannière interne : hauteur image gérée par pub-banner.css */
    body.client-site .site-main .pub-banner img {
        height: 120px !important;
    }

    /* —— Hero compact —— */
    body.client-site .site-main .hero-section {
        max-height: 200px;
        padding: 14px 12px !important;
        display: flex;
        align-items: center;
    }

    body.client-site .site-main .hero-content {
        padding: 0 !important;
        max-width: 100%;
    }

    body.client-site .site-main .hero-title {
        font-size: 20px !important;
        margin-bottom: 6px !important;
    }

    body.client-site .site-main .hero-subtitle {
        font-size: 12px !important;
        margin-bottom: 6px !important;
        line-height: 1.4 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body.client-site .site-main .hero-slogan {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }

    body.client-site .site-main .hero-buttons {
        gap: 6px !important;
        flex-wrap: wrap;
    }

    body.client-site .site-main .hero-btn {
        padding: 10px 20px !important;
        font-size: 11px !important;
        min-height: 40px;
    }

    /* —— Catégories : grille 2×2 compacte —— */
    .category-carousel {
        overflow: visible !important;
    }

    .category-nav {
        display: none !important;
    }

    .category-carousel-track {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        transform: none !important;
        transition: none !important;
    }

    .category-slide {
        flex: none !important;
        width: auto !important;
        max-width: none !important;
    }

    .category-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        max-height: 80px !important;
        min-height: 0 !important;
        overflow: hidden;
        padding: 0 !important;
    }

    .category-image {
        width: 48px !important;
        height: 48px !important;
        min-height: 0 !important;
        max-height: 48px !important;
        flex-shrink: 0;
        object-fit: cover;
        border-radius: 8px 0 0 8px;
    }

    .category-body {
        padding: 6px 8px !important;
        flex: 1;
        min-width: 0;
    }

    .category-title {
        font-size: 11px !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .category-count {
        font-size: 10px !important;
        margin: 0 !important;
    }

    .category-count .fas {
        font-size: 10px;
    }

    /* —— Produits : 2 colonnes compactes —— */
    .row-products-mobile {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }

    .row-products-mobile > [class*="col-"] {
        padding-left: 4px;
        padding-right: 4px;
    }

    body.client-site .site-main .product-card .product-image,
    body.client-site .site-main .product-image {
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
        object-fit: cover;
    }

    body.client-site .site-main .product-body {
        padding: 8px !important;
    }

    body.client-site .site-main .product-title,
    body.client-site .site-main .product-title a {
        font-size: 12px !important;
        line-height: 1.25 !important;
        margin-bottom: 4px !important;
    }

    body.client-site .site-main .product-price,
    body.client-site .site-main .promotion-price {
        font-size: 13px !important;
        color: #10b981 !important;
        font-weight: 700;
        margin-bottom: 4px !important;
    }

    body.client-site .site-main .product-description {
        display: none !important;
    }

    body.client-site .site-main .product-card .btn-add-cart,
    body.client-site .site-main .product-card .btn {
        font-size: 11px !important;
        padding: 6px 8px !important;
        min-height: 36px;
    }

    /* Grilles produits uniquement (pas les filtres catalogue) */
    body.client-site .site-main .catalog-page .products-section .row.g-4 > [class*="col-"],
    body.client-site .site-main .category-page .products-section .row.g-4 > [class*="col-"],
    body.client-site .site-main .subcategory-page .products-section .row.g-4 > [class*="col-"],
    body.client-site .site-main .search-page .search-results-grid .row.g-4 > [class*="col-"],
    body.client-site .site-main .products-grid > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* —— Avantages : empilés compacts —— */
    .advantages-section {
        padding: 16px 12px !important;
    }

    .advantages-section .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .advantage-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding: 12px !important;
        margin-bottom: 0;
    }

    .advantage-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        margin: 0 10px 0 0 !important;
        font-size: 14px !important;
        flex-shrink: 0;
    }

    .advantage-title {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }

    .advantage-description {
        font-size: 12px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }

    /* —— Avis clients : scroll horizontal —— */
    .testimonials-scroll-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 10px !important;
        margin: 0 -4px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .testimonials-scroll-row > [class*="col-"] {
        flex: 0 0 82% !important;
        max-width: 82% !important;
        padding: 0 4px;
    }

    .testimonial-card {
        height: auto !important;   /* override height:100% de style.css */
        max-height: none !important;
        overflow: visible !important;
        margin: 0;
        padding: 14px !important;  /* padding uniforme, supprime le double-padding */
    }

    .testimonial-content {
        padding: 0 !important;     /* géré par .testimonial-card */
        text-align: left !important;
    }

    .testimonial-card .stars {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .testimonial-text {
        font-size: 12px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .testimonial-author {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .testimonial-author strong {
        display: block !important;
        font-size: 12px !important;
        color: #111827 !important;
    }

    .testimonial-author small {
        display: block !important;
        font-size: 11px !important;
        color: #6b7280 !important;
    }

    /* —— CTA catalogue —— */
    .catalog-cta {
        padding: 0 !important;
    }

    .catalog-cta .section-title {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

    .catalog-cta .section-subtitle {
        margin-bottom: 12px !important;
    }

    .catalog-btn,
    body.client-site .site-main .btn-lg {
        width: 100%;
        min-height: 48px;
        font-size: 14px !important;
        padding: 12px 16px !important;
    }

    /* —— Formulaires & boutons (toutes pages) —— */
    body.client-site .site-main .form-control,
    body.client-site .site-main .form-select,
    body.client-site .site-main input[type="text"],
    body.client-site .site-main input[type="email"],
    body.client-site .site-main input[type="password"],
    body.client-site .site-main input[type="tel"],
    body.client-site .site-main input[type="number"],
    body.client-site .site-main textarea {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 14px !important;
    }

    body.client-site .site-main .btn-primary:not(.hero-btn):not(.tab),
    body.client-site .site-main .btn-success:not(.home-ad-btn),
    body.client-site .site-main .btn-checkout,
    body.client-site .site-main button[type="submit"]:not(.home-ad-dot):not(.category-nav):not(.home-ad-nav) {
        width: 100%;
        min-height: 48px;
    }

    body.client-site .site-main .btn-group-vertical .btn {
        width: 100%;
    }

    /* —— Tableaux → cartes empilées —— */
    body.client-site .site-main .table-responsive table.table-mobile-stack {
        border: 0;
    }

    body.client-site .site-main .table-mobile-stack thead {
        display: none;
    }

    body.client-site .site-main .table-mobile-stack tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 10px;
        background: #fff;
    }

    body.client-site .site-main .table-mobile-stack tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 6px 0 !important;
        border: 0 !important;
        font-size: 13px !important;
    }

    body.client-site .site-main .table-mobile-stack tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        flex-shrink: 0;
    }

    /* —— Page produit —— */
    body.client-site .site-main .product-detail-image,
    body.client-site .site-main .product-gallery img {
        max-height: 220px;
        object-fit: contain;
    }

    /* —— Panier —— */
    body.client-site .site-main .cart-item,
    body.client-site .site-main .cart-product-row {
        flex-direction: column;
        align-items: stretch !important;
    }

    body.client-site .site-main .cart-summary {
        position: sticky;
        bottom: calc(var(--client-bottom-inset, 80px) + 8px);
        z-index: 10;
    }
}

@media (max-width: 576px) {
    body.client-site .site-main .hero-section {
        max-height: 180px;
        padding: 12px 10px !important;
    }

    body.client-site .site-main .hero-subtitle {
        -webkit-line-clamp: 1;
    }
}

/* ═══════════════════════════════════════════
   AMÉLIORATIONS MOBILE-FIRST — v2
   Complète le fichier mobile-compact.css v1
   Smartphones ≤ 768 px, desktop intact
═══════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── 1. CRITIQUE : Sticky bar au-dessus de la barre nav mobile ── */
    /* La pill nav est à ≈ navHeight + 8px (marge) du bas de l'écran */
    .sticky-mobile-bar {
        bottom: calc(var(--client-bottom-nav-h, 72px) + 8px) !important;
        padding-bottom: 8px !important;
    }

    /* ── 2. Footer compact ── */
    /* Note : padding-bottom laissé au CSS critique du header (≥100 px pour la nav mobile) */
    body.client-site .footer {
        padding-top: 20px !important;
    }
    body.client-site .footer .row > [class*="col-"] {
        margin-bottom: 12px !important;
    }
    body.client-site .footer h5 {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    body.client-site .footer h6 {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }
    body.client-site .footer p,
    body.client-site .footer ul.list-unstyled li {
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin-bottom: 4px !important;
    }
    body.client-site .footer .social-links a {
        width: 34px !important;
        height: 34px !important;
        line-height: 34px !important;
        font-size: 13px !important;
        margin-right: 6px !important;
    }
    body.client-site .footer hr {
        margin: 10px 0 !important;
    }
    body.client-site .footer .list-inline {
        font-size: 11px !important;
    }

    /* ── 3. Navbar plus compacte ── */
    body.client-site .navbar {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    /* ── 4. Inner page bar compact (panier, commandes…) ── */
    .inner-page-bar {
        padding: 8px 0 !important;
    }
    .inner-page-title {
        font-size: 1.05rem !important;
    }

    /* ── 5. Section stats compacte ── */
    body.client-site .site-main .stats-section {
        padding: 16px 8px !important;
    }
    body.client-site .site-main .stat-item {
        padding: 8px 4px !important;
    }
    body.client-site .site-main .stat-number {
        font-size: 1.75rem !important;
        margin-bottom: 4px !important;
    }
    body.client-site .site-main .stat-icon {
        font-size: 1.5rem !important;
        margin-bottom: 4px !important;
    }

    /* ── 6. Pagination touch-friendly ── */
    body.client-site .site-main .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }
    body.client-site .site-main .pagination .page-link {
        min-height: 40px !important;
        min-width: 40px !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ── 7. Onglets produit compact ── */
    .product-tabs-content {
        padding: 1rem 0.875rem !important;
    }
    .product-tab-btn {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }

    /* ── 8. Tableau caractéristiques compact ── */
    .spec-row {
        padding: 6px 0 !important;
        font-size: 12px !important;
    }
    .spec-label,
    .spec-value {
        font-size: 12px !important;
    }

    /* ── 9. Produits similaires : 2 colonnes ── */
    body.client-site .site-main .similar-products-section .row > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* ── 10. Bouton WhatsApp partage (page produit) ── */
    body.client-site .site-main .btn-whatsapp {
        min-height: 44px !important;
    }

    /* ── 11. Card bodies plus denses ── */
    body.client-site .site-main .card-body {
        padding: 14px !important;
    }
    body.client-site .site-main .card-header {
        padding: 10px 14px !important;
    }

    /* ── 12. Badge promo compact ── */
    body.client-site .site-main .product-badge {
        font-size: 10px !important;
        padding: 2px 8px !important;
    }

    /* ── 13. Prévention overflow horizontal global ── */
    body.client-site {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* ── 14bis. Checkout : résumé total non-sticky (il est déjà sous le form) ── */
    body.client-site .site-main .total-section {
        position: static !important;
        top: auto !important;
    }

    /* ── 14. Polices lisibles : minimum 12 px sur mobile ── */
    body.client-site .site-main small,
    body.client-site .site-main .small {
        font-size: 11px !important;
    }
}

/* ─── 576 px et moins ─── */
@media (max-width: 576px) {

    /* Footer encore plus dense */
    body.client-site .footer {
        padding-top: 14px !important;
    }

    /* Stats 2 par ligne sur petits écrans */
    body.client-site .site-main .stats-section .stat-item {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Sticky price + bouton plus petits */
    .sticky-price-label {
        font-size: 0.6rem !important;
    }
    .sticky-price-value {
        font-size: 0.95rem !important;
    }

    /* Padding container minimal */
    body.client-site .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}