/* ============================================================
   Témoignages — Figma 3:8496 · 1905 × 1315
   Section : px 30 · pt 65 · pb 130
   Panneau : 1320 crème r40 · px 48 · pt 122 · pb 80 · gap 80
   ============================================================ */
.temoi {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 65px;
  padding-bottom: 130px;
}

.temoi__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 80px;
  padding: 122px 48px 80px;
}

/* --- En-tête : gap 31,99 --- */
.temoi__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 31.99px;
  width: 100%;
}
.temoi__h2 { text-align: center; width: 100%; }

/* --- Grille : 3 colonnes de 386,66, gap 32 --- */
.temoi__grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  width: 100%;
}
.temoi__col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 386.66px;
}

/* Vidéo verticale 383 × 709, radius 30 */
.temoi__col--video { gap: 0; }
.temoi__video {
  width: 383px;
  height: 709px;
  border-radius: var(--r-faq-btn);   /* 30 */
  object-fit: cover;
  background: #0d0d0d;
}

/* --- Carte témoignage : blanc r16, pt 32 pl 32 pr 39 pb 26, gap 24 --- */
.temoi__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  width: 100%;
  margin: 0;
  padding: 32px 39px 26px 32px;
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--b-nav);
}
.temoi__who { display: flex; flex-direction: column; }
.temoi__name {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-ink);
}
.temoi__role {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-text);
}
.temoi__quote {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-ink);
}

/* 5 étoiles 24 × 24 */
.temoi__stars {
  width: 120px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FAC666'%3E%3Cpath d='M12 2.5l2.6 5.6 6 .7-4.5 4.2 1.2 6-5.3-3-5.3 3 1.2-6L3.4 8.8l6-.7z'/%3E%3C/svg%3E")
    repeat-x left center / 24px 24px;
}

/* --- Décor bas : image 1217 × 93 --- */
.temoi__layer {
  position: absolute;
  bottom: 77px;
  left: 3.22%;
  right: 4.58%;
  width: auto;
  height: 93px;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1279px) {
  .temoi__panel { padding: 88px 32px 64px; gap: 56px; }
  .temoi__col { width: calc(50% - 16px); }
  .temoi__col--video { width: 100%; align-items: center; }
  .temoi__video { width: 100%; max-width: 383px; height: auto; aspect-ratio: 383 / 709; }
  .temoi__layer { display: none; }
}

@media (max-width: 991px) {
  .temoi { padding-top: 48px; padding-bottom: 72px; }
  .temoi__panel { padding: 64px 24px 56px; gap: 40px; }
  .temoi__head { gap: 20px; }
}

@media (max-width: 767px) {
  .temoi { padding-bottom: 48px; }
  .temoi__panel { padding: 40px 16px; border-radius: 24px; }
  .temoi__grid { gap: 20px; }
  .temoi__col { width: 100%; gap: 20px; }
  .temoi__card { padding: 24px 20px; gap: 16px; }
}