/**
 * Elevation Cie : accueil « création de sites » (V2), sections 7 à 12.
 *
 * Patterns : accueil-v2-pour-qui, accueil-v2-qui, accueil-v2-faq,
 * accueil-v2-logiciels, accueil-v2-poitiers, accueil-v2-cta.
 *
 * À charger en front ET dans l'éditeur (liste elevation_cie_stylesheets()
 * de functions.php), après theme.css. Ne dépend que de theme.css (styles de
 * blocs Carte, Surtitre, Coches, FAQ, Contour ; contextes sombres ;
 * .ec-section) : aucune classe de sections-1.css ni de sections-2.css n'est
 * réutilisée, ces feuilles peuvent rester pour la page Logiciels.
 *
 * Toutes les classes sont préfixées « ec-v2- » et aucune ne contient « -- »
 * (elles sont stockées dans les commentaires de blocs, où le double tiret
 * est à proscrire). Couleurs, tailles et espacements : variables de
 * theme.json (--wp--preset--*). Icônes : SVG en data URI, aucune image
 * à charger.
 *
 * Sommaire
 *   0. Communs
 *   7. Pour qui (#pour-qui)
 *   8. Qui est derrière (#qui)
 *   9. FAQ (#faq)
 *  10. Logiciels pour PME (#logiciels)
 *  11. Poitiers et Châtellerault (#zone)
 *  12. CTA final
 *  13. Couleurs forcées
 */

/* ==========================================================================
   0. Communs
   ========================================================================== */

/* Lien secondaire isolé (« Discuter de mon projet ↗ ») : zone cliquable de 44 px. */
.ec-v2-lien a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

.ec-v2-lien a:hover {
	text-decoration-thickness: 2px;
}

.ec-v2-lien a:focus-visible {
	border-radius: 4px;
}

/* ==========================================================================
   7. Pour qui (fond blanc)
   ========================================================================== */

/* Cartes de même hauteur dans chaque rangée, exemple de site calé en bas. */
.ec-v2-metiers > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.ec-v2-metiers > .wp-block-column > .ec-v2-metier {
	flex: 1 1 auto;
}

.ec-v2-metier {
	display: flex;
	flex-direction: column;
}

