/* ==========================================================================
   DataFirefly — page « Avis clients » (v1.38.0)
   Gabarit : page-templates/reviews.php · JS : assets/js/reviews.js
   Tout passe par les variables du thème (clair / sombre).
   ========================================================================== */

@property --df-rv-a{syntax:"<angle>"; inherits:false; initial-value:0deg}

.df-rv-page{
  --rv-gold:oklch(0.8 0.15 82);
  --rv-ok:oklch(0.62 0.13 160);
  --rv-ease:cubic-bezier(.2,.75,.2,1);
  overflow-x:clip;
}
.df-rv-ico{flex:none; width:20px; height:20px}

/* ---------- Étoiles ---------- */
.df-rv-stars{position:relative; display:inline-flex; line-height:0; vertical-align:middle}
.df-rv-stars svg{width:16px; height:16px; fill:currentColor; flex:none}
.df-rv-stars-bg,.df-rv-stars-fg{display:inline-flex; gap:2px}
.df-rv-stars-bg{color:color-mix(in oklch, var(--ink-3) 28%, transparent)}
.df-rv-stars-fg{position:absolute; inset:0; color:var(--rv-gold); clip-path:inset(0 calc(100% - var(--v)) 0 0); transition:clip-path 1.1s var(--rv-ease)}
.df-rv-stars.is-lg svg{width:22px; height:22px}
.df-rv-stars.is-lg .df-rv-stars-bg,.df-rv-stars.is-lg .df-rv-stars-fg{gap:3px}
.df-rv-stars.is-sm svg{width:12px; height:12px}
.df-rv-stars.is-sm .df-rv-stars-bg,.df-rv-stars.is-sm .df-rv-stars-fg{gap:1px}
.df-rv-js .df-rv-score:not(.is-in) .df-rv-stars-fg,
.df-rv-js .df-rv-card:not(.is-in) .df-rv-stars-fg{clip-path:inset(0 100% 0 0)}

/* ---------- En-tête ---------- */
.df-rv-hero{position:relative; padding:8px 0 40px; isolation:isolate}
.df-rv-hero-bg{position:absolute; inset:-120px 0 -40px; z-index:-1; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 55%, transparent); mask-image:linear-gradient(#000 55%, transparent)}
.df-rv-hero-bg::before{content:""; position:absolute; inset:0;
  background-image:radial-gradient(color-mix(in oklch, var(--ink-3) 22%, transparent) 1px, transparent 1.2px);
  background-size:26px 26px; opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 35%, #000, transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 70% 35%, #000, transparent 75%)}
.df-rv-hero-bg span{position:absolute; border-radius:50%; filter:blur(70px); opacity:.55}
.df-rv-hero-bg span:nth-child(1){width:460px; height:460px; right:6%; top:60px; background:color-mix(in oklch, var(--amber) 45%, transparent); animation:df-rv-drift1 18s ease-in-out infinite alternate}
.df-rv-hero-bg span:nth-child(2){width:360px; height:360px; right:30%; top:220px; background:color-mix(in oklch, var(--cool) 35%, transparent); animation:df-rv-drift2 22s ease-in-out infinite alternate}
.df-rv-hero-bg span:nth-child(3){width:260px; height:260px; right:2%; top:330px; background:color-mix(in oklch, var(--rv-gold) 30%, transparent); animation:df-rv-drift1 26s ease-in-out infinite alternate-reverse}
@keyframes df-rv-drift1{to{transform:translate(-60px,40px) scale(1.12)}}
@keyframes df-rv-drift2{to{transform:translate(70px,-30px) scale(.9)}}

.df-rv-hero-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:64px; align-items:center; padding-top:24px; padding-bottom:24px}
.df-rv-hero-copy .df-eyebrow{margin-bottom:18px}
.df-rv-title{margin:0 0 22px; max-width:15ch}
.df-rv-title em{font-style:italic; color:var(--amber-text)}
.df-rv-hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.df-rv-hero-cta .df-rv-ico{width:18px; height:18px; transition:transform .25s var(--rv-ease)}
.df-rv-hero-cta a:hover .df-rv-ico{transform:translateX(3px)}

/* Carte de note */
.df-rv-score{position:relative; padding:30px; border-radius:24px; border:1px solid var(--line);
  background:color-mix(in oklch, var(--card) 86%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:var(--shadow-lg)}
.df-rv-score::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--df-rv-a), transparent 0 62%, color-mix(in oklch, var(--amber) 85%, transparent) 78%, color-mix(in oklch, var(--rv-gold) 70%, transparent) 86%, transparent 94%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:df-rv-spin 7s linear infinite}
@keyframes df-rv-spin{to{--df-rv-a:360deg}}
.df-rv-js .df-rv-score{opacity:0; transform:translateY(16px) scale(.98); transition:opacity .8s var(--rv-ease), transform .8s var(--rv-ease)}
.df-rv-js .df-rv-score.is-in{opacity:1; transform:none}

