/**
 * @file
 * Le bloc « Galerie » du WYSIWYG du réseau.
 *
 * Cette feuille sert DEUX fois : dans l'éditeur, où elle habille le widget, et
 * sur le site, où le filtre du module la joint au champ. Un seul fichier, donc
 * un seul rendu — l'aperçu du rédacteur ne peut pas mentir.
 */

.fr-galerie {
  --fr-galerie-rayon: 8px;
  --fr-galerie-ecart: 1.5rem;

  /* La galerie est plus étroite que le texte qui l'entoure, et centrée : c'est
     ce que montre la maquette, où les vignettes couvrent environ 80 % de la
     colonne de texte — d'où une marge de chaque côté même quand la rangée est
     pleine. Une seule valeur à toucher pour resserrer ou élargir. */
  --fr-galerie-largeur: 80%;

  /* Flex et non grid : une grille de quatre colonnes remplit TOUJOURS depuis la
     gauche, donc deux images se colleraient à gauche avec un vide à droite.
     Le flex, lui, centre chaque rangée — y compris la dernière quand elle est
     incomplète. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fr-galerie-ecart);
  max-width: var(--fr-galerie-largeur);
  margin-block: 1.5rem;
  margin-inline: auto;
}

/* Quatre par rangée : la largeur d'une vignette est le quart de ce qui reste
   une fois les trois écarts retirés. */
.fr-galerie .fr-galerie__vignette {
  flex: 0 1 calc((100% - 3 * var(--fr-galerie-ecart)) / 4);
  max-width: calc((100% - 3 * var(--fr-galerie-ecart)) / 4);
  margin: 0;
  padding: 0;
}

/* Les médias de la bibliothèque n'ont aucune raison d'avoir tous le même
   format : on impose le cadre et on recadre dedans. */
.fr-galerie .fr-galerie__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--fr-galerie-rayon);
}

/* La légende n'a PAS de couleur à elle : elle hérite de son entourage. C'est
   la seule façon qu'elle soit lisible aux deux endroits — sur le bleu sombre
   du site, et sur le blanc du corps éditable de CKEditor. */
.fr-galerie .fr-galerie__legende {
  margin: 0.75rem 0 0;
  color: inherit;
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.4;
  opacity: 0.85;
}

/* Quatre colonnes sur une tablette réduiraient chaque vignette à une vignette
   de contact : on passe à deux, puis à une sur téléphone. Le retrait latéral
   tombe au passage — sur un écran étroit, il n'y a pas de place à donner. */
@media (max-width: 991px) {
  .fr-galerie {
    --fr-galerie-largeur: 100%;
  }

  .fr-galerie .fr-galerie__vignette {
    flex-basis: calc((100% - var(--fr-galerie-ecart)) / 2);
    max-width: calc((100% - var(--fr-galerie-ecart)) / 2);
  }
}

@media (max-width: 575px) {
  .fr-galerie {
    --fr-galerie-ecart: 1rem;
  }

  .fr-galerie .fr-galerie__vignette {
    flex-basis: 100%;
    max-width: 100%;
  }
}

.ck-editor__editable .fr-galerie {
  cursor: pointer;
}

/* CKEditor glisse son interface « type-around » À L'INTÉRIEUR du widget :
   elle devient un élément flex de plus, large de zéro, et l'écart qui la
   précède décale toute la rangée d'une demi-gouttière vers la gauche. On
   annule cet écart. Réservé au corps éditable : sur le site, cet élément
   n'existe pas. */
.ck-editor__editable .fr-galerie > .ck-widget__type-around {
  margin-inline-start: calc(-1 * var(--fr-galerie-ecart));
}