/* /Components/RecetteCard.razor.rz.scp.css */
.recipe-card[b-uzhzww1h0e]
{
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 18px;
    height: 100%;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}

    .recipe-card.not-visible[b-uzhzww1h0e]
    {
        opacity: 0.4;
        border-width: 4px;
        border-color: red;
        border-style: dashed;
    }


    .recipe-card:hover[b-uzhzww1h0e]
    {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    }

    .recipe-card[b-uzhzww1h0e]  .mud-card
    {
        height: 100%;
    }

    .recipe-card[b-uzhzww1h0e]  .description
    {
        margin-top: 8px;
        color: rgba(0, 0, 0, 0.6);
    }

    .recipe-card[b-uzhzww1h0e]  .card-footer
    {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px;
    }

        .recipe-card[b-uzhzww1h0e]  .card-footer .card-duration
        {
            display: flex;
            gap: 5px;
            justify-content: space-between;
            align-items: end;
            padding: 8px;
        }

            .recipe-card[b-uzhzww1h0e]  .card-footer .card-duration span
            {
                line-height: 20px;
            }
/* /Pages/Index.razor.rz.scp.css */
/* #---------------------# */
/* # Message de bienvenu # */
/* #---------------------# */
[b-kvouhkh4dx] .welcome-card
{
    max-width: 900px;
    margin: 0px auto 0px;
    padding: 10px 32px;
    border-radius: 16px;
    background-color: transparent;
}

    [b-kvouhkh4dx] .welcome-card .welcome-accent
    {
        color: var(--mud-palette-primary);
    }

    [b-kvouhkh4dx] .welcome-card .welcome-intro
    {
        font-size: 1.05rem;
        color: #333;
    }

    [b-kvouhkh4dx] .welcome-card .welcome-signature
    {
        margin-top: 8px;
        font-style: italic;
        color: #444;
    }

/* #-----------------# */
/* # Barre de filtre # */
/* #-----------------# */
.filter-bar[b-kvouhkh4dx]
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px 0;
}

    .filter-bar .filter-search[b-kvouhkh4dx]
    {
        width: 500px;
    }

    .filter-bar .filter-types[b-kvouhkh4dx]
    {
        margin: 10px 0;
    }
/* /Pages/Login.razor.rz.scp.css */
.admin-space[b-i8843t07z7]
{
    font-family: Arial !important;
}
/* /Pages/Logout.razor.rz.scp.css */
.admin-space[b-me3dktxh7k]
{
    font-family: Arial !important;
}
/* /Pages/RecettePage.razor.rz.scp.css */

/* ########### */
/* # Lecture # */
/* ########### */
.recettepage-content[b-th4g4ogvh9]
{
    max-width: 1200px;
    margin: 0px auto;
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-gap: 20px;
}

