/* Pages « Les bons coins » : rubriques, villes et adresses */
.ajbc { max-width: 1080px; }
.ajbc-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 8px 0 28px; }
.ajbc-cat { display: flex; flex-direction: column; gap: 6px; padding: 0 0 18px; overflow: hidden; background: #fff; border: 1px solid #dce7f2; border-radius: 14px; color: inherit; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.ajbc-cat:hover { box-shadow: 0 10px 28px rgba(15, 35, 60, .12); transform: translateY(-2px); }
.ajbc-cat strong { font-size: 19px; color: #144e8c; }
.ajbc-cat span { font-size: 14px; color: #5b6f85; }
.ajbc-cities { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }
.ajbc-cities__label { font-weight: 700; margin-right: 4px; }
.ajbc-chip { display: inline-block; padding: 7px 14px; border: 1px solid #c5d4e3; border-radius: 999px; background: #fff; color: #144e8c; font-size: 14px; font-weight: 600; text-decoration: none; }
.ajbc-chip:hover { border-color: #144e8c; }
.ajbc-chip.is-active { background: #144e8c; border-color: #144e8c; color: #fff; }
.ajbc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 0 12px; }
.ajbc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #dce7f2; border-radius: 14px; overflow: hidden; }
.ajbc-card__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #eef2f6; }
.ajbc-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.ajbc-card__city { color: #07598f; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ajbc-card h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.ajbc-card p { margin: 0; color: #3a5068; font-size: 14px; line-height: 1.55; }
.ajbc-card__info { list-style: none; margin: 4px 0 0; padding: 0; font-size: 14px; color: #3a5068; }
.ajbc-card__info li { padding: 2px 0; }
.ajbc-card__info a { color: #144e8c; }
.ajbc-propose { margin-top: 34px; padding-top: 6px; border-top: 1px solid #dce7f2; }
.ajbc-back { margin-top: 24px; }
.ajbc-back a { color: #144e8c; font-weight: 600; text-decoration: none; }
@media (max-width: 991px) { .ajbc-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ajbc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ajbc-cats, .ajbc-grid { grid-template-columns: 1fr; } }
.ajbc-cat img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 8px; }
.ajbc-cat strong, .ajbc-cat span { padding: 0 18px; }
.ajbc-hero { position: relative; margin: 0 0 20px; border-radius: 16px; overflow: hidden; background: #0d2137; }
.ajbc-hero img { display: block; width: 100%; height: 260px; object-fit: cover; opacity: .85; }
.ajbc-hero figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 56px 24px 20px; color: #fff; background: linear-gradient(to top, rgba(8, 20, 36, .78), rgba(8, 20, 36, 0)); }
.ajbc-hero figcaption strong { font-size: 26px; line-height: 1.2; }
.ajbc-hero figcaption span { font-size: 15px; opacity: .92; }
@media (max-width: 600px) { .ajbc-hero img { height: 190px; } .ajbc-hero figcaption strong { font-size: 21px; } }
.ajbc-hero__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.ajbc-hero__tiles img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; opacity: .9; }
.ajbc-hero--mosaic img { height: auto; }

.ajbc-card__thumbs { display: flex; gap: 6px; padding: 8px 18px 0; flex-wrap: wrap; }
.ajbc-thumb { padding: 0; border: 2px solid transparent; border-radius: 6px; background: none; cursor: pointer; overflow: hidden; line-height: 0; }
.ajbc-thumb img { width: 64px; height: 44px; object-fit: cover; opacity: .75; }
.ajbc-thumb:hover img, .ajbc-thumb.is-active img { opacity: 1; }
.ajbc-thumb.is-active { border-color: #144e8c; }
.ajbc-showphone { display: flex; align-items: flex-end; }
.ajbc-showphone .ajc-check { margin: 0 0 12px; font-weight: 600; }

.ajbc-slots { display: flex; flex-direction: column; gap: 8px; }
.ajbc-slots__title { font-size: 14px; font-weight: 600; }
.ajbc-slots__title small { font-weight: 400; color: #5b6f85; }
.ajbc-slots__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ajbc-slot { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border: 2px dashed #b7c9dc; border-radius: 12px; background: #fff; color: #144e8c; cursor: pointer; overflow: hidden; text-align: center; transition: border-color .15s, background .15s; }
.ajbc-slot:hover { border-color: #144e8c; background: #f3f8fd; }
.ajbc-slot input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.ajbc-slot__hint { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; font-size: 12px; font-weight: 600; line-height: 1.2; pointer-events: none; }
.ajbc-slot__hint b { font-size: 26px; font-weight: 400; line-height: 1; }
.ajbc-slot__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ajbc-slot.has-photo { border-style: solid; border-color: #144e8c; }
.ajbc-slot.has-photo .ajbc-slot__hint { display: none; }
.ajbc-slot__remove { position: absolute; top: 4px; right: 4px; z-index: 2; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(13, 33, 55, .78); color: #fff; font-size: 17px; line-height: 24px; cursor: pointer; }
@media (max-width: 600px) { .ajbc-slots__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
