/* ============================================================
   Hameau d'Écrin — compléments à theme.json
   ------------------------------------------------------------
   La charte (couleurs, polices, tailles, espacements, boutons)
   est déclarée dans theme.json. Ce fichier ne porte que ce que
   theme.json ne sait pas exprimer. Toujours référencer les
   variables --wp--preset--* et --wp--custom--*, jamais une
   valeur brute.
   ============================================================ */

/* ---- Base ------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
}

/* Les grandes zones (en-tête, contenu, pied de page) se touchent : sans
   cela, l'espacement entre blocs de WordPress laisse une bande claire
   entre une section sombre et le pied de page. Le pied de page reste en
   bas des pages courtes. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Même principe entre deux sections pleine largeur d'une page : pas de
   bande claire entre un fond coloré et le suivant. */
.wp-block-post-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

:where(p) {
	text-wrap: pretty;
}

::selection {
	background: var(--wp--preset--color--sauge);
	color: var(--wp--preset--color--foret-800);
}

/* ---- En-tête collant ---------------------------------------
   Le bloc Groupe ne peut coller qu'à l'intérieur de son parent :
   c'est donc l'enveloppe <header> de la partie de modèle qui colle. */

header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 20;
}

/* Un champ qui reçoit le focus, ou la cible d'une ancre, s'arrête sous
   l'en-tête collant au lieu de glisser dessous (WCAG 2.4.11). */
html {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--header-hauteur));
}

/* Le flou est porté par un pseudo-élément : posé sur le groupe
   lui-même, backdrop-filter enfermerait le menu mobile plein écran
   (position: fixed) dans la hauteur de l'en-tête. */
.hameau-header {
	position: relative;
	isolation: isolate;
}

.hameau-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--custom--header-background);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.hameau-brand .wp-block-site-title a {
	text-decoration: none;
}

/* ---- Navigation principale ---------------------------------
   Le menu de WordPress bascule en mode mobile sous 600 px. La
   barre (logo, six liens, bouton) ne tient sur une ligne qu'à partir
   de 1024 px : entre les deux, on garde le menu mobile. */

@media (min-width: 600px) and (max-width: 1023.98px) {

	.hameau-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.hameau-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Le bouton « Réserver une visite » de la barre laisse la place à
   l'entrée de menu équivalente tant que le menu est replié. */
@media (max-width: 1023.98px) {

	.hameau-header .hameau-header__cta {
		display: none;
	}
}

/* Bouton du menu mobile : cible tactile de 44 px. */
.hameau-nav .wp-block-navigation__responsive-container-open {
	padding: 10px;
	margin: -10px;
	color: var(--wp--preset--color--foret);
}

.hameau-nav:not(:has(.is-menu-open)) .hameau-nav__cta {
	display: none;
}

/* Menu ouvert : marges de la page (l'en-tête, en mise en page contrainte,
   remet à zéro les marges héritées par WordPress) et liens alignés à
   gauche, comme dans l'application. */
.hameau-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
}

.hameau-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--9);
	gap: var(--wp--preset--spacing--4);
}

/* La liste reprend les classes du bloc (items-justified-right) : elle
   redéfinit donc elle-même l'alignement, qu'il faut surcharger à son
   niveau. */
.hameau-nav .is-menu-open,
.hameau-nav .is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
}

.hameau-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--4);
	right: var(--wp--preset--spacing--5);
	padding: 10px;
	margin: -10px;
}

.hameau-nav .is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--lg);
}

.hameau-nav .is-menu-open .hameau-nav__cta {
	margin-top: var(--wp--preset--spacing--4);
}

.hameau-nav .is-menu-open .hameau-nav__cta .wp-block-navigation-item__content {
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	background: var(--wp--preset--color--foret);
	color: var(--wp--preset--color--lin);
	font-weight: 600;
}

/* Lien de la page courante. */
.hameau-nav .current-menu-item > .wp-block-navigation-item__content,
.hameau-nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--foret);
}

