/* ==========================================================================
   Site4 — page « Espace citoyen » (maquette Figma node 129:3832, desktop 1440 px, contenu 1067 px)
   S'appuie sur projets.css (sur-titres, introduction) et contact.css (formulaires Contact Form 7).
   Propriétés logiques (inline-start/end) : la mise en page s'inverse d'elle-même en arabe.
   ========================================================================== */

.page-citoyen {
	--pp-ink: #152236;
	--pp-muted: #647080;
	--pp-blue: #1b4c9c;
	--pp-line: #dde3ea;

	margin-bottom: 179px;
	color: var(--pp-ink);
}

.ec-wrap {
	width: min(1067px, 100% - 2 * (var(--gutter) + var(--inner-gutter)));
	margin-inline: auto;
}

.ec-top {
	margin-top: 71.85px;
	margin-bottom: 33.46px;
}

.page-citoyen .breadcrumb ol,
.page-citoyen .breadcrumb li {
	gap: 8.5px;
}

.page-citoyen .breadcrumb ol {
	min-height: 18px;
	font-size: 11.25px;
	line-height: 18px;
}

.ec-band {
	padding: 60.94px 0;
	background: #f5f7fa;
}

.ec-band--light {
	padding: 56.25px 0 84.51px;
	background: #f7f9fc;
}

.ec-section {
	padding: 60.94px 0;
}

.ec-js-only {
	display: none;
}

.js .ec-js-only {
	display: flex;
}

/* Sans JavaScript, aucun équipement n'est masqué par le filtre de départ. */
html:not(.js) .ec-card[hidden],
html:not(.js) .ec-works__list li[hidden] {
	display: flex;
}

.ec-eyebrow {
	gap: 8.44px;
	font-size: 10.313px;
	line-height: 16.5px;
	letter-spacing: 1.3125px;
}

.ec-eyebrow.pp-eyebrow--line::before {
	/* Trait net de 1 px, bouts droits : une bordure est calée sur les pixels de l'écran (pas de trait pâle sur deux lignes). */
	width: 19.69px;
	height: 0;
	border-top: 1px solid currentColor;
	background: none;
}

.ec-round {
	display: grid;
	place-items: center;
	flex: none;
	width: 29.06px;
	height: 29.06px;
	border-radius: 50%;
	background: #fff;
}

.ec-round img {
	width: 15.94px;
	height: 15.94px;
}

.ec-empty {
	padding: 40px 0 10px;
	font-size: 13.125px;
	line-height: 22.97px;
	color: var(--pp-muted);
	text-align: center;
}

.ec-empty--small {
	padding: 16px 0;
	font-size: 12.188px;
}

.ec-empty[hidden] {
	display: none;
}

/* ---------- En-têtes de section ---------- */

.ec-head {
	min-height: 95.24px;
}

.ec-head__title {
	padding-top: 9.375px;
	font-size: 31.875px;
	font-weight: 600;
	line-height: 39.844px;
	letter-spacing: -1.0313px;
}

.ec-head__subtitle {
	padding-top: 5.625px;
	font-size: 13.125px;
	line-height: 22.969px;
	color: var(--pp-muted);
}

/* ---------- Introduction ---------- */

.ec-intro {
	padding: 39.375px 0 28.125px;
}

.ec-intro .pp-intro__head {
	max-width: none;
}

.ec-intro__title {
	padding-top: 14.06px;
	font-size: 56.25px;
	font-weight: 600;
	line-height: 65.25px;
	letter-spacing: -2.0625px;
}

.ec-intro__title span {
	color: var(--pp-blue);
}

.ec-intro__aside {
	flex: none;
	width: 271.875px;
	padding-bottom: 2.81px;
}

.ec-intro__text {
	font-size: 13.125px;
	line-height: 22.969px;
}

.ec-intro__text strong {
	display: block;
	font-weight: 500;
}

.ec-intro__button {
	gap: 39.375px;
	height: 27px;
	margin-top: 16.88px;
	padding-bottom: 6.56px;
	border-bottom-width: 0.94px;
	font-size: 12.188px;
	line-height: 19.5px;
}

.ec-intro__button img {
	width: 15px;
	height: 15px;
}

/* ---------- Bannière ---------- */

.ec-banner {
	position: relative;
	height: 360.94px;
	overflow: hidden;
	border-radius: 11.25px;
	background: #10223b;
}

.ec-banner > img {
	position: absolute;
	inset: 0;
}

.ec-banner::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(90deg, rgba(8, 25, 47, 0.87) 0%, rgba(8, 25, 47, 0.53) 42%, rgba(8, 25, 47, 0.02) 82%);
}

.ec-banner__content {
	position: absolute;
	z-index: 2;
	inset-inline-start: 37.5px;
	top: 37.5px;
	width: 420.16px;
	max-width: calc(100% - 75px);
	color: #fff;
}

.ec-banner__eyebrow {
	font-size: 10.313px;
	line-height: 16.5px;
	letter-spacing: 1.3125px;
	color: #d4e2f5;
}

