/* ==========================================================================
   Hub SEO local « Enseigniste près de chez vous » — /enseigniste/
   Fichier NOUVEAU, propre à ce gabarit (page-villes.php). Ne redéclare aucune
   variable : réutilise --fond/--plaque/--plaque-haute/--encre/--sourde/
   --accent/--accent-survol/--accent-ink/--argon/--filet/--rue/--neon-fixe
   posées par style.css (:root). Mode clair uniquement (CM-0575/CM-0417).
   ========================================================================== */

.ap-hub-villes .ap-bande{padding-block:48px}

/* -- Fil d'Ariane ---------------------------------------------------------- */
.ap-fil-ariane{margin-bottom:4px}
.ap-fil-ariane ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--sourde)}
.ap-fil-ariane li{display:flex;align-items:center;gap:6px}
.ap-fil-ariane li:not(:last-child)::after{content:"›";margin-left:6px;color:var(--filet)}
.ap-fil-ariane a{color:var(--sourde);text-decoration:underline;text-decoration-color:var(--filet);text-underline-offset:3px}
.ap-fil-ariane a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.ap-fil-ariane li[aria-current="page"]{color:var(--encre);font-weight:500}

/* -- Hero -------------------------------------------------------------------- */
.ap-villes-hero{padding-top:28px}
.ap-villes-hero h1{max-width:24ch}
.ap-villes-hero .ap-chapo{max-width:60ch;margin-bottom:28px}

.ap-villes-recherche-bloc{max-width:480px}
.ap-villes-recherche-bloc label{display:block;font-size:13px;font-weight:600;color:var(--sourde);margin-bottom:6px}
.ap-villes-recherche-champ{display:flex;align-items:center;gap:10px;background:var(--plaque-haute);border:1px solid var(--filet);padding:12px 16px}
.ap-villes-recherche-champ svg{flex:none;width:20px;height:20px;color:var(--sourde)}
.ap-villes-recherche-champ input{flex:1;border:0;background:none;font-size:16px;padding:2px 0}
.ap-villes-recherche-champ input:focus{outline:none}
.ap-villes-recherche-bloc:focus-within .ap-villes-recherche-champ{border-color:var(--accent)}
.ap-villes-recherche-vide{margin-top:14px;padding:14px 16px;background:var(--plaque);border-left:3px solid var(--accent);font-size:14.5px}
.ap-villes-recherche-vide a{color:var(--accent);text-decoration:underline}

/* -- Carte de France ---------------------------------------------------------- */
.ap-carte-france-bloc{background:var(--fond);border:1px solid var(--filet);padding:20px;max-width:640px;margin-inline:auto}
.ap-carte-france-svg{width:100%;height:auto;display:block}
/* Contour réel (voir mu-plugins/ap-villes-hub.php pour la source) : trait fin
   encre, remplissage très clair de la palette du site. */
.ap-carte-contour{fill:var(--plaque);stroke:var(--encre);stroke-width:1.2;stroke-linejoin:round}
.ap-carte-contour--corse{fill:var(--plaque);stroke:var(--encre);stroke-width:1.1;stroke-linejoin:round}

.ap-marker{cursor:pointer}
.ap-marker-zone{fill:transparent;pointer-events:all}
.ap-marker-point{fill:var(--accent);stroke:var(--plaque-haute);stroke-width:2;transition:r .15s ease}
.ap-marker-label{
	font-family:var(--police-lecture);font-size:15px;font-weight:600;fill:var(--encre);
	paint-order:stroke;stroke:var(--plaque-haute);stroke-width:4px;stroke-linejoin:round;
	opacity:0;transition:opacity .12s ease;pointer-events:none;
}
.ap-marker:hover .ap-marker-point,.ap-marker:focus .ap-marker-point{r:9}
.ap-marker:hover .ap-marker-label,.ap-marker:focus .ap-marker-label{opacity:1}
.ap-marker:focus{outline:none}
.ap-marker:focus .ap-marker-zone{stroke:var(--argon);stroke-width:2;fill:rgba(31,79,168,.08)}

.ap-carte-source{margin:14px auto 0;max-width:640px;text-align:center;font-size:12.5px;color:var(--sourde)}

/* -- Liste des villes par région ---------------------------------------------- */
.ap-villes-regions{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:36px 28px;margin-top:8px;
}
.ap-villes-region h3{font-size:15px;font-family:var(--police-lecture);font-weight:700;color:var(--sourde);text-transform:uppercase;letter-spacing:.03em;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--filet)}
.ap-villes-region ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.ap-ville-item a{display:flex;align-items:center;gap:10px;padding:8px 4px;border-radius:0}
.ap-ville-item a:hover{background:var(--plaque)}
.ap-ville-item a:hover .ap-ville-texte strong{color:var(--accent)}
.ap-ville-vignette{flex:none;width:44px;height:44px;overflow:hidden}
.ap-ville-vignette .ap-photo{width:44px;height:44px}
.ap-ville-texte{display:flex;flex-direction:column;min-width:0}
.ap-ville-texte strong{font-size:14.5px;font-weight:600;color:var(--encre)}
.ap-ville-texte small{font-size:12.5px;color:var(--sourde)}

