/* =============================
   STYLES FICHES RECETTES MONIN
   Centralisé pour parcours 1 & 2
   ============================= */

/* --- Cards de sélection (slider, liste, etc) --- */
.recette-card {
    width: 30%;
    height: 425px;
    margin: 1rem;
    padding: 1rem;
    border-radius: 1px;
    background: #fff;
    box-shadow: 10px 10px 15px -5px #000;
    cursor: pointer;
    text-align: center;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.recette-card:hover { transform: scale(1.05); }
.recette-card img {
    width: 100%;
    height: auto;
    border-radius: 1px;
    margin-bottom: 1rem;
    object-fit: cover;
}
.recette-card h3 {
    font-size: 1.8rem !important;
    color: #223222;
    margin: 0;
    font-family: 'BirthstoneCustom', cursive;
    font-weight: 200;
}

/* --- Listes horizontales de recettes (slider, parcours 2) --- */
.recette-list {
    display: flex;
    width: 1200px;
    gap: 20px;
    height: 450px;
    justify-content: center;
}
.recette-list img {
    height: 85%;
    width: auto;
    object-fit: cover;
}

/* --- Fiche recette détaillée (overlay, parcours, ou fiche unique) --- */
.fiche-recette,
.recette-wrapper {
    max-width: 1500px;
    margin: 0rem auto;
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.fiche-recette h2,
.recette-title {
    font-size: 2.3rem !important;
    color: #223222;
    font-family: 'BirthstoneCustom', cursive;
    margin-bottom: 1rem;
    font-weight: 400 !important;
    text-align: left;
}

.fiche-recette img,
.recipe-left img {
    width: auto;
    max-width: 500px;
    max-height: 500px;
    border-radius: 1px;
    border: 15px solid #fff;
    box-shadow: 15px 15px 10px -7px black;
    background: #fff;
    margin-bottom: 1.5rem;
}

/* --- Structure interne 2 colonnes (fiche recette) --- */
.recipe-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 60px;
    margin: auto;
    padding-top: 3%;
}
.recipe-left {
    flex: 1 1 40%;
    max-width: 35%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.recipe-right {
    flex: 1 1 60%;
    max-width: 60%;
    text-align: left;
    font-size: 1em;
    line-height: normal;
}
.recipe-right p {
    font-size: 1rem;
    font-weight: 400;
    font-family: 'Raleway', Arial, sans-serif;
}
.recipe-content {
    font-size: 1em;
    line-height: 1.6;
    color: #333;
}
.recipe-content h3,
.recipe-right h3,
.fiche-recette h3 {
    color: #223222;
    line-height: 1.5;
    font-size: 1.1rem !important;
    font-weight: 800;
    font-family: 'Raleway', Arial, sans-serif;
    margin-top: 1em;
}

/* --- Ingrédients & Préparation --- */
.ingredients-list,
.decoration-list,
.preparation-list {
    margin: 0 0 1em 1.5em;
    padding: 0;
}
.ingredients-list li,
.decoration-list li,
.preparation-list li {
    margin-bottom: 0.3em;
    font-size: 1em;
    font-family: 'Raleway', Arial, sans-serif;
    font-weight: 100;
    color: #223222;
    list-style-type: none;
    text-align: left;
}
.preparation-list li {
    list-style: decimal;
    font-weight: 100;
}

/* --- Boutons principaux --- */
.btn-next,
.fiche-recette .btn-primary,
.recette-wrapper .btn-primary {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.75rem 1.5rem;
    background-color: #223222;
    color: #fff;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s;
}
.btn-next:hover,
.fiche-recette .btn-primary:hover,
.recette-wrapper .btn-primary:hover {
    background-color: #ffb0a6;
    color: #223222;
    transform: scale(1.05);
}

/* --- Responsive --- */
@media (max-width: 1200px) {
    .recette-list { width: 99vw; gap: 2vw; }
    .recipe-container { flex-direction: column; gap: 24px; padding-top: 0; }
    .recipe-left, .recipe-right { max-width: 100%; }
}
@media (max-width: 800px) {
    .recette-card { width: 90vw; height: auto; }
    .recette-list { flex-direction: column; width: 100vw; height: auto; }
    .recipe-container { flex-direction: column; gap: 12px; }
    .fiche-recette, .recette-wrapper { padding: 1rem; }
}