.ec-banner__title {
	padding-top: 19.69px;
	font-size: 33.75px;
	font-weight: 500;
	line-height: 41.175px;
	letter-spacing: -1.125px;
}

.ec-banner__text {
	padding-top: 15px;
	font-size: 13.125px;
	line-height: 22.969px;
	color: #dce4ee;
}

.ec-banner__button {
	display: inline-flex;
	align-items: center;
	gap: 24.375px;
	margin-top: 21.56px;
	font-size: 12.188px;
	line-height: 19.5px;
	color: #fff;
}

.ec-banner__caption {
	position: absolute;
	z-index: 2;
	inset-inline-end: 20.3px;
	bottom: 21.57px;
	display: flex;
	align-items: center;
	gap: 5.625px;
	font-size: 9.375px;
	line-height: 15px;
	letter-spacing: 1.125px;
	color: #fff;
}

.ec-banner__caption img {
	width: 12.19px;
	height: 12.19px;
}

/* ---------- Rubriques ---------- */

.ec-nav {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 22.5px 0;
	border-bottom: 0.94px solid var(--pp-line);
	scroll-margin-top: 24px;
}

.ec-nav__link {
	display: flex;
	align-items: center;
	gap: 12.19px;
	min-height: 41.7px;
	padding-inline: 21.56px;
	border-inline-end: 0.94px solid var(--pp-line);
}

.ec-nav__link:first-child {
	padding-inline-start: 8.44px;
}

.ec-nav__link:last-child {
	border-inline-end: 0;
}

.ec-nav__icon {
	flex: none;
	width: 18.75px;
	height: 18.75px;
}

.ec-nav__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4.69px;
	min-width: 0;
}

.ec-nav__text strong {
	font-size: 12.188px;
	font-weight: 500;
	line-height: 19.5px;
	transition: color 0.25s;
}

.ec-nav__text small {
	font-size: 10.313px;
	line-height: 17.531px;
	color: var(--pp-muted);
}

.ec-nav__arrow {
	flex: none;
	width: 14.06px;
	height: 14.06px;
}

.ec-nav__link:hover strong {
	color: var(--pp-blue);
}

/* ---------- 01 — Près de chez vous ---------- */

.ec-section,
.ec-band {
	scroll-margin-top: 0;
}

.ec-near__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 112.5px;
	padding-top: 31.875px;
}

.ec-near__heading {
	font-size: 18.75px;
	font-weight: 500;
	line-height: 26.25px;
	letter-spacing: -0.4688px;
}

.ec-near__text {
	max-width: 400px;
	padding-top: 8.44px;
	font-size: 13.125px;
	line-height: 22.969px;
	color: var(--pp-muted);
}

.ec-near__commune {
	flex-direction: column;
	gap: 7.5px;
	width: 220.31px;
}

.ec-near__label {
	font-size: 10.313px;
	line-height: 17.531px;
	color: var(--pp-muted);
}

/* Liste déroulante des communes */
.ec-select {
	position: relative;
	display: flex;
	align-items: center;
	gap: 7.5px;
	height: 42.19px;
	padding-inline-start: 12.19px;
	border: 0.94px solid #d1dce9;
	border-radius: 7.5px;
	background: #fafcfe;
	transition: border-color 0.25s, box-shadow 0.25s;
}

.ec-select:focus-within {
	border-color: var(--pp-blue);
	box-shadow: 0 0 0 3px rgba(27, 76, 156, 0.1);
}

.ec-select img {
	flex: none;
	width: 16.875px;
	height: 16.875px;
}

.ec-select select {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding-inline: 3.75px 36px;
	border: 0;
	outline: 0;
	background: url("../img/espace-citoyen/ico-select.svg") right 13.5px center / 9.375px 5.625px no-repeat;
	font-size: 13.125px;
	color: var(--pp-ink);
	cursor: pointer;
	appearance: none;
}

.ec-select--small {
	gap: 5.87px;
	width: 172.33px;
	height: 33px;
	padding-inline-start: 9.53px;
	border-width: 0.73px;
	border-radius: 5.87px;
}

.ec-select--small img {
	width: 13.2px;
	height: 13.2px;
}

.ec-select--small select {
	padding-inline: 2.94px 28px;
	background-position: right 11px center;
	background-size: 7.33px 4.4px;
	font-size: 10.267px;
}

/* Filtres par catégorie */
.ec-pills {
	flex-wrap: wrap;
	gap: 7.5px;
	padding-top: 25.31px;
}

.ec-pill {
	padding: 9.375px 15.94px;
	border: 0.94px solid var(--pp-line);
	border-radius: var(--pill);
	background: #fff;
	font-size: 12.188px;
	line-height: 19.5px;
	color: #455164;
	cursor: pointer;
	transition: background-color 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}

.ec-pill:hover {
	border-color: var(--pp-blue);
	color: var(--pp-blue);
}

.ec-pill[aria-pressed="true"] {
	border-color: var(--pp-blue);
	background: var(--pp-blue);
	box-shadow: 0 3.75px 4.69px rgba(0, 59, 175, 0.08);
	color: #fff;
}

/* Cartes des équipements */
.ec-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 21.5625px;
	padding-top: 22.5px;
}

