/* Widget Temoignages - suggested front-end CSS
   The two CSS variables --tm-visible and --tm-gap are set by the widget
   itself via inline style on .reviews. Override --tm-gap in your own CSS if
   you want a different spacing (30px is the default matched by the JS). */

.reviews{
position:relative;
max-width:1280px;
width:100%;
padding:0 100px 100px 100px;
/* overflow:hidden; */
/* Fallbacks in case the inline style is stripped somewhere */
--tm-visible:1;
--tm-gap:30px;
}
.reviews-viewport{
overflow-x:clip;
overflow-y:visible;
width:100%;
}
.reviews-track{
display:flex;
will-change:transform;
gap:var(--tm-gap);
width:100%;
}
.review{
/* Fit exactly --tm-visible items in the viewport, accounting for the gaps.
   Fixed via flex-basis; flex-grow:0 and flex-shrink:0 keep it locked. */
flex:0 0 calc((100% - (var(--tm-visible) - 1) * var(--tm-gap)) / var(--tm-visible));
box-sizing:border-box;
padding:20px;
text-align:left;
background:var(--vert);
border-radius:16px;
position:relative;
transition:all .5s;
position:relative;
}
.review:nth-child(even){
top:30px;    
}

.review::after{
content:'';
position:absolute;
bottom:-32px;
right:50px;
width:32px;
height:32px;
display:block;
background-repeat:no-repat;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41.91 41.91'%3E%3Cdefs%3E%3Cstyle%3E.cls-1{fill:%2300cda6;}%3C/style%3E%3C/defs%3E%3Cg data-name='Calque 2'%3E%3Cg id='Calque_1-2' data-name='Calque 1'%3E%3Cpolygon class='cls-1' points='0 0 41.91 0 41.91 41.91 0 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");    
}

.review > p{
font-weight:400;
font-size:.9em;
line-height:1.2em;
}
.review .auteur{
color:var(--bleuf);
font-weight:600;
font-size:120%;
margin-bottom:5px;
}
.review-note{
    margin:6px 0;
    font-size:18px;
    letter-spacing:2px;
    line-height:1;
}
.review-note .star{
    color:#ddd;
}
.review-note .star.is-on{
    color:#ddb97f;
}
.review-date{
    margin:0;
    font-size:12px;
    color:#888;
}
/* Arrows */
.reviews-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:64px;
    height:128px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    z-index:2;
    background-repeat:no-repeat;
    background-position:center;
    transition:all .15s;
}
.reviews-arrow.prev{
    left:0;
    background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 33.99 123.57' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m30.26 122.48-30.05-59.81a2 2 0 0 1 0-1.77l30.05-59.81a2 2 0 0 1 3.74.91v119.6a2 2 0 0 1 -3.74.88z' fill='%2300cda6'/%3E%3C/svg%3E");    transition:all .3s;
    transition:all .3s;
}
.reviews-arrow.next{
    right:0;
    background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 33.99 123.57' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3.72 122.48 30.06-59.81a2 2 0 0 0 0-1.77l-30.06-59.81a2 2 0 0 0 -3.72.91v119.6a2 2 0 0 0 3.72.88z' fill='%2300cda6'/%3E%3C/svg%3E");
    transition:all .3s;
}
.reviews-arrow.prev:hover{
    left:-6px;
}
.reviews-arrow.next:hover{
    right:-6px;
}

/* Empty state */
.reviews-empty{
    padding:20px;
    text-align:center;
    color:#999;
    font-style:italic;
    border:1px dashed #ccc;
    border-radius:6px;
    max-width:800px;
    margin:30px auto;
}
@media (max-width:600px){
    .reviews{
        padding:0 40px;
    }
    /* On mobile, cap to 1 visible even if the popup asked for more */
    .reviews{
        --tm-visible:1;
    }
}