/* ─── Témoignages en CARTES (#temoignages) — feuille PARTAGÉE ─────────────────
   Montée par testimonials-cards.js sur la page d'accueil B (/v2/, /de/v2/) et
   sur /etablissement (/de/schulen).

   ⚠️ Extraite de v2/minimal.css le 25.09.2026, à son 2ᵉ consommateur (demande
   Quentin : « mets dans la page établissement le style de la page B des
   testimonials »). Même règle que testimonials.css (la version « deck » de la
   page A) : la landing n'a pas de build, une copie oubliée diverge au premier
   réglage — toute évolution de la section se fait ICI, pour les deux pages.

   Ce que la feuille contient : la note moyenne (.tq-score), le ruban de cartes
   (.tq-track / .tq-card), la carte « école partenaire » (.tq-card-partner) et
   les flèches d'un rail (.tq-ctrl). ⚠️ Les flèches servent AUSSI au rail
   « Du nouveau » de la page B (.mm-fresh-c .tq-ctrl) : leurs règles ne sont
   donc pas scopées sous .tq-quotes et portent leurs propres repli de couleur.
   Le TITRE de la section reste à la page (h2 de la page B, .ke-head sur
   /etablissement) : deux pages, deux registres de titre, un seul ruban.

   Jetons : les valeurs de la page B (header.css, .mm) recopiées à l'identique,
   branchées sur les variables de style.css quand elles existent. Le liseré
   (#E6E7F0) n'est PAS --border (#E8E6F0) : on garde la teinte de la page B au
   pixel près. */