.ec-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 474.54px;
	padding: 5.625px;
	border: 0.94px solid #e7ebe8;
	border-radius: 11.25px;
	background: #fff;
	box-shadow: 0 7.5px 9.375px rgba(16, 34, 59, 0.04);
	transition: box-shadow 0.35s, border-color 0.35s;
}

.ec-card[hidden] {
	display: none;
}

.ec-card:hover {
	border-color: #d7e0ec;
	box-shadow: 0 14px 28px rgba(16, 34, 59, 0.08);
}

.ec-card__media {
	position: relative;
	height: 210.94px;
	overflow: hidden;
	border-radius: 7.5px;
	background: #edf2f8;
}

.ec-card__tag {
	position: absolute;
	inset-inline-start: 12.19px;
	top: 12.19px;
	padding: 5.625px 10.31px;
	border: 0.94px solid rgba(255, 255, 255, 0.63);
	border-radius: 28.125px;
	background: rgba(255, 255, 255, 0.95);
	font-size: 10.313px;
	line-height: 17.531px;
	color: var(--pp-blue);
}

.ec-card__go {
	position: absolute;
	inset-inline-end: 12.19px;
	bottom: 12.19px;
}

.ec-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 17.81px 14.06px 4.69px;
}

.ec-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 10.313px;
	line-height: 17.531px;
	letter-spacing: 0.6563px;
	text-transform: uppercase;
}

.ec-card__commune {
	display: inline-flex;
	align-items: center;
	gap: 4.69px;
	color: var(--pp-blue);
}

.ec-card__commune img {
	width: 11.25px;
	height: 11.25px;
}

.ec-card__number {
	color: #9ba5b2;
}

.ec-card__title {
	min-height: 68.44px;
	padding: 10.31px 0 5.625px;
	font-size: 18.75px;
	font-weight: 500;
	line-height: 26.25px;
	letter-spacing: -0.4688px;
}

.ec-card__text {
	padding-bottom: 14.06px;
	font-size: 12.188px;
	line-height: 21.328px;
	color: var(--pp-muted);
}

.ec-card__more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 16.875px;
	padding: 13.125px 0 7.5px;
	border-top: 0.94px solid #eef0f2;
	font-size: 12.188px;
	line-height: 19.5px;
	color: var(--pp-muted);
	transition: color 0.25s, border-color 0.25s;
}

/* Toute la carte est cliquable. */
.ec-card__more::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.ec-card__more img {
	width: 14.06px;
	height: 14.06px;
}

.ec-card:hover .ec-card__more {
	border-color: #d7e0ec;
	color: var(--pp-blue);
}

.ec-card:focus-within {
	outline: 2px solid var(--pp-blue);
	outline-offset: 2px;
}

.ec-card__more:focus-visible {
	outline: 0;
}

/* ---------- 02 — Info travaux ---------- */

.ec-works__text {
	padding: 28.4px 0 4px;
	font-size: 13.125px;
	line-height: 22.969px;
	color: var(--pp-muted);
}

.ec-map-box {
	margin-top: 23.44px;
	overflow: hidden;
	border: 0.94px solid #e0e6ed;
	border-radius: 11.25px;
	background: #fff;
	box-shadow: 0 7.5px 28.125px rgba(16, 34, 59, 0.02);
}

.ec-map-box__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15.94px 19.69px;
	border-bottom: 0.94px solid #e5eaf0;
}

.ec-map-box__title {
	display: flex;
	align-items: center;
	gap: 8.44px;
	font-size: 12.188px;
	line-height: 19.5px;
}

.ec-dot {
	flex: none;
	width: 5.625px;
	height: 5.625px;
	border-radius: 50%;
	background: var(--pp-blue);
	box-shadow: 0 0 0 3.75px rgba(27, 76, 156, 0.06);
}

.ec-map-box__grid {
	display: grid;
	grid-template-columns: 663.11fr 401.88fr;
	min-height: 500.7px;
}

.ec-map {
	position: relative;
	z-index: 0;
	min-height: 407.81px;
	background: #eef1f4;
	font: inherit;
}

.ec-works__panel {
	padding: 22.5px 18.75px 15.94px;
}

.ec-works__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ec-count {
	padding: 1.875px 5.625px;
	border-radius: 3.75px;
	background: #eef3fa;
	font-size: 10.313px;
	line-height: 16.5px;
	color: var(--pp-blue);
}

.ec-works__list {
	display: flex;
	flex-direction: column;
	gap: 9.375px;
	max-height: 420px;
	margin: 15px -4px 0;
	padding: 0 4px 4px;
	overflow-y: auto;
	list-style: none;
}

.ec-works__list li[hidden] {
	display: none;
}

.ec-work {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 12.19px 13.125px;
	border: 0.94px solid #e3e8ee;
	border-radius: 7.5px;
	background: #fff;
	color: var(--pp-ink);
	text-align: start;
	cursor: pointer;
	transition: background-color 0.25s, border-color 0.25s;
}

.ec-work:hover {
	border-color: #b8cde9;
}

.ec-work[aria-pressed="true"] {
	border-color: #b8cde9;
	background: #f4f7fc;
}

