/**
 * Shell one-page Cheval Blanc — responsive base + focus.
 *
 * Frames de référence DESIGN.md : desktop 1440 px / mobile 402 px.
 * Marges contenu : 24 px desktop / 12 px mobile (tokens theme.json).
 * Polices produit : PP Frama + ABC Daily Slab Mono (pas Inter/Roboto/Arial/system-ui).
 */

:root {
	--cheval-frame-desktop: var(--wp--custom--frame--desktop, 1440px);
	--cheval-frame-mobile: var(--wp--custom--frame--mobile, 402px);
	--cheval-margin-desktop: var(--wp--custom--margin--desktop, 24px);
	--cheval-margin-mobile: var(--wp--custom--margin--mobile, 12px);
	/* Chrome header + footer : memes gouttieres / rythme vertical. */
	--cheval-chrome-pad-x: var(--cheval-margin-desktop);
	--cheval-chrome-pad-y: var(--wp--preset--spacing--40, 1.5rem);
	/*
	 * Pleine largeur fluide : le contenu occupe tout l’espace utile.
	 * Les marges DESIGN (24 / 12) sont appliquées sur le flux principal.
	 */
	--wp--style--global--content-size: 100%;
	--wp--style--global--wide-size: 100%;
}

/*
 * Pas de scroll horizontal : un enfant trop large (credits nowrap, 100vw…)
 * élargissait le containing block du header fixed → logo droite hors écran.
 */
html,
body {
	overflow-x: clip;
	max-width: 100%;
}

/*
 * Titre de page : jamais affiché en front (template page sans post-title).
 * Filet si une copie FSE personnalisée garde encore le bloc.
 */
body.page .wp-block-post-title,
body.page-template-default .wp-block-post-title {
	display: none !important;
}

/*
 * Règle site : pas de soulignement au hover / focus sur les liens.
 * Le format Rich Text « souligné » explicite (toolbar) reste possible.
 */
a:hover,
a:focus,
a:focus-visible {
	text-decoration: none;
}

/*
 * Gouttière contenu UNIQUE (DESIGN 24 / 12).
 * Ne pas paddler aussi main : post-content est déjà dans main → sinon 48 px
 * alors que header/footer restent a 24 px.
 */
.wp-block-post-content,
.entry-content {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	padding-left: var(--cheval-chrome-pad-x);
	padding-right: var(--cheval-chrome-pad-x);
}

/* Main = coquille sans gouttière horizontale (évite le double avec post-content). */
main.wp-block-group {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/*
 * Page 404 (contenu court) : footer colle en bas du viewport.
 * Sans flex + min-height, le footer remonte et laisse un bandeau blanc sous les credits.
 * Padding-top large (spacing 80) : le titre ne colle pas sous le header fixed.
 */
body.error404 {
	min-height: 100vh;
	min-height: 100dvh;
}

body.error404 .wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	box-sizing: border-box;
}

body.error404 .wp-site-blocks > main.wp-block-group {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	/* spacing|80 = 120px — meme air sous le chrome fixed et apres le CTA. */
	padding-top: var(--wp--preset--spacing--80, 120px);
	padding-bottom: var(--wp--preset--spacing--80, 120px);
	padding-left: var(--cheval-chrome-pad-x);
	padding-right: var(--cheval-chrome-pad-x);
}

body.error404 .wp-site-blocks > footer {
	flex-shrink: 0;
	margin-top: auto;
}