.df-rv-score-top{display:flex; align-items:center; gap:22px; padding-bottom:22px; border-bottom:1px solid var(--line)}
.df-rv-score-n{font-size:76px; line-height:.9; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.df-rv-score-n small{font-size:24px; color:var(--ink-3); margin-left:4px; letter-spacing:0}
.df-rv-score-meta{display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--ink-3)}

.df-rv-dist{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:9px}
.df-rv-dist li{display:grid; grid-template-columns:30px 1fr 28px; align-items:center; gap:12px; font-size:13px; color:var(--ink-3)}
.df-rv-dist-l{display:inline-flex; align-items:center; gap:3px; font-weight:600; color:var(--ink-2)}
.df-rv-dist-l svg{width:11px; height:11px; fill:var(--rv-gold)}
.df-rv-dist-bar{height:8px; border-radius:99px; background:var(--bg-3); overflow:hidden}
.df-rv-dist-bar span{display:block; height:100%; width:var(--w); border-radius:inherit; background:linear-gradient(90deg, var(--amber), color-mix(in oklch, var(--amber) 55%, var(--rv-gold))); transform-origin:left; transition:transform 1.2s var(--rv-ease)}
.df-rv-dist li:nth-child(2) span{transition-delay:.08s}
.df-rv-dist li:nth-child(3) span{transition-delay:.16s}
.df-rv-dist li:nth-child(4) span{transition-delay:.24s}
.df-rv-dist li:nth-child(5) span{transition-delay:.32s}
.df-rv-js .df-rv-score:not(.is-in) .df-rv-dist-bar span{transform:scaleX(0)}
.df-rv-dist-n{text-align:right; font-variant-numeric:tabular-nums}

.df-rv-facts{list-style:none; margin:22px 0 0; padding:18px 0 0; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(auto-fit, minmax(90px,1fr)); gap:14px}
.df-rv-facts li{display:flex; flex-direction:column; gap:2px}
.df-rv-facts b{font-family:Georgia, "Times New Roman", serif; font-weight:400; font-size:28px; line-height:1.1; color:var(--ink); font-variant-numeric:tabular-nums}
.df-rv-facts span{font-size:12.5px; color:var(--ink-3)}

/* ---------- Bandeau défilant ---------- */
.df-rv-marquee{padding:12px 0 8px; display:grid; gap:14px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent)}
.df-rv-marquee-row{overflow:hidden}
.df-rv-marquee-track{display:flex; width:max-content; animation:df-rv-scroll var(--dur,60s) linear infinite}
.df-rv-marquee-row.is-rev .df-rv-marquee-track{animation-direction:reverse}
.df-rv-marquee-row:hover .df-rv-marquee-track{animation-play-state:paused}
@keyframes df-rv-scroll{to{transform:translateX(-50%)}}
.df-rv-marquee-set{list-style:none; margin:0; padding:0 14px 0 0; display:flex; gap:14px}
.df-rv-chip{display:inline-flex; align-items:center; gap:12px; padding:11px 18px; border-radius:99px; border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow); white-space:nowrap; font-size:14px; color:var(--ink-2); transition:border-color .2s, transform .3s var(--rv-ease)}
.df-rv-chip:hover{border-color:color-mix(in oklch, var(--amber) 50%, var(--line)); transform:translateY(-2px)}
.df-rv-chip q{quotes:"“" "”"}
.df-rv-chip-who{font-size:12px; font-weight:600; color:var(--ink-3)}
.df-rv-chip-who::before{content:"— "}

