ts-search-suggestion {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    height: 100%;
    color: rgba(34, 30, 29, 1);
}

ts-search-suggestion form {
    flex: 1;
}

ts-search-suggestion .suggestions-container {
    position: absolute;
    display: none;
    padding-top: 16px;
    width: 100%;
    left: 0;
    top: 100%;
}

.main-header--search-open ts-search-suggestion.suggestions-opened:focus-within .suggestions-container,
ts-search-suggestion.suggestions-opened:focus-within .suggestions-container,
ts-search-suggestion:focus-within .suggestions-container {
    display: block;
}

ts-search-suggestion .suggestions-container:not(:has(ul > li)) {
    display: none !important;
}

ts-search-suggestion .suggestions-container .suggestions-inner {
    background-color: white;
    box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.12);
    padding: 20px 0;
}

ts-search-suggestion .suggestions-container .suggestions-inner .content-inner-wrapper {
    min-height: 50px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 20px 20px 20px;
}

ts-search-suggestion .suggestions-container .suggestions-inner .collection-title {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: var(--fw-semibold); /* 600 */
    color: #a3a3a3; /* color(dark-grey) dans les variables du thème */
    padding-bottom: 8px;
    line-height: 1;
    border-bottom: 1px solid rgba(230, 230, 230, 1);
    margin-bottom: 10px;
}

ts-search-suggestion .suggestions-container .suggestions-inner .icon-trends {
    color: #a3a3a3; /* color(dark-grey) dans les variables du thème */
}

ts-search-suggestion .suggestions-container .suggestions-inner .icon-trends path {
    fill: currentColor;
}