.wp-block-techniconcept-columns__inner.is-constrained,
.wp-block-techniconcept-project-galerie,
.wp-block-techniconcept-project-galerie.alignfull {
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Marge mobile 12 px. */
@media (max-width: 781px) {
	:root {
		--cheval-chrome-pad-x: var(--cheval-margin-mobile);
	}

	.wp-block-post-content,
	.entry-content {
		padding-left: var(--cheval-chrome-pad-x);
		padding-right: var(--cheval-chrome-pad-x);
	}

	body {
		font-size: var(--wp--preset--font-size--body-mobile, 15px);
		line-height: var(--wp--custom--line-height--body-mobile, 23px);
	}

	/*
	 * Titres / textes mobile Figma (25 / 15).
	 * !important : bat les classes WP has-*-font-size (preset desktop).
	 */
	h1,
	h2,
	.wp-block-techniconcept-title,
	.wp-block-techniconcept-title.has-headline-font-size {
		font-size: var(--wp--preset--font-size--headline-mobile, 25px) !important;
	}

	.wp-block-techniconcept-text,
	.wp-block-techniconcept-text.has-body-font-size {
		font-size: var(--wp--preset--font-size--body-mobile, 15px) !important;
		/* !important : bat le line-height desktop (32px) des styles globaux du bloc. */
		line-height: var(--wp--custom--line-height--body-mobile, 23px) !important;
	}
}

/* Anneau focus clavier uniquement — un clic souris ne laisse pas de cadre. */
:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #000000);
	outline-offset: 2px;
}

.techniconcept-site-primary-nav__list a:focus,
.techniconcept-site-primary-nav__list a:focus-visible {
	outline: none;
	outline-offset: 0;
	box-shadow: none;
}

/* Texte accessible hors ecran (icones footer, etc.). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Section Galerie — ancre ; largeur gérée plus haut (pleine largeur fluide). */
.wp-block-techniconcept-project-galerie {
	scroll-margin-top: 1.5rem;
}

.wp-block-techniconcept-project-galerie.is-placeholder {
	background-color: var(--wp--preset--color--secondary, #757575);
	color: var(--wp--preset--color--background, #ffffff);
	padding: var(--wp--preset--spacing--50, 24px);
}

/*
 * Marqueur CTA Réserver (ZenChef) — marge sous le corps Espace uniquement.
 * Ne jamais appliquer dans le Header (sinon RÉSERVER « saute » dans la nav).
 */
.cheval-cta-reserve {
	margin-top: 32px;
}

.techniconcept-site-primary-nav .cheval-cta-reserve,
.techniconcept-site-primary-nav a.cheval-cta-reserve {
	margin-top: 0;
}

@media (max-width: 781px) {
	.cheval-cta-reserve {
		margin-top: var(--wp--preset--spacing--50, 24px);
	}

	.techniconcept-site-primary-nav .cheval-cta-reserve,
	.techniconcept-site-primary-nav a.cheval-cta-reserve {
		margin-top: 0;
	}
}

/*
 * Chrome header + footer — gouttières horizontales = contenu (24/12).
 * !important : bat has-global-padding (root padding) pour éviter 24+24 = 48.
 * Header : rythme vertical spacing|40.
 * Footer Figma (h=314) : padding vertical = marge contenu 24/12, colonnes en haut.
 */
.techniconcept-site-header,
.techniconcept-site-header.has-global-padding {
	box-sizing: border-box;
	width: 100%;
	padding-top: var(--cheval-chrome-pad-y) !important;
	padding-bottom: var(--cheval-chrome-pad-y) !important;
	padding-left: var(--cheval-chrome-pad-x) !important;
	padding-right: var(--cheval-chrome-pad-x) !important;
}

.cheval-footer,
.cheval-footer.has-global-padding {
	box-sizing: border-box;
	width: 100%;
	/* Vertical : pad sur __inner (1re ligne) + bas credits ; horizontal = gouttiere chrome. */
	padding-top: 0 !important;
	padding-bottom: var(--cheval-chrome-pad-x) !important;
	padding-left: var(--cheval-chrome-pad-x) !important;
	padding-right: var(--cheval-chrome-pad-x) !important;
}

.techniconcept-site-header > .wp-block-group,
.cheval-footer__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * Footer chrome (Story 6.1) — 3 colonnes explicites :
 * 1. cercle « Réservation »
 * 2. marque + NAP
 * 3. Instagram + horaires + mentions
 */
.cheval-footer {
	/* Rythme vertical : marque → adresse = Instagram → Horaires = titre → jours. */
	--cheval-footer-stack-gap: 0.75rem;
	position: relative;
	/* Meme largeur que le header (pas de breakout 100vw : decale avec la scrollbar). */
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	/* Hauteur Figma desktop 314 px (contenu + padding 24 haut/bas). */
	min-height: 314px;
	color: var(--wp--preset--color--primary, #000000);
	background-color: var(--wp--preset--color--footer-surface, #d5deef);
}

.cheval-footer__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 4vw, 4rem);
	/* Figma : blocs colonnes alignes en haut, pas centres verticalement. */
	align-items: start;
	width: 100%;
	/* 1re ligne (cercle / NAP / horaires) : plus d'air haut/bas. */
	padding-top: var(--wp--preset--spacing--70, 64px);
	padding-bottom: var(--wp--preset--spacing--70, 64px);
}

.cheval-footer__col {
	display: flex;
	flex-direction: column;
	min-width: 0;
	justify-content: flex-start;
}

/*
 * Colonne 1 : ancre de dock du cercle (reserve la place in-flow).
 * Le cercle est en position:fixed pilote par JS (sticky haut / plancher dock).
 */
.cheval-footer__col--circle {
	align-items: flex-start;
	justify-content: flex-start;
	min-height: 140px;
}

/*
 * Col. centre / droite : meme gap (marque → adresse).
 * Gap flex, pas margin : WP is-layout-flow remet margin-block a 0.
 */
.cheval-footer__col--center {
	align-items: flex-start;
	gap: var(--cheval-footer-stack-gap);
}

/* Colonne droite Figma : aside (IG + horaires) + mentions alignes a droite. */
.cheval-footer__col--right {
	align-items: flex-end;
	gap: var(--cheval-footer-stack-gap);
	justify-self: end;
	text-align: right;
}

/*
 * Contenu du shortcode aside : meme gap que marque → adresse (col. centre).
 * Necessaire car social + hours ne sont pas enfants directs de la colonne.
 */
.cheval-footer__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--cheval-footer-stack-gap, 0.75rem);
	width: 100%;
}

