/* =============================================================================================
   05 Témoignages
   Titre centré, un témoignage mis en avant à gauche et deux à droite. Chaque témoignage : note sur 5, citation, auteur.
   Les anciennes règles .quote* de sections.css ne servent plus à cette section.
   ============================================================================================= */

/* Symbole de l'étoile : défini une fois, hors du flux */
.temoignages__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.temoignages__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-4);
}
.temoignages__cote {
  display: grid;
  gap: var(--space-4);
}

.temoignage {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--card-pad);
  border-radius: var(--radius-card);
  background: var(--sunk);
}

/* Note sur 5 : cinq étoiles bordeaux */
.temoignage__note {
  flex: none;
  display: block;
  width: 90px;
  height: 16px;
  fill: var(--acc);
  stroke: var(--acc);
  stroke-width: 1.2px;
  stroke-linejoin: round;
}

.temoignage__texte { margin: 0; }
.temoignage__texte p {
  margin: 0;
  max-width: 40ch;
  font-size: var(--fs-lead);
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
  text-wrap: pretty;
}

.temoignage__auteur {
  margin-top: auto;
  padding-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.temoignage__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--dark);
  color: var(--on);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
}
.temoignage__qui { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.temoignage__nom { font-size: var(--fs-body); font-weight: 700; }
.temoignage__role { font-size: var(--fs-small); color: var(--muted); }

/* Témoignage mis en avant : papier, filet, citation en Clash Display */
.temoignage--une {
  gap: var(--space-6);
  padding: clamp(28px, calc(2.4cqw + 18px), 56px);
  border-radius: var(--radius-card-lg);
  background: var(--paper);
  border: 1px solid var(--line);
}
.temoignage--une .temoignage__note { width: 112px; height: 20px; }
.temoignage--une .temoignage__texte p {
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, calc(1.6cqw + 17.8px), 41px);    /* (24, 32, 41) */
  line-height: 1.16;
  letter-spacing: -0.02em;
  word-spacing: 0.06em;
}
.temoignage--une .temoignage__avatar { width: 56px; height: 56px; font-size: 22px; }
.temoignage--une .temoignage__nom { font-size: var(--fs-h4); }
.temoignage--une .temoignage__role { font-size: var(--fs-body); }

/* Sous 1 024 px : le témoignage mis en avant sur toute la largeur, les deux autres côte à côte ;
   sous 640 px : une seule colonne. */
@container page (max-width: 1023px) {
  .temoignages__grille { grid-template-columns: minmax(0, 1fr); }
  .temoignages__cote { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .temoignage--une .temoignage__texte p { max-width: 28ch; }
}
@container page (max-width: 639px) {
  .temoignages__cote { grid-template-columns: minmax(0, 1fr); }
  .temoignage--une .temoignage__texte p { max-width: 22ch; }
}