/* Section « Ils en parlent sur les réseaux » : carrousel de vidéos TikTok façon « shoppable video ».
   La vidéo du centre est agrandie et se lit toute seule (sans le son) ; les voisines sont plus petites. */
.reviews { background: var(--color-bg); padding: 96px 0; overflow: hidden; }
.reviews[hidden] { display: none; }
.reviews-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.reviews-head { max-width: 640px; margin: 0 auto 36px; text-align: center; }
.reviews-eyebrow { margin: 0 0 12px; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-dark); }
.reviews-title { margin: 0 0 14px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1.12; color: var(--color-ink); }
.reviews-text { margin: 0; font-family: var(--font-sans); font-size: 1.02rem; line-height: 1.65; color: var(--color-ink-soft); }

/* ---------- Scène ---------- */
.reviews-stage { position: relative; width: 100%; overflow: hidden; touch-action: pan-y; }
.reviews-track { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.reviews-card {
  position: absolute; left: 50%; top: 50%; border-radius: 18px; overflow: hidden; background: #3A2530; color: var(--color-white);
  box-shadow: 0 10px 28px rgba(58,37,48,0.14); transform-origin: center;
  transition: transform 0.6s var(--ease), opacity 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.reviews-card.is-active { box-shadow: none; } /* pas d'ombre sous la vidéo du milieu */
.reviews-card.is-far { opacity: 0; pointer-events: none; }

.reviews-media { position: absolute; inset: 0; background: linear-gradient(160deg, #D47B9F 0%, #C46A93 55%, #5A3A48 100%); }
/* Le lecteur TikTok affiche ses propres boutons (j'aime, commentaires, partages, réglages) que ses options
   ne permettent pas toutes de couper : on agrandit la vidéo et on la recadre (le carré .reviews-card masque
   les bords, surtout à droite). Ajuster --rv-zoom (1 = pas de recadrage) et --rv-origin-x si besoin. */
.reviews-card { --rv-zoom: 1.28; --rv-origin-x: 22%; }
.reviews-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(var(--rv-zoom)); transform-origin: var(--rv-origin-x) 46%; border: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease); }
/* Aperçu (miniature) : seule image montrée sur les cartes de côté ; sur la carte du centre elle recouvre le lecteur
   pendant son chargement, puis s'efface quand la vidéo tourne vraiment (plus de fond rose ni d'écran noir). */
.reviews-poster {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none;
  transform: scale(var(--rv-zoom)); transform-origin: var(--rv-origin-x) 46%; transition: opacity 0.45s var(--ease);
}
.reviews-card.is-active.is-framed .reviews-poster, .reviews-card.is-active.is-playing .reviews-poster { opacity: 0; }
.reviews-card.poster-fail .reviews-poster { display: none; }
.reviews-card.poster-fail:not(.is-playing) .reviews-media::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; z-index: 1;
  background: rgba(255, 255, 255, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D47B9F' d='M9 6.2v11.6a.8.8 0 0 0 1.2.7l9-5.8a.8.8 0 0 0 0-1.4l-9-5.8A.8.8 0 0 0 9 6.2z'/%3E%3C/svg%3E") center / 56% no-repeat;
}
.reviews-card.is-framed .reviews-media iframe { opacity: 1; }
.reviews-shade { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.28) 100%); }
.reviews-hit { position: absolute; inset: 0; z-index: 3; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; }
.reviews-card.is-active .reviews-hit { cursor: default; }
.reviews-card.is-active.has-player .reviews-hit { cursor: pointer; }
.reviews-hit:focus-visible { outline: 3px solid var(--color-white); outline-offset: -6px; }

/* Crédit du créateur (lien vers la vidéo d'origine) */
.reviews-credit {
  position: absolute; z-index: 5; top: 14px; left: 14px; max-width: calc(100% - 90px); padding: 6px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.5); color: var(--color-white); font-family: var(--font-sans); font-size: 0.74rem; font-weight: 700; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reviews-credit:hover { background: rgba(0, 0, 0, 0.75); }
.reviews-credit:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }

