/* ==========================================================================
   Module « Nos clients » : carrousel de logos (section de la page d'accueil)
   et liste des établissements (page /nos-clients). Jetons de base.css, mobile-first.

   Les logos sont en niveaux de gris et reprennent leur couleur au survol ou
   au focus : la bande reste calme, chaque logo redevient lui-même quand on
   s'y arrête. Là où il n'y a pas de survol (téléphone, tablette), ils gardent
   leur couleur — sans quoi ils resteraient gris pour toujours.
   Le défilement automatique est l'affaire de clients.js, qui ne
   démarre pas du tout si la personne a demandé moins d'animations.
   ========================================================================== */

/* ---------- Carrousel ---------- */
.clients-carrousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.clients-piste {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 3.25rem);
  margin: 0;
  padding: 0.75rem 0.25rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  /* Les extrémités s'estompent : la bande n'a pas de fin franche, et on comprend qu'elle continue */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
}
.clients-piste::-webkit-scrollbar { display: none; }
.clients-piste:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--rayon); }

/* Pendant le défilement automatique, clients.js reprend la main image par image :
   le lissage natif du navigateur gênerait le mouvement continu. */
.clients-carrousel.est-anime .clients-piste { scroll-behavior: auto; }

.clients-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: clamp(7.5rem, 22vw, 10rem);
  text-align: center;
}

.clients-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(3rem, 9vw, 4rem);
}
.clients-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter var(--transition), opacity var(--transition), transform var(--transition);
}
.clients-item:hover .clients-logo img,
.clients-logo-lien:focus-visible .clients-logo img {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-2px);
}
/* Sans survol (téléphone, tablette), le gris ne se défait jamais : les logos y resteraient délavés alors que
   la section dit « voici les établissements qui nous font confiance ». Ils reprennent donc leur couleur. */
@media (hover: none) {
  .clients-logo img,
  .clients-liste-logo img {
    filter: none;
    opacity: 0.92;
  }
}

.clients-ville {
  font-size: var(--texte-xs);
  color: var(--encre-3);
  letter-spacing: 0.04em;
}

.clients-logo-lien {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  color: inherit;
}
.clients-logo-lien:hover { text-decoration: none; }
.clients-logo-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--rayon-s); }

/* Flèches : révélées par clients.js (elles ne servent à rien sans lui) */
.clients-fleche {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--ligne);
  border-radius: 50%;
  background: var(--surface);
  color: var(--encre-2);
  box-shadow: var(--ombre-1);
}
.clients-fleche:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.clients-fleche:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Bascule « pause / reprendre » : le seul mécanisme d'arrêt permanent du défilement (WCAG 2.2.2). Elle reste
   visible à toute largeur, les flèches fussent-elles masquées : c'est elle qui rend le mouvement supportable. */
.clients-fleche--pause .clients-icone-lecture { display: none; }
.clients-fleche--pause.est-en-pause .clients-icone-pause { display: none; }
.clients-fleche--pause.est-en-pause .clients-icone-lecture { display: block; }

/* Moins d'animations demandées : le lissage du défilement tient à cette propriété portée par l'élément, que la
   règle globale de base.css (html { scroll-behavior: auto }) ne touche pas. Sans cette règle, un clic de flèche
   glissait encore — y compris avec behavior:'auto', qui s'en remet justement au CSS de l'élément. */
@media (prefers-reduced-motion: reduce) {
  .clients-piste { scroll-behavior: auto; }
}

/* ---------- Section de la page d'accueil ---------- */
.accueil-clients { background: var(--surface-2); border-block: 1px solid var(--ligne); }
.accueil-clients .section-entete { max-width: 46rem; margin-inline: auto; text-align: center; }
.accueil-clients .section-entete p:last-child { margin-bottom: 0; }
.accueil-clients-pied { margin: 1.5rem 0 0; text-align: center; }

/* ---------- Page /nos-clients ---------- */
.clients-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.clients-liste-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
}
.clients-liste-logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 3rem;
}
.clients-liste-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: 0.8; transition: filter var(--transition), opacity var(--transition); }
.clients-liste-item:hover .clients-liste-logo img { filter: grayscale(0); opacity: 1; }
.clients-liste-textes { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.clients-liste-nom { font-weight: 600; }
.clients-liste-ville { font-size: var(--texte-s); color: var(--encre-3); }
.clients-liste-lien { font-size: var(--texte-s); }

.clients-appel { padding: clamp(1.5rem, 4vw, 2.25rem); text-align: center; }
.clients-appel h2 { margin-bottom: 0.6rem; }
.clients-appel-actions { justify-content: center; margin-bottom: 1rem; }
.clients-appel p:last-child { margin-bottom: 0; }

@media (max-width: 48rem) {
  /* Sur un écran étroit, un estompage de 3 rem mangerait le premier et le dernier logo */
  .clients-piste {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
    gap: 1.25rem;
  }
  .clients-fleche { width: 2.25rem; height: 2.25rem; }
}

@media (max-width: 40rem) {
  .clients-appel-actions .bouton { width: 100%; }
}

/* Sur un téléphone, la piste ne disposait que d'environ 260 px utiles : les deux flèches et l'estompage
   laissaient un seul logo entièrement visible, en gris et en mouvement — une vitrine de clients qui ne montre
   jamais plus d'un client ne fait pas sa preuve. Les flèches rendent donc leur place au doigt (le défilement
   tactile suffit), l'estompage se resserre et les éléments se rétrécissent : trois logos tiennent à l'écran.
   La bascule de pause, elle, RESTE : c'est le mécanisme d'arrêt exigé par WCAG 2.2.2. */
@media (max-width: 30rem) {
  .clients-fleche--prec,
  .clients-fleche--suiv { display: none; }
  .clients-piste {
    gap: 0.9rem;
    padding-inline: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 0.5rem, #000 calc(100% - 0.5rem), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 0.5rem, #000 calc(100% - 0.5rem), transparent 100%);
  }
  .clients-item { width: clamp(5rem, 22vw, 7rem); }
}