.ec-work__title {
	padding-top: 8.44px;
	font-size: 13.125px;
	font-weight: 500;
	line-height: 21px;
}

.ec-work__place {
	display: flex;
	align-items: center;
	gap: 4.69px;
	padding-top: 7.5px;
	font-size: 10.313px;
	line-height: 17.531px;
	color: var(--pp-muted);
}

.ec-work__place img {
	width: 12.19px;
	height: 12.19px;
}

.ec-work__text {
	display: none;
	padding-top: 10.31px;
	font-size: 12.188px;
	line-height: 21.328px;
	color: var(--pp-muted);
}

.ec-work[aria-pressed="true"] .ec-work__text {
	display: block;
}

/* Carte Leaflet : tons adoucis, commandes de zoom de la maquette */
.ec-map .leaflet-tile-pane {
	filter: saturate(0.55) brightness(1.03);
}

.ec-map .leaflet-control-zoom {
	margin: 0 15px 45px;
	overflow: hidden;
	border: 0;
	border-radius: 4.69px;
	box-shadow: 0 1.875px 7.5px rgba(21, 34, 54, 0.08);
}

.ec-map .leaflet-control-zoom a {
	width: 28.125px;
	height: 27.19px;
	border: 0;
	font: 400 18.75px/27px Inter, sans-serif;
	color: var(--pp-ink);
}

.ec-map .leaflet-control-zoom a + a {
	border-top: 0.94px solid var(--pp-line);
}

.ec-map .leaflet-control-zoom a.leaflet-disabled {
	color: rgba(21, 34, 54, 0.45);
}

.ec-map .leaflet-control-attribution {
	font-size: 9px;
}

.ec-marker {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
}

.ec-marker span {
	width: 14px;
	height: 14px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--pp-blue);
	box-shadow: 0 2px 6px rgba(16, 34, 59, 0.35);
	transition: transform 0.3s var(--ease-out), background-color 0.3s;
}

.ec-marker.is-active span {
	transform: scale(1.45);
	background: #d64535;
}

.ec-map .leaflet-tooltip {
	padding: 4px 8px;
	border: 0;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(16, 34, 59, 0.15);
	font: 500 11px/16px Inter, sans-serif;
	color: var(--pp-ink);
}

/* ---------- 03 — Contribuez ---------- */

.ec-contrib__grid,
.ec-faq {
	display: grid;
	grid-template-columns: minmax(0, 409.32fr) minmax(0, 577.87fr);
	column-gap: 79.69px;
}

.ec-contrib__grid {
	padding-top: 33.75px;
}

.ec-contrib__icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border: 0.94px solid #e1e8f2;
	border-radius: 14.06px;
	background: #eef3fa;
}

.ec-contrib__icon img {
	width: 28.125px;
	height: 28.125px;
}

.ec-contrib__title {
	padding-top: 22.5px;
	font-size: 30.938px;
	font-weight: 500;
	line-height: 38.672px;
	letter-spacing: -1.125px;
}

.ec-contrib__title span {
	display: block;
	color: var(--pp-blue);
}

.ec-contrib__text {
	max-width: 300px;
	padding-top: 16.875px;
	font-size: 13.125px;
	line-height: 22.969px;
	color: var(--pp-muted);
}

.ec-steps {
	padding-top: 28.125px;
	list-style: none;
}

.ec-step {
	display: flex;
	align-items: flex-start;
	gap: 14.06px;
	padding-bottom: 21.56px;
}

.ec-step__number {
	display: grid;
	place-items: center;
	flex: none;
	width: 25.31px;
	height: 25.31px;
	border-radius: 50%;
	background: #f0f4fa;
	font-size: 9.375px;
	line-height: 15px;
	color: var(--pp-blue);
}

.ec-step__body {
	display: flex;
	flex-direction: column;
	gap: 5.625px;
	width: 215.625px;
	max-width: 100%;
	padding-top: 0.94px;
}

.ec-step__body strong {
	font-size: 11.25px;
	font-weight: 500;
	line-height: 19.125px;
}

.ec-step__body span {
	font-size: 12.188px;
	line-height: 21.328px;
	color: var(--pp-muted);
}

.ec-form {
	padding: 27.19px;
	border: 0.94px solid #e2e8f0;
	border-radius: 11.25px;
	background: #fff;
	box-shadow: 0 6.56px 11.72px rgba(16, 34, 59, 0.02);
}

/* ---------- Formulaires de l'Espace citoyen (balisage dans Contact > Formulaires) ---------- */

.cf--citizen .cf-fields,
.cf--question .cf-fields {
	gap: 0;
	padding-top: 0;
}

