/**
 * @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%;

  /* Nombre de vignettes par rangée. Quatre au maximum ; l'équilibrage plus bas
     le ramène à trois quand cela répartit mieux, et les paliers étroits le
     descendent à deux puis à une. C'est la SEULE variable qui commande la
     largeur d'une vignette. */
  --fr-galerie-colonnes: 4;

  /* Largeur d'une vignette : ce qui reste de la rangée une fois les écarts
     retirés. Il y a toujours un écart de moins que de colonnes. */
  --fr-galerie-vignette: calc(
    (100% - (var(--fr-galerie-colonnes) - 1) * var(--fr-galerie-ecart)) /
      var(--fr-galerie-colonnes)
  );

  /* 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;
}

.fr-galerie .fr-galerie__vignette {
  flex: 0 1 var(--fr-galerie-vignette);
  max-width: var(--fr-galerie-vignette);
  margin: 0;
  padding: 0;
}

/* --- Équilibrage des rangées -------------------------------------------------
   Quatre vignettes au maximum par rangée, et dès qu'il en faut plusieurs on
   RÉPARTIT au lieu de laisser une rangée presque vide :

     5 → 3 + 2      7 → 4 + 3      9 → 3 + 3 + 3
     6 → 3 + 3      8 → 4 + 4     11 → 4 + 4 + 3

   Il suffit pour cela de faire passer la galerie à TROIS colonnes sur ces
   quelques effectifs : le retour à la ligne du flex fait le reste. Toutes les
   vignettes d'une même galerie gardent ainsi la même taille — les découper en
   rangées de largeurs différentes donnerait des photos de tailles inégales
   côte à côte.

   ⚠ Le comptage passe par « :nth-of-type » et NON « :nth-child » : CKEditor 5
   glisse ses propres <div> (l'interface « type-around ») À L'INTÉRIEUR du
   widget, ce qui fausserait :nth-child. Les vignettes étant des <figure>,
   compter par type les ignore — l'éditeur et le site voient le même découpage,
   ce qui est toute la raison d'être de cette feuille commune.

   Cantonné au-dessus du palier tablette : en dessous, ce sont les deux règles
   de fin de fichier qui commandent (deux colonnes, puis une), et la
   spécificité du « :has() » les battrait. */
@media (min-width: 992px) {
  .fr-galerie:has(> .fr-galerie__vignette:nth-of-type(5):last-of-type),
  .fr-galerie:has(> .fr-galerie__vignette:nth-of-type(6):last-of-type),
  .fr-galerie:has(> .fr-galerie__vignette:nth-of-type(9):last-of-type) {
    --fr-galerie-colonnes: 3;
  }
}

/* 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-colonnes: 2;
  }
}

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

.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));
}