/**
 * Carrousel de partenaires.
 *
 * Le nombre de logos visibles est un réglage du bloc, transmis en
 * variable CSS. La feuille ne le connaît pas d'avance.
 */

.carrousel {
  position: relative;
  padding-block: var(--e-l);
}

/*
 * Le titre est celui des sections du site — capitales, marine, calé à
 * gauche, encadré de deux pastilles. Sa géométrie est déclarée dans
 * « motifs.css », avec le dessin des pastilles et le titre de
 * l'organigramme, qui est le même.
 */

.carrousel__piste {
  display: flex;
  gap: var(--colonnes-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carrousel__piste::-webkit-scrollbar { display: none; }

/*
 * La largeur d'un logo se déduit du nombre visible et de la gouttière :
 * quatre logos et trois gouttières partagent la largeur disponible.
 */
.carrousel__item {
  flex: 0 0 calc(
    (100% - (var(--carrousel-visibles) - 1) * var(--colonnes-gap))
    / var(--carrousel-visibles)
  );
  scroll-snap-align: start;
  display: grid;
  place-items: center;
  min-height: 6rem;
}

/* Sur écran étroit, le réglage cède : quatre logos y seraient illisibles. */
@media (max-width: 899px) {
  .carrousel__item {
    flex-basis: calc((100% - var(--colonnes-gap)) / 2);
  }
}

@media (max-width: 479px) {
  .carrousel__item { flex-basis: 100%; }
}

/*
 * La hauteur est définie, elle n'est pas un plafond.
 *
 * Avec « max-height », la taille du logo venait de ses dimensions
 * intrinsèques. Un SVG exporté « responsive » par Illustrator n'en a
 * pas : il ne porte qu'un « viewBox », donc un rapport et rien d'autre.
 * Dans une case en grille centrée, un tel élément vaut zéro — et le
 * logo disparaissait en laissant sa case vide, sans que rien ne le
 * signale. Relevé sur « Promotion du fair-play » le 25 septembre, et
 * reproduit au banc : 0 × 0 avec « max-height », 93 × 80 avec
 * « height », la largeur venant alors du rapport du viewBox.
 *
 * Une hauteur définie suffit donc, et ne change rien aux images qui ont
 * leurs dimensions : elles occupaient déjà ces 5 rem. « max-width » et
 * « object-fit » restent, pour qu'un logo très large soit contenu dans
 * sa case sans se déformer.
 */
.carrousel__logo {
  width: auto;
  max-width: 100%;
  height: 5rem;
  object-fit: contain;
  /*
   * Les logos arrivent avec des chartes hétérogènes. Le passage en
   * niveaux de gris les harmonise sans les déformer, et la couleur
   * revient au survol — le partenaire reste identifiable.
   */
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter var(--transition), opacity var(--transition);
}

/*
 * Le survol porte sur l'élément de liste, pas sur le lien : un
 * partenaire sans adresse n'a pas de lien autour de son logo, et
 * restait donc gris quoi qu'on fasse. Le focus, lui, ne concerne que
 * les logos cliquables — un logo sans lien ne prend jamais le focus.
 */
.carrousel__item:hover .carrousel__logo,
.carrousel__lien:focus-visible .carrousel__logo {
  filter: none;
  opacity: 1;
}

/*
 * En contraste élevé ou en mouvement réduit, on rend la couleur tout de
 * suite : la nuance de gris est un effet, pas une information.
 */
@media (prefers-reduced-motion: reduce), (prefers-contrast: more) {
  .carrousel__logo { filter: none; opacity: 1; }
}

.carrousel__lien {
  display: grid;
  place-items: center;
  padding: var(--e-2xs);
}

.carrousel__pause {
  position: absolute;
  top: var(--e-2xs);
  right: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--couleur-filet);
  border-radius: 50%;
  background-color: var(--couleur-fond);
  color: var(--couleur-titre);
  font-size: 0.9rem;
  cursor: pointer;
}

.carrousel__pause:hover {
  border-color: var(--couleur-titre);
}

/* Quand tous les logos tiennent à l'écran, la piste devient une grille
   centrée : plus de défilement, plus de commande. */
.carrousel--statique .carrousel__piste {
  flex-wrap: wrap;
  justify-content: center;
  overflow: visible;
}

/* ---------------------------------------------------------------
 * Le carrousel d'images
 *
 * Même piste, même défilement, même commandes : seul le traitement du
 * visuel change. Une photo n'est pas un logo — elle n'a pas de charte à
 * harmoniser, elle remplit sa case au lieu d'y flotter, et rien ne
 * justifie de la décolorer.
 * --------------------------------------------------------------- */

.carrousel--images .carrousel__item {
  min-height: 0;
  aspect-ratio: 3 / 2;
}

.carrousel--images .carrousel__logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*
   * Le socle pose « grayscale(1) » et 0,75 d'opacité pour harmoniser
   * des chartes hétérogènes. Les deux sont annulés ici : une photo
   * délavée n'est pas une photo harmonisée, c'est une photo abîmée.
   */
  filter: none;
  opacity: 1;
}