@media (max-width:600px){
	.ap-villes-regions{grid-template-columns:1fr;gap:28px}
	.ap-villes-region ul{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
	.ap-ville-item a{flex-direction:column;align-items:flex-start;gap:6px;padding:8px}
	.ap-ville-vignette{width:100%;height:72px}
	.ap-ville-vignette .ap-photo{width:100%;height:72px}
	/* Une région à nombre IMPAIR de villes laisserait sa dernière case vide à
	   côté de la moitié de grille inoccupée (R-0030, poids 2) : le dernier
	   lien, quand il est en position impaire, prend alors toute la largeur au
	   lieu de flotter seul à côté d'un blanc. Marche pour 1, 3, 5… villes,
	   sans avoir besoin de compter côté PHP. */
	.ap-villes-region ul li:last-child:nth-child(odd){grid-column:1 / -1}
	.ap-villes-region ul li:last-child:nth-child(odd) a{flex-direction:row;align-items:center}
	.ap-villes-region ul li:last-child:nth-child(odd) .ap-ville-vignette{width:64px;height:64px;flex:none}
	.ap-villes-region ul li:last-child:nth-child(odd) .ap-ville-vignette .ap-photo{width:64px;height:64px}
}

/* -- Liste des villes en grille plate (repli tant que < 2 villes/région) ------ */
.ap-villes-grille-plate{
	list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
	gap:24px 20px;margin-top:8px;
}
.ap-ville-carte{display:flex;flex-direction:column;height:100%;text-decoration:none}
.ap-ville-carte:hover{border-color:var(--accent)}
.ap-ville-carte .ap-ville-vignette{width:100%;height:120px;flex:none}
.ap-ville-carte .ap-ville-vignette .ap-photo{width:100%;height:120px}
.ap-ville-carte .ap-carte-corps{display:flex;flex-direction:column;gap:2px;padding:14px 16px}
.ap-ville-carte .ap-carte-corps strong{font-size:15.5px;font-weight:600;color:var(--encre)}
.ap-ville-carte .ap-carte-corps small{font-size:12.5px;color:var(--sourde)}
.ap-ville-carte:hover .ap-carte-corps strong{color:var(--accent)}
/* Zéro trou même si le nombre de villes change : la dernière carte, seule sur
   sa ligne (reste = 1 sur une grille à 3 colonnes), prend toute la largeur au
   lieu de laisser 2 cases vides à côté d'elle — même principe que la liste
   par région ci-dessus (R-0030). */
.ap-villes-grille-plate li:last-child:nth-child(3n+1){grid-column:1 / -1}
.ap-villes-grille-plate li:last-child:nth-child(3n+1) .ap-ville-carte{flex-direction:row;align-items:center}
.ap-villes-grille-plate li:last-child:nth-child(3n+1) .ap-ville-vignette{width:140px;height:100px}
.ap-villes-grille-plate li:last-child:nth-child(3n+1) .ap-ville-vignette .ap-photo{width:140px;height:100px}

@media (max-width:760px){
	.ap-villes-grille-plate{grid-template-columns:repeat(2,1fr)}
	.ap-villes-grille-plate li:last-child:nth-child(3n+1){grid-column:auto}
	.ap-villes-grille-plate li:last-child:nth-child(2n+1){grid-column:1 / -1}
	.ap-villes-grille-plate li:last-child:nth-child(2n+1) .ap-ville-carte{flex-direction:row;align-items:center}
	.ap-villes-grille-plate li:last-child:nth-child(2n+1) .ap-ville-vignette{width:140px;height:100px}
	.ap-villes-grille-plate li:last-child:nth-child(2n+1) .ap-ville-vignette .ap-photo{width:140px;height:100px}
}
@media (max-width:420px){
	.ap-villes-grille-plate{grid-template-columns:1fr}
	.ap-villes-grille-plate li:last-child:nth-child(2n+1){grid-column:auto}
}

/* -- CTA ville non listée ------------------------------------------------------ */
.ap-villes-cta{text-align:center;max-width:640px}
.ap-villes-cta h2{color:var(--accent-ink)}
.ap-villes-cta p{color:var(--accent-ink);opacity:.92}
.ap-villes-cta .ap-bouton{background:var(--accent-ink);color:var(--accent);margin-top:6px}
.ap-villes-cta .ap-bouton:hover{background:var(--encre);color:var(--accent-ink)}

/* -- Comment ça marche ---------------------------------------------------------- */
.ap-etapes-villes{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:none}
.ap-etape-num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--accent);color:var(--accent-ink);font-family:var(--police-boitier);font-size:16px;margin-bottom:14px}
.ap-etapes-villes h3{font-size:18px;margin-bottom:6px}
.ap-etapes-villes p{color:var(--sourde);font-size:15px;margin:0}
@media (max-width:760px){.ap-etapes-villes{grid-template-columns:1fr}}

/* -- FAQ ---------------------------------------------------------------------- */
.ap-faq-villes{max-width:760px}
.ap-faq-villes details{border-bottom:1px solid var(--filet);padding:16px 0}
.ap-faq-villes summary{font-weight:600;cursor:pointer;list-style:none;position:relative;padding-right:28px}
.ap-faq-villes summary::-webkit-details-marker{display:none}
.ap-faq-villes summary::after{content:"+";position:absolute;right:0;top:0;font-size:20px;color:var(--accent);font-family:var(--police-boitier)}
.ap-faq-villes details[open] summary::after{content:"–"}
.ap-faq-villes p{margin:12px 0 0;color:var(--sourde)}
.ap-faq-villes a{color:var(--accent);text-decoration:underline}

/* -- Mobile 390 : recherche pleine largeur, carte pleine largeur, zéro débordement -- */
@media (max-width:480px){
	.ap-villes-hero h1{font-size:clamp(1.6rem,7vw,2.1rem)}
	.ap-carte-france-bloc{padding:14px}
}