.cf--citizen .cf-field,
.cf--question .cf-field {
	gap: 6.56px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.cf--citizen .cf-label,
.cf--question .cf-label {
	padding: 0;
	font-size: 11.25px;
	line-height: 19.125px;
}

.cf-star {
	color: var(--pp-blue);
}

.cf--citizen .cf-field + .cf-field {
	padding-top: 20.63px;
}

.cf--citizen .cf-field + .cf-row,
.cf--citizen .cf-row + .cf-field {
	padding-top: 16.875px;
}

.cf--citizen .cf-row {
	gap: 14.06px;
}

.cf--citizen .cf-row .cf-field {
	padding-top: 0;
}

.cf--citizen .cf-row + .cf-field {
	padding-top: 16.875px;
}

.cf--citizen input[type="text"],
.cf--citizen textarea,
.cf--citizen select,
.cf--question textarea,
.cf--question select {
	display: block;
	width: 100%;
	height: 45.37px;
	padding: 11.25px 12.19px;
	border: 0.94px solid var(--pp-line);
	border-radius: 5.625px;
	background: #fdfefe;
	font-size: 13.125px;
	line-height: 21px;
	color: var(--pp-ink);
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.cf--citizen select,
.cf--question select {
	height: 42.19px;
	padding: 0 40px 0 15.94px;
	background: #fdfefe url("../img/espace-citoyen/ico-select.svg") right 15.6px center / 9.375px 5.625px no-repeat;
	cursor: pointer;
	appearance: none;
}

.cf--citizen textarea {
	height: 108.34px;
	min-height: 84.375px;
	resize: vertical;
}

.cf--citizen select:focus,
.cf--question select:focus {
	border-color: var(--pp-blue);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(27, 76, 156, 0.1);
}

.cf--citizen input::placeholder,
.cf--citizen textarea::placeholder,
.cf--question textarea::placeholder {
	color: #9aa3ae;
}

/* Type de demande : deux choix à icône */
.cf-choice .cf-label {
	display: block;
}

.cf--citizen .wpcf7-radio {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9.375px;
	padding-top: 9.375px;
}

.cf--citizen .wpcf7-radio .wpcf7-list-item {
	margin: 0;
}

.cf--citizen .wpcf7-radio label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7.5px;
	height: 43.87px;
	padding: 11.25px;
	border: 0.94px solid var(--pp-line);
	border-radius: 6.56px;
	font-size: 12.188px;
	line-height: 19.5px;
	color: var(--pp-muted);
	cursor: pointer;
	transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

.cf--citizen .wpcf7-radio label:hover {
	border-color: #a5bfe3;
}

.cf--citizen .wpcf7-radio label:has(input:checked) {
	border-color: #a5bfe3;
	background: #f0f5fb;
	color: var(--pp-blue);
}

.cf--citizen .wpcf7-radio input {
	flex: none;
	width: 12.19px;
	height: 12.19px;
	margin: 0;
	border: 0.94px solid #767676;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	appearance: none;
}

.cf--citizen .wpcf7-radio input:checked {
	border-color: var(--pp-blue);
	background: radial-gradient(circle, var(--pp-blue) 0 3.75px, #fff 3.85px);
}

.cf--citizen .wpcf7-radio input:focus-visible {
	outline: 2px solid var(--pp-blue);
	outline-offset: 2px;
}

.cf--citizen .wpcf7-list-item-label {
	display: inline-flex;
	align-items: center;
	gap: 7.5px;
}

.cf--citizen .wpcf7-list-item-label::before {
	content: "";
	width: 15.94px;
	height: 15.94px;
	background: currentColor;
	-webkit-mask: url("../img/espace-citoyen/ico-pin-type.svg") center / contain no-repeat;
	mask: url("../img/espace-citoyen/ico-pin-type.svg") center / contain no-repeat;
}

.cf--citizen .wpcf7-list-item.last .wpcf7-list-item-label::before {
	-webkit-mask-image: url("../img/espace-citoyen/ico-chat-type.svg");
	mask-image: url("../img/espace-citoyen/ico-chat-type.svg");
}

/* Photo */
.cf-upload {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11.25px;
	min-height: 76.01px;
	margin-top: 22.86px;
	padding: 15.94px;
	border: 0.94px dashed #cdd9e8;
	border-radius: 6.56px;
	background: #f8fafd;
	cursor: pointer;
	transition: border-color 0.25s, background-color 0.25s;
}

.cf-upload::before {
	content: "";
	flex: none;
	width: 18.75px;
	height: 18.75px;
	background: url("../img/espace-citoyen/ico-upload.svg") center / contain no-repeat;
}

.cf-upload:hover,
.cf-upload:focus-within {
	border-color: var(--pp-blue);
	background: #f3f7fc;
}

.cf-upload .wpcf7-form-control-wrap {
	position: static;
}

.cf-upload input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.cf-upload .wpcf7-not-valid-tip {
	position: absolute;
	inset-inline-start: 0;
	top: calc(100% + 4px);
}

.cf-upload__text {
	display: flex;
	flex-direction: column;
	gap: 5.625px;
	min-width: 0;
}

.cf-upload__title {
	overflow: hidden;
	font-size: 11.25px;
	line-height: 19.125px;
	color: var(--pp-blue);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cf-upload small {
	font-size: 10.313px;
	line-height: 17.531px;
	color: var(--pp-muted);
}

/* Pied des formulaires */
.cf-footer--citizen {
	flex-direction: column;
	align-items: flex-end;
	gap: 16.875px;
	padding-top: 14.06px;
}

.cf-note {
	display: flex;
	align-items: center;
	gap: 4.69px;
	align-self: stretch;
	font-size: 10.313px;
	line-height: 17.531px;
	color: #8c97a6;
}

.cf-footer--citizen .cf-note::before {
	content: "";
	flex: none;
	width: 13.125px;
	height: 13.125px;
	background: url("../img/espace-citoyen/ico-shield.svg") center / contain no-repeat;
}

.cf--citizen .cf-submit,
.cf--question .cf-submit {
	gap: 15px;
	padding: 12.19px 19.69px;
	font-size: 12.188px;
	line-height: 17.063px;
}

.cf--question .cf-submit {
	gap: 11.25px;
	padding: 11.25px 15px;
}

.cf--citizen .cf-submit::after,
.cf--question .cf-submit::after {
	width: 15px;
	height: 15px;
	background-image: url("../img/espace-citoyen/ico-send.svg");
}

/* ---------- 04 — À découvrir ---------- */

.ec-discover__grid {
	display: grid;
	grid-template-columns: minmax(0, 580.72fr) minmax(0, 464.59fr);
	gap: 21.5625px;
	padding-top: 27.19px;
}

.ec-discover__card {
	position: relative;
	display: block;
	height: 377.81px;
	overflow: hidden;
	border-radius: 11.25px;
	background: #152236;
	color: #fff;
}

.ec-discover__card::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 25, 47, 0.04) 0%, rgba(8, 25, 47, 0.02) 15%, rgba(8, 25, 47, 0.9) 100%);
}

.ec-discover__tag {
	position: absolute;
	z-index: 2;
	inset-inline-start: 22.5px;
	top: 19.69px;
	padding: 6.56px 9.375px;
	border-radius: 28.125px;
	background: rgba(255, 255, 255, 0.94);
	font-size: 10.313px;
	line-height: 17.531px;
	letter-spacing: 0.9375px;
	color: var(--pp-blue);
}

.ec-discover__content {
	position: absolute;
	z-index: 2;
	inset-inline: 27.19px;
	bottom: 37.85px;
	display: flex;
	flex-direction: column;
}

.ec-discover__place {
	display: flex;
	align-items: center;
	gap: 4.69px;
	font-size: 10.313px;
	line-height: 17.531px;
	letter-spacing: 0.75px;
	color: #d0dfec;
	text-transform: uppercase;
}

.ec-discover__place img {
	width: 12.19px;
	height: 12.19px;
}

.ec-discover__title {
	padding-top: 12.19px;
	font-size: 27.188px;
	font-weight: 500;
	line-height: 32.625px;
	letter-spacing: -0.9375px;
}

.ec-discover__text {
	padding-top: 12.19px;
	font-size: 12.188px;
	line-height: 21.328px;
	color: #dce4ee;
}

/* ---------- 05 — Questions ---------- */

.ec-faq {
	padding: 149px 0 81.57px;
}

.ec-faq__kicker {
	padding-top: 37.5px;
}

.ec-faq__heading {
	padding-top: 16.875px;
	font-size: 26.25px;
	font-weight: 500;
	line-height: 34.125px;
	letter-spacing: -0.9375px;
}

.ec-faq__text {
	max-width: 253.125px;
	padding-top: 13.125px;
	font-size: 13.125px;
	line-height: 22.969px;
	color: var(--pp-muted);
}

.ec-search {
	align-items: center;
	gap: 8.44px;
	width: 290.625px;
	max-width: 100%;
	height: 45.37px;
	margin-top: 24.38px;
	padding-inline: 12.19px;
	border: 0.94px solid var(--pp-line);
	border-radius: 6.56px;
	transition: border-color 0.25s, box-shadow 0.25s;
}

.ec-search:focus-within {
	border-color: var(--pp-blue);
	box-shadow: 0 0 0 3px rgba(27, 76, 156, 0.1);
}

.ec-search img {
	flex: none;
	width: 17.81px;
	height: 17.81px;
}

.ec-search input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	outline: 0;
	background: none;
	font-size: 13.125px;
	color: var(--pp-ink);
}