/*
 * Le survol ne rend pas une couleur qui n'a jamais été retirée : il
 * reprend le voile des bulles et des cartes de rappel, pour dire que
 * l'élément répond sans rien changer de l'image.
 */
.carrousel--images .carrousel__lien:hover .carrousel__logo,
.carrousel--images .carrousel__lien:focus-visible .carrousel__logo {
  filter: brightness(0.8);
}

/* ---------------------------------------------------------------
 * LE CARROUSEL D'UN ARTICLE
 *
 * Même piste et même défilement que celui des partenaires, mais trois
 * choses de plus : une légende sous chaque image, une rangée de
 * commandes sous la piste, et le glisser à la souris.
 * --------------------------------------------------------------- */

.carrousel--article .carrousel__item {
  /* Le format est porté par l'image : l'élément doit pouvoir grandir de
     la hauteur de sa légende. */
  aspect-ratio: auto;
  min-height: 0;
  align-content: start;
}

.carrousel--article .carrousel__vue {
  display: flex;
  flex-direction: column;
  gap: var(--e-3xs);
  margin: 0;
  width: 100%;
}

.carrousel--article .carrousel__logo {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.carrousel__legende-image {
  margin: 0;
  color: var(--couleur-texte-doux);
  font-size: var(--t-petit);
  line-height: 1.3;
}

/*
 * LE GLISSER À LA SOURIS.
 *
 * La main ouverte dit que la piste se tire ; la main fermée, qu'on la
 * tient. L'accrochage est suspendu pendant le geste, sans quoi la piste
 * reviendrait à la vignette la plus proche à chaque pixel parcouru.
 */
.carrousel--article .carrousel__piste { cursor: grab; }

.carrousel--glisse .carrousel__piste {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}

/* ---------------------------------------------------------------
 * Les commandes
 *
 * Les pictogrammes sont ceux du triptyque de l'accueil : même charte,
 * mêmes fichiers, déclarés une fois dans « inc/assets.php ». Ils sont
 * ici en marine et non en blanc — le triptyque les pose sur une photo,
 * l'article sur du blanc.
 * --------------------------------------------------------------- */

.carrousel__commandes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-top: var(--e-xs);
}

.carrousel__fleche,
.carrousel__bascule {
  display: grid;
  place-items: center;
  width: 2.184rem;                       /* 34,94 px, la mesure de la charte */
  height: 2.184rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--couleur-titre);
  cursor: pointer;
  transition: color var(--transition);
}

.carrousel__fleche:hover,
.carrousel__bascule:hover { color: var(--couleur-rubrique-texte); }

.carrousel__fleche::before,
.carrousel__bascule::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: currentcolor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.carrousel__fleche--precedent::before {
  -webkit-mask-image: var(--triptyque-precedent-fichier);
  mask-image: var(--triptyque-precedent-fichier);
}

.carrousel__fleche--suivant::before {
  -webkit-mask-image: var(--triptyque-suivant-fichier);
  mask-image: var(--triptyque-suivant-fichier);
}

/* Pressé veut dire « le défilement est suspendu » : le bouton propose
   donc de reprendre. */
.carrousel__bascule::before {
  -webkit-mask-image: var(--triptyque-pause-fichier);
  mask-image: var(--triptyque-pause-fichier);
}

.carrousel__bascule[aria-pressed="true"]::before {
  -webkit-mask-image: var(--triptyque-lecture-fichier);
  mask-image: var(--triptyque-lecture-fichier);
}

.carrousel__fleche:focus-visible,
.carrousel__bascule:focus-visible {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: var(--focus-decalage);
}

@media (prefers-reduced-motion: reduce) {
  .carrousel__fleche,
  .carrousel__bascule { transition: none; }
}