/* ==========================================================================
   ASSOFINDER — Page d'accueil (template-accueil-assofinder.php). 15/09/2026.
   Tout est rangé sous .af-accueil : rien ne fuit vers le reste du site.
   ========================================================================== */

.af-accueil {
	--marine: #333366;
	--marine-fonce: #25254d;
	--lavande: #e9ebfa;
	--corail: #c42b47;
	--encre: #23233d;
	--gris: #555873;
	--filet: #e3e5f0;
	--vert: #1e7e4f;
	--vert-pale: #e7f4ec;
	font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--encre);
	background: #fff;
}
.af-accueil *, .af-accueil *::before, .af-accueil *::after { box-sizing: border-box; }
.af-accueil a { text-decoration: none; }
.af-accueil :focus-visible { outline: 3px solid var(--corail); outline-offset: 2px; }
.af-largeur { max-width: 1120px; margin: 0 auto; padding-inline: 32px; }

/* --- Accueil ---------------------------------------------------------- */
.af-hero { background: var(--lavande); }
.af-hero .af-largeur { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: center; padding-block: 44px 40px; }
.af-hero h1 { margin: 0 0 12px; font-size: 46px; line-height: 1.08; font-weight: 700; letter-spacing: -.02em; color: var(--marine); text-wrap: balance; }
.af-sous { margin: 0 0 26px; color: var(--gris); font-size: 18px; line-height: 1.5; max-width: 34em; }
/* Le moteur Listeo de l'accueil actuel : on garde son dessin, on l'ajuste seulement au bandeau. */
.af-recherche { position: relative; z-index: 20; margin: 0; }
.af-recherche .main-search-form { display: block; width: 100%; margin: 0; max-width: none; }
.af-recherche .main-search-input { width: 100%; margin: 0; max-width: none; }
/* La colonne du bandeau est plus étroite que l'accueil actuel : le select caché des panneaux
   imposait sa largeur et faisait passer « Lieux » et « Rechercher » à la ligne. Une seule ligne. */
