/* ============================================================
   Témoignages — Figma 8:3873 · 1920 × 1946
   Section : px 30 · pt 43 · pb 80 · conteneur 1280 · gap 60
   Grille 2 × 3, cartes 550 à encoches
   ============================================================ */
.tem {
  padding-top: 43px;
  padding-bottom: 80px;
  overflow: hidden;
}
.tem__inner { display: flex; flex-direction: column; gap: var(--sp-60); }

.tem__head { position: relative; display: flex; flex-direction: column; gap: var(--sp-15); padding-top: 94px; min-height: 447px; }
.tem__head .h3 { max-width: 781px; }

/* Pastille violette à guillemets, en haut à gauche */
.tem__pastille {
  position: absolute;
  top: 28px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 101px;
  height: 101px;
  background-color: var(--c-violet);
  -webkit-mask: url('../../assets/masks/coin-inverse.svg') no-repeat center / 100% 100%;
          mask: url('../../assets/masks/coin-inverse.svg') no-repeat center / 100% 100%;
}
.tem__pastille-mark {
  width: 28px;
  height: 17px;
  background-color: var(--c-lime);
  -webkit-mask: url('../../assets/masks/petite-forme.svg') no-repeat center / contain;
          mask: url('../../assets/masks/petite-forme.svg') no-repeat center / contain;
}

.tem__grid {
  display: grid;
  grid-template-columns: repeat(2, 550px);
  justify-content: center;
  align-items: start;
  gap: 40px;
}
.tem__grid > li { display: flex; }
.tem__grid .quote-card { width: 100%; }

/* Encoches : arche en bas à gauche, forme verticale en haut à droite */
.quote-card__enc-a { bottom: 0; left: 228.5px; width: 71px; height: 35.5px; }
.quote-card__enc-b {
  /* centrée à 45 % de la hauteur : la carte varie, le rapport non */
  top: 45%; right: 0;
  transform: translateY(-50%);
  width: 40px; height: 61px;
  -webkit-mask-image: url('../../assets/masks/forme-40x61.png');
          mask-image: url('../../assets/masks/forme-40x61.png');
}

@media (max-width: 991px) {
  .tem { padding-top: 32px; padding-bottom: 56px; }
  .tem__inner { gap: 40px; }
  .tem__head { padding-top: 90px; }
  .tem__pastille { width: 72px; height: 72px; }
  .tem__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding-inline: 40px; }
  .quote-card__text { max-width: none; }
  .quote-card { gap: 40px; }
  .quote-card__who { width: auto; }
  .quote-card__enc-a { left: 40%; }
}

@media (max-width: 767px) {
  .tem__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); padding-inline: 0; }
}