/* ---- Boutons : états que theme.json ne couvre pas ---------- */

.wp-block-button__link {
	transition:
		background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out),
		border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out),
		color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out);
}

.wp-block-button__link:active {
	transform: translateY(0.5px);
}

.wp-block-button.is-style-or .wp-block-button__link:hover {
	background-color: var(--wp--custom--couleurs--or-survol);
	color: var(--wp--custom--couleurs--sur-or);
}

.wp-block-button.is-style-contour .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--foret-50);
	color: var(--wp--preset--color--foret);
}

.wp-block-button.is-style-contour-clair .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--lin) 12%, transparent);
	color: var(--wp--preset--color--lin);
}

/* ---- Sections sombres -------------------------------------- */

/* Surtitres sur fond sombre. La sauge de la charte n'atteint que 2,9:1
   sur le vert forêt : la sauge claire y garantit 4,6:1 (WCAG AA). Sur le
   forêt profond du pied de page, la sauge d'origine suffit (5,5:1). */
.is-style-section-foret .is-style-surtitre,
.is-style-carte-vedette .is-style-surtitre {
	color: var(--wp--preset--color--sauge-claire);
}

.is-style-section-foret-profond .is-style-surtitre {
	color: var(--wp--preset--color--sauge);
}

:is(.is-style-section-foret, .is-style-section-foret-profond) :focus-visible {
	outline-color: var(--wp--preset--color--lin);
}

/* ---- Bandeau de page --------------------------------------- */

/* Marges du bandeau quand il vient d'une composition (page vitrine) ;
   le modèle « page » les pose lui-même. */
.hameau-bandeau {
	padding-top: var(--wp--preset--spacing--9);
	padding-bottom: var(--wp--preset--spacing--9);
}

.hameau-bandeau__intro {
	max-width: 620px;
	margin-top: var(--wp--preset--spacing--4);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.hameau-bandeau__titre {
	max-width: 760px;
	margin: 0;
	color: var(--wp--preset--color--lin);
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.06;
}

/* ---- Pied de page ------------------------------------------ */

.hameau-footer .wp-block-site-title {
	color: var(--wp--preset--color--lin);
	font-size: 1.3125rem;
	font-weight: 400;
}

.hameau-footer .wp-block-site-title a {
	color: inherit;
}

.hameau-footer .wp-block-navigation {
	font-weight: 400;
}

.hameau-footer .hameau-coordonnees a {
	color: inherit;
}

.hameau-footer .wp-block-navigation .wp-block-navigation-item__content:hover,
.hameau-footer .hameau-coordonnees a:hover {
	color: var(--wp--preset--color--lin);
	text-decoration: none;
}

.hameau-footer .hameau-coordonnees p {
	line-height: 1.5;
}

/* Tablette : deux colonnes plutôt qu'une pile (WordPress empile les
   colonnes sous 782 px). */
@media (min-width: 600px) and (max-width: 781.98px) {

	.hameau-footer .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.hameau-footer .wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - 1.25rem) !important;
	}
}

.hameau-footer__bas {
	border-top: 1px solid var(--wp--custom--border-on-dark);
}

/* ============================================================
   Accueil (sprint 2)
   Chaque section est une composition verrouillée (contentOnly) :
   ces classes portent la mise en page, les textes restent éditables.
   ============================================================ */

.hameau-section {
	padding-top: var(--wp--preset--spacing--section);
	padding-bottom: var(--wp--preset--spacing--section);
}

.hameau-entete-section {
	margin-bottom: 3.25rem;
	text-align: center;
}

.hameau-entete-section > .wp-block-heading {
	margin-top: var(--wp--preset--spacing--3);
}

.hameau-entete-section > p:last-child:not(.is-style-surtitre) {
	margin-top: 0.625rem;
}

.hameau-grille {
	gap: 1.375rem;
}

