/* =========================================================================
   Page de ville refondue — 2.135.0, 26 septembre 2026.

   Chargée avec eg-ap.css sur ?apercu=1, et pour tout le monde quand
   l'option eg_refonte_ville vaut 1.

   Ce que cette feuille fait : elle habille le héros neuf, et elle
   ré-habille les blocs repris de l'ancien gabarit — les cartes, les
   tuiles, les listes — sans toucher à leur balisage ni à leurs
   identifiants, dont dépend le script de filtre et de tri.

   Rien n'est masqué ici. Une règle qui cache un bloc serait une
   suppression déguisée.
   ========================================================================= */

.ap-ville { background: var(--ap-papier); }

/* ---------- Le héros ---------- */
.ap-vhero { background: var(--ap-encre); color: #fff; padding: 52px 0 44px; }
.ap-fil { margin: 0 0 16px; font-family: var(--eg-display, Oswald), sans-serif; font-weight: 300; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .62); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ap-fil a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.ap-fil a:hover { color: var(--ap-lampe); }
.ap-fil i { font-style: normal; color: rgba(255, 255, 255, .38); }

.ap-vhero__h { font-size: clamp(38px, 5vw, 62px); }
.ap-vhero__pg { font-family: var(--eg-body, Karla), sans-serif; font-size: 17px; color: rgba(255, 255, 255, .62); letter-spacing: 0; }
.ap-vhero__lede { max-width: 46em; margin-top: 18px; }
.ap-vhero__vois { margin: 14px 0 0; font-size: 15.5px; }
.ap-vhero__vois a { color: var(--ap-lampe); }

.ap-vrech { margin-top: 30px; max-width: 900px; }
.ap-vrech select { width: 100%; border: 0; outline: 0; background: transparent; font-family: var(--eg-body, Karla), sans-serif; font-size: 16px; color: var(--ap-encre); padding: 3px 0; }

/* Les puces gardent leur classe (le script s'en sert) et changent d'allure. */
.ap-vpuces { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; overflow: visible; padding: 0; }
.ap-vpuces .eg-vr__puce { flex: none; display: inline-flex; align-items: center; gap: 8px; height: auto; padding: 10px 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .88); font-family: var(--eg-display, Oswald), sans-serif; font-size: 14px; letter-spacing: .04em; cursor: pointer; text-decoration: none; }
.ap-vpuces .eg-vr__puce:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.ap-vpuces .eg-vr__puce i { font-style: normal; font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.ap-vpuces .eg-vr__puce[aria-pressed="true"] { background: var(--ap-lampe); color: var(--ap-encre); }
.ap-vpuces .eg-vr__puce[aria-pressed="true"] i { color: rgba(18, 18, 15, .72); }
.ap-vpuces .eg-vr__puce--page { box-shadow: inset 0 0 0 1.5px rgba(232, 184, 96, .5); background: transparent; color: var(--ap-lampe); }

/* ---------- Les enseignes, remontées ---------- */
.ap-vens { padding: 56px 0 0; }
.ap-vens .ap-h2 { margin-bottom: 22px; }
.ap-vens__l .ap-grain { background: #fff; box-shadow: 0 1px 2px rgba(18, 18, 15, .05); }

/* ---------- Les blocs repris ---------- */
.ap-ville .eg-ville__liste { padding-top: 56px; }

.ap-ville .eg-ch__sep,
.ap-ville .eg-v__sep {
	font-family: var(--eg-display, Oswald), sans-serif;
	font-weight: 300;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.1;
	color: var(--ap-encre);
	margin: 44px 0 22px;
}
.ap-ville .eg-ch__sep span { color: inherit; }

.ap-ville .eg-ville__h2 {
	font-family: var(--eg-display, Oswald), sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.15;
	color: var(--ap-encre);
}

.ap-ville .eg-v__bref { background: var(--ap-encre); color: #fff; border: 0; border-radius: var(--ap-r); padding: 26px 28px; }
.ap-ville .eg-v__bref h2 { color: var(--ap-lampe); letter-spacing: .2em; }
.ap-ville .eg-v__bref b { color: #fff; }
.ap-ville .eg-v__bref ul { color: rgba(255, 255, 255, .78); }

.ap-ville .eg-v__tuile { background: #fff; border: 0; border-radius: var(--ap-r); padding: 28px 26px; box-shadow: var(--ap-ombre); }
.ap-ville .eg-v__tuile strong { font-family: var(--eg-display, Oswald), sans-serif; font-weight: 300; font-size: 46px; line-height: 1; color: var(--ap-chaud); }

.ap-ville .eg-ch-chip { border-radius: 999px; }
.ap-ville .eg-v__case { border: 0; border-radius: 999px; background: rgba(18, 18, 15, .045); }

.ap-ville .eg-v__fermees { margin-top: 44px; border-top: 1px solid var(--ap-fil); padding-top: 10px; }
.ap-ville .eg-v__fermees summary { font-family: var(--eg-display, Oswald), sans-serif; font-size: 18px; }

.ap-ville .eg-ville__pages { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 36px 0 0; }
.ap-ville .eg-ville__pages a,
.ap-ville .eg-ville__pages span[aria-current] { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 999px; font-family: var(--eg-display, Oswald), sans-serif; font-size: 16px; text-decoration: none; }
.ap-ville .eg-ville__pages a { background: rgba(18, 18, 15, .045); color: var(--ap-encre); }
.ap-ville .eg-ville__pages a:hover { background: var(--ap-encre); color: #fff; }
.ap-ville .eg-ville__pages span[aria-current] { background: var(--ap-lampe); color: var(--ap-encre); }
.ap-ville .eg-ville__pages-nb { font-size: 15px; color: var(--ap-txt3); margin-left: 8px; }

.ap-ville .eg-ville__minis,
.ap-ville .eg-ville__actus,
.ap-ville .eg-ville__faq,
.ap-ville .eg-ville__autres,
.ap-ville .eg-ville__themes { padding-top: 56px; }

.ap-ville .eg-bref__q { border-bottom: 1px solid var(--ap-fil); }
.ap-ville .eg-bref__q summary { font-family: var(--eg-display, Oswald), sans-serif; font-size: 19px; padding: 20px 0; cursor: pointer; }

.ap-ville .eg-villes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ap-ville .eg-villes li { margin: 0; }
.ap-ville .eg-villes a { display: inline-flex; align-items: baseline; gap: 9px; padding: 11px 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(18, 18, 15, .05); font-size: 15.5px; color: var(--ap-encre); text-decoration: none; }
.ap-ville .eg-villes a:hover { background: var(--ap-encre); color: #fff; }
.ap-ville .eg-villes b { font-family: var(--eg-display, Oswald), sans-serif; font-weight: 400; font-size: 14px; color: var(--ap-txt3); }
.ap-ville .eg-villes a:hover b { color: var(--ap-lampe); }

.ap-ville .eg-ville__suite { font-size: 15.5px; }
.ap-ville .eg-ville__fermees { font-size: 15.5px; color: var(--ap-txt2); }

@media (max-width: 680px) {
	.ap-vhero { padding: 36px 0 32px; }
	.ap-vens { padding-top: 40px; }
	.ap-ville .eg-ville__liste { padding-top: 40px; }
	.ap-ville .eg-v__bref, .ap-ville .eg-v__tuile { padding: 22px 20px; }
}

/* Les photos des cartes. Le balisage sert un <picture> autour de l'image,
   et la règle historique « .eg-cs__media > img:first-child » ne l'atteint
   donc pas : l'image restait à ses 300 × 200 dans une carte de 372 px.
   On cadre l'image sur sa boîte, en 3/2, quelle que soit sa taille. */
.ap-ville .eg-cs__media { aspect-ratio: 3 / 2; overflow: hidden; }
.ap-ville .eg-cs__media picture,
.ap-ville .eg-cs__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Les compteurs des listes du bas (enseignes, voisines, autres villes) :
   l'ancienne règle « li a b » gagnait en spécificité et gardait un gris à
   3,1 sur blanc. Même sélecteur, plus la classe du gabarit : 5,8. */
.ap-ville .eg-villes li a b { color: var(--ap-txt3); }
.ap-ville .eg-villes li a:hover b { color: var(--ap-lampe); }