/*
 * Composants éditoriaux de Let's Couleur et Sol.
 *
 * Direction artistique du CDC section 3.5 : photographie de chantier en grand
 * format, grille asymétrique de revue, filets fins plutôt qu'ombres, le blanc
 * comme matériau. Aucun dégradé décoratif, aucun verre dépoli, aucune carte
 * flottante à ombre diffuse. Le magenta ne sert que de surface, jamais de texte.
 *
 * Toutes les valeurs viennent des jetons de theme.json : aucune couleur en dur.
 */

/* ------------------------------------------------------------------ Filet */

.lcs-filet > :is(h2, h3):first-child::before {
	content: "";
	display: block;
	inline-size: 56px;
	block-size: 3px;
	background: var(--wp--preset--color--accent);
	margin-block-end: var(--wp--preset--spacing--m);
}

.lcs-surtitre {
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--primaire-sombre);
	font-weight: 600;
}

/* ------------------------------------------------------------ En-tete collant */

/*
 * Le parent de l en-tete est .wp-site-blocks, qui a de la course : le sticky
 * tient. Le fond doit etre opaque, sinon le contenu defile en transparence.
 * Aucun filter ni transform sur les ancetres, verifie a la mesure.
 */
/* Hauteur reelle de l en-tete, mesuree au rendu : elle borne la hauteur du hero. */
:root {
	--lcs-entete: 84px;
}

@media (min-width: 768px) {
	:root {
		--lcs-entete: 141px;
	}
}

@media (min-width: 1080px) {
	:root {
		--lcs-entete: 147px;
	}
}

header.wp-block-template-part {
	position: sticky;
	inset-block-start: 0;
	z-index: 20;
	background: var(--wp--preset--color--base);
}

.admin-bar header.wp-block-template-part {
	inset-block-start: 32px;
}

@media (max-width: 782px) {
	.admin-bar header.wp-block-template-part {
		inset-block-start: 46px;
	}
}

/*
 * Le fil d Ariane du gabarit laisse une bande blanche entre le menu et le
 * hero : il est masque quand la page porte un hero, ou il est repris dans le
 * hero lui-meme. Les pages sans hero gardent la bande.
 */
main:has(> .entry-content > .lcs-hero-photo) > .lcs-fil-ariane {
	display: none;
}

/*
 * Le fil d Ariane masque reste un frere pour le selecteur * + * de la
 * disposition en flux : sans cette regle, le contenu garde les 24 px de
 * blockGap et le hero ne colle pas au menu.
 */
main:has(> .entry-content > .lcs-hero-photo) > .entry-content {
	margin-block-start: 0;
}

/* -------------------------------------------------- Hero photographique */

.lcs-hero-photo {
	min-block-size: calc(100svh - var(--lcs-entete, 84px) - var(--lcs-barre-admin, 0px));
	/* Le coeur pose padding: 1em sur la couverture, soit 16,11 px avec le corps
	   fluide : on rend la gouttiere exacte de la racine pour ne pas decaler l axe. */
	padding-inline: var(--wp--style--root-padding-left, var(--wp--preset--spacing--s));
}

/*
 * Le conteneur interne du bloc couverture est ecrit a la main : il ne porte
 * pas les classes de disposition du coeur. On lui rend le rail large et la
 * gouttiere de la racine, sinon la grille prend toute la largeur et le titre
 * sort de l axe.
 */
.lcs-hero-photo .wp-block-cover__inner-container {
	inline-size: 100%;
}

.lcs-hero-photo .lcs-hero-grille {
	max-inline-size: 1520px;
	margin-inline: auto;
}

/*
 * La grille du hero vit dans le rail large, mais son bloc de texte est
 * repoussé jusqu'à l'axe de lecture : le H1 tombe exactement sur la même
 * verticale que la prose du reste de la page, à tous les paliers.
 */
.lcs-hero-grille {
	display: grid;
	gap: var(--wp--preset--spacing--xl);
	align-items: center;
}