/* ---- Ouverture (hero) ------------------------------------- */

.hameau-hero {
	position: relative;
	overflow: hidden;
	padding-top: clamp(var(--wp--preset--spacing--10), 4vw + 3.5rem, 6rem);
	padding-bottom: clamp(var(--wp--preset--spacing--10), 5vw + 3.5rem, 6.5rem);
}

/* Emblème en filigrane, décoratif : hors du contenu éditable. */
.hameau-hero::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -6%;
	width: 560px;
	aspect-ratio: 1;
	background: url(../img/logo-emblem-512.png) center / contain no-repeat;
	opacity: 0.1;
	transform: translateY(-50%);
	pointer-events: none;
}

.hameau-hero > * {
	position: relative;
	z-index: 1;
}

.hameau-hero__titre {
	margin-top: 1.125rem;
	font-size: clamp(2.125rem, 6vw, 4.25rem);
	line-height: 1.04;
}

.hameau-hero__intro {
	max-width: 560px;
	margin-top: 1.375rem;
	font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.1875rem);
	line-height: 1.6;
}

.hameau-hero__boutons {
	gap: 0.875rem;
	margin-top: 2.125rem;
}

.hameau-bouton-lg .wp-block-button__link {
	padding: 0.9rem 1.9rem;
	font-size: var(--wp--preset--font-size--md);
}

/* Flèche après le libellé (icône Lucide « arrow-right »). */
.hameau-fleche .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 1.125rem;
	height: 1.125rem;
	margin-left: 0.55em;
	vertical-align: -0.2em;
	background: currentcolor;
	-webkit-mask: url(../icons/arrow-right.svg) center / contain no-repeat;
	mask: url(../icons/arrow-right.svg) center / contain no-repeat;
}

.hameau-chiffres {
	gap: 1.75rem;
	margin-top: var(--wp--preset--spacing--8);
}

.hameau-chiffres > .wp-block-group {
	gap: 0.125rem;
}

.hameau-chiffres p {
	margin: 0;
}

@media (max-width: 599.98px) {

	.hameau-hero::after {
		display: none;
	}
}

/* ---- Icônes des principes ----------------------------------
   Pastille de 56 px (fond forêt très clair) et icône Lucide
   posées au-dessus du titre. Icônes : assets/icons/ (licence ISC). */

.hameau-pilier > .wp-block-heading {
	margin: 0 0 var(--wp--preset--spacing--2);
}

.hameau-pilier > p {
	margin: 0;
}

.hameau-icone {
	position: relative;
	padding-top: 4.625rem;
}

.hameau-icone::before,
.hameau-icone::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
}

.hameau-icone::before {
	width: 3.5rem;
	height: 3.5rem;
	background: var(--wp--preset--color--foret-50);
	border: 1px solid var(--wp--preset--color--foret-100);
	border-radius: 18px;
}

.hameau-icone::after {
	top: 0.9375rem;
	left: 0.9375rem;
	width: 1.625rem;
	height: 1.625rem;
	background: var(--wp--preset--color--pin);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.hameau-icone--coeur::after {
	-webkit-mask-image: url(../icons/heart-handshake.svg);
	mask-image: url(../icons/heart-handshake.svg);
}

.hameau-icone--balance::after {
	-webkit-mask-image: url(../icons/scale.svg);
	mask-image: url(../icons/scale.svg);
}

.hameau-icone--arbres::after {
	-webkit-mask-image: url(../icons/trees.svg);
	mask-image: url(../icons/trees.svg);
}

.hameau-icone--etincelles::after {
	-webkit-mask-image: url(../icons/sparkles.svg);
	mask-image: url(../icons/sparkles.svg);
}

/* ---- Formules ------------------------------------------------ */

.hameau-formule {
	gap: var(--wp--preset--spacing--3);
	height: 100%;
	border-top: 4px solid var(--wp--preset--color--foret-100);
}

.hameau-formule--vedette {
	border-top-color: var(--wp--preset--color--or);
}

.hameau-formule__entete {
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	align-items: center;
}

.hameau-formule__entete p,
.hameau-formule > .wp-block-heading,
.hameau-formule__description,
.hameau-prix p {
	margin: 0;
}

.hameau-formule__description {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	color: var(--wp--preset--color--texte-attenue);
}

.hameau-prix {
	gap: 0.375rem;
	align-items: baseline;
}

.hameau-prix__montant {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.375rem;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--foret);
}

