/*
 * La frise defilante : une bande de photos qui traverse lentement la page.
 *
 * Tout est porte par la classe .bo-frise, posee a la main sur un conteneur
 * Elementor. Sans elle, la galerie a l'interieur s'affiche normalement : ces
 * regles ne peuvent pas atteindre une galerie qui n'a pas ete armee.
 *
 * Le balisage vise est celui de la galerie WordPress que le widget Elementor
 * "Galerie de base" produit, plus la piste dupliquee et le bouton ajoutes par
 * bamboo-orchestra-frise.js :
 *
 *   .bo-frise                          le conteneur Elementor
 *     .elementor-image-gallery         la fenetre (overflow hidden)
 *       .gallery                       la piste (defile)
 *         .gallery-item                une photo
 *     .bo-frise-pause                  le bouton, SOEUR de la fenetre
 */

:root {
  /* Une traversee complete. Assez lent pour qu'on ne suive pas une photo des
     yeux : la bande doit se remarquer sans reclamer l'attention. Sur la
     duree, on regle le rythme sans toucher au mecanisme. */
  --bo-frise-duree: 90s;
  --bo-frise-hauteur: 180px;
}

.bo-frise {
  position: relative;
  /* Un fond legerement plus chaud que la page, pour que la bande se lise comme
     une pellicule posee dessus et non comme une rangee de photos qui flotte. */
  background: #eae2d5;
  padding: 0.9rem 0;
}

/* La fenetre. Elle coupe ce qui depasse ; c'est elle qui donne l'illusion que
   la bande vient de plus loin que la page. */
.bo-frise .elementor-image-gallery {
  overflow: hidden;
}

/* La piste. WordPress met ses galeries en grille flottante et centre le texte ;
   il faut defaire les deux avant d'en faire une ligne. */
.bo-frise .gallery {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.9rem;
  width: max-content;
  margin: 0;
  text-align: left;
  animation: bo-frise-defile var(--bo-frise-duree) linear infinite;
}

.bo-frise .gallery-item {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  display: block;
  vertical-align: top;
}

.bo-frise .gallery-icon {
  margin: 0;
  padding: 0;
  border: 0;
}

.bo-frise .gallery-item img {
  height: var(--bo-frise-hauteur);
  width: auto;
  max-width: none;
  display: block;
  border: 0;
  border-radius: 10px;
  /* Des photos de tailles differentes alignees telles quelles se lisent comme
     un desordre ; une hauteur commune les lit comme une frise. */
  object-fit: cover;
}

/* Les legendes de la mediatheque n'ont pas leur place dans une bande qui
   defile : elles passeraient trop vite pour etre lues et casseraient la
   hauteur commune. Les photos gardent leur titre alternatif, qui lui sert. */
.bo-frise .gallery-caption {
  display: none;
}

@keyframes bo-frise-defile {
  from { transform: translateX(0); }
  /* La piste est ecrite deux fois par le script : a -50% la seconde copie
     occupe exactement la place de la premiere, et la boucle ne se voit pas. */
  to { transform: translateX(-50%); }
}

/* L'ARRET, ET POURQUOI IL Y EN A UN
 *
 * WCAG 2.2.2 : tout mouvement automatique qui dure plus de cinq secondes doit
 * pouvoir etre arrete par n'importe qui. Un arret au survol seul ne suffit pas,
 * puisqu'on ne survole rien au clavier. Le vrai arret passe donc par le bouton,
 * qui se focalise et annonce son etat ; le survol et le focus-within sont un
 * confort en plus.
 *
 * Le focus-within est defensif : les photos ne sont pas focalisables
 * aujourd'hui. Il est la pour le jour ou l'une d'elles deviendra cliquable,
 * parce que ce jour-la il faudra que la bande s'arrete sous le clavier comme
 * elle s'arrete sous la souris, et y penser apres coup est exactement ce qu'on
 * oublie. */
.bo-frise .elementor-image-gallery:hover .gallery,
.bo-frise .elementor-image-gallery:focus-within .gallery,
.bo-frise[data-bo-frise-arretee="oui"] .gallery {
  animation-play-state: paused;
}

.bo-frise-pause {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  z-index: 2;
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  border: 0;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  /* 12.6:1 sur le fond du bouton, mesure et non estime : le bouton flotte
     au-dessus des photos, donc sa lisibilite ne peut pas dependre d'elles. */
  background: rgba(20, 32, 20, 0.9);
  color: #f6f1e6;
}

.bo-frise-pause:focus-visible {
  outline: 3px solid #3d6b35;
  outline-offset: 2px;
}

/* Sur un telephone, une bande de 180px prend trop de hauteur pour ce qu'elle
   raconte. */
@media (max-width: 860px) {
  .bo-frise {
    --bo-frise-hauteur: 120px;
  }

  /* Le bouton garde son libelle en toutes lettres, parce qu'une icone seule
     n'annonce pas ce qu'elle fait, mais il se resserre : a pleine taille il
     recouvrait un tiers d'une bande de 120px. */
  .bo-frise-pause {
    right: 0.5rem;
    bottom: 0.5rem;
    font-size: 0.64rem;
    padding: 0.3rem 0.6rem;
  }
}

/* RIEN NE BOUGE SI LE VISITEUR A DEMANDE QUE RIEN NE BOUGE
 *
 * La regle garantit deux choses, et c'est la seconde qu'on oublie : rien ne
 * bouge, ET rien ne disparait. Une regle qui se contenterait de couper
 * l'animation sur une piste laissee a translateX(-50%) escamoterait la moitie
 * des photos. Ici l'animation est simplement absente, donc la piste reste a sa
 * position de depart et la bande se lit comme une rangee de photos immobile.
 *
 * Le script lit la meme preference de son cote et n'ajoute pas de bouton
 * d'arret : il n'y a rien a arreter. */
@media (prefers-reduced-motion: reduce) {
  .bo-frise .gallery {
    animation: none;
  }
}