/* Widget Satisfaction - front-end styles
   Override the two variables below to match the site colors:
   .satisfaction-stats{--satisfaction-color:#38a4b9;--satisfaction-label:#444;} */

.satisfaction-stats{
--satisfaction-color:#088bcc;
--satisfaction-label:#003a6e;
display:flex;
flex-wrap:wrap;
align-items:flex-start;
justify-content:center;
gap:20px;
margin:auto;
padding:20px 0!important;
width:100%;
max-width:860px;
background:var(--blanc)
}

.satisfaction-stats .satisfaction-stat{
flex:1 1 0;
min-width:150px;
text-align:center;
opacity:0;
transform:translateY(20px);
transition:opacity .6s ease,transform .6s ease;
}

.satisfaction-stats.is-visible .satisfaction-stat{
opacity:1;
transform:none;
}

/* Small stagger between the four columns */
.satisfaction-stats.is-visible .satisfaction-stat:nth-child(2){transition-delay:.1s;}
.satisfaction-stats.is-visible .satisfaction-stat:nth-child(3){transition-delay:.2s;}
.satisfaction-stats.is-visible .satisfaction-stat:nth-child(4){transition-delay:.3s;}

.satisfaction-stats .satisfaction-value{
margin:0;
color:var(--satisfaction-color);
font-size:2em;
font-weight:700;
line-height:1;
letter-spacing:-.02em;
/* Keeps the digits aligned while the counter runs */
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum";
white-space:nowrap;
}

.satisfaction-stats .satisfaction-unit{
font-size:.9em;
font-weight:500;
margin-left:.05em;
vertical-align:super;
color:var(--satisfaction-color);
}
.satisfaction-stats .satisfaction-num{
color:var(--satisfaction-color); 
font-size:1.4em;
font-weight:700;  
}

.satisfaction-stats .satisfaction-label{
/* margin:12px 0 0 0; */
color:var(--satisfaction-label);
font-size:1em;
font-weight:700;
line-height:1;
}

.satisfaction-stats h5{
display:block;
width:100%;
margin:0 auto;
text-align:center;
}
.satisfaction-stats h5 a:hover{
background:var(--bleu);
color:white;   
}


@media screen and (max-width:700px){
.satisfaction-stats{
gap:30px 10px;
margin:40px 0;
}
.satisfaction-stats .satisfaction-stat{
flex:1 1 40%;
min-width:120px;
}
}

@media (prefers-reduced-motion:reduce){
.satisfaction-stats .satisfaction-stat{
opacity:1;
transform:none;
transition:none;
}
}