.hameau-prix__montant--texte {
	font-size: 1.5rem;
}

.hameau-prix__note {
	font-size: 0.84375rem;
	color: var(--wp--preset--color--texte-attenue);
}

.hameau-formule__filet {
	width: 100%;
	margin: var(--wp--preset--spacing--1) 0;
	border-top-color: var(--wp--preset--color--lin);
}

.is-style-pastille {
	width: fit-content;
}

/* Pastille dorée dans la carte mise en avant (tokens badge « gold »
   du design system de l'application). */
.hameau-formule--vedette .is-style-pastille {
	color: var(--wp--custom--couleurs--pastille-or-texte);
	background-color: var(--wp--custom--couleurs--pastille-or-fond);
}

/* Texte en lin : l'or n'atteint que 3,6:1 sur le vert forêt. L'étoile,
   décorative, reste dorée. */
.hameau-recommandee {
	display: inline-flex;
	gap: 0.375rem;
	align-items: center;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--lin);
}

.hameau-recommandee::before {
	content: "";
	width: 0.9375rem;
	height: 0.9375rem;
	background: var(--wp--preset--color--or);
	-webkit-mask: url(../icons/star-plein.svg) center / contain no-repeat;
	mask: url(../icons/star-plein.svg) center / contain no-repeat;
}

.is-style-coches {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 0;
	list-style: none;
}

.is-style-coches li {
	position: relative;
	padding-left: 1.6rem;
}

.is-style-coches li::before {
	content: "";
	position: absolute;
	top: 0.15em;
	left: 0;
	width: 1.0625rem;
	height: 1.0625rem;
	background: var(--wp--preset--color--feuille);
	-webkit-mask: url(../icons/check.svg) center / contain no-repeat;
	mask: url(../icons/check.svg) center / contain no-repeat;
}

/* La liste s'étire : le bouton reste en bas de la carte, aligné d'une
   carte à l'autre (la mise en page flex de WordPress annule les marges
   automatiques). */
.hameau-formule > .is-style-coches {
	flex-grow: 1;
}

.hameau-formule__action {
	padding-top: 1.375rem;
}

.hameau-formule--vedette .hameau-formule__description,
.hameau-formule--vedette .hameau-prix__note {
	color: var(--wp--preset--color--sur-fonce-attenue);
}

.hameau-formule--vedette .hameau-prix__montant,
.hameau-formule--vedette .is-style-coches {
	color: var(--wp--preset--color--lin);
}

.hameau-formule--vedette .hameau-formule__filet {
	border-top-color: var(--wp--custom--border-on-dark);
}

.hameau-formule--vedette .is-style-coches li::before {
	background: var(--wp--preset--color--sauge);
}

/* ---- Témoignage ---------------------------------------------- */

.hameau-temoignage__colonnes {
	gap: 3.5rem;
}

.hameau-photo {
	min-height: 240px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 18px;
}

/* Tant qu'aucune vraie photo n'est posée : dégradé dans la couleur
   choisie pour le bloc, et légende. Ajouter une image suffit à le
   remplacer. Dégradés : settings.custom.photo de theme.json. */
.hameau-photo:not(:has(img, video)) .has-ecorce-background-color {
	background: var(--wp--custom--photo--ecorce);
}

.hameau-photo:not(:has(img, video)) .has-sauge-background-color {
	background: var(--wp--custom--photo--sauge);
}