[b-th4g4ogvh9] .shadow
{
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* #-------------------------# */
/* # Titre + Image + Édition # */
/* #-------------------------# */
[b-th4g4ogvh9] .recipe-hero
{
    grid-row: 1;
    grid-column: 1 / span 2;
    border-radius: 14px;
    overflow: hidden;
}
    /* Background image */
    [b-th4g4ogvh9] .recipe-hero .hero-image
    {
        position: relative;
        height: 350px;
        background-size: cover;
        background-position: center;
    }
    /* Overlay */
    [b-th4g4ogvh9] .recipe-hero .hero-overlay
    {
        position: absolute;
        inset: 0;
        background: linear-gradient( to top, rgba(0,0,0,0.7), rgba(0,0,0,0.2) );
    }
    /* Content */
    [b-th4g4ogvh9] .recipe-hero .hero-content
    {
        position: absolute;
        bottom: 24px;
        left: 24px;
        right: 24px;
        color: white;
    }

    [b-th4g4ogvh9] .recipe-hero .hero-title
    {
        font-weight: 700;
        margin-bottom: 12px;
    }

    [b-th4g4ogvh9] .recipe-hero .hero-info-stack
    {
        display: flex;
        gap: 15px;
    }

        [b-th4g4ogvh9] .recipe-hero .hero-info-stack .hero-info
        {
            display: flex;
            align-items: end;
            gap: 5px;
        }

    [b-th4g4ogvh9] .recipe-hero .hero-edition-buttons
    {
        display: flex;
        justify-self: right;
        padding: 10px;
        gap: 10px;
    }
/* #-------------# */
/* # Ingredients # */
/* #-------------# */
[b-th4g4ogvh9] .recipe-ingredient-container
{
    grid-row: 2;
    grid-column: 1;
    border-radius: 14px;
    overflow: hidden;
    padding: 24px;
    pointer-events: none;
}

    [b-th4g4ogvh9] .recipe-ingredient-container .ingredient-title
    {
        font-weight: 500;
    }

    [b-th4g4ogvh9] .recipe-ingredient-container .ingredient-subtitle
    {
        padding: 15px 0 0 0;
        color: var(--mud-palette-primary);
    }

    [b-th4g4ogvh9] .recipe-ingredient-container .recipe-ingredient
    {
        white-space: nowrap;
        display: flex;
        gap: 5px;
    }

        [b-th4g4ogvh9] .recipe-ingredient-container .recipe-ingredient .ingredient-bullet
        {
            width: 8px;
            text-align: center;
        }

        [b-th4g4ogvh9] .recipe-ingredient-container .recipe-ingredient .ingredient-qty
        {
            font-weight: bold;
        }

        [b-th4g4ogvh9] .recipe-ingredient-container .recipe-ingredient .ingredient-name
        {
        }
/* #--------# */
/* # Étapes # */
/* #--------# */
[b-th4g4ogvh9] .recipe-step-container
{
    grid-row: 2;
    grid-column: 2;
    border-radius: 14px;
    overflow: hidden;
    padding: 24px;
}

    [b-th4g4ogvh9] .recipe-step-container .step-name
    {
        font-weight: 500;
    }

    [b-th4g4ogvh9] .recipe-step-container .step-description
    {
        margin-bottom: 20px;
    }

/* #--------------# */
/* # Commentaires # */
/* #--------------# */
[b-th4g4ogvh9] .recipe-comment-container
{
    grid-row: 3;
    grid-column: 1 / span 2;
    border-radius: 14px;
    overflow: hidden;
    padding: 24px;
}
    /* Titre */
    [b-th4g4ogvh9] .recipe-comment-container .comment-title
    {
        font-weight: 500;
        margin-bottom: 20px;
    }

        [b-th4g4ogvh9] .recipe-comment-container .comment-title .nb-comment
        {
            font-weight: 200;
            margin-left: 5px;
            font-size: 1.2rem;
        }


    /* Formulaire + Description */
    [b-th4g4ogvh9] .recipe-comment-container .addcomment-container
    {
        padding: 20px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        gap: 50px;
        justify-content: space-between;
    }

        [b-th4g4ogvh9] .recipe-comment-container .addcomment-container .button-submit
        {
            margin-left: auto;
            display: block;
        }

        [b-th4g4ogvh9] .recipe-comment-container .addcomment-container .addcomment-description
        {
            min-width: 200px;
        }

    /* Commentaire */
    [b-th4g4ogvh9] .recipe-comment-container .recipe-comment
    {
        background-color: #f8fafc;
        border-radius: 10px;
        margin-bottom: 20px;
        padding: 15px;
        display: flex;
        flex-direction: column;
    }

        [b-th4g4ogvh9] .recipe-comment-container .recipe-comment .comment-infos
        {
            display: flex;
            flex-direction: row;
            gap: 0px 10px;
            align-items: center;
            flex-wrap: wrap;
        }

            [b-th4g4ogvh9] .recipe-comment-container .recipe-comment .comment-infos .comment-rating
            {
                pointer-events: none;
            }

            [b-th4g4ogvh9] .recipe-comment-container .recipe-comment .comment-infos .comment-user
            {
                white-space: nowrap;
                font-weight: 500;
                margin-bottom: 5px;
            }

            [b-th4g4ogvh9] .recipe-comment-container .recipe-comment .comment-infos .comment-date
            {
                white-space: nowrap;
                font-weight: 200;
                font-size: 0.8rem;
                margin-bottom: 3px;
            }

        [b-th4g4ogvh9] .recipe-comment-container .recipe-comment .comment-value
        {
            max-width: 600px;
            white-space: pre-line;
        }

        [b-th4g4ogvh9] .recipe-comment-container .recipe-comment .comment-adminreply
        {
            border-width: 0 0 0 0px;
            border-color: red;
            margin-top: 5px;
            margin-left: 20px;
            max-width: 600px;
            color: var(--mud-palette-secondary);
            font-weight: 200;
            font-style: italic;
        }

            [b-th4g4ogvh9] .recipe-comment-container .recipe-comment .comment-adminreply .header
            {
                margin-right: 10px;
                font-weight: 500;
            }

/* ########### */
/* # Édition # */
/* ########### */
.recettepage-content-edition[b-th4g4ogvh9]
{
    max-width: 1200px;
    margin: 0px auto;
    display: grid;
    grid-template-rows: 1fr min-content min-content;
    grid-template-columns: 1fr;
}

    .recettepage-content-edition[b-th4g4ogvh9]  .json-container
    {
        grid-row: 1;
        grid-column: 1;
        width: 100%;
        box-shadow: var(--mud-elevation-4);
        border-radius: 10px;
        display: grid;
    }

        .recettepage-content-edition[b-th4g4ogvh9]  .json-container .json-textarea
        {
            grid-row: 1;
            grid-column: 1;
            height: calc(100vh - 320px);
        }

        .recettepage-content-edition[b-th4g4ogvh9]  .json-container .save-button
        {
            grid-row: 1;
            grid-column: 1;
            margin: 10px;
            justify-self: start;
            align-self: start;
        }

    .recettepage-content-edition[b-th4g4ogvh9]  .image-list
    {
        display: flex;
        margin-top: 20px;
        gap: 20px;
        align-items: center;
        overflow-x: auto;
        width: 1200px;
    }

        .recettepage-content-edition[b-th4g4ogvh9]  .image-list .image-container
        {
            display: grid;
            grid-template-rows: min-content min-content;
        }

            .recettepage-content-edition[b-th4g4ogvh9]  .image-list .image-container .image
            {
                grid-row: 1;
                grid-column: 1;
                border-radius: 10px;
            }

            .recettepage-content-edition[b-th4g4ogvh9]  .image-list .image-container .name
            {
                grid-row: 2;
                grid-column: 1;
            }

            .recettepage-content-edition[b-th4g4ogvh9]  .image-list .image-container .delete-button
            {
                grid-row: 1;
                grid-column: 1;
                align-self: start;
                justify-self: end;
                margin: 5px;
            }

/* Responsive pour mobile */
@media (max-width: 600px)
{
    /* ########### */
    /* # Lecture # */
    /* ########### */
    .recettepage-content[b-th4g4ogvh9]
    {
        grid-template-columns: 1fr;
        grid-gap: 20px;
    }
    /* # Titre + Image # */
    [b-th4g4ogvh9] .recipe-hero
    {
        grid-row: 1;
        grid-column: 1;
    }
    /* # Ingredients # */
    [b-th4g4ogvh9] .recipe-ingredient-container
    {
        grid-row: 2;
        grid-column: 1;
    }
    /* # Étapes # */
    [b-th4g4ogvh9] .recipe-step-container
    {
        grid-row: 3;
        grid-column: 1;
    }
    /* # Commentaires # */
    [b-th4g4ogvh9] .recipe-comment-container
    {
        grid-row: 4;
        grid-column: 1;
    }
        /* Formulaire + Description */
        [b-th4g4ogvh9] .recipe-comment-container .addcomment-container
        {
            flex-wrap: wrap;
            gap: 10px;
        }

            [b-th4g4ogvh9] .recipe-comment-container .addcomment-container .button-submit
            {
                margin: auto;
                display: block;
            }

    /* ########### */
    /* # Édition # */
    /* ########### */
}
/* /Shared/MainLayout.razor.rz.scp.css */
/* Padding pour que le contenu ne passe pas sous l'AppBar */
.app-main[b-xppw5ru2cf]  .main-content
{
    padding-top: 80px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 24px;
    margin: auto;
    max-width: 1400px;
}

/* #--------# */
/* # AppBar # */
/* #--------# */
.app-main[b-xppw5ru2cf]  .app-bar .mud-toolbar
{
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    justify-content: space-between;
    width: 100%;
}

    /* Titre du site */
    .app-main[b-xppw5ru2cf]  .app-bar .site-title
    {
        white-space: nowrap;
        width: 100%;
        margin-left: 10px;
    }

    /* User connected */
    .app-main[b-xppw5ru2cf]  .app-bar .mud-toolbar .connected-user
    {
        display: flex;
        align-items: center;
        gap: 5px;
    }

/* Mobile */
@media (max-width: 600px)
{
    .app-main[b-xppw5ru2cf]  .main-content
    {
        padding-top: 72px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .app-main[b-xppw5ru2cf]  .app-bar .mud-toolbar .connected-user .name
    {
        visibility: collapse;
        width: 0;
        margin: -5px;
    }
}