/* ==========================================================================
   Tuiles : remplissage progressif
   ==========================================================================

   À activer dans Flora Collections › Paramétrage avancé, liste des feuilles de
   style additionnelles. Cette feuille ne contient QUE la réservation des
   emplacements de vignettes : elle peut donc être activée seule, sans embarquer
   les autres surcharges de « 009_resultatsrecherche_01.css ».

   Le cadrage du fond (image par défaut affichée en attendant la vignette) n'est
   pas ici : il est posé en style inline par le gabarit, afin de s'appliquer même
   quand aucune feuille additionnelle n'est activée.
   Voir blocs/resultatsrecherche/templates/include/recherche.figures.view.php
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tuiles verticales : réserver la place de chaque vignette.

   POURQUOI
   L'image des tuiles n'a ni width/height ni ratio, et la règle plus haut lui
   donne « height: auto ». Tant qu'une image n'est pas arrivée, sa tuile a donc
   une hauteur nulle : les N tuiles de la page sont tassées en un bloc minuscule,
   et chaque image reçue fait grandir sa tuile et repousse toutes les suivantes.
   La grille se reconstruit à chaque arrivée et la page n'a sa hauteur définitive
   qu'une fois la dernière image chargée — d'où l'impression que rien ne
   progresse à l'écran.

   Avec un ratio fixe, la grille complète est posée dès le premier rendu (des
   emplacements gris vides), la hauteur de page est définitive, et chaque image
   vient simplement se poser dans son emplacement au fil du chargement.

   Les modes « tuile » et « grille » réservent déjà leur place avec
   « .containerfigure { height: 300px } » : on applique ici le même principe,
   en ratio plutôt qu'en hauteur fixe car la tuile verticale fait 30 % de large
   et doit donc suivre la largeur de la colonne. Le mode « mosaïque » est
   volontairement laissé de côté : sa mise en page masonry a besoin de la
   hauteur réelle des images.
   -------------------------------------------------------------------------- */
.floraComposant.floraResultatsRecherche .containerFacettesResultats .figures.tuileverticale .containerfigure {
    aspect-ratio: 1 / 1;
    background-color: #ededed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floraComposant.floraResultatsRecherche .containerFacettesResultats .figures.tuileverticale figure.image .imgfigure {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Filet de securite : tant que Macy n'a pas pris la main (JavaScript lent, en
   echec, ou premier rendu avant DOMContentLoaded), les figures restent dans le
   flux CSS. Sans habillage elles s'empilent UNE PAR LIGNE, puisqu'elles font
   30 % de large : la page part alors sur plusieurs dizaines de milliers de
   pixels de haut. Avec l'habillage, le premier rendu montre deja des rangees
   remplies. Une fois Macy passe, les figures sont en position absolue, donc
   hors flux : cette regle ne gene pas sa mise en page. */
.floraComposant.floraResultatsRecherche .containerFacettesResultats .figures.tuileverticale {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}