.hameau-photo:not(:has(img, video)) .has-foret-background-color {
	background: var(--wp--custom--photo--foret);
}

.hameau-photo__legende {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.65625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
	color: var(--wp--custom--photo--legende);
}

.hameau-photo:has(img, video) .hameau-photo__legende {
	display: none;
}

.hameau-citation {
	margin: 1.25rem 0 1.75rem;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-style: italic;
	line-height: 1.35;
	color: var(--wp--preset--color--foret);
}

.hameau-citation p {
	margin: 0;
	text-wrap: balance;
}

.hameau-auteur {
	gap: 0.875rem;
	align-items: center;
}

.hameau-auteur p {
	margin: 0;
}

.hameau-auteur > .wp-block-group {
	gap: 0;
}

.hameau-avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--foret-700);
	background: var(--wp--preset--color--foret-100);
	border: 1.5px solid var(--wp--preset--color--blanc);
	border-radius: 50%;
	box-shadow: var(--wp--preset--shadow--xs);
}

.hameau-auteur__nom {
	font-weight: 600;
	color: var(--wp--preset--color--encre);
}

/* ---- Appel à la visite --------------------------------------- */

.hameau-appel {
	text-align: center;
}

.hameau-appel > .wp-block-heading {
	margin-top: var(--wp--preset--spacing--3);
}

.hameau-appel__boutons {
	justify-content: center;
	gap: 0.875rem;
	margin-top: var(--wp--preset--spacing--6);
}

/* ============================================================
   Contact et pages légales (sprint 3)
   ============================================================ */

.hameau-colonnes-contact {
	gap: var(--wp--preset--spacing--8);
}

/* Coordonnées : pastille d'icône à gauche, comme dans l'application. */
.hameau-coordonnee {
	position: relative;
	min-height: 2.75rem;
	padding-left: 3.625rem;
}

.hameau-coordonnee::before,
.hameau-coordonnee::after {
	content: "";
	position: absolute;
	left: 0;
}

.hameau-coordonnee::before {
	top: 0;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--wp--preset--color--foret-50);
	border: 1px solid var(--wp--preset--color--foret-100);
	border-radius: 18px;
}

.hameau-coordonnee::after {
	top: 0.6875rem;
	left: 0.6875rem;
	width: 1.375rem;
	height: 1.375rem;
	background: var(--wp--preset--color--pin);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.hameau-coordonnee--adresse::after {
	-webkit-mask-image: url(../icons/map-pin.svg);
	mask-image: url(../icons/map-pin.svg);
}

.hameau-coordonnee--email::after {
	-webkit-mask-image: url(../icons/mail.svg);
	mask-image: url(../icons/mail.svg);
}

.hameau-coordonnee--telephone::after {
	-webkit-mask-image: url(../icons/phone.svg);
	mask-image: url(../icons/phone.svg);
}

.hameau-coordonnee__libelle {
	margin: 0 0 0.125rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texte-attenue);
}

.hameau-coordonnee p:last-child {
	margin: 0;
}

.hameau-coordonnees-liste {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-top: 1.25rem;
}

/* Titre avec icône en ligne (encart « Visiter le hameau »). */
.hameau-titre-icone {
	display: flex;
	gap: var(--wp--preset--spacing--2);
	align-items: center;
}

.hameau-titre-icone::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background: var(--wp--preset--color--pin);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.hameau-titre-icone--visite::before {
	-webkit-mask-image: url(../icons/calendar-check.svg);
	mask-image: url(../icons/calendar-check.svg);
}

.hameau-encart-visite {
	margin-top: var(--wp--preset--spacing--6);
}

.hameau-encart-visite .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--4);
}

/* ---- Demande de visite ------------------------------------ */

.hameau-colonnes-visite {
	gap: clamp(var(--wp--preset--spacing--7), 5vw, 4.5rem);
}