/* Boutons son / pause (vidéo du centre seulement) */
.reviews-controls { position: absolute; z-index: 6; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 10px; }
.reviews-card:not(.is-active) .reviews-controls, .reviews-card:not(.has-player) .reviews-controls { display: none; }
.reviews-ctl {
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(70, 70, 70, 0.62); color: var(--color-white); backdrop-filter: blur(4px); transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.reviews-ctl:hover { background: rgba(20, 20, 20, 0.85); transform: scale(1.06); }
.reviews-ctl:focus-visible { outline: 3px solid var(--color-white); outline-offset: 2px; }
.reviews-ctl svg { width: 24px; height: 24px; }
.reviews-ctl .ic-b { display: none; }
.reviews-card.is-muted .reviews-mute .ic-a { display: block; }
.reviews-card:not(.is-muted) .reviews-mute .ic-a { display: none; }
.reviews-card:not(.is-muted) .reviews-mute .ic-b { display: block; }
.reviews-card.is-paused .reviews-pp .ic-a { display: none; }
.reviews-card.is-paused .reviews-pp .ic-b { display: block; }

/* Fiche produit liée : photo + nom + prix + bouton « + » */
.reviews-product { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 12px; }
.reviews-pthumb { flex: 0 0 auto; width: 60px; height: 66px; border-radius: 8px; overflow: hidden; background: #fff; display: block; }
.reviews-pthumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.reviews-pinfo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--color-white); text-decoration: none; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.reviews-pname { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reviews-pprice { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; }
.reviews-pinfo:hover .reviews-pname { text-decoration: underline; }
.reviews-add {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; border: 0; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
  background: var(--color-white); color: #111; transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.reviews-add:hover { transform: scale(1.08); }
.reviews-add:focus-visible { outline: 3px solid var(--color-white); outline-offset: 2px; }
.reviews-add svg { width: 22px; height: 22px; }
.reviews-add .ic-b { display: none; }
.reviews-add.is-added { background: var(--color-accent-dark); color: var(--color-white); }
.reviews-add.is-added .ic-a { display: none; }
.reviews-add.is-added .ic-b { display: block; }
.reviews-soldout { flex: 0 0 auto; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: #333; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; }

/* Consentement : rien n'est chargé depuis TikTok tant qu'on n'a pas cliqué */
.reviews-gate {
  position: absolute; inset: 0; z-index: 4; padding: 24px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
  background: linear-gradient(160deg, rgba(212,123,159,0.96), rgba(90,58,72,0.98)); padding-bottom: 96px;
}
.reviews-gate-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--color-white); color: var(--color-accent-dark); display: flex; align-items: center; justify-content: center; }
.reviews-gate-icon svg { width: 28px; height: 28px; margin-left: 3px; }
.reviews-gate-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.reviews-gate-text { margin: 0; font-family: var(--font-sans); font-size: 0.8rem; line-height: 1.5; opacity: 0.88; }
.reviews-gate-btn { margin-top: 4px; padding: 12px 22px; border-radius: 999px; border: 0; cursor: pointer; background: var(--color-white); color: var(--color-accent-dark); font-family: var(--font-sans); font-size: 0.92rem; font-weight: 700; transition: transform 0.25s var(--ease); }
.reviews-gate-btn:hover { transform: translateY(-2px); }
.reviews-gate-btn:focus-visible { outline: 3px solid var(--color-white); outline-offset: 3px; }

/* Flèches */
.reviews-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 30; width: 48px; height: 48px; border: 0; background: transparent; color: var(--color-ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.reviews-nav svg { width: 30px; height: 30px; }
.reviews-prev { left: 10px; }
.reviews-next { right: 10px; }
.reviews-prev:hover:not(:disabled) { transform: translateY(-50%) translateX(-3px); }
.reviews-next:hover:not(:disabled) { transform: translateY(-50%) translateX(3px); }
.reviews-nav:disabled { opacity: 0.2; cursor: default; }
.reviews-nav:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; border-radius: 8px; }

.reviews-note { margin: 12px auto 0; max-width: 640px; text-align: center; font-family: var(--font-sans); font-size: 0.78rem; line-height: 1.5; color: var(--color-ink-soft); }
.reviews-note:first-of-type { margin-top: 18px; }

.reviews.js-anim .rv-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.reviews.js-anim .rv-reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .reviews { padding: 56px 0; }
  .reviews-inner { padding: 0 20px; }
  .reviews-head { margin-bottom: 24px; }
  .reviews-nav { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.85); border-radius: 50%; box-shadow: 0 4px 14px rgba(58,37,48,0.18); }
  .reviews-nav svg { width: 22px; height: 22px; }
  .reviews-prev { left: 6px; }
  .reviews-next { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-card, .reviews-media iframe { transition: none; }
  .reviews.js-anim .rv-reveal { opacity: 1; transform: none; transition: none; }
}


/* Écran de consentement TikTok : aucun lecteur distant n'est créé avant accord. */
.reviews-consent-gate {
  position: absolute; inset: 18px; z-index: 20; display: flex; align-items: center; justify-content: center;
  padding: 22px; border-radius: 22px; background: rgba(248, 244, 242, 0.96); color: #35262d;
  text-align: center;
}
.reviews-consent-gate[hidden] { display: none; }
.reviews-consent-box { width: min(100%, 460px); padding: 28px; border-radius: 18px; background: #fff; box-shadow: 0 12px 35px rgba(38, 22, 29, 0.12); }
.reviews-consent-box h3 { margin: 0 0 12px; font-size: 1.2rem; }
.reviews-consent-box p { margin: 0 0 20px; line-height: 1.55; }
.reviews-consent-button { border: 0; border-radius: 999px; padding: 13px 22px; background: #392b31; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.reviews-consent-button:hover { background: #624451; }
.reviews-consent-button:focus-visible { outline: 3px solid #c46a93; outline-offset: 3px; }