.ec-search input::placeholder {
	color: rgba(21, 34, 54, 0.5);
}

.ec-search input::-webkit-search-cancel-button {
	cursor: pointer;
}

.ec-accordion {
	border-top: 0.94px solid var(--pp-line);
}

.ec-qa {
	border-bottom: 0.94px solid var(--pp-line);
}

.ec-qa[hidden] {
	display: none;
}

.ec-qa__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 19.69px 0;
	border: 0;
	background: none;
	font-size: 13.125px;
	font-weight: 500;
	line-height: 21px;
	color: var(--pp-ink);
	text-align: start;
	cursor: pointer;
	transition: color 0.25s;
}

.ec-qa__button:hover,
.ec-qa__button[aria-expanded="true"] {
	color: var(--pp-blue);
}

.ec-qa__icon {
	position: relative;
	flex: none;
	width: 24.375px;
	height: 24.375px;
	border-radius: 50%;
	background: #f0f4fa;
	transition: background-color 0.3s, transform 0.35s var(--ease-out);
}

.ec-qa__icon::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/espace-citoyen/ico-plus.svg") center / 15px no-repeat;
}

.ec-qa__button[aria-expanded="true"] .ec-qa__icon {
	background: var(--pp-blue);
	transform: rotate(90deg);
}

.ec-qa__button[aria-expanded="true"] .ec-qa__icon::before {
	background-image: url("../img/espace-citoyen/ico-close.svg");
}

