/* ========================================
 * PAGE-USTENSILE-RESPONSIVE.CSS
 * Règles responsive spécifiques pour ustensile.php
 * Force le masquage de la sidebar à 1024px
 * ======================================== */

/* Tablettes et petits écrans - Masquer complètement la sidebar */
@media screen and (max-width: 1024px) {
    /* Force le masquage avec spécificité élevée */
    .ingredient-page .sidebar,
    .page-container .sidebar,
    aside.sidebar {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Supprimer le padding pour la sidebar */
    .ingredient-page {
        padding-right: 0 !important;
    }
    
    /* Le contenu principal prend toute la largeur */
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Pour les écrans entre 1025px et 1200px */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
    .ingredient-page {
        padding-right: 280px;
    }
    
    .sidebar {
        width: 260px;
    }
}

/* Pour les grands écrans (> 1200px) */
@media screen and (min-width: 1201px) {
    .ingredient-page {
        padding-right: 340px;
    }
    
    .sidebar {
        width: 310px;
    }
}