/*
 * adresses.css — Styles spécifiques à la page Nos adresses
 *
 * → Migration Next.js : ce fichier deviendra
 *   app/adresses/page.module.css  (ou styles/adresses.module.css)
 */

/* site-header défini dans globals.css */

/* ── BANNIÈRE PAGE ─────────────────────────────────────────────── */
.page-banner {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    padding: 60px 20px 50px;
}

.page-banner .script-text {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.page-banner h1 {
    font-size: 3rem;
    color: var(--text-dark);
    margin-bottom: 14px;
}

.page-banner__title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 14px;
}

.page-banner__title-row h1 { margin-bottom: 0; }

.page-banner__icon {
    height: 48px;
    width: auto;
}

.page-banner__subtitle {
    font-size: 1.05rem;
    color: #666;
    max-width: 500px;
    margin: 0 auto;
}

/* ── CONTENU PRINCIPAL ─────────────────────────────────────────── */
.adresses-main {
    padding-top: 60px;
    padding-bottom: 100px;
}

/* ── FILTRES VILLES ────────────────────────────────────────────── */
.city-filters-wrapper {
    margin-bottom: 50px;
}

.city-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* Bouton filtre — état normal */
.city-filter-btn {
    border-radius: 30px;
    padding: 10px 24px;
    font-size: 0.9rem;
    transition: all 0.25s ease;
}

/* Bouton filtre — état actif */
.city-filter-btn--active {
    background-color: var(--primary-color);
    color: var(--text-light);
    border-color: var(--primary-color);
}
.city-filter-btn--active:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* ── TITRE VILLE ───────────────────────────────────────────────── */
.city-heading {
    margin-bottom: 36px;
    text-align: center;
}

.city-heading__title {
    font-size: 2.2rem;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.city-heading__subtitle {
    font-size: 0.95rem;
    color: #888;
}

/* ── GRILLE DE CARDS ───────────────────────────────────────────── */
.adresses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .adresses-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .page-banner h1      { font-size: 2.2rem; }
    .adresses-grid       { grid-template-columns: 1fr; }
    .city-filters        { gap: 8px; }
    .city-filter-btn     { padding: 8px 16px; font-size: 0.85rem; }
}