/* ZenMove — sections et compositions (lot 4). Valeurs = tokens v1.0 uniquement. */

/* Rythme vertical des sections : 64 px mobile, 96 px desktop (BRAND §8). */
.zm-section {
	padding-top: var(--space-3xl);
	padding-bottom: var(--space-3xl);
	/* Sections pleine largeur : marges latérales 16 / 24 / 32 px (mêmes que la racine). */
	padding-left: var(--zm-gutter);
	padding-right: var(--zm-gutter);
}

@media (min-width: 1024px) {
	.zm-section {
		padding-top: var(--space-section);
		padding-bottom: var(--space-section);
	}
}

/* Contenu de page pleine largeur : WordPress annule les marges racine des blocs imbriqués ;
   on restitue la gouttière 16 / 24 / 32 px aux blocs non pleine largeur (paragraphes, blocs de données…). */
.wp-block-post-content.alignfull > :not(.alignfull) {
	box-sizing: border-box;
	width: calc(100% - 2 * var(--zm-gutter));
}

/* Toutes les sections s'alignent sur la largeur 1200 px (même marge gauche que le hero) ;
   dans les sections de texte, la longueur de ligne reste limitée pour la lisibilité. */
.zm-section > :not(.alignfull) {
	max-width: var(--wp--style--global--wide-size);
}

.zm-section--text :where(p, ul, ol) {
	max-width: var(--content-max);
}

.zm-section__title {
	margin-top: 0;
	margin-bottom: var(--space-xl);
}

.zm-section__more {
	margin-top: var(--space-lg);
	margin-bottom: 0;
}

.zm-overline {
	margin: 0 0 var(--space-md);
	color: var(--color-support);
	font-family: var(--font-body);
	font-size: var(--text-overline);
	font-weight: var(--font-weight-semibold);
	line-height: var(--leading-overline);
	letter-spacing: 0.02em;
}

.zm-lead {
	max-width: 60ch;
	color: var(--color-muted);
	font-size: var(--text-lead);
	line-height: var(--leading-lead);
}

/* ---------- Hero ---------- */
.zm-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2xl);
	align-items: center;
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-2xl);
}

.zm-main > .zm-hero:first-child {
	padding-top: 0;
}

@media (min-width: 1024px) {
	.zm-hero--home,
	.zm-hero:has(> .zm-hero__media) {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

.zm-hero__title {
	margin: 0;
}

.zm-hero--home .zm-hero__title {
	line-height: var(--leading-display);
	letter-spacing: -0.02em;
}

/* Complément du H1 : encre survol (BRAND §6). */
.zm-hero__title-sub {
	display: block;
	color: var(--color-primary-hover);
}

.zm-hero__text > .zm-lead {
	margin: var(--space-lg) 0 0;
}

/* Chapô lié à la méta zm_lead : rien n'est affiché tant qu'il est vide. */
.zm-lead:empty {
	display: none;
}

.zm-hero__actions {
	gap: var(--space-md);
	margin-top: var(--space-xl);
}

.zm-hero__aside {
	display: grid;
	gap: var(--space-md);
}

.zm-hero__media,
.zm-hero__media img,
.zm-article__media img,
.zm-guide-card__media img {
	border-radius: var(--radius-lg);
}

.zm-hero__media {
	margin: 0;
}

.zm-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.zm-hero__panel {
	padding: var(--space-lg);
	border-radius: var(--radius-lg);
	background-color: var(--color-inverse);
	color: var(--color-background);
}

.zm-hero__panel .zm-hero__panel-title {
	margin: 0 0 var(--space-md);
	color: var(--color-background);
}

.zm-hero__panel-list {
	margin: 0;
	padding-left: var(--space-lg);
}

/* ---------- Cartes cliquables (un seul lien par carte) ---------- */
.zm-service-card,
.zm-zone-card,
.zm-guide-card {
	position: relative;
	transition: border-color var(--duration-fast) var(--ease-standard);
}

.zm-service-card :where(h2, h3, h4),
.zm-zone-card :where(h2, h3, h4),
.zm-guide-card :where(h2, h3, h4) {
	margin: 0;
}

.zm-service-card a,
.zm-zone-card a,
.zm-guide-card .wp-block-post-title a {
	color: var(--color-primary);
	text-decoration: none;
}

.zm-service-card a::after,
.zm-zone-card a::after,
.zm-guide-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-lg);
}

.zm-service-card:hover,
.zm-zone-card:hover,
.zm-guide-card:hover {
	border-color: var(--color-border-strong);
}

.zm-service-card:hover a,
.zm-zone-card:hover a,
.zm-guide-card:hover .wp-block-post-title a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.zm-service-card:focus-within,
.zm-zone-card:focus-within,
.zm-guide-card:focus-within {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.zm-service-card a:focus-visible,
.zm-zone-card a:focus-visible,
.zm-guide-card a:focus-visible {
	outline: none;
}

.zm-card__text {
	margin: var(--space-sm) 0 0;
	color: var(--color-muted);
}

/* ---------- Services : mosaïque (grande carte + 4) ---------- */
.zm-services {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-md);
}

