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

/* Styles de structure pour la recette-page */
.recette-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 */
.recette-page .sidebar {
    top: 0px; /* Aligné avec #recette-image-infos */
}

.recette-content{
    width: 100%;
}

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

/* Écrans larges */
@media screen and (max-width: 1200px) {
    .recette-page {
        padding-right: 290px; /* Réduire l'espace pour la sidebar */
    }
    
    .sidebar {
        width: 260px;
    }
}

/* Tablettes et petits écrans - Masquer la sidebar */
@media screen and (max-width: 1024px) {
    .recette-page {
        padding-right: 0; /* Supprimer l'espace pour la sidebar */
    }
    
    .sidebar {
        display: none; /* Masquer complètement la sidebar */
    }
    
    /* Inverser l'ordre : Résumé avant Saisonnalité */
    .recette-content {
        display: flex;
        flex-direction: column;
    }
    
    .recette-content .recette-header {
        order: 1; /* Titre en premier */
    }
    
    .recette-content #recette-image-infos {
        order: 2; /* Image et barre d'actions */
    }
    
    .recette-content .recette-cuisiner-section {
        order: 3; /* Bouton cuisiner après l'image */
    }

    .recette-content .recette-resume-section {
        order: 4; /* Résumé après le bouton */
    }

    .recette-content .mobile-recipe-info-section {
        order: 5; /* Saisonnalité après résumé */
    }

    /* Toutes les autres sections après */
    .recette-content > *:not(.recette-header):not(#recette-image-infos):not(.mobile-recipe-info-section):not(.recette-resume-section):not(.recette-cuisiner-section) {
        order: 10;
    }
}

/* Mobiles - Supprimer marges publicité */
@media screen and (max-width: 768px) {
    .ad-responsive-container {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}