/*
 * Trois colonnes au-dela de 1080 : une gouttiere calculee qui ramene le bloc
 * de texte exactement sur l axe de lecture, le texte, puis la carte. Le
 * pourcentage d une colonne de grille se resout sur la grille elle-meme,
 * contrairement a un padding en pourcentage qui se resout sur le parent.
 */
@media (min-width: 1080px) {
	.lcs-hero-grille {
		grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
		column-gap: var(--wp--preset--spacing--xxl);
		padding-inline: clamp(24px, 3.2vw, 64px);
	}
}

.lcs-hero-texte {
	display: grid;
	gap: var(--wp--preset--spacing--m);
	margin-block: 0;
}

.lcs-hero-texte > * {
	margin-block: 0;
}

.lcs-hero-texte .lcs-surtitre {
	color: var(--wp--preset--color--primaire-clair);
}

/* Filet magenta en surface, jamais en texte : il ouvre le message. */
.lcs-hero-texte .lcs-surtitre::before {
	content: "";
	display: block;
	inline-size: 56px;
	block-size: 3px;
	background: var(--wp--preset--color--accent);
	margin-block-end: var(--wp--preset--spacing--s);
}

/*
 * Rythme du titre : blanc pour le metier et la ville, bleu pale pour le
 * territoire. Le bleu primaire a ete essaye le 9 aout puis abandonne : il
 * tombait a 1,09:1 sur la photographie voilee, pour 3:1 exiges a 52 px.
 * Le bleu pale tient 4,81:1 au pire cas.
 */
.lcs-h1-lieu {
	color: var(--wp--preset--color--primaire-clair);
}

/* Reassurance sous le numero : pictos au trait, jamais d emoji. */
.lcs-hero-reassurance {
	list-style: none;
	padding-inline: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--l);
}

.lcs-hero-reassurance > li {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	color: var(--wp--preset--color--primaire-clair);
}

/* Pastille magenta foncee : le picto blanc y tient 6,12:1. */
.lcs-pastille {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 30px;
	block-size: 30px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-sombre);
}

.lcs-hero-reassurance svg {
	flex: none;
	color: var(--wp--preset--color--base);
}

/*
 * Telephone : un simple filet bleu pale. Le picto et les chiffres sont centres
 * l un sur l autre par une hauteur de ligne a 1 ; la cible tactile de 44 px est
 * portee par un ::after qui couvre toute la plaque.
 */
.lcs-hero-tel {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-self: start;
	inline-size: fit-content;
	max-inline-size: 100%;
	gap: 0.6rem;
	padding: 0.55rem var(--wp--preset--spacing--m);
	border: 1px solid var(--wp--preset--color--primaire-clair);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primaire-clair) 55%, transparent);
	border-radius: 5px;
	transition: border-color 160ms ease;
}

.lcs-hero-tel:hover,
.lcs-hero-tel:focus-within {
	border-color: var(--wp--preset--color--primaire-clair);
}

/*
 * Le blockGap du groupe pose 24 px de marge haute sur le bloc coordonnees :
 * la plaque grossit et le picto se decale de 12 px. Deux fois la classe pour
 * battre la regle du coeur a specificite egale, sans important.
 */
.lcs-hero-tel.lcs-hero-tel > * {
	margin-block: 0;
}

.lcs-hero-tel .lcs-coordonnees__telephone::after {
	content: "";
	position: absolute;
	inset: 0;
}

.lcs-hero-tel svg {
	flex: none;
	color: var(--wp--preset--color--primaire-clair);
}

.lcs-hero-tel .lcs-coordonnees__telephone {
	display: inline-flex;
	align-items: center;
	min-block-size: 0;
	line-height: 1;
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--tres-grand);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

.lcs-hero-tel .lcs-coordonnees__telephone:hover,
.lcs-hero-tel .lcs-coordonnees__telephone:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/*
 * Verre depoli demande par le client. Le fond translucide est exprime par
 * color-mix a partir du jeton, jamais en dur ; les navigateurs qui ignorent
 * color-mix retombent sur le blanc opaque declare juste avant.
 * Contraste calcule au pire cas (photographie noire sous le voile) : 6,16:1.
 */
