/* 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{
--tm-teal:#0d5c6b;         /* same bubble color as the diploma page (.dpf-temos) */
position:relative;
max-width:1280px;
width:100%;
padding:15px 100px!important;
/* 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;
align-items:flex-start;
padding-bottom:20px;       /* room for the bubble tails */
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:18px 20px 20px 20px!important;
border-radius:8px;
background:var(--tm-teal);
color:#fff;
position:relative;
transition:all .5s;
text-align:left;
font-size:.9em;
line-height:1.4;
}
/* Speech bubble tail, bottom right */
.review::after{
content:'';
position:absolute;
right:40px;
bottom:-16px;
border-top:16px solid var(--tm-teal);
border-left:16px solid transparent;
}
/* Every other bubble sits lower (class set in PHP, copied on the clones) */
.review--low{
margin-top:30px;
}
.review p{
margin:0 0 12px 0;
color:#fff;
text-align:left;
}
.review p:last-child{
margin-bottom:0;
}
/* .review:nth-child(even){
top:30px;    
} */
.review > p{
font-weight:400;
/* font-size:.9em; */
/* line-height:1.2em; */
}
.review .auteur{
font-weight:700;
/* margin-bottom:5px; */
}
.review-note{
margin:6px 0;
font-size:18px;
letter-spacing:2px;
line-height:1;
}
.review-note .star{
    color:rgb(255 255 255 / .3);
}
.review-note .star.is-on{
    color:#ddb97f;
}
.review-date{
    margin:0;
    font-size:12px;
    color:rgb(255 255 255 / .75);
}
/* 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 xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.37 113.46'%3E%3Cpolyline points='27.92 113.24 .56 56.73 27.92 .22' fill='none' stroke='%230d5c6b' stroke-width='1.5' stroke-miterlimit='10'/%3E%3C/svg%3E");    transition:all .3s;
}
.reviews-arrow.next{
    right:0;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.37 113.46'%3E%3Cpolyline points='.45 113.24 27.82 56.73 .45 .22' fill='none' stroke='%230d5c6b' stroke-width='1.5' stroke-miterlimit='10'/%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!important;
    }
    /* On mobile, cap to 1 visible even if the popup asked for more */
    .reviews{
        --tm-visible:1;
    }
    .review{
    padding:16px 18px 18px 18px!important;
    }
    /* One bubble at a time : no staggering */
    .review--low{
    margin-top:0;
    }
    .reviews-arrow{width:48px;}
    .reviews-arrow.prev{left:-16px!important;}
    .reviews-arrow.next{right:-16px!important;}
    .reviews-arrow.prev:hover{left:-24px!important;}
    .reviews-arrow.next:hover{right:-24px!important;}    
}

/* Mobile (nov. 2026) : 1 témoignage à la fois (le style inline du widget en impose 3) et flèches entièrement visibles */
@media (max-width:600px){
    .reviews{--tm-visible:1 !important;}
    .reviews-arrow{width:36px;height:96px;background-size:auto 80px;}
    .reviews-arrow.prev{left:0!important;}
    .reviews-arrow.next{right:0!important;}
    .reviews-arrow.prev:hover{left:-4px!important;}
    .reviews-arrow.next:hover{right:-4px!important;}
}