#dropdown-preview {
     max-height: 300px;
     overflow-y: auto;
     right: 0;
     left: auto;
     z-index: 999;
 }

 .dropdown-toggle::after {
     display: none !important;
 }

 #dropdown-preview li.hover-bg-gray:hover {
     background-color: #f0f0f0;
     cursor: pointer;
 }

.lg-outer .lg-comment-toggle:after {
  display: none !important;
}

#informations {
    width: auto;
    padding: 0;
}

.lg-toolbar .lg-icon {
    color: white;
}
/* ==========================================================================
   Filtre du portfolio
   Un seul champ de selection, groupe par categorie. Isotope ne filtre que
   sur un critere a la fois, donc un select unique suffit.
   ========================================================================== */

#portfolio-flters {
    width: 100%;
    max-width: 420px;
    margin: 0 auto 30px auto;
    text-align: center;
}

.pf-label {
    display: block;
    margin-bottom: 8px;
    color: #7a7a7a;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pf-champ {
    position: relative;
}

/* Chevron dessine en CSS : pas de requete reseau, et il suit la couleur. */
.pf-champ::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 9px;
    height: 9px;
    margin-top: -6px;
    border-right: 2px solid #34b7a7;
    border-bottom: 2px solid #34b7a7;
    transform: rotate(45deg);
    pointer-events: none;
}

#pf-filtre {
    width: 100%;
    padding: 14px 46px 14px 20px;
    border: 1px solid #dcdcdc;
    border-radius: 50px;
    background: #fff;
    color: #2c2c2c;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#pf-filtre:hover {
    border-color: #34b7a7;
}

#pf-filtre:focus {
    outline: none;
    border-color: #34b7a7;
    box-shadow: 0 0 0 3px rgba(52, 183, 167, 0.18);
}

/* Un filtre est actif : le champ se demarque. */
#pf-filtre.pf-actif {
    border-color: #34b7a7;
    background: rgba(52, 183, 167, 0.08);
    font-weight: 600;
}

#pf-filtre optgroup {
    color: #7a7a7a;
    font-size: 12px;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#pf-filtre option {
    padding: 6px 0;
    color: #2c2c2c;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.pf-etat {
    margin: 12px 0 0 0;
    color: #9a9a9a;
    font-size: 13px;
}

/* ==========================================================================
   Barre d'outils de la lightbox
   ========================================================================== */

/* Sur telephone, le libelle "INFORMATIONS" fait 132 px et repousse le reste
   de la barre hors de l'ecran : on ne garde que l'icone. */
@media (max-width: 700px) {
    #informations .custom-comment-label > span {
        display: none;
    }

    #informations {
        padding: 0 6px !important;
    }

}

/* La barre empile ses boutons en float: right : sans marge, le bouton le plus
   a droite touche le bord de l'ecran. */
.lg-toolbar {
    padding-right: 4px;
}

/* ==========================================================================
   Titre de l'oeuvre dans la lightbox
   Il etait rendu en #eee, 16px, graisse 400, sans fond ni ombre : illisible
   des que le bas du tableau est clair. On ne pose pas de bandeau plein, qui
   masquerait la peinture, mais un degrade qui s'eteint completement vers le
   haut, double d'une ombre portee sur le texte.
   ========================================================================== */

.lg-sub-html {
    padding: 34px 40px 20px;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.82) 0%,
        rgba(0, 0, 0, 0.5) 45%,
        rgba(0, 0, 0, 0) 100%);
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.35;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
}

/* L'affichage du titre est decide par son contenu reel, et uniquement par lui.
   lightGallery pose une classe lg-empty-html sur la diapo et masque alors le
   titre par sa propre CSS, mais il le fait de facon peu fiable : sur un filtre
   Fauvisme, les diapos 3, 4 et 5 etaient marquees "vides" alors qu'elles
   avaient un nom, et le titre restait invisible. */

/* 228 peintures sur 466 n'ont pas de nom : lightGallery cree quand meme le
   conteneur, vide. Sans ce garde-fou, le degrade s'afficherait sur rien. */
.lg-sub-html:empty {
    display: none;
}

/* A l'inverse, un titre qui a du contenu s'affiche, quoi qu'en dise la classe. */
.lg-item.lg-empty-html .lg-sub-html:not(:empty) {
    display: block;
}

@media (max-width: 700px) {
    .lg-sub-html {
        padding: 30px 18px 16px;
        font-size: 16px;
    }
}

/* Le titre reste lisible quand lightGallery masque ses barres.
   Sur mobile, hideBarsDelay: 1000 fait disparaitre toute la barre au bout
   d'une seconde, le titre de l'oeuvre avec. La barre d'outils peut bien
   s'effacer pour degager la peinture, mais le titre doit rester : c'est la
   seule information affichee, et il ne revient qu'au prochain appui. */
.lg-outer.lg-hide-items .lg-sub-html {
    opacity: 1;
    transform: none;
}