.lcs-hero-carte.lcs-hero-carte {
	box-sizing: border-box;
	background-color: var(--wp--preset--color--base);
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 62%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(1.15);
	backdrop-filter: blur(16px) saturate(1.15);
	display: grid;
	gap: var(--wp--preset--spacing--m);
	align-content: start;
	padding: var(--wp--preset--spacing--l);
	border: 1px solid var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
	border-radius: 5px;
	margin-block: 0;
}

.lcs-hero-carte > * {
	margin-block: 0;
}

.lcs-hero-liste {
	list-style: none;
	padding-inline: 0;
	margin: 0;
	display: grid;
	gap: var(--wp--preset--spacing--s);
}

.lcs-hero-liste > li {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: var(--wp--preset--spacing--s);
	align-items: start;
	font-size: var(--wp--preset--font-size--petit);
}

.lcs-hero-liste svg {
	color: var(--wp--preset--color--primaire);
	margin-block-start: 2px;
}

.lcs-hero-carte .wp-block-buttons {
	flex-direction: column;
	gap: var(--wp--preset--spacing--s);
}

.lcs-hero-carte .wp-block-button {
	flex: 0 0 auto;
	inline-size: 100%;
}

.lcs-hero-carte .wp-block-button__link {
	display: block;
	text-align: center;
	white-space: nowrap;
}

/*
 * Apparition du hero : opacite et translation de faible amplitude, en cascade,
 * conformement a la section 3.7 du CDC. Rien au defilement. Declaree dans une
 * requete no-preference : sans prise en charge, tout reste simplement visible.
 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes lcs-apparition {
		from {
			opacity: 0;
			transform: translateY(18px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	.lcs-hero-texte > *,
	.lcs-hero-carte.lcs-hero-carte {
		animation: lcs-apparition 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	.lcs-hero-texte > *:nth-child(1) {
		animation-delay: 60ms;
	}

	.lcs-hero-texte > *:nth-child(2) {
		animation-delay: 170ms;
	}

	.lcs-hero-texte > *:nth-child(3) {
		animation-delay: 280ms;
	}

	.lcs-hero-texte > *:nth-child(4) {
		animation-delay: 390ms;
	}

	.lcs-hero-texte > *:nth-child(5) {
		animation-delay: 500ms;
	}

	.lcs-hero-carte.lcs-hero-carte {
		animation-delay: 610ms;
	}
}

/* ------------------------------------------------------------- Barre de preuves */

.lcs-preuves__liste {
	list-style: none;
	padding-inline: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: var(--wp--preset--spacing--l);
}

.lcs-preuves__liste > li {
	border-block-start: 1px solid var(--wp--preset--color--bordure);
	padding-block-start: var(--wp--preset--spacing--s);
}

.lcs-preuves__cle {
	display: block;
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--tres-grand);
	line-height: 1.1;
	color: var(--wp--preset--color--primaire-sombre);
	font-variant-numeric: tabular-nums;
}

.lcs-preuves__valeur {
	display: block;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--contraste-doux);
}

/* ------------------------------------------------------------------ En bref */

.lcs-en-bref.lcs-en-bref {
	box-sizing: border-box;
	border-block-start: 4px solid var(--wp--preset--color--accent);
	border-block-end: 1px solid var(--wp--preset--color--bordure);
}

.lcs-en-bref h2 {
	font-size: var(--wp--preset--font-size--grand);
	margin-block-start: 0;
}

.lcs-en-bref ul {
	margin-block-end: 0;
}

/* -------------------------------------------------------------- Cartes liées */

.lcs-cartes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--wp--preset--spacing--l);
}

.lcs-cartes .lcs-carte {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	min-inline-size: 0;
	padding-block-end: var(--wp--preset--spacing--m);
	border-block-end: 1px solid var(--wp--preset--color--bordure);
	margin-block: 0;
}

