/* ─── Témoignages (#temoignages) — feuille PARTAGÉE ──────────────────────────
   Montée par v2-testimonials.js sur la HOME et sur /etablissement.

   ⚠️ Extraite de v2.css le 18.09.2026, à son 2ᵉ consommateur : la page
   établissement ne charge QUE style.css, et lui faire avaler les 131 ko de
   v2.css pour une seule section aurait été absurde. Recopier le bloc l'aurait
   fait diverger au premier réglage (la landing n'a pas de build, rien ne
   rattrape une copie oubliée). Toute évolution de la section se fait ICI, et
   profite aux deux pages.

   Dépendances, toutes fournies par style.css que les deux pages chargent déjà :
   les variables --accent / --text / --text-secondary / --border, la classe
   .container, .kwz-sr, et les polices. Aucune règle de v2.css n'est requise
   (.kv2-eyebrow n'a pas de règle de base : elle est toujours stylée par son
   parent, et ce parent est ici).

   Mécanique d'empilement : toutes les figures occupent la MÊME cellule de
   grille (grid-area 1/1) → la hauteur du deck = la plus longue citation, donc
   AUCUN saut de mise en page quand on passe d'un témoignage court à un long.
   La bascule opacité + glissement est du CONTENU (politique de mouvement) :
   elle tourne aussi en prefers-reduced-motion, comme le carrousel.

   ⚠️ Le FOND est une variable (--kv2-quotes-bg) parce qu'il dépend des
   sections VOISINES, qui diffèrent d'une page à l'autre : blanc sur la home
   (une respiration entre le bleu pâle de #importer et la lavande des tarifs),
   teinté sur /etablissement (coincée entre une section blanche et le bloc
   sombre de la souveraineté, en blanc elle se fondrait dans celle du dessus). */
.kv2-quotes { padding: 64px 0; background: var(--kv2-quotes-bg, #fff); }
.kv2-quotes[hidden] { display: none; }
.kv2-quotes-head { text-align: center; max-width: 42rem; margin: 0 auto 10px; }
.kv2-quotes-head .kv2-eyebrow {
  margin: 0 0 12px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
  font-size: clamp(12px, 0.9vw, 14px);
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent);
}
/* ⚠️ font-size explicite obligatoire (cf. .kv2-fresh-head h2 : sans elle le h2
   retombe à 24px et la section paraît secondaire). */
.kv2-quotes-head h2 { margin: 0; font-size: clamp(1.5rem, 4.2vw, 3rem); letter-spacing: -0.02em; }
.kv2-quotes-deck {
  display: grid; max-width: 46rem; margin: 0 auto;
  touch-action: pan-y;   /* le glissement horizontal est à nous, le scroll vertical au navigateur */
}
.kv2-quotes-deck:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 14px; }
.kv2-quote {
  grid-area: 1 / 1; margin: 0; padding: 26px 6px 4px; text-align: center;
  /* Centrage VERTICAL dans la cellule : la hauteur du deck = la plus longue
     citation (zéro saut de mise en page) — sans ce centrage, une citation
     courte laissait tout le vide SOUS elle, très visible sur téléphone. */
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateX(22px); visibility: hidden; pointer-events: none;
  transition: opacity .45s ease, transform .45s ease, visibility 0s .45s;
}
.kv2-quote[data-pos="active"] {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity .45s ease, transform .45s ease, visibility 0s;
}
.kv2-quote blockquote {
  margin: 0 0 16px; border: none; padding: 0;
  /* Poids 500 + gris ardoise (AA sur blanc) : en 700 noir, la citation pesait
     comme un titre et la voix de l'enseignant ne ressortait pas (Quentin,
     21.08). Le contraste avec le h2 noir fait le travail. */
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500;
  font-size: clamp(1.15rem, 2.6vw, 1.55rem); line-height: 1.5; color: #4B5563;
}
.kv2-quote figcaption { color: var(--text-secondary); font-size: 15px; font-weight: 600; }
/* Carte « école partenaire » — même cellule et même rotation que les voix
   d'enseignants (le pourquoi est dans landing-pages.md § Témoignages).
   Volontairement plus SOBRE qu'une citation : le logo porte la preuve, et une
   école qui parlerait aussi fort qu'un enseignant ferait de la section une
   page de références commerciales. */
.kv2-quote-logo {
  display: block; margin: 0 auto 18px; width: auto; height: 72px;
  /* ⚠️ Plafond de TAILLE DE FICHIER, pas de goût : les armoiries de l'ERVEO
     sont fournies en 102 px de large et portent leur raison sociale EN DUR
     dans l'image. Trop petites, ce texte devient une tache ; trop grandes,
     il pixellise. 72 px est le compromis tenable avec ce fichier — un logo
     vectoriel ou ≥ 300 px permettrait de monter. */
}
.kv2-quote-lead {
  margin: 0 0 8px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.45rem); line-height: 1.4; color: #4B5563;
}
.kv2-quote-sub { margin: 0 0 16px; font-size: 15px; color: var(--text-secondary); }
.kv2-quote-school figcaption a { color: var(--accent); font-weight: 700; }
.kv2-quote-school figcaption a:hover { text-decoration: underline; }
.kv2-quotes-ctrl { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 18px; }
.kv2-quotes-dots { display: flex; gap: 8px; }
.kv2-quotes-dots button {
  width: 10px; height: 10px; border-radius: 999px; border: none; padding: 0; cursor: pointer;
  background: #D8DCF5; transition: background .2s ease, width .2s ease;
}
.kv2-quotes-dots button:hover { background: #B6BDF0; }
.kv2-quotes-dots button[aria-current="true"] { width: 30px; background: var(--accent); }
.kv2-quotes-nav { display: flex; gap: 8px; }
.kv2-quotes-prev, .kv2-quotes-next {
  width: 38px; height: 38px; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer;
  border: 2px solid var(--border); background: #fff; color: var(--text);
  transition: border-color .2s ease, color .2s ease;
}
.kv2-quotes-prev:hover, .kv2-quotes-next:hover,
.kv2-quotes-prev:focus-visible, .kv2-quotes-next:focus-visible { border-color: var(--accent); color: var(--accent); }
@media (min-width: 768px) { .kv2-quotes { padding: 96px 0; } }