.garden {

    position: relative;

    width:
        min(
            1400px,
            calc(100% - 30px)
        );

    height: 720px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 35px;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(255,255,255,.22),
            transparent 20%
        ),

        radial-gradient(
            circle at 80% 70%,
            rgba(255,255,255,.18),
            transparent 20%
        ),

        repeating-linear-gradient(
            35deg,
            rgba(255,255,255,.035) 0,
            rgba(255,255,255,.035) 2px,
            transparent 2px,
            transparent 9px
        ),

        #9fca82;

    box-shadow:
        0 20px 50px
        rgba(
            50,
            90,
            45,
            .20
        );

    border:
        8px
        solid
        rgba(
            255,
            255,
            255,
            .75
        );
}


/* Petite texture du terrain */

.garden::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            circle,
            rgba(65,110,50,.16) 1px,
            transparent 2px
        );

    background-size: 18px 18px;

    opacity: .5;
}


/* PANNEAU CENTRAL */

.garden-sign {

    position: absolute;

    left: 50%;

    top: 8%;

    transform:
        translateX(-50%);

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        11px
        20px;

    background:
        rgba(
            255,
            250,
            242,
            .88
        );

    border:
        2px
        solid
        rgba(
            130,
            100,
            80,
            .20
        );

    border-radius: 999px;

    color: #695247;

    box-shadow:
        0 5px 18px
        rgba(
            50,
            60,
            30,
            .12
        );
}


/* FLEURS */

.garden-flower {

    position: absolute;

    z-index: 10;

    transform:
        translate(
            -50%,
            -50%
        );

    width: 95px;

    min-height: 110px;

    border: 0;

    padding: 5px;

    background: transparent;

    border-radius: 20px;

    transition:
        transform .25s ease,
        filter .25s ease;
}


.garden-flower:hover {

    z-index: 20;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1.13);
}


.garden-flower:focus-visible {

    outline:
        3px
        solid
        white;

    outline-offset: 3px;
}


.garden-flower img {

    display: block;

    width: 72px;

    height: 72px;

    object-fit: contain;

    margin: 0 auto;

    filter:
        drop-shadow(
            0
            5px
            4px
            rgba(
                50,
                70,
                30,
                .20
            )
        );
}


.flower-name {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    display: block;
    width: fit-content;
    margin-top: 2px;

    padding:
        3px
        8px;

    border-radius: 999px;

    background:
        rgba(
            255,
            255,
            255,
            .78
        );

    color: #4f5e43;

    font-size: 12px;

    font-weight: bold;

    white-space: nowrap;

    transition:
        opacity .2s ease;
}


.garden.hide-names .flower-name {

    opacity: 0;

    pointer-events: none;
}


/* DÉCORATIONS */

.garden-decoration {

    position: absolute;

    z-index: 3;

    user-select: none;

    pointer-events: none;

    filter:
        drop-shadow(
            0
            5px
            4px
            rgba(
                40,
                70,
                30,
                .16
            )
        );
}


.tree {

    font-size: 75px;
}


.tree-one {

    left: 4%;

    top: 7%;
}


.tree-two {

    right: 5%;

    top: 10%;
}


.tree-three {

    right: 3%;

    bottom: 8%;
}


.bush {

    font-size: 65px;
}


.bush-one {

    left: 7%;

    bottom: 12%;
}


.bush-two {

    left: 43%;

    bottom: 4%;
}


.rock {

    font-size: 30px;

    opacity: .75;
}


.rock-one {

    left: 20%;

    bottom: 17%;
}


.rock-two {

    right: 24%;

    top: 32%;
}


/* JARDIN VIDE */

.empty-garden {

    position: absolute;

    left: 50%;

    top: 53%;

    transform:
        translate(
            -50%,
            -50%
        );

    width:
        min(
            400px,
            80%
        );

    text-align: center;

    padding: 25px;

    color: #456044;

    background:
        rgba(
            255,
            255,
            255,
            .25
        );

    border-radius: 25px;

    z-index: 6;
}


.empty-garden-icon {

    font-size: 50px;
}


.empty-garden h2 {

    font-family:
        Georgia,
        serif;

    font-weight: normal;

    margin:
        8px
        0;
}


.empty-garden p {

    margin: 0;

    line-height: 1.5;
}


/* MESSAGE MODAL */

.message-modal {

    max-width: 500px;

    text-align: center;
}


.message-flower {

    width: 100px;

    height: 100px;

    object-fit: contain;

    margin: 10px auto;
}


.message-flower-name {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #947b91;

    margin-bottom: 5px;
}


.message-modal h2 {

    color: #6c4d69;

    margin-bottom: 20px;
}


.message-text {

    font-family:
        Georgia,
        serif;

    font-size: 20px;

    line-height: 1.7;

    padding:
        5px
        15px
        25px;

    color: #564657;
}


.close-message-button {

    border: 0;

    border-radius: 999px;

    padding:
        11px
        20px;

    background: #e7d5e4;

    color: #654e62;

    font-weight: bold;
}


@media (max-width: 700px) {

    .garden {

        height: 650px;

        width:
            calc(100% - 16px);

        border-radius: 25px;

        border-width: 5px;
    }


    .garden-flower {

        width: 75px;

        min-height: 90px;
    }


    .garden-flower img {

        width: 55px;

        height: 55px;
    }


    .flower-name {

        font-size: 10px;

        padding:
            2px
            5px;
    }


    .tree {

        font-size: 52px;
    }


    .bush {

        font-size: 45px;
    }


    .garden-sign {
        top: 30px;
        width: 200px;
        display: flex;
        justify-content: center;
        font-size: 12px;
        padding: 8px 14px;
    }


    .empty-garden {

        width: 75%;
    }

}