/* Ordre Figma : Instagram puis Horaires (jamais l'inverse). */
.cheval-footer__social {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	order: 1;
	width: 100%;
	margin: 0;
}

.cheval-footer__contact,
.wp-block-techniconcept-site-footer-contact {
	margin: 0;
	color: inherit;
}

.cheval-footer__nap {
	font-family: var(--wp--preset--font-family--frama, "PP Frama", sans-serif);
	/* Figma footer-nap : 24px / 32px desktop (mobile : 15/20 — media 781). */
	font-size: var(--wp--preset--font-size--footer-nap, 24px);
	line-height: var(--wp--custom--line-height--footer-nap, 32px);
}

.techniconcept-site-footer-contact__address {
	font-style: normal;
	margin: 0 0 0.35em;
}

.techniconcept-site-footer-contact__address-line {
	display: block;
}

.techniconcept-site-footer-contact__email,
.techniconcept-site-footer-contact__phone {
	margin: 0 0 0.25em;
}

.cheval-footer__nap a,
.cheval-footer__legal-link,
.cheval-footer__instagram {
	color: inherit;
	text-decoration: none;
}

.cheval-footer__nap a:hover,
.cheval-footer__nap a:focus-visible,
.cheval-footer__legal-link:hover,
.cheval-footer__legal-link:focus-visible,
.cheval-footer__instagram:hover,
.cheval-footer__instagram:focus-visible {
	text-decoration: none;
}

.cheval-footer__hours {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	order: 2;
	/* Titre → jours : meme gap marque → adresse. */
	gap: var(--cheval-footer-stack-gap, 0.75rem);
	font-family: var(--wp--preset--font-family--mono, "ABC Daily Slab Mono", monospace);
	/* Figma hours : 18px / 22px (preset hours). */
	font-size: var(--wp--preset--font-size--hours, 18px);
	font-weight: 300;
	line-height: var(--wp--custom--line-height--hours, 22px);
	text-transform: uppercase;
	margin: 0;
	width: 100%;
	text-align: right;
}

.cheval-footer__hours-title {
	margin: 0;
}

.cheval-footer__hours-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cheval-footer__hours-list li {
	display: flex;
	justify-content: flex-end;
	flex-wrap: nowrap;
	white-space: nowrap;
	gap: 0.75em;
	margin: 0 0 0.15em;
}

/*
 * Icone 24px alignee en haut avec « Le Cheval Blanc ».
 * Zone tactile ~44px via ::after (hors flux → n'augmente pas le gap vers Horaires).
 */
