/**
 * Style Global Afrotrop Annuaire
 */

:root {
	--al-primary: #14141c;
	--al-accent: #ff2a54;
	--al-text: #22242a;
	--al-muted: #7a7c85;
	--al-border: #ececef;
	--al-bg-soft: #f7f7f9;
	--al-radius: 16px;
	--al-radius-sm: 10px;
	--al-shadow: 0 10px 28px rgba(20,20,30,.10);
	--ease: cubic-bezier(.22,1,.36,1);
}

/* Annuaire Archive & Half-Map Layout */
#archive-listing {
	color: var(--al-text);
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
#archive-listing *, #archive-listing *::before, #archive-listing *::after { box-sizing: inherit; }

#archive-listing .al-layout { display: flex; align-items: flex-start; }
#archive-listing .al-main { flex: 1 1 55%; min-width: 0; padding: 24px 32px; }
#archive-listing .al-map-col { flex: 1 1 45%; position: sticky; top: 0; align-self: flex-start; height: 100vh; }
#archive-listing .al-map { width: 100%; height: 100%; background: var(--al-bg-soft); }

#archive-listing .al-filters { background: #fff; border-bottom: 1px solid var(--al-border); padding-bottom: 16px; margin-bottom: 20px; }
#archive-listing .al-filters__row { display: flex; gap: 12px; align-items: center; }
#archive-listing .al-field { flex: 1; border: 1px solid var(--al-border); border-radius: var(--al-radius-sm); background: #fff; }
#archive-listing .al-field input, #archive-listing .al-field select { width: 100%; border: none; outline: none; background: transparent; padding: 10px 14px; font-size: 13.5px; color: var(--al-text); }
#archive-listing .al-search-btn { background: var(--al-accent); color: #fff; border: none; padding: 11px 24px; border-radius: var(--al-radius-sm); font-weight: 700; font-size: 14px; cursor: pointer; transition: background .2s ease; }
#archive-listing .al-search-btn:hover { background: #e02045; }

#archive-listing .al-results__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
#archive-listing .al-results__count { font-size: 14px; margin: 0; }
#archive-listing .al-sort select { border: 1px solid var(--al-border); border-radius: 100px; padding: 6px 14px; font-size: 13px; background: #fff; }

#archive-listing .al-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
#archive-listing .al-card { background: #fff; border-radius: var(--al-radius-sm); border: 1px solid var(--al-border); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); cursor: pointer; }
#archive-listing .al-card:hover, #archive-listing .al-card.is-active { transform: translateY(-3px); box-shadow: var(--al-shadow); border-color: var(--al-accent); }

#archive-listing .al-card__thumb { position: relative; display: block; height: 150px; background-size: cover; background-position: center; background-color: var(--al-bg-soft); }
#archive-listing .al-card__thumb-placeholder { display: block; height: 100%; background: linear-gradient(135deg, var(--al-primary), #3a3a52); }
#archive-listing .al-badge--verified { position: absolute; top: 10px; left: 10px; background: #059669; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px; }

#archive-listing .al-card__body { padding: 14px; }
#archive-listing .al-card__cat { font-size: 11.5px; font-weight: 600; color: var(--al-accent); text-transform: uppercase; }
#archive-listing .al-card__title { font-size: 16px; font-weight: 700; margin: 4px 0 8px; line-height: 1.3; }
#archive-listing .al-card__title a { color: var(--al-text); text-decoration: none; }
#archive-listing .al-card__meta { display: flex; gap: 12px; font-size: 12px; color: var(--al-muted); }

/* Marqueurs et Popup Leaflet */
.afrotrop-map-pin { display: flex; align-items: center; justify-content: center; }
.afrotrop-map-pin .pin-inner { width: 36px; height: 36px; background: #ffffff; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.25); border: 2px solid var(--al-accent); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: transform 0.2s ease; }
.afrotrop-map-pin:hover .pin-inner { transform: scale(1.15); }

.al-map-popup { display: flex; gap: 10px; width: 220px; }
.al-map-popup__img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.al-map-popup__content { display: flex; flex-direction: column; justify-content: center; }
.al-map-popup__cat { font-size: 10px; font-weight: 700; color: var(--al-accent); text-transform: uppercase; }
.al-map-popup__title { font-size: 13px; font-weight: 700; margin: 2px 0; line-height: 1.2; }
.al-map-popup__title a { color: var(--al-primary); text-decoration: none; }
.al-map-popup__city { font-size: 11px; color: var(--al-muted); }

/* Responsive Archive */
@media (max-width: 1024px) {
	#archive-listing .al-layout { flex-direction: column; }
	#archive-listing .al-map-col { position: relative; height: 360px; width: 100%; order: -1; }
	#archive-listing .al-main { flex-basis: auto; width: 100%; }
}
@media (max-width: 640px) {
	#archive-listing .al-filters__row { flex-direction: column; align-items: stretch; }
	#archive-listing .al-grid { grid-template-columns: 1fr; }
}