/* ========================================
 * PAGE-RECETTE-LAYOUT.CSS
 * Contient les styles de la structure globale de la page recette
 * ======================================== */

/* Styles de structure pour la recette-page */
.ingredient-page,
.ustensile-page {
    position: relative;
    padding-right: 340px; /* Espace pour la sidebar */
    box-sizing: border-box;
}

.main-content {
    width: 100%;
    box-sizing: border-box;
    padding: 0px 0;
}

.sidebar {
    position: absolute;
    margin-top: 75px;
    top: 0;
    right: 0;
    width: 310px;
    box-sizing: border-box;
}

/* Spécifique à la page recette pour s'aligner avec recette-image-infos */
.ingredient-page .sidebar {
    top: 0px; /* Aligné avec #recette-image-infos */
}

.ingredient-content{
    width: 100%;
}

/* ======================================
 * MEDIA QUERIES (RESPONSIVE)
 * ====================================== */

/* Écrans entre 1025px et 1200px : sidebar plus étroite */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
    .ingredient-page,
    .ustensile-page {
        padding-right: 280px; /* Espace adapté pour la sidebar rétrécie */
    }

    .sidebar {
        width: 260px;
    }
}

/* Tablettes et petits écrans - Masquer la sidebar */
@media screen and (max-width: 1024px) {
    .ingredient-page,
    .ustensile-page {
        padding-right: 0; /* Supprimer l'espace pour la sidebar */
    }

    .sidebar {
        display: none; /* Masquer complètement la sidebar */
    }
}