/* ============================================
   PAGE D'ACCUEIL - RESPONSIVE
   Styles responsifs spécifiques à la page d'accueil
   Les styles des cartes de recettes sont dans components/recipe-card.css
   Breakpoints: 1200px, 1024px, 768px, 480px, 320px
============================================ */

/* ------------------------------------------- 
   Grands écrans (1201px et plus)
------------------------------------------- */
@media (min-width: 1201px) {
    /* Grilles et layout */
    .themes-container {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .categories {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    
    /* Hauteur ajustée pour les catégories sur grands écrans */
    .categories .category-card .category-image {
        aspect-ratio: 4/3;
    }
    
    /* Hero features - 6 colonnes */
    .hero-features {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ------------------------------------------- 
   Entre 1200px et 1025px (Grands écrans et ordinateurs standards)
------------------------------------------- */
@media (max-width: 1200px) and (min-width: 1025px) {
    /* Grilles et layout */
    .themes-container {
        grid-template-columns: repeat(4, 1fr);
    }

    .categories {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .recipes-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .seasonal-ingredients-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .ingredient-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .dark-mode .ingredient-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    /* Garantir une taille de titre cohérente */
    .hero h1 {
        font-size: 2.2rem; /* Maintenir la même taille que pour les grands écrans */
    }
    
    /* Hero features - 6 colonnes */
    .hero-features {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ------------------------------------------- 
   Entre 1024px et 769px (Tablettes et petits écrans)
------------------------------------------- */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Grilles et layout pour tablettes */
    .themes-container {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .categories {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    /* Titres h3 des catégories */
    .category-content h3 {
        font-size: 0.85rem;
    }
    
    .recipes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Titre hero pour tablettes */
    .hero h1 {
        font-size: 2.2rem;
        margin-bottom: 20px;
    }
    
    /* Hero features - 4 colonnes */
    .hero-features {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        max-width: 700px;
    }
    
    .hero-feature-circle {
        width: 70px;
        height: 70px;
    }
    
    .hero-feature-circle i {
        font-size: 1.6rem;
    }
    
    .hero-feature-label {
        font-size: 0.9rem;
        min-height: 2.4em; /* Hauteur fixe pour 2 lignes - évite les saccades */
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
    
    .hero {
        min-height: 430px; /* Hauteur fixe pour éviter les saccades */
    }
}

/* ------------------------------------------- 
   Entre 768px et 481px (Tablettes moyennes et grands mobiles)
------------------------------------------- */
@media (max-width: 768px) and (min-width: 481px) {
    /* Grilles et layout pour mobiles moyens */
    .themes-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    /* Réduction des marges inférieures pour tablettes */
    .themes-section,
    .recipes-grid,
    .categories {
        margin-bottom: 30px;
    }
    
    .categories {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    /* Titres h3 des catégories */
    .category-content h3 {
        font-size: 0.8rem;
    }
    
    .recipes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .seasonal-ingredients-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .ingredient-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .dark-mode .ingredient-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    /* Titre hero pour mobiles moyens */
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero-search-container {
        width: 90%;
    }
    
    /* Hero features - 4 colonnes */
    .hero-features {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        max-width: 100%;
        padding: 0 15px;
    }
    
    .hero-feature-circle {
        width: 65px;
        height: 65px;
    }
    
    .hero-feature-circle i {
        font-size: 1.5rem;
    }
    
    .hero-feature-label {
        font-size: 0.85rem;
        min-height: 2.4em; /* Hauteur fixe pour 2 lignes - évite les saccades */
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
    
    /* Tooltip au-dessus (comme desktop) */
    .hero-feature .tooltip-text {
        width: 200px;
    }
    
    .hero {
        min-height: 400px; /* Hauteur fixe pour éviter les saccades */
    }
}

/* ------------------------------------------- 
   Entre 480px et 321px (Petits mobiles)
------------------------------------------- */
@media (max-width: 480px) and (min-width: 321px) {
    /* Grilles et layout pour petits mobiles */
    .themes-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    
    /* Réduction plus importante des marges inférieures pour mobiles */
    .themes-section,
    .recipes-grid,
    .categories {
        margin-bottom: 30px;
    }
    
    .categories {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    
    .recipes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    /* Cartes de thèmes pour petits mobiles */
    .icon-circle {
        width: 50px;
        height: 50px;
        margin: 0 auto 15px;
    }
    
    .theme-card {
        padding: 20px 5px 15px 5px;
    }
    
    .theme-name {
        font-size: 0.9em;
    }
    
    .icon-circle::after {
        width: 90%;
        height: 90%;
    }

    .themes-actions {
        display: flex;
        justify-content: center;
        gap: 25px;
        margin-top: 20px;
    }

    .themes-actions .btn {
        min-width: 140px;
        text-align: center;
        padding: 10px 10px;
        font-weight: 500;
        font-size: 1.0rem;
    }
    
    .hero {
        padding: 50px 20px;
        min-height: 360px; /* Hauteur fixe pour éviter les saccades */
    }
    
    .hero h1 {
        font-size: 1.6rem;
    }

    .hero p {
        font-size: 1.1rem;
    }
    
    /* Barre de recherche pour petits mobiles */
    .hero-search-container {
        width: 95%;
        margin-top: 20px;
    }
    
    .hero-search-container .search-input-wrapper {
        height: 48px;
    }
    
    .search-input {
        font-size: 0.9rem;
        padding: 8px 12px;
    }
    
    .search-btn {
        padding: 8px 15px;
        font-size: 0.9rem;
    }
    
    .hero-search-container .search-btn {
        padding: 10px 15px;
    }
    
    .hero-advanced-filters .filter-tag,
    .search-bar-container .hero-advanced-filters .filter-tag {
        padding: 6px 12px;
        font-size: 0.85rem;
    }

    .seasonal-ingredients-grid {
        display: grid;
        grid-template-columns: repeat(3, 2fr);
        gap: 15px;
        margin-bottom: 20px;
    }
    
    .ingredient-img {
        height: 175px !important;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: white;
        padding: 5px;
        flex: 1;
    }
    
    /* Hauteur ajustée pour les ingrédients de saison sur mobile */
    .seasonal-ingredients-grid .ingredient-card .ingredient-img {
        min-height: 130px !important;
    }
    
    .ingredient-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .dark-mode .ingredient-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .ingredient-name {
        padding: 10px 5px;
        font-weight: 500;
        font-size: 0.8rem;
        background-color: #202731;
        color: white;
        margin: 0;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dark-mode .ingredient-name {
        background-color: var(--card-bg);
    }

    .ingredient-img img {
        width: 90%;
        height: 90%;
        object-fit: contain;
        transition: var(--transition);
        margin: 0 auto;
        display: block;
    }

    .seasonal-carousel-wrapper {
        margin: 0 auto 15px;
    }
    
    /* Style pour le conteneur de titre de section */
    .section-title-container {
        margin: 40px 0 15px;
    }

    /* Premier titre de section avec marge supérieure réduite */
    .container > .section-title-container:first-child {
        margin-top: 20px;
    }

    /* Titres de sections pour petits mobiles */
    .section-title {
        font-size: 1.4rem;
        margin: 10px 0 5px;
        gap: 10px;
    }
    
    /* Hero features - 3 colonnes */
    .hero-features {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        max-width: 100%;
        padding: 0 10px;
        margin-top: 30px;
    }
    
    .hero-feature {
        gap: 6px;
    }
    
    .hero-feature-circle {
        width: 60px;
        height: 60px;
    }
    
    .hero-feature-circle i {
        font-size: 1.4rem;
    }
    
    .hero-feature-label {
        font-size: 0.8rem;
        min-height: 2.4em; /* Hauteur fixe pour 2 lignes - évite les saccades */
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
    
    /* Tooltip au-dessus, centré sur l'icône */
    .hero-feature .tooltip-text {
        width: 180px;
        padding: 10px 12px;
        font-size: 0.85rem;
        /* Centré par défaut, géré dans page-accueil.css */
    }
}

/* ------------------------------------------- 
   320px et moins (Très petits mobiles)
------------------------------------------- */
@media (max-width: 320px) {
    /* Grilles et layout pour très petits mobiles */
    .themes-container {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }
    
    /* Réduction maximale des marges inférieures pour très petits mobiles */
    .themes-section,
    .recipes-grid,
    .categories {
        margin-bottom: 20px;
    }
    
    .categories {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .recipes-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
    }
    
    .seasonal-ingredients-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }
    
    .ingredient-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .dark-mode .ingredient-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    /* Hauteur ajustée pour les ingrédients de saison sur très petits écrans */
    .seasonal-ingredients-grid .ingredient-card .ingredient-img {
        height: 175px !important;
        min-height: 175px !important;
        max-height: 175px !important;
    }
    
    /* Cartes de thèmes pour très petits mobiles */
    .icon-circle {
        width: 50px;
        height: 50px;
    }
    
    .theme-card {
        padding: 12px 8px;
    }
    
    .theme-name {
        font-size: 0.9rem;
    }
    
    .hero {
        padding: 40px 15px;
        min-height: 340px; /* Hauteur fixe pour éviter les saccades */
    }
    
    .hero h1 {
        font-size: 1.6rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    /* Barre de recherche pour très petits mobiles */
    .hero-search-container {
        width: 100%;
        margin-top: 15px;
    }
    
    .hero-search-container .search-input-wrapper {
        height: 45px;
    }
    
    .search-input {
        font-size: 0.85rem;
        padding: 6px 10px;
    }
    
    .search-btn {
        padding: 7px 12px;
        font-size: 0.85rem;
    }
    
    /* Hero features - 3 colonnes */
    .hero-features {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        max-width: 100%;
        padding: 0 5px;
        margin-top: 30px;
    }
    
    .hero-feature {
        gap: 5px;
    }
    
    .hero-feature-circle {
        width: 55px;
        height: 55px;
    }
    
    .hero-feature-circle i {
        font-size: 1.3rem;
    }
    
    .hero-feature-label {
        font-size: 0.75rem;
        min-height: 2.4em; /* Hauteur fixe pour 2 lignes - évite les saccades */
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
    
    /* Tooltip au-dessus, centré sur l'icône */
    .hero-feature .tooltip-text {
        width: 160px;
        padding: 8px 10px;
        font-size: 0.8rem;
        /* Centré par défaut, géré dans page-accueil.css */
    }
}

/* ============================================
   GRILLES RECETTES — LIGNES PLEINES
   Masquage des items qui débordent de la grille
   pour garantir des lignes toujours complètes.
============================================ */

/* 768–1200px : 3 colonnes → lignes pleines de 3 (max 2 lignes) */
@media (max-width: 1200px) and (min-width: 769px) {
    #seasonal-recipes-grid > .recipe-card:nth-child(n+4) {
        display: none !important;
    }

    /* Dernières recettes : masquer le 4e (ligne 1 complète à 3) et au-delà de 6 (ligne 2 complète) */
    #latest-recipes-grid > .recipe-card:nth-child(4),
    #latest-recipes-grid > .recipe-card:nth-child(n+7) {
        display: none !important;
    }
}

/* < 768px (2 colonnes) : max 2 lignes = 4 items */
@media (max-width: 768px) {
    #seasonal-recipes-grid > .recipe-card:nth-child(n+5) {
        display: none !important;
    }

    #latest-recipes-grid > .recipe-card:nth-child(n+5) {
        display: none !important;
    }

    /* Masquer le bouton "Voir plus" quand toutes les cartes supplémentaires sont cachées par CSS */
    #latestRecipesShowMore {
        display: none !important;
    }
}

/* ≤ 320px (1 colonne) : max 2 items */
@media (max-width: 320px) {
    #seasonal-recipes-grid > .recipe-card:nth-child(n+3) {
        display: none !important;
    }

    #latest-recipes-grid > .recipe-card:nth-child(n+3) {
        display: none !important;
    }
}