main {
    padding: 20px;
    text-align: center;
    background-color: #F9EDE3; /* Fond légèrement plus chaud pour tout le main */
}
.back{
    background-color: #5B3A29;
    padding: 5px 15px;
    font-size: 24px ;
    border-radius: 25px;
    border: none;
}
.recipe-details {
    background-color: #FDFAF6;
    padding: 30px;
    border-radius: 15px;
    max-width: 900px; /* Légère augmentation pour plus d'espace */
    margin: 0 auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre subtile pour un effet "carte" */
}

.recipe-details h2 {
    font-family: 'Dancing Script', cursive;
    font-size: 36px; /* Augmenté pour plus d'impact */
    color: #5B3A29;
    margin-bottom: 25px;
    text-shadow: 1px 1px 2px rgba(91, 58, 41, 0.1); /* Ombre légère pour le texte */
}

.recipe-image {
    width: 100%;
    max-width: 450px; /* Légère augmentation */
    max-height: 250px;
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 25px;
    border: 2px solid #E8C8A5; /* Bordure subtile pour encadrer l'image */
    transition: transform 0.3s ease; /* Animation au survol */
}

.recipe-image:hover {
    transform: scale(1.02); /* Légère mise à l'échelle au survol */
}
.ingredients, .instructions {
    margin-bottom: 40px;
    text-align: left;
    background-color: #FFF; /* Fond blanc pour contraste */
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Ombre légère */
}

.ingredients h3, .instructions h3 {
    font-family: 'Dancing Script', cursive;
    font-size: 28px; /* Augmenté pour plus de présence */
    color: #5B3A29;
    margin-bottom: 15px;
    padding-bottom: 5px;
}

.ingredient {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #333;
    padding: 8px 12px; /* Légère augmentation pour plus d'espace */
    background-color: #F5E9D7; /* Fond beige clair pour chaque ingrédient */
    margin: 5px 0;
    border-radius: 5px;
    display: flex;
    justify-content: space-between; /* Pour aligner ingrédient et quantité */
    transition: background-color 0.3s ease;
}

.ingredient:hover {
    background-color: #E8C8A5; /* Changement de couleur au survol */
}

.instruction {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #333;
    padding: 15px 25px; /* Plus d'espace pour la lisibilité */
    background-color: #E8C8A5;
    margin: 20px 0;
    border-radius: 8px;
    position: relative; /* Pour le SVG favori */
    transition: background-color 0.3s ease;
}

.instruction:hover {
    background-color: #D4A373; /* Changement de couleur au survol */
}

.favorite-step-btn {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
}

.favorite-step-btn svg {
    width: 100%;
    height: 100%;
}

.favorite-step-btn svg path {
    fill: #5B3A29;
    transition: fill 0.3s ease;
}

.favorite-step-btn:hover svg path {
    fill: #5B3A29;
}

.favorite-step-btn.active svg path {
    fill: #edaa2d;
}

.favorite-btn .favorite-flag path {
    transition: fill 0.3s ease;
}

.fixed-step {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 10px;
    z-index: 999;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid #f39c12;
}

.instruction.sticky {
    position: sticky;
    bottom: var(--sticky-bottom, 0px);
    z-index: var(--sticky-z, 10);
    background: #fff;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    border-top: 2px solid #f39c12;
}

.instructions.stickies {
    position: sticky;
    bottom: var(--sticky-bottom-all, -400px);
    z-index: 9;
    background: #fff;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    border-top: 2px solid #f39c12;
}

/* Responsive */
@media (max-width: 768px) {
    main {
        padding: 15px;
    }

    .recipe-details {
        padding: 20px;
        max-width: 100%; /* Pleine largeur sur mobile */
    }

    .recipe-details h2 {
        font-size: 30px;
    }

    .recipe-image {
        max-height: 250px;
        object-fit: cover;
    }

    .ingredients h3, .instructions h3 {
        font-size: 24px;
    }

    .ingredient {
        font-size: 14px;
        padding: 6px 10px;
    }

    .instruction {
        font-size: 14px;
        padding: 12px 20px;
        margin: 15px 0;
    }

    .favorite-step-btn {
        width: 20px;
        height: 20px;
        top: 8px;
        right: 8px;
    }
}