/* ========================================
 * PAGE-INGREDIENT-MOBILE-INFO.CSS
 * Styles pour la section saisonnalité responsive des ingrédients
 * Visible uniquement sur écrans ≤ 1024px
 * Réutilise les styles de page-recette-mobile-info.css
 * ======================================== */

/* ======================================
 * SECTION SAISONNALITÉ RESPONSIVE
 * MASQUÉE par défaut sur desktop
 * ====================================== */

.mobile-seasonality-section {
    display: none; /* ✅ Masquée par défaut (desktop > 1024px) */
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

/* ======================================
 * MEDIA QUERY - Affichage sur écrans ≤ 1024px
 * ====================================== */

@media screen and (max-width: 1024px) {
    .mobile-seasonality-section {
        display: block; /* ✅ Visible sur tablettes et mobiles */
        width: 100%;
        box-sizing: border-box;
        padding: 10px 0;
        margin: 0 0 20px 0;
        background: transparent;
        border-radius: 12px;
        border: none;
        position: relative;
    }

    /* Masquer la sidebar sur ces tailles d'écran */
    .sidebar {
        display: none !important;
    }
}

/* ======================================
 * STYLES COMMUNS (héritent de page-recette-mobile-info.css)
 * Les classes suivantes sont déjà définies dans page-recette-mobile-info.css :
 * - .mobile-section-title
 * - .mobile-seasonality-indicator
 * - .mobile-seasonality-grid
 * - .mobile-month-item
 * - .mobile-month-active / .mobile-month-inactive
 * - .mobile-month-current
 * Pas besoin de les redéfinir ici
 * ====================================== */