/* Le formulaire reste visible pendant la lecture du déroulé. */
@media (min-width: 782px) {

	.hameau-colonne-formulaire {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 6rem);
		align-self: flex-start;
	}
}

/* Étapes numérotées : pastille ronde, texte aligné à droite. */
.hameau-etapes {
	counter-reset: etape;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

.hameau-etapes > li {
	position: relative;
	min-height: 2.25rem;
	padding-left: 3.25rem;
	counter-increment: etape;
	line-height: 1.6;
}

.hameau-etapes > li + li {
	margin-top: 1.25rem;
}

.hameau-etapes > li::before {
	content: counter(etape);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--wp--preset--color--blanc);
	background: var(--wp--preset--color--foret);
	border-radius: 50%;
}

.hameau-etapes strong {
	color: var(--wp--preset--color--foret);
	font-weight: 600;
}

.hameau-encart-visite .hameau-coordonnee {
	margin-top: var(--wp--preset--spacing--4);
}

/* Pages légales : repères « à compléter » et date de mise à jour. */
.hameau-maj {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--texte-attenue);
}

/* ============================================================
   Blog (sprint 4)
   ============================================================ */

.hameau-article {
	gap: 0.625rem;
	height: 100%;
}

.hameau-article__image img {
	width: 100%;
	border-radius: 18px;
	object-fit: cover;
}

.hameau-article__date {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texte-attenue);
}

.hameau-article > .wp-block-post-title {
	margin: 0;
}

.hameau-article > .wp-block-post-title a {
	text-decoration: none;
}

.hameau-article > .wp-block-post-title a:hover {
	text-decoration: underline;
}

.hameau-article__extrait {
	margin: 0;
	color: var(--wp--preset--color--texte-attenue);
}

.hameau-article__extrait .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--pin);
}

.hameau-pagination {
	gap: var(--wp--preset--spacing--3);
	margin-top: var(--wp--preset--spacing--8);
}

.hameau-pagination .page-numbers {
	padding: 0.35rem var(--wp--preset--spacing--3);
	border-radius: 999px;
	text-decoration: none;
}

.hameau-pagination .page-numbers.current {
	color: var(--wp--preset--color--lin);
	background: var(--wp--preset--color--foret);
}

/* Article */

.hameau-article-contenu .hameau-article__image {
	margin-bottom: var(--wp--preset--spacing--7);
}

.hameau-article__categories {
	margin-top: var(--wp--preset--spacing--7);
	color: var(--wp--preset--color--texte-attenue);
}

.hameau-article__navigation {
	gap: var(--wp--preset--spacing--4);
	margin-top: var(--wp--preset--spacing--6);
}

.hameau-retour {
	margin-top: var(--wp--preset--spacing--7);
}

/* Recherche */

.hameau-recherche .wp-block-search__input {
	min-height: 44px;
	padding: 0.625rem 0.875rem;
	font: inherit;
	background: var(--wp--preset--color--blanc);
	border: 2px solid var(--wp--preset--color--bordure);
	border-radius: 12px;
}

.hameau-recherche .wp-block-search__input:focus-visible {
	border-color: var(--wp--preset--color--pin);
	outline: none;
	box-shadow: var(--wp--custom--focus-ring);
}

.hameau-recherche .wp-block-search__button {
	cursor: pointer;
}

/* Les liens du texte sont soulignés (WCAG 1.4.1). Ceux qui occupent une
   ligne à eux seuls — coordonnées, pied de page — se repèrent par leur
   place : soulignement au survol seulement. */
.hameau-footer a,
.hameau-coordonnee a,
.hameau-coordonnees a {
	text-decoration: none;
}

.hameau-footer a:hover,
.hameau-coordonnee a:hover,
.hameau-coordonnees a:hover {
	text-decoration: underline;
}

/* ============================================================
   Pages L'écurie active et Le hameau (sprint 5)
   ============================================================ */

