#aboutus {
    background-color: var(--white);
}

#aboutus .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-block: 4%;
    gap: 20px 0;
    
    max-width: 1820px;
    margin: auto;
}

#aboutus .desc {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#aboutus .desc .top_title h3 {
    font-size: var(--fs-14);
}

#aboutus .desc .content {
    width: 80%;
}

#aboutus .desc .title h2 {
    text-transform: uppercase;
    font-size: var(--ffs-18);
    width: 90%;
}

#aboutus .desc .text p {
    font-size: var(--fs-14);
}


#aboutus .desc .link.global_button {
    justify-content: left;
    flex-wrap: wrap;
    padding: 20px;
    gap: 8px clamp(10px, 2vw, 20px);
}

#aboutus .box_carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    flex: 0 0 40%;
}

#aboutus .carousel {
    position: relative;
    width: 400px;
    max-width: 100%;
    max-height: 300px;
    aspect-ratio: 4/3;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    perspective: 1000px; /* Active la 3D */
}

#aboutus .carousel .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transition: 1s ease;
}

#aboutus .carousel .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 900px) {
    #aboutus .desc,
    #aboutus .box_carousel {
        flex: 0 0 90%;
    }
}

#work_example {
    background-color: var(--white);
}

#work_example .container {
    position: relative;
    overflow: hidden;
    padding-block: 4%;
}

#work_example .horizontal_box {
    display: flex;
    transition: transform 0.3s ease;
    cursor: grab;
}

#work_example .image {
    --padding-inline: 1vw;
    position: relative;
    flex: 0 0 auto;
    height: 600px;
    max-height: 80vw;
    width: clamp(350px, 30vw, 500px);
    max-width: 50vw;
    overflow: hidden;
    padding-inline: var(--padding-inline);
    transform: translateX(calc(var(--padding-inline) * -1));
    display: flex;
    justify-content: center;
    align-items: center;

    user-select: none;

}

#work_example .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;  /* Chrome, Safari */
    -khtml-user-drag: none;   /* Ancien Konqueror */
    -moz-user-drag: none;      /* Firefox */
    -o-user-drag: none;        /* Opera */
    user-drag: none;           /* Standard */
    pointer-events: none;      /* Empêche l’image de capter les clics */
}

#work_example .image .layer {
    position: absolute;
    max-width: calc(100% - (var(--padding-inline) * 4));
    width: 100%;
    height: auto;
    background: linear-gradient(to top, var(--black-fixed), var(--black-low-opacity-fixed), transparent);
    padding-inline: var(--padding-inline);
    padding-block: 20px 3vw;

    bottom: -10px;
    opacity: 0;
}

#work_example .image.hovered .layer,
#work_example .image:hover .layer {
    bottom: 0;
    opacity: 1;
}

#work_example .image .layer h3,
#work_example .image .layer p {
    color: var(--font-white-fixed);
    text-align: center;
    margin: 0;
    padding: .3vw;
}
#work_example .image .layer h3 {
    font-size: var(--fs-18);
}
#work_example .image .layer p {
    font-size: var(--fs-14);
}


#work_example .arrow {
    position: absolute;
    top: 50%;
    /* height: 100%; */
    transform: translateY(-50%);
    border: none;
    /* padding-inline: clamp(0px, calc(2vw - 10px), 10px); */
    cursor: pointer;
    z-index: 10;
}
#work_example .arrow svg {
    --size: var(--fs-48);
    height: var(--size);
    width: var(--size);
}
#work_example .arrow svg polyline {
    stroke: var(--white);
    stroke-width: 1;
}

#work_example .arrow.left {
    background: linear-gradient(to right, #fff6, transparent);
    left: 0;
}

#work_example .arrow.right {
    background: linear-gradient(to left, #fff6, transparent);
    right: 0;
}

#review {
    background: var(--white);
    padding-block: 15px 4%;
}

#review .top {
    text-align: center;
}

#review .top h2,
#review .top h3 {
    padding: 0;
    margin: 0;
}
#review .top h2 {
    font-size: var(--hp-ffs-18);
}
#review .top h3 {
    font-size: var(--hp-ffs-14);
}

#review .content {
    width: clamp(0px, 80%, 1820px);
    max-width: 1820px;
    margin: auto;
}

#review .content .head {
    display: flex;
    flex-wrap: wrap;
    row-gap: 15px;
    justify-content: space-between;
    align-items: end;
    margin-block: clamp(15px, 3vw, 50px);
}

#review .content .head .left span.title {
    font-size: var(--fs-24);
    font-weight: 500;
}
#review .content .head .left span.title a:hover {
    text-decoration: none;
}
#review .content .head .left span.title a > span:nth-child(1),
#review .content .head .left span.title a > span:nth-child(4) {
  color:var(--google-blue);
}
#review .content .head .left span.title a > span:nth-child(2),
#review .content .head .left span.title a > span:nth-child(6) {
  color: var(--google-red);
}
#review .content .head .left span.title a > span:nth-child(3) {
  color: var(--google-yellow);
}
#review .content .head .left span.title a > span:nth-child(5) {
  color: var(--google-green);
}

#review .content .head .left span.review {
    font-size: var(--fs-16);
}
#review .content .head .left .stars {
    color: var(--google-yellow);
}
#review .content .head .left .review .little {
    font-size: var(--fs-12);
}

#review .content .head .right {
    --padding: 8px;
    padding: var(--padding);
    margin-left: auto;
}
#review .content .head .right a {
    background-color: var(--google-blue);
    font-size: var(--fs-15);
    color: var(--font-white);
    padding: var(--padding);
    border-radius: 6px;
}

#review .content .custom_review {
    display: flex;
    justify-content:space-between;
    row-gap: 15px;
}

#review .square_review {
    width: 30%;
    padding: 1%;
    background-color: var(--white-low-dark);
    border-radius: 8px;
}

#review .square_review .info {
    display: flex;
    gap: 15px;
}
#review .square_review .profil_info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#review .square_review .profil_info .his_review {
    font-size: var(--fs-12);
    color: var(--font-black-a);
}
#review .square_review .profil_info .his_review .stars {
    font-size: var(--fs-16);
    color: var(--google-yellow);
}

#review .square_review .content_review {
    padding-block: 15px;
}

#review .square_review .ending {
    display: flex;
    align-content: center;
    gap: 15px;
}
#review .square_review .ending .logo {
    align-content: center;
    line-height: 1;
}

#review .square_review .ending .logo img {
    width: var(--fs-28);
}
#review .square_review .ending .text a {
    color: var(--google-blue);
    text-transform: capitalize;
}



@media screen and (max-width: 900px) {
    #review .content .custom_review {
        flex-wrap: wrap;
    }
    #review .square_review {
        width: calc(100% - 15px);
        padding: 15px;
    }
}