/* ---------- Tous les avis ---------- */
.df-rv-all{padding:72px 0 64px; scroll-margin-top:80px}
.df-rv-all-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px 40px; flex-wrap:wrap; margin-bottom:34px}
.df-rv-all-head .df-eyebrow{margin-bottom:12px}
.df-rv-tools{display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px}
.df-rv-tools[hidden]{display:none}
.df-rv-chips{display:flex; flex-wrap:wrap; gap:8px}
.df-rv-filter{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:99px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .15s}
.df-rv-filter:hover{border-color:var(--ink-3); color:var(--ink)}
.df-rv-filter:active{transform:scale(.97)}
.df-rv-filter i{width:8px; height:8px; border-radius:50%; background:var(--c)}
.df-rv-filter span{font-size:11.5px; font-weight:600; padding:1px 7px; border-radius:99px; background:var(--chip); color:var(--ink-3); font-variant-numeric:tabular-nums}
.df-rv-filter.is-on{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.df-rv-filter.is-on span{background:color-mix(in oklch, var(--bg) 18%, transparent); color:var(--bg)}
.df-rv-tools-r{display:flex; align-items:center; gap:18px; flex-wrap:wrap}

.df-rv-switch{display:inline-flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--ink-2); cursor:pointer; user-select:none}
.df-rv-switch input{position:absolute; opacity:0; width:1px; height:1px}
.df-rv-switch span{position:relative; width:36px; height:20px; border-radius:99px; background:var(--bg-3); border:1px solid var(--line); transition:background .2s, border-color .2s}
.df-rv-switch span::after{content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--card); box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .25s var(--rv-ease)}
.df-rv-switch input:checked + span{background:var(--amber); border-color:var(--amber)}
.df-rv-switch input:checked + span::after{transform:translateX(16px)}
.df-rv-switch input:focus-visible + span{outline:2px solid var(--amber); outline-offset:2px}

.df-rv-sort select{appearance:none; -webkit-appearance:none; font:inherit; font-size:13.5px; font-weight:600; color:var(--ink); background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23889' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; border:1px solid var(--line); border-radius:10px; padding:8px 34px 8px 12px; cursor:pointer}
.df-rv-sort select:hover{border-color:var(--ink-3)}

/* Grille en colonnes */
.df-rv-grid{columns:3 300px; column-gap:20px}
.df-rv-card{position:relative; display:flex; flex-direction:column; gap:12px; break-inside:avoid; margin:0 0 20px; padding:22px 22px 18px; border-radius:20px; border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow); overflow:hidden; isolation:isolate;
  transition:transform .45s var(--rv-ease), box-shadow .35s, border-color .35s, opacity .6s var(--rv-ease)}
.df-rv-card::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), var(--glow), transparent 45%)}
.df-rv-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:color-mix(in oklch, var(--amber) 38%, var(--line))}
.df-rv-card:hover::before{opacity:1}
.df-rv-card:target{border-color:var(--amber); box-shadow:0 0 0 3px var(--glow), var(--shadow-lg)}
.df-rv-js .df-rv-card{opacity:0; transform:translateY(22px) scale(.985)}
.df-rv-js .df-rv-card.is-in{opacity:1; transform:none; transition-delay:var(--d,0s), var(--d,0s), 0s, var(--d,0s)}
.df-rv-js .df-rv-card.is-in:hover{transform:translateY(-4px); transition-delay:0s}
.df-rv-js .df-rv-card.is-more,
.df-rv-card.is-hidden{display:none}

.df-rv-card-q{position:absolute; top:16px; right:18px; color:var(--amber); opacity:.14; transition:opacity .35s, transform .5s var(--rv-ease)}
.df-rv-card-q .df-rv-ico{width:46px; height:46px}
.df-rv-card:hover .df-rv-card-q{opacity:.3; transform:rotate(-6deg) scale(1.06)}

.df-rv-card-head{display:flex; align-items:center; gap:12px; padding-right:48px}
.df-rv-avatar{flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:16px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.25);
  background:linear-gradient(135deg, oklch(0.72 0.12 var(--h)), oklch(0.52 0.13 calc(var(--h) + 50)));
  box-shadow:0 0 0 3px var(--card), 0 0 0 4px var(--line)}
