/* =======================================================================
 * Zone Locale — styles par défaut pour les listes générées par les
 * Dynamic Tags (communes voisines, services, FAQ).
 *
 * Ces règles donnent un rendu "carte / bulle" correct dès l'activation
 * du plugin, sans avoir besoin d'ajouter du CSS à la main. Si le widget
 * Elementor qui contient le tag a lui-même un fond ou un border-radius
 * réglé dans son onglet Style, retire ce fond-là : chaque élément a
 * maintenant son propre fond individuel, il ne doit pas y avoir de fond
 * en plus sur le widget englobant.
 *
 * Tu peux librement changer les couleurs ci-dessous pour coller à ta
 * charte graphique (elles sont volontairement simples).
 * ===================================================================== */

/* ---------- Communes voisines (pastilles) ---------- */
.zone-pill-list {
	all: unset;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.zone-pill {
	all: unset;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #2f5468 !important;
	color: #ffffff !important;
	padding: 10px 24px !important;
	border-radius: 999px !important;
	font-weight: 500 !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	font-family: inherit !important;
	white-space: nowrap !important;
	box-shadow: none !important;
}

.zone-pill::before,
.zone-pill::after {
	content: none !important;
}

/* ---------- Services (liste avec icône coche) ---------- */
.zone-services {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.zone-services li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 16px;
	line-height: 1.5;
}

.zone-service-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 4px;
}

/* ---------- Services auto-générés (shortcode [zone_services]) ---------- */
.zone-services-list {
	all: unset;
	display: flex !important;
	flex-direction: column !important;
	gap: 22px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.zone-services-list-item {
	all: unset;
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: #181818 !important;
	font-weight: 400 !important;
	font-family: inherit !important;
}

.zone-services-list-item::before,
.zone-services-list-item::after {
	content: none !important;
}

.zone-services-list .zone-service-icon {
	display: inline-flex !important;
	flex-shrink: 0 !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
}

.zone-services-list .zone-service-icon svg {
	width: 100% !important;
	height: 100% !important;
	fill: #2f5468 !important;
}

.zone-services-list .zone-service-text {
	flex: 1 1 auto !important;
}

.zone-service-icon svg {
	width: 100%;
	height: 100%;
	fill: #2f5468;
}

/* ---------- FAQ (une carte par question) ---------- */
.zone-faq-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
}

.zone-faq-item {
	background: #f4f6f7;
	border-left: 4px solid #2f5468;
	border-radius: 8px;
	padding: 16px 20px;
}

.zone-faq-question {
	margin: 0 0 6px;
	font-weight: 700;
	color: #1f3a47;
}

.zone-faq-answer {
	margin: 0;
	color: #333333;
}

/* ---------- FAQ auto-générée (shortcode [zone_faq]) ---------- */
.zone-accordion {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
}

.zone-accordion-item {
	width: 100% !important;
	box-sizing: border-box !important;
	border: 1px solid #2f5468 !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	background: #ffffff !important;
	box-shadow: none !important;
}

.zone-accordion-header {
	all: unset;
	display: flex !important;
	width: 100% !important;
	box-sizing: border-box !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 18px 22px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	color: #2f5468 !important;
	font-family: inherit !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	transition: background .3s ease, color .3s ease !important;
}

.zone-accordion-header::before,
.zone-accordion-header::after {
	content: none !important;
}

.zone-accordion-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	position: relative;
}

.zone-accordion-icon::before,
.zone-accordion-icon::after {
	content: "";
	position: absolute;
	background: currentColor;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.zone-accordion-icon::before {
	width: 14px;
	height: 2px;
}

.zone-accordion-icon::after {
	width: 2px;
	height: 14px;
	transition: transform .3s ease;
}

.zone-accordion-item--open .zone-accordion-icon::after {
	transform: translate(-50%, -50%) scaleY(0);
}

.zone-accordion-item--open .zone-accordion-header {
	background: #2f5468 !important;
	color: #ffffff !important;
}

.zone-accordion-panel {
	max-height: 0px;
	overflow: hidden;
	transition: max-height .35s cubic-bezier(0.4, 0, 0.2, 1);
}

.zone-accordion-panel-inner {
	width: 100%;
	box-sizing: border-box;
	padding: 16px 22px 20px;
	color: #333333;
	line-height: 1.6;
	opacity: 0;
	transition: opacity .25s ease .05s;
}

.zone-accordion-item--open .zone-accordion-panel-inner {
	opacity: 1;
}

.zone-accordion-panel-inner p {
	margin: 0 0 10px;
}

.zone-accordion-panel-inner p:last-child {
	margin-bottom: 0;
}

/* ---------- Témoignages auto-générés (shortcode [zone_temoignages]) ---------- */
.zone-temoignages {
	all: unset;
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	background: transparent !important;
	text-align: center !important;
}

.zone-temoignages-slides {
	position: relative !important;
	width: 100% !important;
}

.zone-temoignage-slide {
	display: none !important;
	width: 100% !important;
	box-sizing: border-box !important;
	animation: zone-temoignage-fade .4s ease;
}

.zone-temoignage-slide--active {
	display: block !important;
}

@keyframes zone-temoignage-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.zone-temoignage-citation {
	all: unset;
	display: block !important;
	font-family: "Zilla Slab", sans-serif !important;
	font-size: 26px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	font-style: normal !important;
	line-height: 1.2em !important;
	text-align: center !important;
	color: var(--e-global-color-fdf12ae) !important;
	margin: 0 0 16px !important;
}

.zone-temoignage-auteur {
	all: unset;
	display: block !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	color: #d98f4e !important;
	margin: 0 !important;
}

.zone-temoignages-dots {
	all: unset;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 8px !important;
	margin-top: 18px !important;
}

.zone-temoignages-dot {
	all: unset;
	display: inline-block !important;
	width: 9px !important;
	height: 9px !important;
	min-width: 9px !important;
	max-width: 9px !important;
	border: 0 !important;
	outline: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.5) !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: background .25s ease, transform .25s ease !important;
}

