/* ==========================================================================
   Recherche du site (module Search)
   Déclencheurs de la navbar + modale. Couleurs tirées des jetons du front
   (--primary-rgb / --primary-color), toujours avec une valeur de repli : un
   var() non résolu annulerait toute la déclaration.
   ========================================================================== */

.site-search {
    --ss-primary: var(--primary-rgb, 90, 125, 90);
    --ss-ink: 33, 37, 41;
    --ss-radius: 1rem;
}

/* ---------------------------------------------------------------- Déclencheurs */

.site-search-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--primary-color, #5a7d5a);
    background: rgba(var(--primary-rgb, 90, 125, 90), .1);
    transition: background-color .2s ease, transform .2s ease;
}

.site-search-trigger:hover,
.site-search-trigger:focus-visible {
    background: rgba(var(--primary-rgb, 90, 125, 90), .2);
    transform: scale(1.05);
}

/* Faux champ en tête du menu burger. */
.site-search-field {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(var(--primary-rgb, 90, 125, 90), .25);
    border-radius: .75rem;
    color: rgba(0, 0, 0, .55);
    background: rgba(var(--primary-rgb, 90, 125, 90), .06);
    text-align: left;
}

.site-search-field i { color: var(--primary-color, #5a7d5a); }

/* ---------------------------------------------------------------- Modale */

.site-search .modal-dialog { margin-top: 8vh; }

.site-search__content {
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    overflow: hidden;
    border: 0;
    border-radius: var(--ss-radius);
    /* Fond explicite : la `.modal-content` de MDB lit une variable que le front ne définit pas, la
       modale était transparente et la page passait au travers. */
    background-color: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
}

.site-search__head {
    flex-shrink: 0;
    border-bottom: 1px solid rgba(var(--ss-ink), .08);
}

.site-search__form {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    margin: 0;
}

.site-search__glass {
    font-size: 1.15rem;
    color: var(--primary-color, #5a7d5a);
}

.site-search__input {
    flex: 1;
    min-width: 0;
    padding: .25rem 0;
    border: 0;
    outline: 0;
    font-size: 1.2rem;
    background: transparent;
    color: rgb(var(--ss-ink));
}

.site-search__input::placeholder { color: rgba(var(--ss-ink), .4); }
/* La croix native fait doublon avec la nôtre. */
.site-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.site-search__spinner {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid rgba(var(--ss-primary), .25);
    border-top-color: rgb(var(--ss-primary));
    border-radius: 50%;
    animation: site-search-spin .7s linear infinite;
}

@keyframes site-search-spin { to { transform: rotate(360deg); } }

.site-search__clear,
.site-search__close {
    flex-shrink: 0;
    border: 0;
    background: rgba(var(--ss-ink), .06);
    color: rgba(var(--ss-ink), .65);
    transition: background-color .15s ease;
}

.site-search__clear {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
}

.site-search__close {
    padding: .3rem .6rem;
    border-radius: .5rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.site-search__clear:hover,
.site-search__close:hover { background: rgba(var(--ss-ink), .12); }

/* Filtres : une rangée qui défile horizontalement plutôt que de passer sur trois lignes. */
.site-search__filters {
    display: flex;
    gap: .4rem;
    padding: 0 1.25rem .9rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.site-search__filters::-webkit-scrollbar { display: none; }

.site-search__chip {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border: 1px solid rgba(var(--ss-ink), .12);
    border-radius: 2rem;
    font-size: .85rem;
    color: rgba(var(--ss-ink), .75);
    background: #fff;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

.site-search__chip i { font-size: .8em; opacity: .7; }
.site-search__chip:hover { border-color: rgba(var(--ss-primary), .5); }
.site-search__chip.is-active { color: #fff; background: rgb(var(--ss-primary)); border-color: rgb(var(--ss-primary)); }
.site-search__chip.is-active i { opacity: 1; }
.site-search__chip.is-empty { opacity: .45; }

.site-search__chip-count {
    padding: .05rem .45rem;
    border-radius: 2rem;
    font-size: .75em;
    font-weight: 700;
    background: rgba(var(--ss-primary), .14);
    color: rgb(var(--ss-primary));
}

.site-search__chip.is-active .site-search__chip-count { background: rgba(255, 255, 255, .25); color: #fff; }

.site-search__body {
    flex: 1;
    min-height: 14rem;
    padding: .75rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.site-search__label {
    margin: 0 0 .4rem;
    padding: 0 .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(var(--ss-ink), .5);
}

/* ---------------------------------------------------------------- Résultats */

.site-search__group + .site-search__group { margin-top: .9rem; }

.site-search__group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .25rem;
}

.site-search__more {
    padding: .15rem .5rem;
    border: 0;
    border-radius: .4rem;
    font-size: .78rem;
    font-weight: 600;
    color: rgb(var(--ss-primary));
    background: transparent;
}

.site-search__more:hover { background: rgba(var(--ss-primary), .08); }

.site-search__item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .55rem .6rem;
    border-radius: .75rem;
    color: inherit;
    text-decoration: none;
    scroll-margin: .5rem;
}

.site-search__item.is-active { background: rgba(var(--ss-primary), .1); }

.site-search__thumb {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    overflow: hidden;
    border-radius: .6rem;
    color: rgb(var(--ss-primary));
    background: rgba(var(--ss-primary), .1);
}

.site-search__thumb.is-round { border-radius: 50%; }
.site-search__thumb img { width: 100%; height: 100%; object-fit: cover; }

.site-search__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.site-search__title,
.site-search__sub {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.site-search__title { font-weight: 600; color: rgb(var(--ss-ink)); }
.site-search__sub { font-size: .85rem; color: rgba(var(--ss-ink), .6); }

.site-search__item mark {
    padding: 0;
    color: inherit;
    background: rgba(var(--ss-primary), .22);
    border-radius: .15rem;
}

.site-search__meta {
    flex-shrink: 0;
    max-width: 40%;
    padding: .2rem .6rem;
    overflow: hidden;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(var(--ss-ink), .7);
    background: rgba(var(--ss-ink), .06);
}

.site-search__meta.tone-primary { color: rgb(var(--ss-primary)); background: rgba(var(--ss-primary), .12); }
.site-search__meta.tone-success { color: #1e6b3a; background: rgba(46, 160, 90, .14); }
.site-search__meta.tone-warning { color: #8a5300; background: rgba(240, 160, 40, .18); }

.site-search__enter {
    flex-shrink: 0;
    font-size: .8rem;
    color: rgb(var(--ss-primary));
    opacity: 0;
    transition: opacity .15s ease;
}

.site-search__item.is-active .site-search__enter { opacity: 1; }

/* ---------------------------------------------------------------- Idle, vides, chargement */

.site-search__idle { padding: .5rem .25rem; }

.site-search__recent-row {
    display: flex;
    align-items: center;
    border-radius: .6rem;
}

.site-search__recent-term {
    display: flex;
    flex: 1;
    align-items: center;
    gap: .7rem;
    padding: .5rem .5rem;
    border: 0;
    border-radius: .6rem;
    text-align: left;
    color: rgb(var(--ss-ink));
    background: transparent;
}

.site-search__recent-term i { color: rgba(var(--ss-ink), .4); }
.site-search__recent-term:hover,
.site-search__recent-term.is-active { background: rgba(var(--ss-primary), .08); }

.site-search__recent-drop {
    padding: .3rem .55rem;
    border: 0;
    border-radius: .4rem;
    color: rgba(var(--ss-ink), .4);
    background: transparent;
}

.site-search__recent-drop:hover { color: rgb(var(--ss-ink)); background: rgba(var(--ss-ink), .06); }

.site-search__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: .5rem;
}

.site-search__tile {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .7rem;
    border: 1px solid rgba(var(--ss-ink), .08);
    border-radius: .75rem;
    font-size: .9rem;
    font-weight: 600;
    text-align: left;
    color: rgb(var(--ss-ink));
    background: #fff;
    transition: border-color .15s ease, transform .15s ease;
}

.site-search__tile:hover { border-color: rgba(var(--ss-primary), .45); transform: translateY(-1px); }
.site-search__tile.is-active { border-color: rgb(var(--ss-primary)); }

.site-search__tile-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    color: rgb(var(--ss-primary));
    background: rgba(var(--ss-primary), .1);
}

.site-search__state {
    padding: 2.5rem 1rem;
    text-align: center;
}

.site-search__state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    margin-bottom: .8rem;
    border-radius: 50%;
    font-size: 1.2rem;
    color: rgb(var(--ss-primary));
    background: rgba(var(--ss-primary), .1);
}

.site-search__skeleton { padding: .5rem; }

.site-search__skeleton span {
    display: block;
    height: 2.6rem;
    margin-bottom: .6rem;
    border-radius: .75rem;
    background: linear-gradient(90deg, rgba(var(--ss-ink), .05), rgba(var(--ss-ink), .1), rgba(var(--ss-ink), .05));
    background-size: 200% 100%;
    animation: site-search-shimmer 1.2s ease-in-out infinite;
}

.site-search__skeleton span:nth-child(2n) { width: 85%; }

@keyframes site-search-shimmer { to { background-position: -200% 0; } }

.site-search__foot {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: .4rem 1.2rem;
    padding: .65rem 1.25rem;
    border-top: 1px solid rgba(var(--ss-ink), .08);
    font-size: .75rem;
    color: rgba(var(--ss-ink), .5);
    background: rgba(var(--ss-ink), .02);
}

.site-search__foot kbd {
    margin-right: .2rem;
    padding: .1rem .35rem;
    border: 1px solid rgba(var(--ss-ink), .15);
    border-radius: .3rem;
    font-size: .7rem;
    color: rgba(var(--ss-ink), .7);
    background: #fff;
    box-shadow: 0 1px 0 rgba(var(--ss-ink), .12);
}

/* ---------------------------------------------------------------- Mobile : plein écran */

@media (max-width: 767.98px) {
    .site-search .modal-dialog { margin: 0; }
    .site-search__content { max-height: none; border-radius: 0; }
    .site-search__form { padding: .75rem 1rem; }
    .site-search__input { font-size: 1.05rem; }
    /* Le bouton retour mène là où l'on était : à gauche, comme partout sur mobile. */
    .site-search__close { order: -1; padding: .45rem .6rem; background: transparent; }
    .site-search__glass { display: none; }
    .site-search__filters { padding: 0 1rem .75rem; }
    .site-search__foot { display: none; }
    .site-search__body { padding: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .site-search__spinner,
    .site-search__skeleton span { animation: none; }
    .site-search__tile:hover,
    .site-search-trigger:hover { transform: none; }
}