/* FIXME: make this stuff responsive */


/*------------------------------------------------------------------------------------
 Dark mode, with a forced light-gray BG, for logos that were not designed for dark BGs
 -----------------------------------------------------------------------------------*/
@media (prefers-color-scheme: dark) {
    #uber_galery_container {
        background-color: #e3e3e3;
        display: flow-root; /* Pour que le background stretche sur la hauteur de son contenu, sinon ça sera pas visible */
        border-radius: 10px;
        box-shadow: 0px 0px 30px 0px black inset;
    }
}

/* Normal (light mode) styles */
#uber_galery_container{
    /*height: 100%; /* En théorie si .tuile_galerie avait un height en %, ceci serait super important pour que ça fonctionne: http://stackoverflow.com/questions/14545507/div-height-in-percentage
    …sauf que c'est pas le cas. */
    }

/* Pour que tout ça marche à la base, faut que chaque div conteneur "tuile_galerie" ait les mêmes dimensions maximales que les dimensions maximales de l'image, en pixels, histoire d'avoir des cubes uniformes (qui flow correctement avec float) dans lesquels seront centrés les images. On peut prendre arbitrairement width = 150px et height = 100px (c'est un bon ratio). J'ai tenté du "entièrement par pourcentages, mais comme on peut lire plus loin, c'est impossible. */

.tuile_galerie, .tuile_galerie_whiteBG{
    /*border: 1px solid #ccc; /* debug */
    float: left;
    margin: 1%; /*10px;*/
    /* Ici c'est particulièrement tordu. Une approche entièrement par pixels fonctionne mais pas top parce qu'on ne remplit pas la page horizontalement (donc les blocs ne "flow pas"). Or, une approche par pourcentage sur le height ne fonctionnera PAS, parce que même si on set le height de body, html et #uber_galery_container à "100%", alors la page ne pourra plus scroller, elle sera limitée à la hauteur de l'écran.*/
    width: 23%; /* Pour quatre colonnes, 100% - 4*2*1% = 92% --> / 4 = 23% each */
    /*height: 15%; /* ratio 66% de 23% = 15%. Mais c'est là où ça foire: la page ne pourrait plus scroller. */
    height: 100px; /* le hack à la con: une hauteur en pixels même si la largeur est en % ! */

    /* La magie pour que les trucs puissent être centrés à l'intérieur des divs, merci howtocenterincss.com */
    display: flex;
    justify-content: center;
    align-items: center;
}
    .tuile_galerie img, .tuile_galerie_whiteBG img{
        filter: grayscale(100%);
        /* Can't believe this actually works. What is this, 2016? */
        width: auto;
        height: auto;
        max-width: 150px;
        max-height: 100px;
        /* Forget les pourcentages ici, ça ne peut PAS fonctionner, y'a toujours un truc qui déconne. */
        /*max-width: 100%; /* Ceci ferait en sorte que certains logos seraient beaucoup plus larges que d'autres */
        /*max-height: 100%; /* Contrairement au cas en pixels, ici on peut juste mettre 100% */
    }
        .tuile_galerie img:hover, .tuile_galerie_whiteBG img:hover{
            filter: grayscale(0%);
        }