.ec-qa__answer {
	padding: 0 32.81px 19.69px 0;
	font-size: 12.188px;
	line-height: 21.328px;
	color: var(--pp-muted);
}

.ec-qa__answer[hidden] {
	display: none;
}

.ec-ask {
	margin-top: 28.125px;
	padding: 23.44px;
	border: 0.94px solid #e5eaf2;
	border-radius: 9.375px;
	background: #f2f5fa;
}

.ec-ask__title {
	font-size: 16.875px;
	font-weight: 500;
	line-height: 23.625px;
	letter-spacing: -0.375px;
}

.ec-ask__text {
	padding-top: 5.625px;
	font-size: 12.188px;
	line-height: 21.328px;
	color: var(--pp-muted);
}

.cf--question .cf-fields {
	padding-top: 20.63px;
}

.cf--question .cf-field + .cf-field {
	padding-top: 16.875px;
}

.cf--question select,
.cf--question textarea {
	background-color: #fff;
}

.cf--question textarea {
	height: 87.35px;
	min-height: 84.375px;
	resize: vertical;
}

.cf-footer--question {
	min-height: 65.05px;
	padding-top: 22.87px;
}

/* ---------- 06 — Gestes citoyens ---------- */

.ec-gestes {
	padding-bottom: 74.21px;
}

.ec-gestes__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 30px;
}

.ec-gestes__heading {
	font-size: 25.313px;
	font-weight: 500;
	line-height: 32.906px;
	letter-spacing: -0.8438px;
}

.ec-gestes__heading span {
	display: block;
	color: var(--pp-blue);
}

.ec-gestes__text {
	padding-inline-end: 32.81px;
	font-size: 13.125px;
	line-height: 22.969px;
	color: var(--pp-muted);
}

.ec-gestes__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16.875px;
	padding-top: 26.25px;
}

.ec-geste {
	padding: 22.5px 20.625px;
	border: 0.94px solid #e4e9ef;
	border-radius: 9.375px;
	background: #fff;
	transition: box-shadow 0.35s, border-color 0.35s;
}

.ec-geste:hover {
	border-color: #d7e0ec;
	box-shadow: 0 12px 24px rgba(16, 34, 59, 0.06);
}

.ec-geste__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ec-geste__icon {
	display: grid;
	place-items: center;
	width: 45px;
	height: 45px;
	border-radius: 11.25px;
	background: #edf3fa;
}

.ec-geste__icon--leaf {
	background: #eef4ee;
}

.ec-geste__icon img {
	width: 26.25px;
	height: 26.25px;
}

.ec-geste__number {
	font-size: 9.375px;
	line-height: 15px;
	color: #aeb9c8;
}

.ec-geste__title {
	min-height: 65.25px;
	padding-top: 20.625px;
	font-size: 15.938px;
	font-weight: 500;
	line-height: 22.313px;
	letter-spacing: -0.2813px;
}

.ec-geste__text {
	padding-top: 10.31px;
	font-size: 12.188px;
	line-height: 21.328px;
	color: var(--pp-muted);
}

/* ==========================================================================
   Tablette / mobile
   ========================================================================== */

@media (max-width: 1023px) {
	.page-citoyen {
		margin-bottom: 96px;
	}

	.ec-top {
		margin-top: 40px;
	}

	.ec-intro {
		flex-direction: column;
		align-items: flex-start;
	}

	.ec-intro__aside {
		width: auto;
	}

	.ec-intro__title {
		font-size: 48px;
		line-height: 56px;
	}

	.ec-banner {
		height: auto;
		min-height: 360.94px;
	}

	.ec-banner__content {
		position: relative;
		inset: auto;
		padding: 37.5px 37.5px 64px;
		width: auto;
		max-width: 520px;
	}

	.ec-nav {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 20px;
	}

	.ec-nav__link:nth-child(2n) {
		border-inline-end: 0;
	}

	.ec-nav__link:nth-child(2n + 1) {
		padding-inline-start: 8.44px;
	}

	.ec-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.ec-map-box__grid {
		grid-template-columns: 1fr;
	}

	.ec-map {
		min-height: 380px;
	}

	.ec-works__list {
		max-height: none;
	}

	.ec-contrib__grid,
	.ec-faq {
		grid-template-columns: 1fr;
		row-gap: 36px;
	}

	.ec-faq {
		padding-top: 72px;
	}

	.ec-gestes__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ec-geste__title {
		min-height: 0;
	}
}

