/* section ratting */
    /* retour */
        .bx-arrow-back{
            font-size: 20px;
            color: white;
            font-weight: bold;
            padding: .2rem .5rem;
            background: var(--orange);
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .bx-arrow-back:hover{
            background: none;
            border: 1px solid var(--orange);
            color: var(--orange);
        }
    /* retour */
    
    .header_review{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-wrap: wrap;
        padding: 1rem;
        border: var(--border);
        border-radius: .5rem;
    }
    
    /* part1 */
        .part1{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .part1 h1{
            font-size: 35px;
            font-weight: bolder;
            color: var(--or);
        }
        
        .part1 .star{
            display: flex;
            justify-content: space-between;
            margin: .5rem 0;
            font-size: 20px;
        }
        
        .part1 .star .bxs-star, .part1 .star .bxs-star-half{
            color: var(--or);
        }
        
        .part1 .star .bx-star{
            color: #ccc;
        }
        
        .part1 h3{
            font-size: 22px;
        }
    /* part1 */

    /* part2 */
        .part2{
            width: 370px;
        }

        .content_pourcent{
            display: flex;
            justify-content: center;
            align-items: center;
            column-gap: 5px;
        }

        .content_pourcent:not(:last-child){
            margin-bottom: 5px;
        }

        .numStar{
            font-weight: bold;
        }

        .numStar .bxs-star{
            color: var(--or);
            margin-left: -.2rem;
        }

        .div_pourcent{
            position: relative;
            width: 300px;
            height: 15px;
            background-color: var(--light-black);
            border-radius: 1rem;
        }

        .div_pourcent span{
            position: absolute;
            top: 0; left: 0;
            height: 100%;
            background-color: var(--or);
            border-radius: 1rem;
        }

        .count_star{
            color: #8b8686;
            font-weight: bold;
        }
    /* part2 */

    /* part3 */
        .part3{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            row-gap: 5px;
        }

        .part3 h3{
            font-size: 20px;
        }
    /* part3 */
/* section ratting */


/* section review */
    /* btn nav */
        .btn_container{
            display: flex;
            justify-content: center;
            align-items: center;
            column-gap: 10px;
        }
        
        .btn_container a{
            border-radius: .5rem;
            padding: .5rem 1rem;
            font-weight: bolder;
            color: white;
            background: var(--orange);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
        }
        
        .btn_container a:hover, .btn_container a.active{
            background: none;
            border: 2px solid var(--orange);
            color: var(--orange);
        }
    /* btn nav */

    .container_review::-webkit-scrollbar-thumb{
        background-color: var(--light-black);
    }
    
    .content_review{
        display: flex;
        column-gap: .5rem;
        padding: .5rem;
    }
    
    .content_review:nth-child(even){
        background: #00000010;
        border-radius: .5rem;
    }
    
    .review_profile{
        width: 45px;
        height: 45px;
    }
    
    .review_profile img{
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid white;
    }
    
    .right_review{
        flex: 1;
    }
    
    .name_review{
        font-weight: bold;
        font-size: 18px;
    }
    
    .rating_review .bxs-star{
        color: var(--or);
    }
    
    .rating_review .bx-star{
        color: #ccc;
    }
    
    .comment_review{
        font-size: 17px;
        white-space: pre-line;
    }
    
    .date_review{
        text-align: right;
        font-size: 14px;
        font-weight: bold;
        color: #ccc;
        margin-top: .3rem;
    }
/* section review */


/* section form review */
    .form_review{
        position: fixed;
        width: 100%; height: 100dvh;
        top: 0; left: 0;
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(30px);
        scale: 0;
    }
    
    .form_review.active{
        scale: 1;
    }

    #close_form_review{
        display: block;
        position: absolute;
        top: .9rem; right: .9rem;
        font-size: 28px;
        cursor: pointer;
        color: var(--orange);
    }

    #close_form_review:hover{
        font-size: 32px;
        color: black;
    }
    
    .titreReview{
        font-weight: bolder;
        font-size: 18px;
        color: var(--blue);
    }
    
    .formReview{
        width: 18rem;
        background: white;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        row-gap: .5rem;
        justify-content: center;
        align-items: center;
    }
    
    .imgProduct {
        width: 70px;
        display: flex;
        gap: 5px;
        overflow-x: auto;
        padding-bottom: .2rem;
    }
    
    .imgProduct::-webkit-scrollbar{
        width: .2rem;
        height: .2rem;
    }

    .imgProduct:hover::-webkit-scrollbar{
        width: .4rem;
        height: .4rem;
        border-radius: 50%;
    }
    
    .imgProduct::-webkit-scrollbar-track{
        background-color: transparent;
        border-radius: .5rem;
    }
    
    .imgProduct::-webkit-scrollbar-thumb{
        background-color: var(--light-black);
        border-radius: .5rem;
    }
    
    .imgProduct img{
        object-fit: cover;
        border-radius: 8px;
    }
    
    /* Étoiles stylées */
    .star-rating {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        
    }
    
    .star-rating input[type="radio"] {
        display: none;
    }
    
    .star-rating label {
        font-size: 1.8rem;
        color: #ccc;
        cursor: pointer;
        padding: 0 5px;
        transition: color 0.2s;
        transform: translatey(-5px);
    }
    
    .star-rating input[type="radio"]:checked ~ label,
    .star-rating label:hover,
    .star-rating label:hover ~ label {
        color: var(--or);
    }
    
    .champ_review{
        width: 100%;
        padding: .5rem;
    }
    
    .champ_review:focus{
        outline: none;
        border: 1px solid var(--orange);
    }
    
    textarea.champ_review{
        resize: none;
        height: 100px;
    }
    
    .reviewButton{
        background: var(--orange);
        border: none;
        color: white;
    }
    
    .reviewButton:hover{
        background: none;
        border: 1px solid var(--orange);
        color: var(--orange);
        cursor: pointer;
    }
/* section form review */


/* section ratting */
    @media screen and (max-width: 845px){
        .header_review{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: space-evenly;
            row-gap: 1.5rem;
        }
        
        .part2{
            width: 100%;
        }
    }

    @media screen and (max-width: 470px){
        .div_pourcent{
            width: 80%;
        }
    }
/* section ratting */

/* btn nav */
    @media screen and (max-width: 600px){
        .btn_container{
            margin-bottom: 1rem;
        }
        
        .btn_container a:nth-child(2), .btn_container a:nth-child(3){
            display: none;
        }
    }

    @media screen and (max-width: 400px){
        .btn_container a{
            border-radius: .5rem;
            padding: .3rem .5rem;
            font-size: 14px;
        }
    }
/* btn nav */


/* section reviews */
    @media screen and (max-width: 500px){
        .review_profile{
            width: 35px;
            height: 35px;
        }
        
        .name_review{
            font-size: 16px;
        }
        
        .comment_review{
            font-size: 15px;
            overflow-y: scroll;
            max-height: 100px;
            padding-left: .5rem;
        }
        
        .comment_review::-webkit-scrollbar{
            width: .2rem;
            height: .2rem;
        }
        
        .comment_review::-webkit-scrollbar-track{
            background-color: transparent;
        }
        
        .comment_review::-webkit-scrollbar-thumb{
            background-color: var(--light-black);
        }
        
        .date_review{
            font-size: 13px;
        }
    }
/* section reviews */