:root{
    /* espace de recherche */
    --input-bd: black;
    --input-text: black;
    --input-bg: white;
    --input-exit: red;

    /* div avec les resultas */
    --resulta-bg: white;

    /* suggestion de recherche */
    --suges-bg: #ededed;
    --suges-text: black;
    --suges-bt-bg: white;
    --suges-bt-text: black;
    --suges-bt-bg-hover: rgb(1, 1, 114);
    --suges-bt-text-hover: white;

    /* chaque resultat  */
    --article-bg: white;
    --article-bd: rgb(129, 129, 129);
    --article-text: black;
    --artcile-titre-hover: rgb(1, 1, 114);
    --article-autor: rgb(1, 1, 65);
}

.block-elasticsearch{/* height: 50px; */color: var(--input-exit);font-weight: 800;/* position:relative; *//* padding-right: 15px; */display: flex;align-items: center;}

/* .block-elasticsearch:has(#illicosearch-search:focus)::before{content: "X";float: right;margin-top: 8px;position:absolute;right:0;} */

.block-elasticsearch #illicosearch-search{/* width: 100%; *//* border: solid 2px var(--input-bd); */border: none;border-radius: 10px;padding: 10px 20px;/* font-size: 12px; */text-transform: uppercase;font-weight: 700;color: var(--input-text);background-color: var(--input-bg);}
.block-elasticsearch svg {stroke: var(--input-text);position: absolute;right: 20px;}

#illicosearch-response:not(:empty){margin-top: 10px;max-height: 70vh !important;overflow: auto !important;}
#illicosearch-response .resultat{background-color: var(--resulta-bg);padding: 15px;}

#illicosearch-response .suggestionrecherche{padding: 15px;background-color: var(--suges-bg);border-radius: 10px;margin-bottom: 10px;color: var(--suges-text);}
#illicosearch-response .suggestionrecherche strong{display: block;}
#illicosearch-response .suggestionrecherche p{display: inline-block;margin: 5px;background-color: var(--suges-bt-bg);padding: 10px;border-radius: 7px;cursor: pointer;color: var(--suges-bt-text);}
#illicosearch-response .suggestionrecherche p: hover{background-color: var(--suges-bt-bg-hover);color: var(--suges-bt-text-hover);}

#illicosearch-response .titlerecherche{color: var(--article-text);font-weight: 700;font-size: 17px;margin-bottom: 5px;line-height: 1.2em;}

#illicosearch-response .articlerecherche{border: 2px solid var(--article-bd);border-radius: 10px;display: flex;flex-direction: row;padding: 15px;overflow: hidden;width: 100%;margin-top: 5px;}
#illicosearch-response .articlerecherche: hover .titlerecherche{color: var(--artcile-titre-hover);}
#illicosearch-response .articlerecherche .autor{display: flex;gap: 10px;color: var(--article-autor) !important;font-weight: 700;font-size: 12px;margin-bottom: 5px;}
#illicosearch-response .articlerecherche .html{color: var(--article-text);margin-top: 4px;font-size: 12px;line-height: 18px;margin: 0;}

#illicosearch-response .imagerecherche{height: 110px;width: 110px;min-height: 80px;min-width: 80px;top: 0;margin-right: 15px;float: left;display: flex;justify-content: center;align-content: center;}
#illicosearch-response .imagerecherche img{object-fit: cover;border-radius: 7px !important;}

@media (max-width: 720px) {
    #illicosearch-response .imagerecherche{max-width: 80px;max-height: 80px;display: flex;justify-content: center;margin-bottom: 10px;}
    #illicosearch-response .articlerecherche a{width: 100%;overflow: hidden;}
    #illicosearch-response .articlerecherche .titlerecherche{font-size: 14px;}
    #illicosearch-response .articlerecherche .autor{font-size: 12px;}
    #illicosearch-response .articlerecherche .html{font-size: 12px;}
}