/* Pictogramme au trait dans une pastille pétrole clair (44 px). */
.ec-v2-metier::before {
	content: "";
	flex: none;
	align-self: flex-start;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 1.25rem;
	border-radius: 0.75rem;
	background: var(--ec-v2-icone, none) center / 1.375rem 1.375rem no-repeat, var(--wp--preset--color--petrole-clair, #E4EEF0);
}

.ec-v2-metier-batiment {
	--ec-v2-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4E5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='12' rx='1.5'/%3E%3Cpath d='M8.5 8V5.5A1 1 0 0 1 9.5 4.5H14.5A1 1 0 0 1 15.5 5.5V8M3 13H21M10 13V15H14V13'/%3E%3C/svg%3E");
}

.ec-v2-metier-commerce {
	--ec-v2-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4E5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5L5 4.5H19L20.5 9.5'/%3E%3Cpath d='M3.5 9.5A2.8 2.8 0 0 0 9.1 9.5A2.8 2.8 0 0 0 14.9 9.5A2.8 2.8 0 0 0 20.5 9.5'/%3E%3Cpath d='M5 12V20H19V12M10 20V15H14V20'/%3E%3C/svg%3E");
}

.ec-v2-metier-independant {
	--ec-v2-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4E5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='5' width='15' height='10.5' rx='1.5'/%3E%3Cpath d='M2.5 19H21.5'/%3E%3C/svg%3E");
}

.ec-v2-metier-cabinet {
	--ec-v2-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4E5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5A1 1 0 0 1 10 4H14A1 1 0 0 1 15 5V7M3 12.5H21'/%3E%3C/svg%3E");
}

.ec-v2-metier-pme {
	--ec-v2-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4E5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 20.5V4.5A1 1 0 0 1 5.5 3.5H13.5A1 1 0 0 1 14.5 4.5V20.5M14.5 9.5H18.5A1 1 0 0 1 19.5 10.5V20.5M3 20.5H21'/%3E%3Cpath d='M8 7.5H11M8 11H11M8 14.5H11M17 13.5V13.6M17 16.5V16.6'/%3E%3C/svg%3E");
}

.ec-v2-metier > h3 {
	margin-block: 0;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

/* « L'enjeu : … » en pastille pétrole clair. */
.ec-v2-metier > .ec-v2-enjeu {
	margin-block: 0.875rem 0;
	padding: 0.625rem 0.875rem;
	border-radius: 10px;
	font-weight: 500;
	line-height: 1.45;
}

/* La marge basse garantit un écart minimal avant l'exemple de site. */
.ec-v2-metier > .ec-v2-enjeu + p {
	margin-block: 1rem 1.25rem;
}

/* « Exemple de site : … » : en italique, sous un filet pointillé, calé en bas. */
.ec-v2-metier > .ec-v2-exemple {
	margin-block: auto 0;
	padding-top: 0.875rem;
	border-top: 1px dashed var(--wp--preset--color--bordure, #E6E2DA);
	border-top-color: color-mix(in srgb, var(--wp--preset--color--texte-doux, #5B5F66) 35%, transparent);
	font-style: italic;
	line-height: 1.55;
}

/* Bandeau « boutique en ligne » sous la grille. */
.ec-v2-pour-qui .ec-v2-bandeau {
	gap: 0.25rem 2rem;
	padding: 1.25rem 1.75rem;
	border-radius: var(--wp--custom--rayon--carte, 16px);
}

.ec-v2-pour-qui .ec-v2-bandeau > p {
	margin: 0;
}

@media (max-width: 781px) {
	.ec-v2-pour-qui .ec-v2-bandeau {
		padding: 1.125rem 1.25rem;
	}
}

/* ==========================================================================
   8. Qui est derrière (fond crème)
   ========================================================================== */

.ec-v2-qui .ec-v2-qui-sous-titre {
	font-weight: 500;
	line-height: 1.5;
}

.ec-v2-qui .ec-v2-qui-linkedin {
	margin-block-start: var(--wp--preset--spacing--40);
}

/*
 * Carte d'identité (sans photo) : carte blanche, silhouette au trait, nom et
 * ligne « Elevation Cie · Vienne (86) » calés en bas. La pastille
 * .ec-v2-portrait-badge reste stylée si un emplacement photo revient.
 */
.ec-v2-qui .ec-v2-portrait {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-height: 28.75rem;
	padding: 2.5rem;
	border: 1px solid var(--wp--preset--color--bordure, #E6E2DA);
	border-radius: var(--wp--custom--rayon--grand, 20px);
	background-color: var(--wp--preset--color--blanc, #FFFFFF);
}

.ec-v2-portrait::before {
	content: "";
	flex: none;
	width: 6rem;
	height: 6rem;
	margin-bottom: auto;
	background-color: var(--wp--preset--color--petrole, #1F4E5F);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round'%3E%3Ccircle cx='24' cy='17' r='8'/%3E%3Cpath d='M8 42C8 33.2 15.2 27 24 27C32.8 27 40 33.2 40 42'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round'%3E%3Ccircle cx='24' cy='17' r='8'/%3E%3Cpath d='M8 42C8 33.2 15.2 27 24 27C32.8 27 40 33.2 40 42'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Pastille dans le flux (order: -1) : jamais sous la silhouette, même étroite. */
.ec-v2-portrait > .ec-v2-portrait-badge {
	order: -1;
	align-self: flex-end;
	max-width: 100%;
	margin: 0 0 1rem;
	padding: 0.25rem 0.625rem;
	border: 1px dashed var(--wp--preset--color--texte-doux, #5B5F66);
	border-radius: var(--wp--custom--rayon--pilule, 999px);
	color: var(--wp--preset--color--texte, #1A1C1F);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.35;
}

.ec-v2-portrait > .ec-v2-portrait-nom {
	margin: var(--wp--preset--spacing--50) 0 0;
	font-family: var(--wp--preset--font-family--inter-tight);
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--texte, #1A1C1F);
}

.ec-v2-portrait > .ec-v2-portrait-nom + p {
	margin-block-start: 0.375rem;
}

/* Avec photo : portrait rond centré, nom et ligne dessous (la silhouette disparaît). */
.ec-v2-qui .ec-v2-portrait--photo {
	align-items: center;
	justify-content: center;
	text-align: center;
}

.ec-v2-portrait--photo::before {
	content: none;
}

.ec-v2-portrait > .ec-v2-portrait-photo {
	display: block;
	width: min(14rem, 70%);
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	box-shadow: 0 0 0 6px var(--wp--preset--color--creme, #F5F2EC), 0 18px 40px rgba(17, 20, 24, 0.12);
}

.ec-v2-portrait--photo > .ec-v2-portrait-nom {
	margin-block-start: var(--wp--preset--spacing--50);
}

@media (max-width: 781px) {
	.ec-v2-qui .ec-v2-portrait {
		min-height: 20rem;
		padding: 1.5rem;
	}

	.ec-v2-portrait > .ec-v2-portrait-photo {
		width: min(10rem, 60%);
	}
}

/* ==========================================================================
   9. FAQ (fond blanc)
   Accordéon : style « FAQ » des blocs Détails (theme.css, 5.5).
   ========================================================================== */

/* Réponses aérées : un espace entre chaque paragraphe ou liste (spécificité
   basse, les marges propres aux listes de tarifs et de délais l'emportent). */
.ec-v2-faq :where(.wp-block-details.is-style-faq) > :where(:not(summary) + :not(summary)) {
	margin-block-start: 0.875rem;
}

/* Réponse « Combien coûte… » : une ligne par formule (nom à gauche, prix à
   droite, détail dessous), puis lancement, « À prévoir en plus » et TVA. */
.ec-v2-faq .wp-block-list.ec-faq-tarifs {
	margin-block: 1rem 0;
	padding-left: 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--bordure);
}

.ec-v2-faq .ec-faq-tarifs > li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 1rem;
	margin: 0;
	padding-block: 0.875rem;
	border-bottom: 1px solid var(--wp--preset--color--bordure);
}

.ec-faq-tarifs__nom {
	color: var(--wp--preset--color--texte);
	font-weight: 600;
}

.ec-faq-tarifs__prix {
	color: var(--wp--preset--color--petrole);
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

.ec-faq-tarifs__detail {
	grid-column: 1 / -1;
	margin-top: 0.125rem;
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.5;
}

.ec-v2-faq .ec-faq-lancement {
	margin-block-start: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 10px;
	background-color: var(--wp--preset--color--petrole-clair);
	color: var(--wp--preset--color--petrole-fonce);
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.55;
}

.ec-v2-faq .ec-faq-lancement strong {
	font-weight: 600;
}

.ec-v2-faq .ec-faq-sous-titre {
	margin-block-start: 1.25rem;
	color: var(--wp--preset--color--texte);
	font-weight: 600;
}

.ec-v2-faq .wp-block-list.ec-faq-en-plus {
	margin-block: 0.375rem 0;
	padding-left: 1.125rem;
}

.ec-v2-faq .ec-faq-en-plus > li + li {
	margin-top: 0.375rem;
}

.ec-v2-faq .ec-faq-en-plus strong {
	color: var(--wp--preset--color--texte);
	font-weight: 600;
}

/* Mention HT et TVA sous les prix : en petit. */
.ec-v2-faq .ec-faq-tva {
	margin-block-start: 1rem;
	font-size: 0.75rem;
	line-height: 1.5;
}

.ec-v2-faq .wp-block-group.ec-v2-faq-liste.is-style-carte {
	padding-block: 0.5rem;
	padding-inline: var(--wp--preset--spacing--50);
}

/* Pas de filet sous la dernière question : theme.css (.is-style-carte > …:last-child). */
.ec-v2-faq .ec-v2-faq-liste > .wp-block-details {
	margin-block: 0;
}

.ec-v2-faq .ec-v2-faq-note {
	margin-block-start: var(--wp--preset--spacing--40);
}

.ec-v2-faq .ec-v2-faq-note a {
	font-weight: 500;
}

@media (max-width: 781px) {
	.ec-v2-faq .wp-block-group.ec-v2-faq-liste.is-style-carte {
		padding-inline: var(--wp--preset--spacing--40);
	}
}

/* ==========================================================================
   10. Logiciels pour PME (fond pétrole clair)
   4 marches : liste ordonnée. Mobile : une ligne par marche (pictogramme
   à gauche, numéro à droite). À partir de 782 px : cartes sur 2 colonnes.
   À partir de 1081 px : 4 colonnes en escalier montant.
   ========================================================================== */

.ec-v2-logiciels ol.ec-v2-marches {
	counter-reset: ec-v2-marche;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin-block: var(--wp--preset--spacing--60) 0;
	padding: 0;
	list-style: none;
}

.ec-v2-marches > li {
	counter-increment: ec-v2-marche;
	position: relative;
	box-sizing: border-box;
	min-height: 5rem;
	margin: 0;
	padding: 1.125rem 3rem 1.125rem 4.75rem;
	border-radius: var(--wp--custom--rayon--carte, 16px);
	background-color: var(--wp--preset--color--blanc, #FFFFFF);
	color: var(--wp--preset--color--petrole, #1F4E5F);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 500;
	line-height: 1.5;
}

/* Titre de la marche ; le détail suit après le saut de ligne. */
.ec-v2-marches > li > strong {
	display: inline-block;
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--texte, #1A1C1F);
	font-family: var(--wp--preset--font-family--inter-tight);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* Pictogramme dans une pastille pétrole clair (44 px). */
.ec-v2-marches > li::before {
	content: "";
	position: absolute;
	top: 1.125rem;
	left: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.75rem;
	background: var(--ec-v2-icone, none) center / 1.375rem 1.375rem no-repeat, var(--wp--preset--color--petrole-clair, #E4EEF0);
}

/* Numéro de la marche : décoratif, la liste ordonnée porte déjà l'ordre
   (texte de remplacement vide pour les lecteurs d'écran qui le gèrent). */
.ec-v2-marches > li::after {
	content: counter(ec-v2-marche);
	content: counter(ec-v2-marche) / "";
	position: absolute;
	top: 1.125rem;
	right: 1.125rem;
	color: var(--wp--preset--color--texte-doux, #5B5F66);
	font-family: var(--wp--preset--font-family--inter-tight);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 2.75rem;
}

/* 1. Votre site : écran. */
.ec-v2-marches > li:nth-child(1) {
	--ec-v2-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4E5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='13' rx='2'/%3E%3Cpath d='M8.5 20.5H15.5M12 17V20.5'/%3E%3C/svg%3E");
}

/* 2. Le suivi : bouclier. */
.ec-v2-marches > li:nth-child(2) {
	--ec-v2-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4E5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3L19.5 6V11.5C19.5 16 16.3 19.6 12 21C7.7 19.6 4.5 16 4.5 11.5V6Z'/%3E%3Cpath d='M9 12L11.2 14.2L15.2 10'/%3E%3C/svg%3E");
}

/* 3. Automatisations : engrenage ; détail descriptif en texte doux. */
.ec-v2-marches > li:nth-child(3) {
	--ec-v2-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4E5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 2.5V5M12 19V21.5M2.5 12H5M19 12H21.5M5.3 5.3L7.1 7.1M16.9 16.9L18.7 18.7M5.3 18.7L7.1 16.9M16.9 7.1L18.7 5.3'/%3E%3C/svg%3E");
	color: var(--wp--preset--color--texte-doux, #5B5F66);
	font-weight: 400;
}

/* 4. Outil sur mesure : tableau de bord, marche mise en avant sur fond pétrole. */
.ec-v2-marches > li:nth-child(4) {
	--ec-v2-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3.5' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9H21M7.5 17V13.5M11.5 17V11.5M15.5 17V14.5'/%3E%3C/svg%3E");
	background-color: var(--wp--preset--color--petrole, #1F4E5F);
	color: var(--wp--preset--color--petrole-clair, #E4EEF0);
}

.ec-v2-marches > li:nth-child(4)::before {
	background: var(--ec-v2-icone, none) center / 1.375rem 1.375rem no-repeat, rgba(255, 255, 255, 0.14);
}

.ec-v2-marches > li:nth-child(4) > strong {
	color: var(--wp--preset--color--blanc, #FFFFFF);
}

.ec-v2-marches > li:nth-child(4)::after {
	color: var(--wp--preset--color--petrole-clair, #E4EEF0);
}

@media (min-width: 782px) {
	.ec-v2-logiciels ol.ec-v2-marches {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

	/* Pictogramme en haut à gauche, numéro en haut à droite, texte dessous. */
	.ec-v2-marches > li {
		min-height: 0;
		padding: 5.75rem 1.5rem 1.75rem;
	}

	.ec-v2-marches > li::before {
		top: 1.75rem;
		left: 1.5rem;
	}

	.ec-v2-marches > li::after {
		top: 1.75rem;
		right: 1.5rem;
	}

	.ec-v2-marches > li > strong {
		margin-bottom: 0.5rem;
		font-size: 1.1875rem;
	}
}

/* Escalier : chaque marche un peu plus haute que la précédente, alignées en bas. */
@media (min-width: 1081px) {
	.ec-v2-logiciels ol.ec-v2-marches {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		align-items: end;
	}

	.ec-v2-marches > li:nth-child(1) {
		min-height: 13.25rem;
	}

	.ec-v2-marches > li:nth-child(2) {
		min-height: 15.75rem;
	}

	.ec-v2-marches > li:nth-child(3) {
		min-height: 18.25rem;
	}

	.ec-v2-marches > li:nth-child(4) {
		min-height: 20.75rem;
	}
}

/* ==========================================================================
   11. Poitiers et Châtellerault (fond blanc)
   ========================================================================== */

.ec-v2-zone .ec-v2-zone-sous-titre {
	margin-block-start: var(--wp--preset--spacing--50);
}

.ec-v2-zone .ec-v2-zone-sous-titre + p {
	margin-block-start: 0.75rem;
}

/* Encadré « Zone d'intervention », repère au trait à gauche. */
.ec-v2-zone .ec-v2-zone-liste {
	position: relative;
	margin-block-start: var(--wp--preset--spacing--40);
	padding: 1rem 1.25rem 1rem 3.25rem;
	border-radius: 12px;
	background-color: var(--wp--preset--color--creme, #F5F2EC);
}

.ec-v2-zone-liste::before {
	content: "";
	position: absolute;
	top: 1.125rem;
	left: 1.25rem;
	width: 1.25rem;
	height: 1.25rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4E5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21C12 21 5.5 15.4 5.5 10A6.5 6.5 0 0 1 18.5 10C18.5 15.4 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ec-v2-zone-liste > .ec-v2-zone-label {
	margin: 0;
	color: var(--wp--preset--color--texte-doux, #5B5F66);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ec-v2-zone-liste > .ec-v2-zone-label + p {
	margin-block-start: 0.25rem;
	line-height: 1.55;
}

/* Carte schématique de la Vienne (86). */
.ec-v2-zone .ec-v2-carte-vienne {
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--rayon--grand, 20px);
	background-color: var(--wp--preset--color--creme, #F5F2EC);
}

.ec-v2-carte-vienne svg.ec-v2-vienne {
	display: block;
	width: 100%;
	max-width: 26rem;
	height: auto;
	margin-inline: auto;
}

.ec-v2-carte-vienne svg.ec-v2-vienne text {
	font-family: var(--wp--preset--font-family--inter);
}

@media (max-width: 781px) {
	.ec-v2-zone .ec-v2-carte-vienne {
		padding: var(--wp--preset--spacing--40);
	}

	.ec-v2-carte-vienne svg.ec-v2-vienne {
		max-width: 20rem;
	}
}

/* ==========================================================================
   12. CTA final (fond pétrole foncé)
   Surtitre, coches et focus sur fond sombre : theme.css (contextes sombres).
   ========================================================================== */

/* Plus large que la colonne de 760 px : les 3 réassurances tiennent sur une ligne. */
.ec-v2-cta ul.ec-v2-cta-reassurances {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1.75rem;
	max-width: 55rem;
	margin-block-start: var(--wp--preset--spacing--50);
}

.ec-v2-cta ul.ec-v2-cta-reassurances > li {
	margin: 0;
	font-size: var(--wp--preset--font-size--s);
}

/* Mobile : une réassurance par ligne, coches alignées, bloc centré. */
@media (max-width: 599px) {
	.ec-v2-cta ul.ec-v2-cta-reassurances {
		flex-direction: column;
		align-items: flex-start;
		width: fit-content;
		text-align: left;
	}
}

/* Bouton plein blanc : le survol garde un contraste élevé (les classes de
   couleur de WordPress sont en !important). */
.ec-v2-bouton-clair .wp-block-button__link:hover,
.ec-v2-bouton-clair .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--petrole-clair, #E4EEF0) !important;
	color: var(--wp--preset--color--petrole-fonce, #173C49) !important;
}

.ec-v2-cta .ec-v2-cta-note {
	margin-block-start: var(--wp--preset--spacing--40);
}

.ec-v2-cta .ec-v2-cta-note a {
	color: var(--wp--preset--color--blanc, #FFFFFF);
}

.ec-v2-cta .ec-v2-cta-note a:hover {
	color: var(--wp--preset--color--petrole-clair, #E4EEF0);
}

/* ==========================================================================
   13. Couleurs forcées (mode contraste élevé de Windows)
   Mouvements réduits : règle globale de theme.css (section 10).
   ========================================================================== */

@media (forced-colors: active) {
	.ec-v2-metier::before,
	.ec-v2-marches > li::before,
	.ec-v2-marches > li,
	.ec-v2-pour-qui .ec-v2-bandeau,
	.ec-v2-zone .ec-v2-zone-liste,
	.ec-v2-zone .ec-v2-carte-vienne {
		border: 1px solid CanvasText;
	}

	.ec-v2-portrait::before {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}