.tq-quotes {
  --tq-line: #E6E7F0;
  --tq-dark: var(--text, #2D2D3A);
  --tq-muted: var(--text-secondary, #6B6B7E);
  --tq-accent: var(--accent, #5B6CF9);
  --tq-accent-deep: var(--accent-deep, #4353E8);
  --tq-accent-soft: #EEF0FF;
  --tq-gold: var(--gold, #FFD166);
  --tq-f-head: 'Fredoka', system-ui, sans-serif;
  --tq-f-sec: 'Plus Jakarta Sans', system-ui, sans-serif;
}
/* La section part `hidden` du HTML et n'est révélée qu'avec ≥ 2 citations :
   une classe de section (display: block) ne doit pas battre l'attribut. */
.tq-quotes[hidden] { display: none; }

/* ═══ Flèches d'un rail (témoignages, nouveautés de la page B) ═══ */
.tq-ctrl { display: flex; justify-content: center; gap: 10px; margin-top: 8px; }
.tq-prev, .tq-next { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--tq-line, #E6E7F0); background: #fff; color: var(--tq-dark, #2D2D3A); cursor: pointer; transition: box-shadow .14s ease, transform .05s ease, color .15s ease, background .15s ease; }
html:not(.kwz-touch) .tq-prev:hover, html:not(.kwz-touch) .tq-next:hover { box-shadow: 0 0 0 2.5px rgba(91,108,249,.5); }
.tq-prev:active, .tq-next:active { transform: scale(.97); }
.tq-prev:focus-visible, .tq-next:focus-visible { outline: 3px solid var(--tq-accent, #5B6CF9); outline-offset: 3px; }

/* ═══ Note moyenne : cinq étoiles, la note, sa provenance ═══ */
.tq-score { text-align: center; margin: 10px 0 30px; }
.tq-stars { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; }
.tq-stars svg { width: 30px; height: 30px; fill: #FFC53D; filter: drop-shadow(0 3px 6px rgba(245,185,60,.35)); }
.tq-score-n { margin: 0; font: 700 44px/1 var(--tq-f-head); color: var(--tq-dark); }
.tq-score-n span { font-size: 22px; color: var(--tq-muted); margin-left: 2px; }
.tq-score-n b { color: #D99400; font-variant-numeric: tabular-nums; display: inline-block; }
.tq-score-t { margin: 6px 0 0; font: 600 15px var(--tq-f-sec); color: var(--tq-dark); }
.tq-score-src { margin: 4px 0 0; font-size: 12.5px; font-style: italic; color: #9A9AAE; }
/* Les étoiles s'allument une à une pendant que la note monte (testimonials-cards.js).
   Rien n'est masqué sans le script : .tq-anim n'est posée que par lui. */
.tq-anim .tq-stars svg { opacity: .18; transform: scale(.6); filter: grayscale(1); }
.tq-anim.tq-go .tq-stars svg { opacity: 1; transform: scale(1); filter: drop-shadow(0 3px 6px rgba(245,185,60,.35)); transition: opacity .25s ease, transform .4s cubic-bezier(.34,1.56,.64,1), filter .25s ease; }
.tq-anim.tq-go .tq-stars svg:nth-child(1) { transition-delay: .1s; }
.tq-anim.tq-go .tq-stars svg:nth-child(2) { transition-delay: .3s; }
.tq-anim.tq-go .tq-stars svg:nth-child(3) { transition-delay: .5s; }
.tq-anim.tq-go .tq-stars svg:nth-child(4) { transition-delay: .7s; }
.tq-anim.tq-go .tq-stars svg:nth-child(5) { transition-delay: .9s; }
.tq-pop .tq-score-n b { animation: tqPop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes tqPop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* ═══ Ruban de cartes ═══ */
.tq-wrap { max-width: 1120px; margin: 0 auto; }
.tq-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 14px; scrollbar-width: none; padding: 14px 14px 36px; margin: -14px -14px -22px; }
.tq-track::-webkit-scrollbar { display: none; }
.tq-track:focus-visible { outline: 3px solid var(--tq-accent); outline-offset: 2px; border-radius: 20px; }
.tq-card { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; display: flex; flex-direction: column; margin: 0; padding: 24px 24px 20px; background: #fff; border: 1px solid var(--tq-line); border-radius: 20px; box-shadow: 0 10px 24px rgba(45,45,58,.07); }
.tq-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--tq-accent-soft); color: var(--tq-accent); }
.tq-mark svg { width: 20px; height: 20px; }
.tq-quote { flex: 1; margin: 16px 0 20px; font-size: 16px; line-height: 1.6; color: var(--tq-dark); }
.tq-who { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--tq-line); }
.tq-who img:not(.tq-region) { flex: none; width: 44px; height: 44px; border-radius: 50%; padding: 5px; background: var(--tq-accent-soft); }
.tq-id { display: flex; flex-direction: column; min-width: 0; }
.tq-name { font: 700 15px var(--tq-f-sec); color: var(--tq-dark); }
.tq-school { font-size: 13.5px; color: var(--tq-muted); }
.tq-date { font-size: 12.5px; color: #9A9AAE; margin-top: 1px; }
/* Emblème de la région : blason d'un canton (image), drapeau d'un pays (police de drapeaux). */
.tq-region { margin-left: auto; flex: none; width: 24px; height: 28px; object-fit: contain; }
.tq-flag { display: inline-flex; align-items: center; justify-content: center; font: 22px/1 'Kwiiz Flags', sans-serif; }

/* ═══ Carte « école partenaire » — même ruban que les voix d'enseignants
   (le pourquoi est dans docs/landing-pages.md § Témoignages) ═══ */
.tq-card-partner { position: relative; overflow: hidden; align-items: center; justify-content: center; text-align: center; gap: 10px; border: 2px solid var(--tq-gold); background: linear-gradient(180deg, #FFFDF3 0%, #fff 60%); }
.tq-card-partner .tq-region-corner { position: absolute; right: 18px; bottom: 16px; margin: 0; }
/* Bandeau d'angle en or (géométrie du cornerTag de l'app), sur deux lignes. */
.tq-ribbon { position: absolute; top: 0; left: 0; width: 104px; height: 104px; overflow: hidden; pointer-events: none; z-index: 2; }
.tq-ribbon-band { position: absolute; top: 20px; left: -42px; width: 164px; transform: rotate(-45deg); text-align: center; padding: 4px 0; background: linear-gradient(90deg, #FFD166, #F5B93C); color: #3B2A00; font: 800 10.5px/1.2 var(--tq-f-sec); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.tq-logo { width: 84px; height: auto; margin: 6px 0 2px; }
.tq-lead { margin: 0; font: 700 18px/1.35 var(--tq-f-sec); color: var(--tq-dark); }
.tq-sub { margin: 0; font-size: 14px; color: var(--tq-muted); }
.tq-cta { margin-top: 8px; font: 700 15px var(--tq-f-sec); color: var(--tq-accent-deep); text-decoration: none; }
html:not(.kwz-touch) .tq-cta:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 899px) { .tq-card { flex-basis: 62%; } }
@media (max-width: 600px) { .tq-card { flex-basis: 86%; } }

/* Politique de mouvement : l'enfoncement des flèches est un ornement. Le
   défilement du ruban et l'allumage de la note sont du contenu (l'allumage
   n'est de toute façon posé que hors prefers-reduced-motion, par le script). */
@media (prefers-reduced-motion: reduce) {
  .tq-prev:active, .tq-next:active { transform: none; }
}