.df-rv-card-who{display:flex; flex-direction:column; gap:3px; min-width:0}
.df-rv-card-who b{font-size:15px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.df-rv-card-who > span{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:12.5px; color:var(--ink-3)}
.df-rv-verified{display:inline-flex; align-items:center; gap:4px; color:var(--rv-ok); font-weight:600}
.df-rv-verified .df-rv-ico{width:14px; height:14px}

.df-rv-card-body{position:relative}
.df-rv-text{font-size:15.5px; line-height:1.65; color:var(--ink-2); overflow-wrap:anywhere}
.df-rv-text p{margin:0 0 .6em}
.df-rv-text p:last-child{margin-bottom:0}
.df-rv-card-body.is-clamped{max-height:11.6em; overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 62%, transparent); mask-image:linear-gradient(#000 62%, transparent); transition:max-height .5s var(--rv-ease)}
.df-rv-card-body.is-clamped.is-open{max-height:none; -webkit-mask-image:none; mask-image:none}

.df-rv-card-acts{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:-2px}
.df-rv-link{padding:0; border:0; background:none; font:inherit; font-size:13px; font-weight:600; color:var(--amber-text); cursor:pointer; text-align:left}
.df-rv-link:hover{text-decoration:underline; text-underline-offset:3px}
.df-rv-link.is-tr{color:var(--ink-3); font-weight:500}
.df-rv-link.is-tr:hover{color:var(--ink)}

.df-rv-card-prod{display:flex; align-items:center; gap:12px; margin-top:4px; padding:12px 0 0; border-top:1px solid var(--line); text-decoration:none; color:var(--ink)}
.df-rv-card-thumb{position:relative; flex:none; width:44px; height:44px; border-radius:11px; background:var(--bg-2); border:1px solid var(--line)}
.df-rv-card-thumb img{width:100%; height:100%; object-fit:cover; border-radius:10px; display:block}
.df-rv-card-thumb i{position:absolute; right:-6px; bottom:-6px; font-style:normal; font-size:9px; font-weight:800; letter-spacing:.02em; line-height:1; color:#fff; background:var(--c); padding:3px 4px; border-radius:6px; box-shadow:0 0 0 2px var(--card)}
.df-rv-card-prod-t{flex:1; min-width:0; font-size:13.5px; font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .2s}
.df-rv-card-prod .df-rv-ico{width:16px; height:16px; color:var(--ink-3); transition:transform .25s var(--rv-ease), color .2s}
.df-rv-card-prod:hover .df-rv-card-prod-t{color:var(--amber-text)}
.df-rv-card-prod:hover .df-rv-ico{transform:translateX(3px); color:var(--amber-text)}

.df-rv-empty{text-align:center; padding:40px 0; color:var(--ink-3)}
.df-rv-more{display:flex; justify-content:center; margin-top:16px}
.df-rv-more [data-df-rv-left]{color:var(--ink-3); font-weight:500}
.df-rv-more[hidden]{display:none}
.df-rv-none{padding:20px 15px 60px}

/* ---------- Transparence ---------- */
.df-rv-policy{padding:64px 0; background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.df-rv-policy-head{margin-bottom:28px}
.df-rv-policy-head .df-eyebrow{margin-bottom:10px}
.df-rv-policy-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:16px}
.df-rv-policy-item{padding:22px; border-radius:18px; background:var(--card); border:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.df-rv-policy-item b{font-size:15px; color:var(--ink)}
.df-rv-policy-item p{margin:0; font-size:14px; line-height:1.6; color:var(--ink-2)}
.df-rv-policy-ico{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; margin-bottom:6px; color:var(--amber-text); background:var(--glow)}

/* ---------- Appel à l'avis ---------- */
.df-rv-cta{padding:64px 0 88px}
.df-rv-cta-card{position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap; padding:44px 48px; border-radius:28px; border:1px solid var(--line);
  background:linear-gradient(135deg, color-mix(in oklch, var(--amber) 14%, var(--card)), var(--card) 70%)}
.df-rv-cta-card h2{margin:0 0 8px}
.df-rv-cta-card p{margin:0; color:var(--ink-2); max-width:52ch}
.df-rv-cta-btns{display:flex; flex-wrap:wrap; gap:12px}
.df-rv-cta-glow{position:absolute; z-index:-1; width:380px; height:380px; right:-80px; top:-160px; border-radius:50%; background:color-mix(in oklch, var(--amber) 35%, transparent); filter:blur(60px); animation:df-rv-drift2 14s ease-in-out infinite alternate}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .df-rv-hero-grid{grid-template-columns:1fr; gap:36px}
  .df-rv-title{max-width:20ch}
  .df-rv-score{max-width:560px}
}
@media (max-width:640px){
  .df-rv-hero{padding-bottom:16px}
  .df-rv-score{padding:22px}
  .df-rv-score-n{font-size:60px}
  .df-rv-score-top{gap:16px}
  .df-rv-chip{font-size:13px; padding:9px 14px}
  .df-rv-all{padding:52px 0 44px}
  .df-rv-tools,.df-rv-tools-r{width:100%}
  .df-rv-tools-r{justify-content:space-between}
  .df-rv-card{padding:18px 18px 16px}
  .df-rv-cta-card{padding:30px 24px}
  .df-rv-cta-btns,.df-rv-cta-btns .df-btn{width:100%; justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .df-rv-hero-bg span,.df-rv-cta-glow,.df-rv-score::before{animation:none}
  .df-rv-marquee{-webkit-mask-image:none; mask-image:none}
  .df-rv-marquee-row{overflow-x:auto}
  .df-rv-marquee-track{animation:none}
  .df-rv-marquee-set[aria-hidden]{display:none}
  .df-rv-js .df-rv-card,.df-rv-js .df-rv-score{opacity:1; transform:none; transition:none}
  .df-rv-stars-fg,.df-rv-dist-bar span{transition:none}
}