.zone-temoignages-dot::before,
.zone-temoignages-dot::after {
	content: none !important;
}

.zone-temoignages-dot--active {
	background: #d98f4e !important;
	transform: scale(1.2) !important;
}

/* ---------- Réalisations : slider de photos (shortcode [zone_realisations]) ---------- */
.zone-realisations {
	all: unset;
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	background: #2B5C73 !important;
	border-radius: 20px !important;
	padding: 18px !important;
}

.zone-realisations-viewport {
	position: relative !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.zone-realisations-scroller {
	width: 100% !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x mandatory !important;
	scroll-behavior: smooth !important;
	-webkit-overflow-scrolling: touch !important;
	/* Masque la scrollbar native : la navigation se fait via les flèches/points. */
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
}

.zone-realisations-scroller::-webkit-scrollbar {
	display: none !important;
	height: 0 !important;
}

.zone-realisations-track {
	all: unset;
	display: flex !important;
	gap: 20px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.zone-realisation-card {
	all: unset;
	display: block !important;
	position: relative !important;
	flex: 0 0 auto !important;
	width: calc((100% - 20px) / 2) !important;
	aspect-ratio: 3 / 4 !important;
	border-radius: 18px !important;
	overflow: hidden !important;
	box-shadow: 0 12px 30px rgba(15, 30, 37, 0.35) !important;
	scroll-snap-align: start !important;
	background: #24495c !important;
}

.zone-realisation-img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform .5s ease !important;
}

.zone-realisation-card:hover .zone-realisation-img {
	transform: scale(1.06) !important;
}

@media (max-width: 560px) {
	.zone-realisation-card {
		width: 78% !important;
	}
}

/* Flèches : superposées sur les bords gauche/droit des images, centrées
   verticalement, toujours visibles (pas de gestion "disabled" bloquante :
   au bout de la liste, un clic revient au début — boucle infinie). */
.zone-realisations-arrow {
	all: unset;
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 3 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.9) !important;
	color: #2f5468 !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	box-shadow: 0 6px 18px rgba(24, 40, 48, 0.25) !important;
	transition: background .25s ease, color .25s ease, opacity .25s ease !important;
}

.zone-realisations-arrow--prev {
	left: 14px !important;
}

.zone-realisations-arrow--next {
	right: 14px !important;
}

.zone-realisations-arrow svg {
	width: 18px !important;
	height: 18px !important;
}

.zone-realisations-arrow:hover {
	background: #2f5468 !important;
	color: #ffffff !important;
}

.zone-realisations-arrow--disabled {
	opacity: .35 !important;
	cursor: default !important;
}

/* Bandeau superposé en bas des images : points de pagination centrés. */
.zone-realisations-overlay {
	all: unset;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: 2 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	box-sizing: border-box !important;
	padding: 28px 20px 16px !important;
	background: linear-gradient(to top, rgba(15, 30, 37, 0.55), rgba(15, 30, 37, 0) 85%) !important;
	pointer-events: none !important;
}

.zone-realisations-dots {
	all: unset;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	pointer-events: auto !important;
}

.zone-realisations-dot {
	all: unset;
	display: inline-block !important;
	width: 8px !important;
	height: 8px !important;
	min-width: 8px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.5) !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	transition: background .25s ease, transform .25s ease !important;
}

.zone-realisations-dot--active {
	background: #d98f4e !important;
	transform: scale(1.25) !important;
}