/* ./public/assets/css/recherche.css
 *
 * Page de recherche globale — Alès.City
 * Les grilles .snap-grid / .agenda-grid reprennent les styles de
 * public/page-hashtag.php (mêmes cartes, mêmes fonctions de rendu).
 */

.rch {
    max-width: 1400px;
    margin: 32px auto 48px;
    padding: 0 20px;
}

.rch__title {
    font-size: 1.7rem;
    line-height: 1.25;
    color: var(--black);
    margin-bottom: 16px;
    overflow-wrap: anywhere;
}

/* --- Formulaire --- */
.rch-form {
    display: flex;
    max-width: 720px;
    height: 52px;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--white);
    margin-bottom: 22px;
}

.rch-form:focus-within {
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(227, 7, 19, 0.12);
}

.rch-form input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    padding: 0 16px;
    font: inherit;
    font-size: 17px;
    outline: none;
}

.rch-form__btn {
    border: 0;
    background: var(--primary-red);
    color: var(--white);
    font: inherit;
    font-weight: 700;
    padding: 0 22px;
    cursor: pointer;
}

.rch-form__btn:hover {
    background: var(--primary-red-dark);
}

/* --- Onglets --- */
.rch-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: 18px;
}

.rch-tabs::-webkit-scrollbar {
    display: none;
}

.rch-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    margin-bottom: -2px;
    border-bottom: 3px solid transparent;
    color: var(--gray-600);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.rch-tab:hover {
    color: var(--black);
}

.rch-tab.is-active {
    color: var(--primary-red);
    border-bottom-color: var(--primary-red);
}

.rch-tab__count {
    background: var(--gray-100);
    color: var(--gray-800);
    font-size: 12px;
    padding: 1px 8px;
    border-radius: 10px;
}

.rch-tab.is-active .rch-tab__count {
    background: var(--primary-red);
    color: var(--white);
}

/* --- Hashtags suggérés --- */
.rch-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
}

.rch-tags__label {
    font-weight: 700;
    color: var(--gray-800);
    font-size: 14px;
}

.rch-tag {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 6px 12px;
    background: #fff5f5;
    border: 1px solid #f6c9cc;
    border-radius: 999px;
    color: var(--primary-red);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.rch-tag span {
    color: var(--gray-600);
    font-weight: 400;
    font-size: 12px;
}

.rch-tag:hover {
    background: var(--primary-red);
    color: var(--white);
}

.rch-tag:hover span {
    color: var(--white);
}

/* --- Sections --- */
.rch-section {
    margin-bottom: 38px;
}

.rch-section__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
}

.rch-section__head h2 {
    font-size: 1.25rem;
    color: var(--black);
}

.rch-section__head h2 span {
    color: var(--gray-600);
    font-weight: 400;
    font-size: .9em;
}

.rch-section__more {
    color: var(--primary-red);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.rch-section__more:hover {
    text-decoration: underline;
}

.rch-empty {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: 26px;
    text-align: center;
    color: var(--gray-800);
}

.rch-empty a {
    color: var(--primary-red);
}

.rch-empty__hint {
    margin-top: 6px;
    color: var(--gray-600);
    font-size: 14px;
}

.rch mark {
    background: #fff3a8;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* --- Actualités --- */
.rch-actus {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
}

.rch-actu {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    background: var(--white);
}

.rch-actu__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--gray-600);
    margin-bottom: 6px;
}

.rch-actu__src {
    background: var(--gray-800);
    color: var(--white);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

.rch-actu__src--maison {
    background: var(--primary-red);
}

.rch-actu__paywall {
    color: #b8860b;
    font-weight: 600;
}

.rch-actu__title {
    font-size: 16px;
    line-height: 1.35;
    margin-bottom: 4px;
}

.rch-actu__title a {
    color: var(--black);
    text-decoration: none;
}

.rch-actu__title a:hover {
    color: var(--primary-red);
    text-decoration: underline;
}

.rch-actu__desc {
    font-size: 14px;
    color: var(--gray-600);
}

/* --- Grille médias (reprise de page-hashtag.php) --- */
.snap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.snap-card { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-sm); background: var(--gray-100); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.snap-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.snap-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }
.snap-card__badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.7); color: #fff; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; z-index: 3; pointer-events: none; }
.snap-card video.video-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; }

/* --- Cartes agenda (reprise de page-hashtag.php) --- */
.agenda-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.rch-agenda-item { position: relative; display: flex; }
.rch-agenda-item > .agenda-card { flex: 1 1 auto; }
.rch-agenda-item.is-past .agenda-card { opacity: .75; }
.rch-agenda-item__past { position: absolute; bottom: 12px; right: 12px; background: var(--gray-800); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; pointer-events: none; }
.agenda-card { display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.07); text-decoration: none; color: inherit; transition: transform 0.18s, box-shadow 0.18s; }
.agenda-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,0.13); }
.agenda-card--featured { box-shadow: 0 2px 10px rgba(227,7,19,0.25); border: 1px solid #f6c9cc; }
.agenda-card__media { position: relative; aspect-ratio: 4 / 3; background: #f5f5f5; }
.agenda-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agenda-card__noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3em; opacity: 0.4; }
.agenda-card__type { position: absolute; top: 12px; left: 12px; background: rgba(227,7,19,0.92); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 14px; }
.agenda-card__star { position: absolute; top: 12px; right: 12px; background: #fff3cd; color: #856404; font-size: 14px; font-weight: 700; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.agenda-card__body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.agenda-card__date { font-size: 13px; color: #E30713; font-weight: 700; margin-bottom: 6px; }
.agenda-card__title { font-size: 1.05em; margin: 0 0 8px; line-height: 1.3; }
.agenda-card__venue { font-size: 13px; color: #666; margin-bottom: 12px; }
.agenda-card__meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.agenda-tag { font-size: 12px; background: #f0f0f0; color: #555; padding: 3px 10px; border-radius: 10px; font-weight: 600; }
.agenda-tag--dates { background: #ede7f6; color: #4527a0; }
.agenda-tag--free { background: #d4edda; color: #155724; }
.agenda-tag--audience { background: #e7f0fb; color: #1a5dab; }

@media (max-width: 600px) {
    .rch {
        margin-top: 20px;
        padding: 0 16px;
    }

    .rch__title {
        font-size: 1.35rem;
    }

    .rch-form {
        height: 48px;
    }

    .rch-form__btn {
        padding: 0 14px;
    }

    .rch-actus {
        grid-template-columns: 1fr;
    }

    .snap-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .agenda-grid { grid-template-columns: 1fr; }
}