/**
 * EOCHE - Presentation des avis clients (2026-07-27, v4)
 * Chargee APRES sticky-cta.css, uniquement par la page d'accueil.
 *
 * HISTORIQUE, pour ne pas refaire les memes erreurs :
 *  v1 - colonnes a hauteur naturelle. Mesure : 1 190 -> 1 219 px. Aucun gain.
 *  v2 - une rangee qui defile horizontalement meme sur ordinateur. Compact,
 *       mais on ne fait pas defiler horizontalement avec une souris.
 *  v3 - trois avis sur une rangee, classique. Bon, mais rien ne permettait de
 *       voir les quatre autres sur grand ecran.
 *  v4 - v3 plus un bouton qui deplie les sept.
 *
 * Ordinateur et tablette : trois avis, rien a faire defiler. Un bouton deplie
 * les autres a la demande. Telephone : bande au doigt avec les sept, le bouton
 * ne sert a rien donc il ne s'affiche pas.
 *
 * Aucune animation ajoutee. Le seul script est le bascule du bouton, en clair
 * dans la page.
 */

/* ---------- Ordinateur et tablette : trois avis, une rangee ---------- */
@media (min-width: 641px) {
  .eoche-avis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    column-count: auto;
    overflow: visible;
  }

  /* au-dela du troisieme : present dans la page (Google le lit), pas affiche */
  .eoche-avis-card:nth-child(n + 4) {
    display: none;
  }

  /* ...jusqu'a ce que le bouton ouvre tout. Deux classes = plus specifique que
     la regle ci-dessus, donc pas besoin de !important. */
  .eoche-avis-grid.tout .eoche-avis-card {
    display: flex;
  }

  .eoche-avis-plus {
    display: block;
    margin-top: 24px;
    text-align: center;
  }
}

@media (min-width: 641px) and (max-width: 991px) {
  .eoche-avis-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .eoche-avis-card:nth-child(n + 3) {
    display: none;
  }
  .eoche-avis-grid.tout .eoche-avis-card {
    display: flex;
  }
}

/* ---------- Telephone : bande au doigt, les sept avis, pas de bouton ---------- */
@media (max-width: 640px) {
  .eoche-avis-grid {
    display: flex;
    column-count: auto;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .eoche-avis-grid::-webkit-scrollbar {
    display: none;
  }

  .eoche-avis-card {
    flex: 0 0 84%;
    scroll-snap-align: start;
    margin-bottom: 0;
  }

  .eoche-avis-plus {
    display: none;
  }
}