.cheval-footer__instagram {
	position: relative;
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.cheval-footer__instagram::after {
	content: '';
	position: absolute;
	inset: -10px;
}

.cheval-footer__instagram-icon {
	display: block;
	width: 24px;
	height: 24px;
	color: inherit;
}

.cheval-footer__brand {
	margin: 0;
	font-family: var(--wp--preset--font-family--frama, "PP Frama", sans-serif);
	/* Figma footer-nap : meme echelle que le NAP. */
	font-size: var(--wp--preset--font-size--footer-nap, 24px);
	line-height: var(--wp--custom--line-height--footer-nap, 32px);
}

.cheval-footer__legal-link {
	font-family: var(--wp--preset--font-family--mono, "ABC Daily Slab Mono", monospace);
	font-size: var(--wp--preset--font-size--hours, 18px);
	font-weight: 300;
	line-height: var(--wp--custom--line-height--hours, 22px);
	text-transform: uppercase;
}

/* Ligne credits tout en bas du footer (hors grille 3 colonnes). */
.cheval-footer__credits {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	width: 100%;
	margin: 1.5rem 0 0;
	padding: 0.75rem 0 0;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	font-family: var(--wp--preset--font-family--mono, "ABC Daily Slab Mono", monospace);
	font-size: var(--wp--preset--font-size--hours-mobile, 14px);
	font-weight: 300;
	line-height: var(--wp--custom--line-height--hours-mobile, 18px);
	color: inherit;
}

.cheval-footer__credits-agencies {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	gap: 0.5rem 1.5rem;
	min-width: 0;
	margin-left: auto;
	text-align: right;
}

.cheval-footer__credits-item,
.cheval-footer__credits-copy {
	display: inline-block;
}

/* Copyright : une seule ligne (pas de wrap mid-phrase). */
.cheval-footer__credits-copy {
	flex-shrink: 0;
	text-align: left;
	white-space: nowrap;
}

.cheval-footer__credits-item {
	white-space: nowrap;
}

.cheval-footer__credits-link {
	color: inherit;
	text-decoration: none;
}

.cheval-footer__credits-link:hover,
.cheval-footer__credits-link:focus-visible {
	text-decoration: underline;
}

/*
 * Texte circulaire — top/left/right pilotes par JS :
 * toujours en bas de la partie visible ; s'arrete au dock footer ;
 * revient en bas du viewport au scroll vers le haut.
 * Rotation + inertie. Ownership DOM = Footer.
 */
a.cheval-circular-text.cheval-cta-reserve {
	--cheval-circular-disc: #c5d2e8;
	--cheval-circular-spin: 0deg;
	--cheval-circular-chars: 11;
	/* Orbite des lettres (ABC 18px) — inset depuis le bord du disque 140px. */
	--cheval-circular-text-radius: 52px;
	position: relative;
	display: block;
	width: 140px;
	height: 140px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent !important;
	color: var(--wp--preset--color--primary, #000000) !important;
	box-shadow: none !important;
	filter: none !important;
	text-decoration: none;
	pointer-events: auto;
	touch-action: manipulation;
	cursor: pointer;
	z-index: 5;
}

/*
 * Ancre fixed (JS) : au-dessus de la nav produit mobile (z-index 180)
 * et sous la banniere cookies (9999).
 */
a.cheval-circular-text.cheval-cta-reserve.is-circular-anchored {
	z-index: 250;
}

a.cheval-circular-text.cheval-cta-reserve:hover,
a.cheval-circular-text.cheval-cta-reserve:active,
a.cheval-circular-text.cheval-cta-reserve:focus-visible {
	background: transparent !important;
	color: var(--wp--preset--color--primary, #000000) !important;
}

.cheval-circular-text__disc {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--cheval-circular-disc, #c5d2e8);
	pointer-events: none;
}

.cheval-circular-text__ring {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/*
 * Marche d'escalier : chaque glyphe reste droit (contre-rotation),
 * place sur le cercle ; le scroll pilote --cheval-circular-spin.
 */
.cheval-circular-text__char {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--mono, "ABC Daily Slab Mono", monospace);
	font-size: 18px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: inherit;
	transform-origin: center center;
	transform:
		translate(-50%, -50%)
		rotate(
			calc(
				(var(--i) * 360deg / var(--cheval-circular-chars)) +
					var(--cheval-circular-spin, 0deg)
			)
		)
		translateY(calc(-1 * var(--cheval-circular-text-radius)))
		rotate(
			calc(
				-1 *
					(
						(var(--i) * 360deg / var(--cheval-circular-chars)) +
							var(--cheval-circular-spin, 0deg)
					)
			)
		);
	will-change: transform;
}

/* Complianz : ne jamais masquer la banniere ; cercle sous le CMP. */
.cmplz-cookiebanner,
#cmplz-cookiebanner-container {
	z-index: 9999;
}

@media (max-width: 781px) {
	.cheval-footer {
		min-height: 0;
	}

	/*
	 * Mobile Figma v2 : une seule colonne texte a gauche (marque + NAP +
	 * horaires + mentions) ; colonne droite reservee au cercle.
	 */
	.cheval-footer__inner {
		grid-template-columns: minmax(0, 1fr) minmax(7rem, 7.5rem);
		column-gap: 0.75rem;
		row-gap: var(--cheval-footer-stack-gap, 0.75rem);
		align-items: start;
		padding-top: var(--wp--preset--spacing--60, 40px);
		padding-bottom: var(--wp--preset--spacing--60, 40px);
	}

	/* Colonne cercle : ancre droite (dock JS) ; min-height = taille disque. */
	.cheval-footer__col--circle {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: start;
		justify-self: end;
		min-height: 112px;
	}

	.cheval-footer__col--center {
		grid-column: 1;
		grid-row: 1;
	}

	.cheval-footer__col--right {
		grid-column: 1;
		grid-row: 2;
		justify-self: stretch;
		align-items: flex-start;
		text-align: left;
	}

	/* Aside / horaires : meme alignement gauche que la marque (plus de flush right). */
	.cheval-footer__aside,
	.cheval-footer__social,
	.cheval-footer__hours {
		align-items: flex-start;
		text-align: left;
	}

	/* Un peu plus d’air entre NAP (col. centre) et l’icone Instagram. */
	.cheval-footer__social {
		justify-content: flex-start;
		margin-top: 0.75rem;
	}

	.cheval-footer__hours-list li {
		justify-content: flex-start;
	}

	/*
	 * Figma mobile v2 : NAP/marque 15px, horaires/mentions/credits 14px.
	 * !important : bat les utilitaires WP .has-*-font-size (24/18 !important)
	 * si une classe legacy reste dans le DOM.
	 */
	.cheval-footer .cheval-footer__nap,
	.cheval-footer .cheval-footer__brand,
	.cheval-footer .has-footer-nap-font-size {
		font-size: var(--wp--preset--font-size--footer-nap-mobile, 15px) !important;
		line-height: var(--wp--custom--line-height--footer-nap-mobile, 20px) !important;
	}

	.cheval-footer .cheval-footer__hours,
	.cheval-footer .cheval-footer__legal-link,
	.cheval-footer .cheval-footer__credits,
	.cheval-footer .has-hours-font-size {
		font-size: var(--wp--preset--font-size--hours-mobile, 14px) !important;
		line-height: var(--wp--custom--line-height--hours-mobile, 18px) !important;
	}

	/*
	 * Credits mobile : copyright peut wrapping (sinon overflow-x page
	 * → header fixed plus large que le viewport → logo droite sort).
	 * Agences en dessous.
	 */
	.cheval-footer__credits {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 0.85rem;
		margin-top: 1rem;
		max-width: 100%;
		min-width: 0;
	}

	.cheval-footer__credits-copy {
		flex-shrink: 1;
		max-width: 100%;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.cheval-footer__credits-agencies {
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-left: 0;
		text-align: left;
		max-width: 100%;
	}

	/* Taille mobile ; top/right = JS (scroll dock). */
	a.cheval-circular-text.cheval-cta-reserve {
		--cheval-circular-text-radius: 42px;
		width: 112px;
		height: 112px;
	}

	.cheval-circular-text__char {
		font-size: 14px;
	}
}