.lcs-carte figure,
.lcs-carte .wp-block-image {
	margin: 0;
}

.lcs-carte img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	block-size: auto;
}

.lcs-carte h3 {
	margin-block: var(--wp--preset--spacing--xs) 0;
	font-size: var(--wp--preset--font-size--grand);
}

.lcs-carte h3 a {
	text-decoration: none;
	color: var(--wp--preset--color--contraste);
}

.lcs-carte h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.lcs-carte p {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-carte:hover h3 a,
.lcs-carte:focus-within h3 a {
	color: var(--wp--preset--color--primaire-sombre);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (hover: none) {
	.lcs-carte:hover h3 a {
		color: var(--wp--preset--color--contraste);
		text-decoration: none;
	}
}

@media (min-width: 1080px) {
	.lcs-cartes {
		grid-template-columns: repeat(4, 1fr);
	}
}

/*
 * Le bloc media-text du coeur pose un retrait de 8 pour cent sur sa colonne
 * de texte : le titre sortirait de l axe de lecture. On le neutralise du cote
 * de l axe et on reporte la respiration de l autre cote.
 */
.wp-block-media-text.lcs-filet > .wp-block-media-text__content {
	padding-inline-start: 0;
	padding-inline-end: var(--wp--preset--spacing--l);
}

/* ------------------------------------------------------------------ Supports */

.lcs-supports {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: var(--wp--preset--spacing--m);
}

.lcs-supports .lcs-support {
	box-sizing: border-box;
	min-inline-size: 0;
	margin-block: 0;
}

.lcs-support img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	block-size: auto;
}

.lcs-support h3 {
	font-size: var(--wp--preset--font-size--corps);
	margin-block: var(--wp--preset--spacing--xs) 0;
	padding-block-start: var(--wp--preset--spacing--xs);
	border-block-start: 1px solid var(--wp--preset--color--bordure);
}

.lcs-support p {
	margin-block: var(--wp--preset--spacing--xs) 0;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--contraste-doux);
}

/* -------------------------------------------------------------------- Étapes */

ol.lcs-etapes {
	list-style: none;
	padding-inline: 0;
	counter-reset: lcs-etape;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: var(--wp--preset--spacing--l);
}

ol.lcs-etapes > li {
	counter-increment: lcs-etape;
	border-block-start: 2px solid var(--wp--preset--color--contraste);
	padding-block-start: var(--wp--preset--spacing--s);
	margin-block: 0;
}

ol.lcs-etapes > li::before {
	content: counter(lcs-etape, decimal-leading-zero);
	display: block;
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--grand);
	line-height: 1;
	color: var(--wp--preset--color--primaire);
	font-variant-numeric: tabular-nums;
	margin-block-end: var(--wp--preset--spacing--xs);
}

/* --------------------------------------------------------------- Bande sombre */

.lcs-bande-sombre.lcs-bande-sombre {
	background: var(--wp--preset--color--contraste);
	color: var(--wp--preset--color--base);
}

.lcs-bande-sombre h2 {
	color: var(--wp--preset--color--base);
}

.lcs-bande-sombre .lcs-filet > h2::before,
.lcs-bande-sombre > h2::before {
	background: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------- Actions du hero et CTA */

.lcs-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--m);
}

.lcs-actions .lcs-coordonnees {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s);
}

.lcs-actions .lcs-coordonnees__telephone {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-size: var(--wp--preset--font-size--moyen);
	font-weight: 600;
}

/* --------------------------------------------------------- Liste des communes */

.lcs-carte-zone__liste {
	list-style: none;
	padding-inline: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m);
}

.lcs-carte-zone__liste > li {
	border-block-start: 1px solid var(--wp--preset--color--bordure);
	padding-block: var(--wp--preset--spacing--xs);
}

/* ------------------------------------------------------------------ Mouvement */

.lcs-carte h3 a,
.wp-element-button {
	transition: color 160ms ease, background-color 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.lcs-carte h3 a,
	.wp-element-button {
		transition: none;
	}
}