@media (max-width: 767px) {
	.page-citoyen {
		margin-bottom: 64px;
	}

	/* Retours à la ligne de la maquette : inutiles sur un écran étroit. */
	.ec-near__text br,
	.ec-gestes__text br,
	.ec-step__body br,
	.ec-discover__text br {
		display: none;
	}

	.ec-top {
		margin: 24px auto 8px;
	}

	.ec-band,
	.ec-section {
		padding: 44px 0;
	}

	.ec-band--light {
		padding: 44px 0 52px;
	}

	.ec-intro {
		gap: 16px;
		padding: 28px 0 24px;
	}

	.ec-intro__title {
		font-size: 38px;
		line-height: 44px;
		letter-spacing: -1.4px;
	}

	.ec-banner__content {
		padding: 28px 22px 60px;
	}

	/* Le texte occupe toute la largeur : voile uniforme pour la lisibilité (aussi en arabe). */
	.page-citoyen .ec-banner::before {
		background: linear-gradient(180deg, rgba(8, 25, 47, 0.84) 0%, rgba(8, 25, 47, 0.62) 100%);
	}

	.ec-banner__title {
		font-size: 26px;
		line-height: 32px;
	}

	.ec-banner__caption {
		inset-inline-end: 22px;
	}

	.ec-nav {
		grid-template-columns: 1fr;
		row-gap: 0;
		padding: 8px 0;
	}

	.ec-nav__link,
	.ec-nav__link:nth-child(2n + 1) {
		padding: 12px 4px;
		border-inline-end: 0;
		border-bottom: 0.94px solid var(--pp-line);
	}

	.ec-nav__link:last-child {
		border-bottom: 0;
	}

	.ec-head {
	min-height: 95.24px;
}

.ec-head__title {
		font-size: 27px;
		line-height: 34px;
	}

	.ec-near__bar {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		padding-top: 24px;
	}

	.ec-near__commune {
		width: 100%;
	}

	/* Barre défilante : le défilement horizontal rogne aussi le bas (bordure et ombre des boutons).
	   Marge intérieure en bas, compensée : les cartes ne bougent pas. */
	.ec-pills {
		flex-wrap: nowrap;
		margin-inline: calc(-1 * (var(--gutter) + var(--inner-gutter)));
		margin-bottom: -10px;
		padding-inline: calc(var(--gutter) + var(--inner-gutter));
		padding-bottom: 10px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.ec-pills::-webkit-scrollbar {
		display: none;
	}

	.ec-pill {
		flex: none;
	}

	.ec-cards {
		grid-template-columns: 1fr;
	}

	.ec-card {
		min-height: 0;
	}

	.ec-card__title {
		min-height: 0;
	}

	.ec-map-box__bar {
		flex-direction: column;
		align-items: stretch;
		padding: 14px;
	}

	.ec-select--small {
		width: 100%;
		height: 40px;
	}

	.ec-map {
		min-height: 300px;
	}

	.ec-works__panel {
		padding: 18px 14px 14px;
	}

	.ec-form {
		padding: 22px 16px;
	}

	.ec-contrib__title {
		font-size: 26px;
		line-height: 33px;
	}

	.cf--citizen .cf-row {
		grid-template-columns: 1fr;
		gap: 16.875px;
	}

	.cf-footer--citizen,
	.cf-footer--question {
		align-items: stretch;
	}

	.cf-footer--question {
		flex-direction: column-reverse;
	}

	.ec-discover__grid {
		grid-template-columns: 1fr;
	}

	.ec-discover__card {
		height: 340px;
	}

	.ec-discover__title {
		font-size: 23px;
		line-height: 28px;
	}

	.ec-faq {
		padding: 56px 0 48px;
	}

	.ec-faq__kicker {
		padding-top: 28px;
	}

	.ec-search {
		width: 100%;
	}

	.ec-ask {
		padding: 20px 16px;
	}

	.ec-gestes__bar {
		flex-direction: column;
		align-items: flex-start;
	}

	.ec-gestes__text {
		padding: 0;
	}

	.ec-gestes__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Animations
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.ec-banner img,
	.ec-card__media img,
	.ec-discover__card img {
		transition: transform 0.9s var(--ease-out);
	}

	.ec-banner:hover img,
	.ec-card:hover .ec-card__media img,
	.ec-discover__card:hover img {
		transform: scale(1.05);
	}

	.ec-nav__arrow,
	.ec-card__more img,
	.ec-banner__button .ec-round img,
	.ec-card__go img {
		transition: transform 0.35s var(--ease-out);
	}

	.ec-nav__link:hover .ec-nav__arrow,
	.ec-card:hover .ec-card__more img,
	.ec-banner__button:hover .ec-round img,
	.ec-card:hover .ec-card__go img {
		transform: translateX(3px);
	}

	.cf--citizen .cf-submit:hover::after,
	.cf--question .cf-submit:hover::after {
		transform: translateX(3px);
	}

	.ec-card.is-entering {
		animation: ec-fade-up 0.5s var(--ease-out) both;
	}

	.ec-qa__answer.is-opening {
		animation: ec-fade-down 0.35s var(--ease-out) both;
	}

	@keyframes ec-fade-up {
		from {
			opacity: 0;
			transform: translateY(12px);
		}
	}

	@keyframes ec-fade-down {
		from {
			opacity: 0;
			transform: translateY(-6px);
		}
	}
}