/* ═══════════════════════════════════════════════════════════════════════════
   ASSUGERIS — Bandeau d'avis (carrousel infini)
   Deux états :
     • skeleton  → aucun avis réel encore : cartes « camouflées » (motif quadrillé)
                   qui défilent, sans jamais afficher de faux témoignage.
     • live      → avis réels fournis via window.ASSUGERIS_REVIEWS (ou Trustpilot).
   Injecté avant le <footer> par /assets/reviews.js. Aligné sur la charte.
   ═══════════════════════════════════════════════════════════════════════════ */
.reviews-band {
    --rv-burgundy: var(--burgundy, #7B2D3B);
    --rv-charcoal: var(--charcoal, #2D3436);
    --rv-gray200: var(--gray-200, #E5E7EB);
    --rv-gray500: var(--gray-500, #6B7280);
    --rv-cream: var(--cream, #F7F4EF);
    background: var(--rv-cream);
    padding: clamp(40px, 6vw, 64px) 0;
    overflow: hidden;
    font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
    border-top: 1px solid var(--rv-gray200);
    /* Perf : ne pas peindre le bandeau (ni animer le marquee) hors écran,
       et réserver sa hauteur pour éviter tout décalage (CLS). */
    content-visibility: auto;
    contain-intrinsic-size: auto 460px;
}
.reviews-head { text-align: center; max-width: 720px; margin: 0 auto 30px; padding: 0 20px; }
.reviews-tag {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--rv-burgundy); background: var(--burgundy-pale, #F5EAEC);
    padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
.reviews-title {
    font-family: 'Playfair Display', 'Playfair Fallback', serif;
    font-size: clamp(1.4rem, 3.4vw, 2rem); font-weight: 700; color: var(--rv-charcoal);
    line-height: 1.2; margin: 0 0 10px;
}
.reviews-sub { color: var(--rv-gray500); font-size: 0.98rem; line-height: 1.55; margin: 0; }

/* Piste défilante (marquee) */
.reviews-viewport { position: relative; }
.reviews-viewport::before, .reviews-viewport::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.reviews-viewport::before { left: 0; background: linear-gradient(90deg, var(--rv-cream), transparent); }
.reviews-viewport::after { right: 0; background: linear-gradient(270deg, var(--rv-cream), transparent); }
.reviews-track {
    display: flex; gap: 20px; width: max-content;
    animation: rv-scroll 48s linear infinite;
}
.reviews-viewport:hover .reviews-track { animation-play-state: paused; }
@keyframes rv-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Carte */
.rev-card {
    width: 320px; flex: 0 0 320px; background: #fff;
    border: 1px solid var(--rv-gray200); border-radius: 16px; padding: 22px;
    box-shadow: 0 8px 26px rgba(45,52,54,0.05);
    position: relative; overflow: hidden;
}
.rev-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rev-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.rev-stars { letter-spacing: 2px; font-size: 0.95rem; }
.rev-name { font-weight: 700; color: var(--rv-charcoal); font-size: 0.95rem; }
.rev-meta { font-size: 0.8rem; color: var(--rv-gray500); }
.rev-text { color: #374151; font-size: 0.92rem; line-height: 1.5; }
.rev-source { margin-top: 14px; font-size: 0.76rem; color: var(--rv-gray500); display: flex; align-items: center; gap: 6px; }

/* ── État skeleton (camouflage « prototype quadrillé ») ── */
.rev-card--skeleton .sk { background: #ECE7DF; border-radius: 6px; }
.rev-card--skeleton .rev-avatar { background: #E3DCD1; }
.rev-card--skeleton .sk-line { height: 11px; margin: 7px 0; }
.rev-card--skeleton .sk-line.w40 { width: 40%; }
.rev-card--skeleton .sk-line.w60 { width: 60%; }
.rev-card--skeleton .sk-line.w90 { width: 90%; }
.rev-card--skeleton .sk-line.w75 { width: 75%; }
.rev-card--skeleton .sk-stars { width: 96px; height: 14px; margin-bottom: 4px; }
/* Voile quadrillé + shimmer par-dessus toute la carte */
.rev-card--skeleton::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(123,45,59,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(123,45,59,0.05) 1px, transparent 1px);
    background-size: 16px 16px;
}
.rev-card--skeleton::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
    background-size: 220% 100%;
    animation: rv-shimmer 2.4s ease-in-out infinite;
}
@keyframes rv-shimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } }

.reviews-foot { text-align: center; margin-top: 28px; padding: 0 20px; }
.reviews-badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.84rem; color: var(--rv-gray500);
    background: #fff; border: 1px solid var(--rv-gray200); border-radius: 999px; padding: 9px 18px;
}
.reviews-badge strong { color: var(--rv-charcoal); }

@media (max-width: 600px) { .rev-card { width: 270px; flex-basis: 270px; } }
@media (prefers-reduced-motion: reduce) {
    .reviews-track { animation-duration: 0s; animation: none; }
    .rev-card--skeleton::before { animation: none; }
    .reviews-viewport { overflow-x: auto; }
}