/* ================================================================
   TEMOIGNAGES — Section "Les meilleurs joueurs s'expriment"
   Figma node : 1281-2768

   Structure HTML :
     .testimonials
       .temoignages__header
         p.temoignages__suptitle
         h2.temoignages__title
         p.temoignages__subtitle
       .container > .row
         .temoignages__card × 3    ← position:relative, bg cyan-100
           .temoignages__content
             .temoignages__name
               .temoignages__avatar  ← 80×80, coins purple 24×24
               .temoignages__stack   ← nom + rôle
             p.temoignages__text
           img.temoignages__corner × 4  ← coins cyan-50 12×12

   Coins pixel-art — même technique que .versus__corner :
     card   : 12×12 px à -4px, fill cyan-50   (bg section)
     avatar : 24×24 px à -4px, fill purple     (accent)
================================================================ */

/* ── Section ─────────────────────────────────────────────────── */
.testimonials {
  background:  var(--cyan-50);
  --ch-accent: var(--purple-700);   /* dots + em heading */
}

/* ── Carte — bevel pixel-art (2 strips × côté) ───────────────── */
/*    Structure : bd--x | bd | content | bd | bd--x              */
.temoignages__card {
  flex:           1 0 0;
  min-width:      0;
  display:        flex;
  flex-direction: row;
  align-items:    stretch;
}

/* Strip extérieur : gap transparent 8px haut/bas */
.temoignages__bd--x {
  width:      4px;
  flex-shrink: 0;
  background: linear-gradient(
    to bottom,
    transparent 0px 8px,
    var(--purple-100) 8px calc(100% - 8px),
    transparent calc(100% - 8px) 100%
  );
}

/* Strip intérieur : gap transparent 4px haut/bas */
.temoignages__bd {
  width:      4px;
  flex-shrink: 0;
  background: linear-gradient(
    to bottom,
    transparent 0px 4px,
    var(--purple-100) 4px calc(100% - 4px),
    transparent calc(100% - 4px) 100%
  );
}

/* ── Contenu ─────────────────────────────────────────────────── */
.temoignages__content {
  flex:           1 0 0;
  background:     var(--purple-100);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);   /* 24px */
  padding:        var(--space-3);   /* 24px */
}

/* ── Ligne nom + avatar ──────────────────────────────────────── */
.temoignages__name {
  display:     flex;
  gap:         var(--space-2);   /* 16px */
  align-items: center;
}

/* ── Avatar 80×80 ────────────────────────────────────────────── */
/*    position:relative → ancre les 4 coins absolus de 24×24     */
/*    pas d'overflow:hidden → les coins débordent de -4px        */
.temoignages__avatar {
  position:    relative;
  width:       80px;
  height:      80px;
  flex-shrink: 0;
}

.temoignages__avatar-photo {
  width:      80px;
  height:     80px;
  object-fit: cover;
  display:    block;
}

/* ── Coins pixel-art de l'avatar (24×24, débordement 4px) ───── */
.temoignages__avatar-corner {
  position:        absolute;
  width:           24px;
  height:          24px;
  z-index:         2;
  pointer-events:  none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.temoignages__avatar-corner--tl { top: -4px;    left: -4px;   transform: rotate(90deg);  }
.temoignages__avatar-corner--tr { top: -4px;    right: -4px;  transform: rotate(180deg); }
.temoignages__avatar-corner--br { bottom: -4px; right: -4px;  transform: rotate(-90deg); }
.temoignages__avatar-corner--bl { bottom: -4px; left: -4px;                              }

/* ── Infos (nom + rôle) ──────────────────────────────────────── */
.temoignages__stack {
  flex:           1 0 0;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.temoignages__person-name {
  font-family: var(--font-body);
  font-size:   var(--text-md);   /* 16px */
  font-weight: var(--fw-bold);
  color:       var(--purple-950);
  line-height: normal;
}

.temoignages__person-role {
  font-family: var(--font-body);
  font-size:   var(--text-md);   /* 16px */
  font-weight: var(--fw-regular);
  color:       var(--purple-900);
  line-height: normal;
}

/* ── Texte du témoignage ─────────────────────────────────────── */
.temoignages__text {
  font-family: var(--font-body);
  font-size:   var(--text-xl);   /* 20px */
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color:       var(--purple-950);
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */

/* ── Tablette ≤ 1024px ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .testimonials {
    padding: var(--space-8) 0;   /* 64px — override responsive */
  }

  .temoignages__header {
    margin-bottom: var(--space-8);   /* 64px */
  }
}

/* ── Mobile ≤ 768px ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .temoignages__text {
    font-size: var(--text-md);   /* 16px */
  }
}