@media (min-width: 992px) {
	.af-recherche .main-search-input { flex-wrap: nowrap; align-items: center; max-height: none; }
	.af-recherche .main-search-input-item { flex: 1 1 0; min-width: 0; margin-top: 0; }
	.af-recherche .main-search-input-item:last-of-type { padding-left: 0; padding-right: 0; }
	.af-recherche .main-search-input button.button { flex: 0 0 auto; padding: 0 26px; }
	.af-recherche select.af-cat-source { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
}
/* Téléphone et tablette : les champs blancs empilés directement sur le bandeau, comme l'accueil actuel. */
@media (max-width: 991px) {
	.af-recherche .main-search-input { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
}
.af-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 11px 22px; font-weight: 600; font-size: 15px; cursor: pointer; border: 0; white-space: nowrap; line-height: 1.2; }
.af-bouton-plein { background: var(--marine); color: #fff !important; }
.af-bouton-plein:hover { background: var(--marine-fonce); }
.af-bouton-corail { background: var(--corail); color: #fff !important; }
.af-bouton-corail:hover { background: #a8223b; }
.af-preuves { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--marine); }
.af-preuves li { display: flex; align-items: center; gap: 7px; margin: 0; padding: 0; }
.af-preuves li::before { content: none; }
.af-preuves i { font-size: 12px; }
.af-hero-illus { display: flex; justify-content: center; }
.af-hero-illus img { width: 100%; max-width: 470px; height: auto; display: block; }

/* --- Sections ---------------------------------------------------------- */
.af-section { padding-block: 44px; }
.af-section + .af-section { border-top: 1px solid var(--filet); }
.af-titre-section { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.af-titre-section h2, .af-accueil h2 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.01em; color: var(--encre); text-wrap: balance; line-height: 1.2; }
.af-titre-section a { margin-left: auto; font-weight: 600; color: var(--marine); white-space: nowrap; font-size: 15px; }
.af-titre-section a:hover { text-decoration: underline; }
.af-sous-titre-bloc { margin: 6px 0 10px; font-size: 14px; font-weight: 600; color: var(--gris); letter-spacing: .04em; text-transform: uppercase; }

/* Pastilles : le style des pages d'association (listing-titlebar-tags) */
.af-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.af-pastille { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 20px; background: rgba(51,51,102,.07); color: var(--marine) !important; font-weight: 500; font-size: 14px; line-height: 1; white-space: nowrap; transition: background .18s ease, color .18s ease; }
.af-pastille i { font-size: 12px; color: var(--fam, #7A80A8); transition: color .18s ease; }
.af-pastille .af-n { font-size: 12px; font-weight: 600; color: #6E7391; font-variant-numeric: tabular-nums; }
.af-pastille:hover { background: var(--marine); color: #fff !important; }
.af-pastille:hover i, .af-pastille:hover .af-n { color: #fff; }

/* Tuiles photo */
.af-tuiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 16px; }
.af-tuile { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--lavande); }
.af-tuile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.af-tuile:hover img { transform: scale(1.04); }
.af-tuile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,45,0) 40%, rgba(20,20,45,.78)); }
.af-tuile span { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 1; color: #fff; }
.af-tuile b { display: block; font-size: 17px; line-height: 1.2; font-weight: 600; }
.af-tuile small { font-size: 13px; opacity: .92; }

/* Carte de Paris */
.af-carte-paris { position: relative; max-width: 900px; margin: 0 auto; padding: 34px 120px 46px; }
.af-plan { position: relative; }
.af-plan svg { width: 100%; max-width: 100%; height: auto; display: block; overflow: visible; }
.af-plan path { fill: #e3e6f7; stroke: #fff; stroke-width: 1.6; cursor: pointer; transition: fill .15s ease; }
.af-plan a:hover path, .af-plan a:focus path { fill: var(--marine); }
.af-plan a:focus { outline: none; }
.af-plan text { pointer-events: none; text-anchor: middle; fill: var(--marine); font-family: "Outfit", system-ui, sans-serif; }
.af-plan .af-num { font-size: 15px; font-weight: 700; }
.af-plan .af-num.af-petit { font-size: 11px; }
.af-plan .af-nb { font-size: 11px; font-weight: 500; fill: #555873; }
.af-plan text.af-actif { fill: #fff; }
.af-bulle { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, calc(-100% - 14px)); background: var(--encre); color: #fff; border-radius: 12px; padding: 10px 12px; min-width: 170px; box-shadow: 0 10px 26px rgba(20,20,45,.3); font-size: 13px; line-height: 1.35; opacity: 0; transition: opacity .12s ease; }
.af-bulle.af-visible { opacity: 1; }
.af-bulle b { display: block; font-size: 16px; }
.af-bulle span { color: #c9cce6; }
.af-bulle::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--encre); }
.af-communes { list-style: none; margin: 0; padding: 0; }
.af-communes li { position: absolute; margin: 0; padding: 0; }
.af-communes li::before { content: none; }
.af-communes li.af-libre { position: static; display: inline-block; margin: 8px 6px 0 0; }
.af-communes .af-pastille { background: #fff; box-shadow: 0 4px 14px -6px rgba(35,35,61,.35); }
.af-communes .af-pastille:hover { background: var(--marine); }
.af-aide-carte { text-align: center; margin: 4px 0 0; font-size: 14px; color: #6E7391; }
.af-rangee-arr { display: none; }

/* Nouvelles associations */
.af-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.af-carte { display: flex; flex-direction: column; color: var(--encre) !important; background: #fff; border: 1px solid var(--filet); border-radius: 14px; overflow: hidden; }
.af-carte:hover { box-shadow: 0 10px 28px rgba(35,35,61,.10); }
.af-media { position: relative; display: block; aspect-ratio: 4 / 2.6; overflow: hidden; background: var(--lavande); }
/* Recadrée, jamais agrandissante : une image carrée (logo) allongeait sa carte. Vaut aussi pour le <picture> WebP. */
.af-media picture, .af-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.af-media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(transparent, rgba(20,20,40,.55)); }
.af-acts { position: absolute; left: 12px; bottom: 10px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.af-acts span { background: rgba(255,255,255,.94); color: var(--marine); font-size: 11.5px; font-weight: 600; line-height: 1.25; padding: 4px 10px; border-radius: 20px; box-shadow: 0 2px 10px -4px rgba(16,18,34,.45); }
.af-corps { flex: 1; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.af-nom { font-size: 18px; font-weight: 600; line-height: 1.25; }
/* Une ligne : une adresse longue (« répétitions : Église… ») descendait le badge de sa carte. */
.af-lieu { display: block; color: var(--gris); font-size: 14px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px; }
.af-geree { margin-top: auto; align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--vert); background: var(--vert-pale); padding: 2px 9px; border-radius: 999px; }

/* Bande associations */
.af-pour-assos { background: var(--marine); color: #fff; }
.af-pour-assos .af-largeur { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; padding-block: 48px; }
.af-pour-assos h2 { color: #fff; font-size: 32px; line-height: 1.12; margin-bottom: 10px; }
.af-pour-assos p { margin: 0 0 22px; color: #d9dbf0; max-width: 32em; font-size: 16px; line-height: 1.55; }
.af-boutons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.af-lien-clair { color: #fff !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 4px; }
.af-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: af-e; }
.af-etapes li { counter-increment: af-e; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; background: rgba(255,255,255,.07); border-radius: 14px; padding: 16px 18px; margin: 0; }
.af-etapes li::before { content: counter(af-e); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--corail); color: #fff; font-weight: 700; font-size: 18px; }
.af-etapes b { display: block; font-size: 17px; }
.af-etapes span { color: #d9dbf0; font-size: 15px; }

/* Bas de page : vidéo + texte */
.af-bas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.af-video { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.af-vignette { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 14px; overflow: hidden; background: var(--marine); }
.af-vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.af-vignette::before { content: ""; position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; background: var(--corail); box-shadow: 0 6px 18px rgba(35,35,61,.35); }
.af-vignette::after { content: ""; position: absolute; z-index: 2; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff; margin-left: 5px; }
.af-vignette:hover::before { background: #a8223b; }
.af-video-cadre { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; background: #000; }
.af-video h2, .af-a-propos h2 { font-size: 21px; margin-bottom: 6px; }
.af-video p, .af-a-propos p { margin: 0; color: var(--gris); font-size: 15px; line-height: 1.6; }

.af-flotte { display: none; }

@media (prefers-reduced-motion: reduce) {
	.af-tuile img, .af-plan path, .af-pastille, .af-bulle { transition: none; }
}

/* --- Tablette --------------------------------------------------------- */
@media (max-width: 1024px) {
	.af-tuiles { grid-template-columns: repeat(3, 1fr); }
	.af-carte-paris { padding-inline: 90px; }
	.af-bas { grid-template-columns: 1fr; }
}

/* --- Téléphone -------------------------------------------------------- */
@media (max-width: 640px) {
	.af-largeur { padding-inline: 16px; }
	.af-hero .af-largeur { grid-template-columns: 1fr; padding-block: 24px 26px; gap: 0; }
	.af-hero h1 { font-size: 31px; }
	.af-sous { font-size: 16px; margin-bottom: 18px; }
	.af-hero-illus { margin-top: 16px; }
	.af-hero-illus img { max-width: 200px; }
	.af-preuves { font-size: 14px; gap: 6px 14px; }
	.af-section { padding-block: 30px; }
	.af-titre-section { flex-wrap: wrap; gap: 2px 12px; }
	.af-titre-section h2, .af-accueil h2 { font-size: 22px; }
	.af-titre-section a { margin-left: 0; flex-basis: 100%; font-size: 14px; }
	.af-pastille { min-height: 40px; }
	/* PAS DE GLISSIÈRES (16/09/2026) : rien n'indiquait qu'on pouvait faire défiler. Tout est visible d'un coup d'œil. */
	/* Activités : 6 petites tuiles carrées sur 2 rangées, et 6 pastilles au plus (« Toutes les activités → » est au-dessus). */
	.af-tuiles { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
	.af-tuile { aspect-ratio: 1; border-radius: 12px; }
	.af-tuile span { left: 8px; right: 8px; bottom: 7px; }
	.af-tuile b { font-size: 13px; line-height: 1.15; }
	.af-tuile small { display: none; }
	.af-pastilles.af-defile .af-pastille:nth-child(n+6) { display: none; }
	/* Paris : sur téléphone la carte est trop petite pour viser un arrondissement. La grille suffit, les villes voisines dessous. */
	#paris { display: flex; flex-direction: column; }
	#paris .af-rangee-arr { order: 1; margin-top: 0; }
	#paris .af-carte-paris { order: 2; margin-top: 10px; }
	#paris .af-plan, #paris .af-aide-carte { display: none; }
	.af-carte-paris { padding: 0; }
	.af-plan .af-nb { display: none; }
	.af-plan .af-num { font-size: 17px; }
	.af-bulle { display: none; }
	.af-communes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
	.af-communes li, .af-communes li.af-libre { position: static; margin: 0; }
	.af-communes .af-pastille { box-shadow: none; background: rgba(51,51,102,.07); }
	.af-aide-carte { text-align: left; }
	.af-rangee-arr { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
	.af-rangee-arr .af-pastille { justify-content: center; flex-direction: column; gap: 3px; padding: 8px 2px; border-radius: 12px; }
	/* Nouvelles associations : une liste compacte, photo à gauche, 4 lignes. */
	.af-cartes { grid-template-columns: 1fr; gap: 10px; }
	.af-carte { flex-direction: row; align-items: stretch; }
	.af-carte:nth-child(n+5) { display: none; }
	.af-media { flex: 0 0 104px; aspect-ratio: auto; min-height: 88px; }
	.af-media::after, .af-acts { display: none; }
	.af-corps { padding: 10px 12px; justify-content: center; min-width: 0; }
	.af-nom { font-size: 16px; line-height: 1.25; }
	.af-lieu { display: block; font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0; }
	.af-geree { margin-top: 3px; font-size: 11px; line-height: 1.4; padding: 1px 8px; }
	.af-corps { gap: 2px; }
	.af-media { min-height: 76px; }
	/* Villes voisines : même gabarit que la grille des arrondissements, en plus discret. */
	#paris .af-communes { gap: 6px; margin-top: 0; }
	#paris .af-communes .af-pastille { padding: 7px 11px; font-size: 13px; gap: 5px; }
	#paris .af-communes .af-pastille i { font-size: 11px; }
	#paris .af-rangee-arr .af-pastille { padding: 6px 2px; }
	.af-pour-assos .af-largeur { grid-template-columns: 1fr; gap: 22px; padding-block: 34px; }
	.af-pour-assos h2 { font-size: 25px; }
	.af-etapes { gap: 8px; }
	.af-etapes li { grid-template-columns: 32px 1fr; gap: 10px; padding: 10px 12px; align-items: center; }
	.af-etapes li::before { width: 32px; height: 32px; font-size: 15px; }
	.af-etapes b { font-size: 15px; }
	.af-etapes span { display: none; }
	.af-video { gap: 10px; }
	.af-video h2 { font-size: 18px; margin: 0; }
	.af-vignette::before { width: 54px; height: 54px; }
	.af-vignette::after { border-width: 10px 0 10px 16px; margin-left: 4px; }
	.af-flotte {
		position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 900;
		display: flex; justify-content: center; align-items: center; gap: 8px;
		background: var(--corail); color: #fff !important; font-weight: 600; font-size: 15px;
		border-radius: 12px; padding: 13px 16px; box-shadow: 0 8px 22px rgba(35,35,61,.28);
		transform: translateY(140%); transition: transform .2s ease;
	}
	.af-flotte.af-visible { transform: none; }
}