/* ============================================
   CARTES DE RECETTES
   Breakpoints: 1024px, 768px, 480px, 320px
============================================ */

/* --- Amélioration Responsive pour Tablettes --- */
@media (max-width: 1024px) {
    /* Convertir la mise en page en colonne unique */
    .page-container.categories-recettes-page {
        flex-direction: column;
        gap: 20px; /* Réduire l'espace en vue colonne */
    }
    
    /* Réadapter la barre latérale sur les tablettes plutôt que de la masquer */
    .sidebar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        width: 100%;
        margin-top: 10px;
    }
    
    /* La section publicitaire prend toute la largeur */
    .sidebar-section:last-child {
        grid-column: 1 / -1;
    }
    
    /* Garder le titre aligné à gauche */
    .main-content h1 {
        font-size: 2rem;
        text-align: left; /* Toujours à gauche */
        width: auto;
        display: inline-block;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    
    .main-content h1 {
        font-size: 1.8rem;
        margin-bottom: 20px;
        text-align: left; /* Toujours à gauche */
    }

    
    .filters {
        gap: 8px;
        margin-bottom: 20px;
        padding-bottom: 5px;
        /* Permettre le retour à la ligne au lieu du défilement */
        flex-wrap: wrap; /* Permettre le retour à la ligne */
        overflow-x: visible; /* Pas de défilement horizontal */
    }
    
    .filter-button {
        padding: 8px 18px;
        font-size: 0.85rem;
        white-space: nowrap; /* Éviter que le texte se brise */
        /* Retiré flex-shrink: 0 pour permettre l'adaptation */
    }
    
    /* Ajuster la barre latérale sur les mobiles moyens */
    .sidebar {
        grid-template-columns: 1fr; /* Une seule colonne */
        gap: 15px;
    }
    
    /* Ajuster le style des cartes de la sidebar */
    .sidebar-card {
        margin-bottom: 15px;
    }
    
    .card-header-colored {
        padding: 12px 15px;
    }
}

@media (max-width: 768px) and (min-width: 481px) {
    .page-container.categories-recettes-page {
        padding: 0px;
    }
    
    .main-content h1 {
        font-size: 1.6rem;
        margin-bottom: 20px;
        text-align: left; /* Toujours à gauche */
        width: auto;
        display: inline-block;
        padding-bottom: 15px;
    }
    
    .main-content h1::after {
        width: 80px;
        height: 2px;
        left: 0; /* Aligner la ligne à gauche */
        transform: none; /* Pas de transformation */
    }
    
    .filters {
        gap: 8px;
        padding-bottom: 8px;
        margin-bottom: 20px;
        /* Défilement horizontal tactile sur mobile */
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE et Edge */
        justify-content: flex-start; /* Aligner à gauche */
    }

    /* Masquer la barre de défilement pour Chrome, Safari et Opera */
    .filters::-webkit-scrollbar {
        display: none;
    }
    
    .filter-button {
        padding: 8px 20px; /* Boutons plus grands */
        white-space: nowrap;
        font-size: 0.9rem; /* Police plus lisible */
        flex-shrink: 0; /* Empêcher les boutons de rétrécir */
    }
    
    /* Garder la toolbar sur une ligne dans cette plage */
    .filters-toolbar {
        flex-wrap: nowrap !important;
    }
    
    /* Améliorer affichage de la sidebar sur petits écrans */
    .sidebar {
        margin-top: 5px;
    }
    
    .sidebar-title {
        text-align: center;
        width: 100%;
        margin-bottom: 20px;
    }
    
    .sidebar-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 480px) and (min-width: 321px) {
    .page-container.categories-recettes-page {
        padding: 0px;
    }
    
    .main-content h1 {
        font-size: 1.5rem;
        text-align: left; /* Toujours à gauche */
        padding-bottom: 12px;
        width: auto;
        display: inline-block;
    }
    
    .main-content h1::after {
        width: 70px;
        left: 0; /* Aligner la ligne à gauche */
        transform: none;
    }

    .filters {
        gap: 6px;
        margin-bottom: 15px;
        /* Défilement horizontal tactile sur mobile */
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE et Edge */
        justify-content: flex-start;
    }

    /* Masquer la barre de défilement pour Chrome, Safari et Opera */
    .filters::-webkit-scrollbar {
        display: none;
    }

    .filter-button {
        padding: 7px 16px;
        font-size: 0.85rem; /* Légèrement plus grand pour la lisibilité */
        margin-bottom: 0; /* Retirer marge verticale pour ligne unique */
        white-space: nowrap;
        flex-shrink: 0; /* Empêcher les boutons de rétrécir */
    }
    
    /* Ajuster les éléments de la sidebar pour petits écrans */
    .sidebar-card-content {
        padding: 14px;
    }
    
    .card-header-colored {
        padding: 10px 14px;
    }
}

/* Très petits écrans (320px et moins) */
@media (max-width: 320px) {
    .page-container.categories-recettes-page {
        padding: 0px;
    }
    
    .main-content h1 {
        font-size: 1.3rem;
        text-align: left; /* Toujours à gauche */
        padding-bottom: 10px;
        width: auto;
        display: inline-block;
    }
    
    .main-content h1::after {
        width: 60px;
        left: 0; /* Aligner la ligne à gauche */
        transform: none;
    }

    .filters {
        gap: 5px;
        margin-bottom: 12px;
        /* Défilement horizontal tactile sur mobile */
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE et Edge */
        justify-content: flex-start; /* Aligner à gauche sur petit écran */
    }

    /* Masquer la barre de défilement pour Chrome, Safari et Opera */
    .filters::-webkit-scrollbar {
        display: none;
    }

    .filter-button {
        padding: 6px 12px;
        font-size: 0.8rem;
        margin-bottom: 0; /* Retirer marge verticale pour ligne unique */
        white-space: nowrap;
        flex-shrink: 0; /* Empêcher les boutons de rétrécir */
    }
    
    .sidebar-card-content {
        padding: 12px;
    }
    
    .card-header-colored {
        padding: 8px 12px;
    }
}