/* =============================================================================
   temoignages.css — « Ce qu'en disent nos voyageurs »
   =============================================================================
   Repris de la maquette figee : `style.css` l. 1371-1375 (les cinq regles de base),
   `mobile.css` l. 517 et 547 pour les deux paliers de grille.

   ⚠️ LES CLASSES SONT CELLES DE LA MAQUETTE (`.testimonials`, `.quote`) alors que
   le type de bloc s'appelle `temoignages`. Ce n'est pas une incoherence : le CODE
   nomme l'entite en francais comme le reste du projet (`association`, `recit`), le
   BALISAGE reprend la maquette a la lettre pour que ses regles mordent. Meme
   partage que `recits` / « Recits de terrain » cote backoffice.

   ⚠️ UN SEUL JS, ET IL N'EST PAS DE LA MAQUETTE : `js/blocs/temoignages.js` coupe les
   avis longs et pose « Lire la suite » (D156 — les vrais avis vont jusqu'a 3 400
   caracteres). Le moteur d'apparition, lui, est deja porte (D121).

   ⚠️ DEUX CONSOMMATEURS depuis le 2026-11-04 : le bloc des pages et la fiche voyage
   (D164), qui charge ce fichier quand elle a des avis.

   ⚠️ `.quote` EST UNE CLASSE PARTAGEE : la maquette l'emploie aussi hors de cette
   section. Au moment de decouper un AUTRE composant qui la reutilise, la promouvoir
   dans `components.css` plutot que de la dupliquer.
   ============================================================================= */

.testimonials{ background:var(--creme-2); }
.testimonials__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.2vw,32px); }
.quote{ background:var(--blanc); border-radius:18px; padding:32px 30px; box-shadow:0 14px 40px rgba(0,0,0,.05); }
.quote p{ font-family:var(--serif); font-size:21px; line-height:1.45; color:var(--noir); margin-bottom:16px; }
.quote footer{ font-size:var(--fs-small); font-weight:600; color:var(--jaune-d); }

/* L'extrait (D156) : coupe a 7 lignes par le JS, depliable sur place. Sans JS, ni coupe ni
   bouton — le texte entier. Le bouton est un lien typographique, pas un `.btn` : il
   appartient au texte de la carte. */
.quote__texte.is-coupe{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:7; overflow:hidden; }
.quote__suite{
  appearance:none; -webkit-appearance:none; background:none; border:none; box-shadow:none; outline:none;
  padding:0; margin:-4px 0 16px; cursor:pointer;
  font-family:var(--sans); font-size:var(--fs-small); font-weight:600; color:var(--noir);
  text-decoration:underline; text-decoration-color:var(--jaune); text-underline-offset:3px;
}
.quote__suite:hover{ color:var(--jaune-d); }
.quote__suite:focus-visible{ outline:2px solid var(--jaune); outline-offset:3px; }

/* LA SECTION DE LA FICHE VOYAGE (D164) — absente de la maquette, fond blanc demande par la
   cliente. La carte passe donc en creme : blanche, elle se fondrait dans le fond. */
.testimonials--fiche{ background:var(--blanc); }
.testimonials--fiche .quote{ background:var(--creme); }

/* La grille a 3 colonnes collerait a gauche un ou deux avis : le nombre d'avis y est pose
   par le partial (`testimonials__grid--nN`), et ces cas sont centres. */
.testimonials--fiche .testimonials__grid--n1{ grid-template-columns:minmax(0,720px); justify-content:center; }
@media (min-width:1025px){
  .testimonials--fiche .testimonials__grid--n2{ grid-template-columns:repeat(2,1fr); max-width:960px; margin-inline:auto; }
}

/* ⚠️ REGLE PARTAGEE, part extraite — QUATRIEME occurrence du meme piege dans ce
   portage. `mobile.css:517` porte
   `.depforts__grid, .blog__grid, .testimonials__grid{ grid-template-columns:repeat(2,1fr); }`
   et c'est le MEME bloc `@media` que celui qui portait la grille du pied de page,
   perdue pendant deux semaines pour cette raison exacte. Les deux autres grilles
   appartiennent a des blocs non decoupes : au moment de les porter, chacune prend
   SA part dans SON fichier. Ne pas revenir elargir ce selecteur ici. */
@media (max-width:1024px){
  .testimonials__grid{ grid-template-columns:repeat(2,1fr); }
}

/* ⚠️ Et celle-ci aussi est partagee (`mobile.css:547`), avec les memes voisines. */
@media (max-width:640px){
  .testimonials__grid{ grid-template-columns:1fr; gap:clamp(16px,4vw,24px); }
}