/* ============================================================
   CBD PURPLE — Avis Trustpilot (front)
   Reproduction fidèle du bloc "Reviews" de la maquette Refonte CRO.
   Tokens et valeurs repris de styles.css (:root) + home.css du design.
   Scoping .cptp pour être indépendant du thème.
   ============================================================ */
.cptp {
  --cptp-magenta: #bb3ab0;
  --cptp-purple:  #9747ff;
  --cptp-violet:  #7c43e8;
  --cptp-teal:    #2ea6b3;
  --cptp-yellow:  #ffd633;
  --cptp-ink:     #1a0f24;
  --cptp-text:    #211726;
  --cptp-text-2:  #6a5d72;
  --cptp-muted:   #9a8fa3;
  --cptp-line:    #ece7f0;
  --cptp-line-2:  #f4f1f7;
  --cptp-tint:    #f6eefb;
  --cptp-grad:    linear-gradient(115deg, #bb3ab0 0%, #9747ff 55%, #7c43e8 100%);
  --cptp-r-lg:    24px;
  --cptp-maxw:    1280px;
  --cptp-gut:     clamp(16px, 4vw, 40px);

  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--cptp-text);
  padding-block: clamp(48px, 7vw, 92px);
}
.cptp *, .cptp *::before, .cptp *::after { box-sizing: border-box; }

.cptp-wrap { max-width: var(--cptp-maxw); margin-inline: auto; padding-inline: var(--cptp-gut); }

/* En-tête de section */
.cptp-head { text-align: center; max-width: 640px; margin: 0 auto clamp(28px, 4vw, 48px); }
/* En-têtes : on force le style maquette (le thème surcharge h2 / titres de section). */
.cptp .cptp-eyebrow {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 13px !important; font-weight: 700 !important; letter-spacing: .14em !important;
  text-transform: uppercase !important; color: var(--cptp-magenta) !important;
  margin: 0 !important; padding: 0 !important; line-height: 1.2 !important;
}
.cptp .cptp-eyebrow svg { width: 14px; height: 14px; flex: 0 0 auto; }
.cptp .cptp-title {
  margin: 10px 0 0 !important; padding: 0 !important;
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: clamp(28px, 3.6vw, 42px) !important; font-weight: 800 !important;
  line-height: 1.04 !important; letter-spacing: -.015em !important;
  color: var(--cptp-ink) !important; text-transform: none !important; text-align: center !important;
}

/* Rail horizontal scroll-snap */
.cptp-rail {
  display: flex; gap: 18px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 8px 0; scrollbar-width: thin;
}
.cptp-rail > * { scroll-snap-align: start; flex: 0 0 auto; }
.cptp-rail::-webkit-scrollbar { height: 8px; }
.cptp-rail::-webkit-scrollbar-thumb { background: var(--cptp-line); border-radius: 99px; }

/* Carte avis (lien vers Trustpilot, nouvel onglet) */
.cptp-card {
  width: 340px; background: #fff; border: 1px solid var(--cptp-line);
  border-radius: var(--cptp-r-lg); padding: 24px;
  display: flex; flex-direction: column;
  text-decoration: none !important; color: var(--cptp-text) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cptp-card:visited, .cptp-card:hover, .cptp-card:focus { color: var(--cptp-text) !important; text-decoration: none !important; }
.cptp-card:hover,
.cptp-card:focus-visible {
  transform: translateY(-2px);
  border-color: #e3d6ee;
  box-shadow: 0 10px 30px rgba(124, 67, 232, .12), 0 2px 8px rgba(26, 15, 36, .05);
}

.cptp-card-top { display: flex; align-items: center; justify-content: space-between; }
.cptp-stars { display: inline-flex; gap: 1px; position: relative; }
.cptp-star { color: #e4dceb; }
.cptp-star.is-on { color: var(--cptp-yellow); }
.cptp-quote { color: var(--cptp-tint); display: inline-flex; }

.cptp-text {
  margin: 14px 0 18px; font-size: 15px; line-height: 1.6; color: var(--cptp-text);
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden;
}

.cptp-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.cptp-ava {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 99px;
  background: var(--cptp-grad); color: #fff;
  display: grid; place-items: center; font-weight: 800;
}
.cptp-who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.cptp-who b { font-size: 14.5px; }
.cptp-who em { font-style: normal; font-size: 12.5px; color: var(--cptp-text-2); }
.cptp-verif {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: var(--cptp-teal); white-space: nowrap;
}

.cptp-prod {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cptp-line-2);
  font-size: 12.5px; color: var(--cptp-muted); font-weight: 600;
}

/* Lien "voir tous les avis" */
.cptp-cta { text-align: center; margin-top: clamp(20px, 3vw, 32px); }
.cptp-cta a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px !important; font-weight: 700 !important; color: var(--cptp-violet) !important; text-decoration: none !important;
}
.cptp-cta a:hover { color: var(--cptp-magenta) !important; }

/* Rail : inertie tactile iOS */
.cptp-rail { -webkit-overflow-scrolling: touch; }

/* Responsive — aligné sur les breakpoints de la maquette */
@media (max-width: 980px) {
  .cptp { padding-block: clamp(34px, 8vw, 64px); }
}
@media (max-width: 600px) {
  .cptp-head { padding-inline: 4px; }
  .cptp-rail { gap: 14px; }
  .cptp-card { width: min(280px, 82vw); padding: 20px; }
  .cptp-text { font-size: 14.5px; }
}

/* Accessibilité : on respecte la réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  .cptp-card { transition: none; }
  .cptp-card:hover, .cptp-card:focus-visible { transform: none; }
}