/* ============================================
   MOBILE OPTIMISATIONS - charge EN DERNIER
   Override propre de tout le responsive
   ============================================ */

/* === Mobile topbar visible sous 900px === */
@media (max-width: 900px) {
    .mobile-topbar {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: var(--ink, #1f1d1c);
        color: var(--cream, #fdfcf8);
        padding: 0 16px;
        align-items: center;
        justify-content: space-between;
        z-index: 1000;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    }
    .mobile-brand {
        font-family: 'Fraunces', serif;
        font-style: italic;
        font-size: 22px;
        font-weight: 600;
        color: var(--amber-light, #f08847);
        text-decoration: none;
        letter-spacing: -0.02em;
    }
    .mobile-burger {
        background: transparent;
        border: none;
        width: 40px;
        height: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        cursor: pointer;
        padding: 0;
    }
    .mobile-burger span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--cream, #fdfcf8);
        transition: all .25s;
    }
    .mobile-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile-burger.open span:nth-child(2) { opacity: 0; }
    .mobile-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* === Body offset top === */
    body { padding-top: 56px !important; }

    /* === SIDEBAR EN DRAWER (slide-in depuis la gauche) === */
    .sidebar {
        position: fixed !important;
        top: 56px !important;
        left: -100% !important;
        bottom: 0 !important;
        width: 85% !important;
        max-width: 320px !important;
        height: calc(100vh - 56px) !important;
        z-index: 999 !important;
        transition: left .28s cubic-bezier(.2, .7, .3, 1) !important;
        overflow-y: auto !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding: 24px 18px 24px 18px !important;
        background: var(--ink, #1f1d1c) !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    }
    .sidebar.mobile-open { left: 0 !important; }

    /* Backdrop sombre quand sidebar ouverte */
    body.sidebar-open::before {
        content: '';
        position: fixed;
        inset: 56px 0 0 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
        animation: fadeBackdrop .25s ease-out;
    }
    @keyframes fadeBackdrop { from { opacity: 0; } to { opacity: 1; } }
    body.sidebar-open { overflow: hidden !important; }

    /* Sidebar interne : tout en colonne, plus compact */
    .sidebar .brand-vertical-link {
        margin: -10px auto 16px;
        text-align: center;
    }
    .sidebar .brand-logo {
        max-width: 130px !important;
        margin: 0 auto 10px !important;
    }
    .sidebar .brand-vertical {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
    }
    .sidebar .brand-word { font-size: 22px !important; }
    .sidebar .brand-word.brand-big { font-size: 32px !important; }

    .sidebar .sidebar-search {
        margin-bottom: 18px !important;
    }
    .sidebar-search-input {
        width: 100%;
        padding: 10px 14px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: var(--cream);
        font-size: 14px;
        border-radius: 4px;
    }
    .sidebar .side-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin-top: 0 !important;
        flex: 1;
    }
    .sidebar .side-section {
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
    .sidebar .side-link-feature,
    .sidebar .side-link-cat {
        padding: 10px 12px !important;
        font-size: 14.5px !important;
        min-height: 42px !important;
    }
    .sidebar .side-footer { display: block !important; margin-top: auto; }
    .sidebar .side-bottom { padding-top: 18px; }

    /* === MAIN CONTENT plein largeur === */
    .main {
        margin-left: 0 !important;
        padding: 20px 16px 40px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* === TYPOGRAPHIE plus compacte === */
    h1, .hero-h1, .frontpage-h1 {
        font-size: 36px !important;
        line-height: 1.1 !important;
        word-wrap: break-word;
    }
    h2 { font-size: 24px !important; line-height: 1.2 !important; }
    h3 { font-size: 18px !important; }
    .section-label { font-size: 14px !important; }

    /* === HERO === */
    .hero-explain, .frontpage-sub { font-size: 15px !important; line-height: 1.55 !important; }
    .frontpage-stats {
        flex-wrap: wrap !important;
        gap: 18px !important;
        justify-content: flex-start !important;
    }
    .stat-block { flex: 1 1 45% !important; min-width: 0 !important; }
    .stat-divider { display: none !important; }
    .stat-num { font-size: 32px !important; }

    /* === VERDICT === */
    .verdict {
        padding: 24px 20px !important;
        margin-bottom: 32px !important;
    }
    .verdict-title { font-size: 22px !important; }
    .verdict-body, .verdict-split {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .verdict-with-img {
        display: flex !important;
        flex-direction: column !important;
    }
    .verdict-img-wrap {
        max-width: 200px !important;
        margin: 0 auto 16px !important;
    }
    .big-number { font-size: 38px !important; }

    /* === COMP CARDS produits === */
    .comp-card {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 18px !important;
    }
    .comp-card-with-img {
        grid-template-columns: 1fr !important;
    }
    .comp-img-wrap {
        max-width: 180px !important;
        margin: 0 auto !important;
    }
    .comp-name { font-size: 16px !important; line-height: 1.3 !important; }
    .comp-shops { gap: 6px !important; }
    .chip { font-size: 12px !important; padding: 4px 8px !important; }
    .comp-right {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .go-btn, .alert-btn, .review-btn {
        width: 100% !important;
        text-align: center !important;
        font-size: 14px !important;
    }
    .savings-badge { align-self: flex-start; }

    /* === FILTRES de la page categorie === */
    .filter-bar, .filters {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 14px !important;
    }
    .filter-bar select,
    .filter-bar input {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        padding: 10px !important;
        font-size: 14px !important;
    }

    /* === PRODUCT PAGE === */
    .product-page { margin-bottom: 32px !important; }
    .product-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .product-img-side {
        position: static !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }
    .product-title { font-size: 24px !important; }
    .pp-cheapest-price { font-size: 38px !important; }
    .product-actions { flex-direction: column !important; }
    .alert-btn, .review-btn { min-width: 0 !important; width: 100% !important; }
    .price-table { margin-top: 12px !important; }
    .similar-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* === BREADCRUMB === */
    .breadcrumb { font-size: 10px !important; gap: 6px !important; margin-bottom: 18px !important; }

    /* === QUIZ === */
    .quiz-hero { padding: 16px 0 24px !important; margin-bottom: 24px !important; }
    .quiz-title { font-size: 26px !important; }
    .quiz-sub { font-size: 14px !important; }
    .quiz-wrapper { padding: 22px 18px 26px !important; }
    .quiz-q-label { font-size: 20px !important; }
    .quiz-option { padding: 14px 18px !important; font-size: 14px !important; }
    .quiz-email-form { flex-direction: column !important; }

    /* === ASSISTANT FAB & PANEL === */
    .ai-fab {
        bottom: 16px !important;
        right: 16px !important;
        padding: 11px 14px 11px 11px !important;
    }
    .ai-fab-label { display: none !important; } /* juste l'icone sur mobile pour gagner de la place */
    .ai-fab svg { width: 22px !important; height: 22px !important; }
    .ai-panel {
        bottom: 78px !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        height: 70vh !important;
        max-height: calc(100vh - 100px) !important;
    }

    /* === FOOTER === */
    .footer {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 30px 0 !important;
    }

    /* === NEWSLETTER CTA === */
    .newsletter-cta {
        grid-template-columns: 1fr !important;
        padding: 28px 22px !important;
        margin: 40px -16px 0 !important;
    }

    /* === COOKIE BANNER === */
    .cookie-banner {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        padding: 14px !important;
    }
    .cookie-banner-content { flex-direction: column !important; gap: 10px !important; }

    /* === FLASH PROMOS BAR === */
    .flash-bar { font-size: 12px !important; padding: 8px 12px !important; }
    .mobile-topbar { top: 0 !important; }

    /* === BLOG / GUIDES / BRANDS / VETS === */
    .blog-card, .guide-card, .brand-card, .vet-card, .ins-card, .promo-card, .versus-card {
        padding: 18px !important;
    }

    /* Section titles editorial */
    .section-rule {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .section-num { font-size: 11px !important; }
    .section-meta, .section-meta-link { font-size: 11px !important; }

    /* === Évite le débordement horizontal === */
    body, html { overflow-x: hidden !important; }
    img { max-width: 100% !important; height: auto !important; }
    table { display: block !important; overflow-x: auto !important; }
}

/* === Très petits écrans (<480px) : ajustements supplémentaires === */
@media (max-width: 480px) {
    .similar-grid { grid-template-columns: 1fr !important; }
    .stat-block { flex: 1 1 100% !important; }
    h1, .hero-h1, .frontpage-h1 { font-size: 30px !important; }
    .pp-cheapest-price { font-size: 32px !important; }
    .product-title { font-size: 21px !important; }
    .verdict-title { font-size: 19px !important; }
    .quiz-title { font-size: 22px !important; }
}

/* === Scroll smoother sur iOS === */
.sidebar { -webkit-overflow-scrolling: touch; }
.ai-messages { -webkit-overflow-scrolling: touch; }