.hameau-carte {
	height: 100%;
}

.hameau-carte > * + * {
	margin-top: 0.625rem;
}

.hameau-carte > .wp-block-heading {
	margin: var(--wp--preset--spacing--1) 0 0;
}

.hameau-carte p:last-child {
	margin-bottom: 0;
}

/* Liste comparative : croix en argile, en regard des coches. */
.is-style-croix {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 0;
	list-style: none;
}

.is-style-croix li {
	position: relative;
	padding-left: 1.6rem;
}

.is-style-croix li::before {
	content: "";
	position: absolute;
	top: 0.15em;
	left: 0;
	width: 1.0625rem;
	height: 1.0625rem;
	background: var(--wp--preset--color--argile);
	-webkit-mask: url(../icons/x.svg) center / contain no-repeat;
	mask: url(../icons/x.svg) center / contain no-repeat;
}

.hameau-icone--users::after {
	-webkit-mask-image: url(../icons/users.svg);
	mask-image: url(../icons/users.svg);
}

.hameau-icone--footprints::after {
	-webkit-mask-image: url(../icons/footprints.svg);
	mask-image: url(../icons/footprints.svg);
}

.hameau-icone--leaf::after {
	-webkit-mask-image: url(../icons/leaf.svg);
	mask-image: url(../icons/leaf.svg);
}

.hameau-chiffre-carte {
	text-align: center;
}

.hameau-chiffre-carte p {
	margin: 0;
}

.hameau-chiffre-carte .is-style-chiffre {
	font-size: 2.125rem;
	color: var(--wp--preset--color--foret);
}

.hameau-boutons-centres {
	justify-content: center;
	margin-top: var(--wp--preset--spacing--8);
}

/* ============================================================
   FAQ (V2)
   Blocs « Détails » natifs : repliables au clavier et sans script.
   ============================================================ */

.hameau-faq > * + * {
	margin-top: var(--wp--preset--spacing--3);
}

.hameau-faq .wp-block-details {
	border: 1px solid var(--wp--preset--color--lin);
	border-radius: var(--wp--preset--border-radius--lg);
	background: var(--wp--preset--color--blanc);
	box-shadow: var(--wp--preset--shadow--sm);
}

.hameau-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--5);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	color: var(--wp--preset--color--foret);
	list-style: none;
}

.hameau-faq summary::-webkit-details-marker {
	display: none;
}

/* Chevron décoratif, tourné quand la réponse est ouverte. */
.hameau-faq summary::after {
	content: "";
	flex-shrink: 0;
	width: 0.6rem;
	height: 0.6rem;
	margin-top: -0.3rem;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	transform: rotate(45deg);
	transition: transform var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out);
}

.hameau-faq details[open] > summary::after {
	margin-top: 0.3rem;
	transform: rotate(-135deg);
}

.hameau-faq summary:focus-visible {
	border-radius: var(--wp--preset--border-radius--lg);
	outline-offset: 2px;
}

.hameau-faq__suite {
	margin-top: var(--wp--preset--spacing--6);
	font-weight: 500;
}

.hameau-faq .wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 var(--wp--preset--spacing--5) var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--texte-attenue);
}

/* ---- Accessibilité ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Couleurs forcées (contraste élevé de Windows) : les icônes sont des
   masques remplis par leur fond, que le navigateur remplacerait par
   celui de la page. Elles prennent la couleur du texte système. */
@media (forced-colors: active) {

	.hameau-icone::after,
	.hameau-coordonnee::after,
	.hameau-titre-icone::before,
	.hameau-fleche .wp-block-button__link::after,
	.hameau-recommandee::before,
	.is-style-coches li::before,
	.is-style-croix li::before {
		forced-color-adjust: none;
		background: CanvasText;
	}
}

/* Horaires (liés aux réglages) : masqués s'ils ne sont pas renseignés. */
.hameau-horaires:empty {
	display: none;
}