@media (min-width: 640px) {
	.zm-services {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.zm-service-card--featured {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.zm-services {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-lg);
	}

	.zm-service-card--featured {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
}

.zm-service-card--featured {
	padding: var(--space-xl);
}

.zm-pro-band {
	margin-top: var(--space-lg);
	padding: var(--space-md) var(--space-lg);
	border-radius: var(--radius-md);
	background-color: var(--color-surface-alt);
}

.zm-pro-band__text {
	margin: 0;
}

/* ---------- Processus : ligne de route ● – – – ● (BRAND §8) ---------- */
.zm-steps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xl);
	counter-reset: zm-step;
}

.zm-step {
	position: relative;
	padding-left: calc(32px + var(--space-md));
	counter-increment: zm-step;
}

.zm-step::before {
	content: counter(zm-step);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 2px solid var(--color-primary);
	border-radius: var(--radius-pill);
	background-color: var(--color-surface);
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-weight: var(--font-weight-bold);
	font-size: var(--text-small);
}

.zm-step:last-child::before {
	border-color: var(--color-accent);
	background-color: var(--color-accent);
}

.zm-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 40px;
	bottom: calc(-1 * var(--space-xl) + var(--space-sm));
	left: 15px;
	border-left: 2px dashed var(--color-border-strong);
}

.zm-step__title {
	margin: 4px 0 var(--space-sm);
}

.zm-step p {
	margin: 0;
	color: var(--color-muted);
}

@media (min-width: 1024px) {
	.zm-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-lg);
	}

	.zm-step {
		padding-top: calc(32px + var(--space-md));
		padding-left: 0;
	}

	.zm-step:not(:last-child)::after {
		top: 15px;
		right: calc(-1 * var(--space-lg) + var(--space-sm));
		bottom: auto;
		left: 40px;
		border-top: 2px dashed var(--color-border-strong);
		border-left: 0;
	}
}

/* ---------- Zones ---------- */
.zm-zones {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-md);
}

@media (min-width: 640px) {
	.zm-zones {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- Guides (cartes d'articles) ---------- */
.zm-guides .wp-block-post-template {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.zm-guides .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.zm-guides .wp-block-post-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.zm-guides .wp-block-post-template > li {
	margin: 0;
}

.zm-guide-card {
	height: 100%;
}

.zm-guide-card__media {
	margin: 0 0 var(--space-md);
}

.zm-guide-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.zm-guide-card .wp-block-post-excerpt {
	margin-top: var(--space-sm);
	color: var(--color-muted);
}

.zm-guide-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.zm-pagination {
	gap: var(--space-md);
	margin-top: var(--space-xl);
}

/* ---------- FAQ (details / summary natifs) ---------- */
.zm-faq__item {
	margin: 0;
	border-bottom: 1px solid var(--color-border);
}

.zm-faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	min-height: var(--control-height);
	padding: var(--space-md) var(--space-xs) var(--space-md) 0; /* place pour le chevron pivoté */
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: var(--text-h4);
	font-weight: var(--font-weight-semibold);
	line-height: var(--leading-h4);
	list-style: none;
	cursor: pointer;
}

.zm-faq__item > summary::-webkit-details-marker {
	display: none;
}

.zm-faq__item > summary::after {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--duration-fast) var(--ease-standard);
}

.zm-faq__item[open] > summary::after {
	transform: rotate(-135deg);
}

.zm-faq__item > :not(summary) {
	margin-top: 0;
	padding-bottom: var(--space-md);
}

/* ---------- Relances ---------- */
.zm-cta-band__inner,
.zm-teaser {
	max-width: var(--content-max);
}

.zm-cta-band__inner {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.zm-cta-band__inner .wp-block-buttons {
	justify-content: center;
}

.zm-cta-band .zm-section__title {
	margin-bottom: var(--space-lg);
}

/* ---------- Pages simples, légales, devis, articles ---------- */
.zm-legal > *,
.zm-devis > *,
.zm-article > * {
	max-width: var(--content-max);
}

.zm-legal .wp-block-post-title,
.zm-devis .wp-block-post-title,
.zm-article .wp-block-post-title {
	margin-bottom: var(--space-xl);
}

.zm-article__media {
	margin-bottom: var(--space-xl);
}

.zm-link-list {
	padding-left: var(--space-lg);
}

.zm-link-list li + li {
	margin-top: var(--space-sm);
}

.zm-404-links {
	margin-top: 0;
}

/* ---------- Zones « à rédiger » (visibles des éditeurs uniquement, inc/todo.php) ---------- */
.zm-todo {
	position: relative;
	outline: 2px dashed var(--color-warning);
	outline-offset: 4px;
}

.zm-todo::before {
	content: "À rédiger — masqué pour les visiteurs";
	display: block;
	width: fit-content;
	margin-bottom: var(--space-sm);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	background-color: var(--color-warning-soft);
	color: var(--color-warning);
	font-family: var(--font-body);
	font-size: var(--text-caption);
	font-weight: var(--font-weight-semibold);
}

/* Grilles : neutralise l'espacement vertical de la mise en page « flux » sur les éléments de grille. */
.zm-services > *,
.zm-zones > *,
.zm-steps > *,
.zm-hero > *,
.zm-hero__aside > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Hero d'accueil sans photo ni panneau publiés : une seule colonne. */
@media (min-width: 1024px) {
	.zm-hero--home:not(:has(.zm-hero__aside img, .zm-hero__panel)) {
		grid-template-columns: minmax(0, 1fr);
	}
}