/* Composant : home-filters
 * Chips de filtrage par catégorie + empty state pour la section "Si on nageait ?".
 * Consomme les design tokens de /site/css/global/tokens.css.
 */

.home-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 2rem 1rem;
}

.home-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.home-filter i {
    font-size: 13px;
}

.home-filter:hover {
    transform: translateY(-1px);
}

.home-filter:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* ───── Active (par catégorie) ───── */

.home-filter[data-filter="all"].is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-dark);
}

.home-filter[data-filter="piscine"].is-active {
    background: var(--color-type-piscine);
    border-color: var(--color-type-piscine);
    color: var(--color-text-on-dark);
}

.home-filter[data-filter="lac"].is-active {
    background: var(--color-type-lac);
    border-color: var(--color-type-lac);
    color: var(--color-text-on-dark);
}

.home-filter[data-filter="riviere"].is-active {
    background: var(--color-type-riviere);
    border-color: var(--color-type-riviere);
    color: var(--color-text-on-dark);
}

.home-filter[data-filter="plage"].is-active {
    background: var(--color-type-plage);
    border-color: var(--color-type-plage);
    color: var(--color-text-on-dark);
}

/* ───── Hover non-active (pastel par catégorie) ───── */

.home-filter[data-filter="piscine"]:hover:not(.is-active) {
    background: var(--color-type-piscine-light);
    border-color: var(--color-type-piscine);
    color: var(--color-type-piscine-deep);
}

.home-filter[data-filter="lac"]:hover:not(.is-active) {
    background: var(--color-type-lac-light);
    border-color: var(--color-type-lac);
    color: var(--color-type-lac-deep);
}

.home-filter[data-filter="riviere"]:hover:not(.is-active) {
    background: var(--color-type-riviere-light);
    border-color: var(--color-type-riviere);
    color: var(--color-type-riviere-deep);
}

.home-filter[data-filter="plage"]:hover:not(.is-active) {
    background: var(--color-type-plage-light);
    border-color: var(--color-type-plage);
    color: var(--color-type-plage-deep);
}

.home-filter[data-filter="all"]:hover:not(.is-active) {
    background: var(--color-surface-alt);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ───── Section title ───── */

.home-section-title {
    margin: 60px 0 8px;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--color-text-primary);
    text-align: center;
}

.home-section-title-accent {
    color: var(--color-secondary);
}

.home-section-subtitle {
    margin: 0 auto 8px;
    max-width: 540px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    text-align: center;
}

.proximite-container.is-empty {
    padding-top: 0;
    padding-bottom: 2rem;
}

/* ───── Empty state ───── */

.home-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1.5rem 1rem;
    gap: 12px;
}

.home-empty[hidden] {
    display: none;
}

.home-empty__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(244, 185, 66, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #f4b942;
}

.home-empty__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.home-empty__text {
    margin: 0;
    max-width: 360px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.home-empty__btn {
    margin-top: 8px;
    padding: 10px 22px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-text-on-dark);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.home-empty__btn:hover {
    background: var(--color-secondary);
}

.home-empty__btn:focus-visible {
    outline: 2px solid var(--color-tertiary);
    outline-offset: 2px;
}

/* ───── Toast correction Typesense ───── */

.home-correction-message {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    max-width: 300px;
    padding: 12px 16px;
    background: rgba(31, 181, 116, 0.12);
    color: #0a6b3f;
    border: 1px solid rgba(31, 181, 116, 0.35);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    line-height: 1.4;
}

.home-correction-message__icon {
    color: var(--color-verified);
    margin-right: 8px;
}