ts-search-suggestion .suggestions-container .suggestions-inner .main-result-title {
    border-bottom: 1px solid rgba(230, 230, 230, 1);
    line-height: 1;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

ts-search-suggestion .suggestions-container .suggestions-inner .main-result-title .collection-title-results {
    display: none;
}

ts-search-suggestion .suggestions-container .suggestions-inner .main-result-title .collection-title {
    border: none
}

ts-search-suggestion .suggestions-container .suggestions-inner .main-list-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/*
 * Dans le panneau de recherche du header, les séparateurs structurent les
 * groupes de résultats. Ils doivent apparaître après chaque groupe affiché,
 * et non sous son intitulé.
 */
ts-search-suggestion[data-mode="header"] .suggestions-container .suggestions-inner .collection-title,
ts-search-suggestion[data-mode="header"] .suggestions-container .suggestions-inner .main-result-title {
    border-bottom: 0;
}

ts-search-suggestion[data-mode="header"] .suggestions-container .suggestions-inner .main-list-container {
    gap: 0;
    padding-right: 20px;
}

ts-search-suggestion[data-mode="header"] .suggestions-container .suggestions-inner .content-inner-wrapper {
    padding-right: 0;
}

ts-search-suggestion[data-mode="header"] .suggestions-container .suggestions-inner .main-result-title {
    padding-right: 20px;
}

ts-search-suggestion[data-mode="header"] .suggestions-container .suggestions-inner .suggestion-hits:has(ul > li):has(~ .suggestion-hits ul > li) {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(230, 230, 230, 1);
}

ts-search-suggestion .suggestions-container .suggestions-inner .main-list-container .suggestion-hits .suggestion-item[aria-selected="true"] {
    background-color: rgba(202, 202, 202, 1);
}

ts-search-suggestion .suggestions-container .suggestions-inner .suggestion-item {
    position: relative;
    font-size: 14px;
    margin-bottom: 8px;
}

ts-search-suggestion .suggestions-container .suggestions-inner .suggestion-item::after {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 20px;
    height: 19px;
    content: '';
    pointer-events: none;
    background: url('/app/themes/acs/assets/img/svg/arrow-right-short.svg') center / contain no-repeat;
    transform: translateY(-50%);
}

ts-search-suggestion .suggestions-container .suggestions-inner .main-list-container .suggestion-hits.default li.suggestion-item {
    cursor: pointer;
    position: relative;
}

ts-search-suggestion .suggestions-container .suggestions-inner .main-list-container .suggestion-hits li.suggestion-item button {
    display: block;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Inner element of li.suggestion-item: button or link */
ts-search-suggestion .suggestions-container .suggestions-inner .main-list-container .suggestion-hits.default li.suggestion-item a,
ts-search-suggestion .suggestions-container .suggestions-inner .main-list-container .suggestion-hits.default li.suggestion-item button {
    width: 100%;
    text-decoration: none;
    margin: 0;
    padding: 0 44px 0 24px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

/* Icon search */
ts-search-suggestion .suggestions-container .suggestions-inner .main-list-container .suggestion-hits.default li.suggestion-item::before {
    position: absolute;
    left: 0;
    top: 1px;
    content: "";
    background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.0207 11.078L14.876 13.9327L13.9327 14.876L11.078 12.0207C10.0158 12.8721 8.69467 13.3353 7.33333 13.3333C4.02133 13.3333 1.33333 10.6453 1.33333 7.33333C1.33333 4.02133 4.02133 1.33333 7.33333 1.33333C10.6453 1.33333 13.3333 4.02133 13.3333 7.33333C13.3353 8.69467 12.8721 10.0158 12.0207 11.078ZM10.6833 10.5833C11.5294 9.71326 12.0019 8.54695 12 7.33333C12 4.75467 9.91133 2.66667 7.33333 2.66667C4.75467 2.66667 2.66667 4.75467 2.66667 7.33333C2.66667 9.91133 4.75467 12 7.33333 12C8.54695 12.0019 9.71326 11.5294 10.5833 10.6833L10.6833 10.5833Z" fill="%23221E1D"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 20px;
}

/* Hide empty list */
ts-search-suggestion .suggestions-container .suggestions-inner .main-result-title {
    display: none;
}

ts-search-suggestion .suggestions-container .suggestions-inner .main-list-container .suggestion-hits:has(ul:empty) {
    display: none;
}

/* Show main title */
ts-search-suggestion .suggestions-container .suggestions-inner:has(ul > li) .main-result-title {
    display: block;
}

ts-search-suggestion:has(input[type="search"]:not(:placeholder-shown)) .suggestions-inner .main-result-title .collection-title-results {
    display: inline;
}

ts-search-suggestion:has(input[type="search"]:not(:placeholder-shown)) .suggestions-inner .main-result-title .icon-trends,
ts-search-suggestion:has(input[type="search"]:not(:placeholder-shown)) .suggestions-inner .main-result-title .collection-title-trends {
    display: none;
}

/* Default submit black button */
ts-search-suggestion .default-submit-btn {
    max-width: 140px;
}

ts-search-suggestion .default-submit-btn .btn-label {
    display: none;
}
ts-search-suggestion .default-submit-btn .icon-search {
    display: block;
}

@media screen and (min-width: 768px) {
    ts-search-suggestion .default-submit-btn {
        padding: 5px 30px;
    }

    ts-search-suggestion .default-submit-btn .btn-label {
        display: block;
    }

    ts-search-suggestion .default-submit-btn .icon-search {
        display: none;
    }
}

/* -------------------------------------------------------
   Favorite words shortcode — pill/tag list
   [typesense_favorite_words]
------------------------------------------------------- */
.ts-favorite-words {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
}

.ts-favorite-words__item {
    margin: 0;
    padding: 0;
}

.ts-favorite-words__tag {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid rgba(34, 30, 29, 0.25);
    border-radius: 4px;
    background-color: #ffffff;
    color: rgba(34, 30, 29, 1);

    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ts-favorite-words__tag:hover,
.ts-favorite-words__tag:focus {
    background-color: #00475a;
    border-color: rgba(34, 30, 29, 0.5);
    text-decoration: none;
    outline: none;
}

.ts-favorite-words-empty {
    color: rgba(34, 30, 29, 0.6);
    margin: 12px 0 0 0;
}

/* Live polite */
.nb-count-polite[aria-live="polite"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}