:root {
	--kao-icon-mail: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22m22%207-8.991%205.727a2%202%200%200%201-2.009%200L2%207%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E");
	--kao-icon-map-pin: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
	--kao-icon-clock: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%206v6l4%202%22%2F%3E%3C%2Fsvg%3E");
	--kao-icon-instagram: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20x%3D%222%22%20y%3D%222%22%20rx%3D%225%22%20ry%3D%225%22%2F%3E%3Cpath%20d%3D%22M16%2011.37A4%204%200%201%201%2012.63%208%204%204%200%200%201%2016%2011.37z%22%2F%3E%3Cline%20x1%3D%2217.5%22%20x2%3D%2217.51%22%20y1%3D%226.5%22%20y2%3D%226.5%22%2F%3E%3C%2Fsvg%3E");
	--kao-picto: url("../images/picto-kao.svg");
	--kao-picto-color: #83bb26;
	--kao-picto-size: 1.5rem;
	--kao-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M5 24C40 11 76 19 116 13 150 8 188 21 226 14 266 7 308 18 350 10 368 7 382 12 394 4C382 15 400 23 386 33 378 45 399 53 388 65 380 77 398 83 393 94C356 99 320 88 282 93 242 98 206 84 166 89 128 94 90 85 52 92 34 95 18 89 4 96C1 72 9 47 5 24ZM-3 37C13 35 30 37 45 40 30 43 13 43-3 42ZM-3 63C8 61 20 62 31 65 20 68 8 68-3 68ZM403 55C388 53 371 55 354 58 371 61 388 61 403 60Z'/%3E%3C/svg%3E");
	--kao-header-height: 4.5rem;
	--kao-section-padding: 5rem;
	--kao-admin-bar: 0px;
}

/* La barre d'administration est fixe au-dessus de 600px : l'en-tête se cale dessous. */

body.admin-bar {
	--kao-admin-bar: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--kao-admin-bar: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar {
		--kao-admin-bar: 0px;
	}
}

@media (min-width: 768px) {
	:root {
		--kao-section-padding: 7rem;
	}
}

/* Le contenu passe sous l'en-tête fixe : pas d'écart hérité du blockGap. */

.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------------
 * En-tête fixe translucide
 * ---------------------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part {
	position: fixed;
	top: var(--kao-admin-bar);
	right: 0;
	left: 0;
	z-index: 50;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/*
 * Le fond translucide vit dans un pseudo-élément : porté par l'en-tête,
 * backdrop-filter ferait de lui le bloc conteneur des descendants fixes, et
 * l'overlay du menu mobile se retrouverait réduit à la hauteur de l'en-tête.
 */

.wp-site-blocks > header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: color-mix(in srgb, var(--wp--preset--color--background) 80%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.kao-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.kao-header .wp-block-navigation {
	--navigation-layout-justification-setting: flex-end;
}

.kao-header .wp-block-navigation .wp-block-navigation__container {
	gap: 2rem;
}

.wp-block-site-logo .kao-logo,
.kao-logo-heading .kao-logo {
	display: block;
	max-width: 100%;
	height: auto;
	overflow: visible;
}

.kao-logo-accent {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.kao-logo-accent--blue-left {
	--kao-logo-movement: translate(-3px, -1px) rotate(-8deg);
}

.kao-logo-accent--blue-right {
	--kao-logo-movement: translate(3px, 1px) rotate(8deg);
	transition-delay: 45ms;
}

.kao-logo-accent--crown {
	--kao-logo-movement: translateY(-4px) rotate(-6deg);
	transform-origin: center bottom;
	transition-delay: 90ms;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-site-logo a:focus-visible .kao-logo-accent {
		transform: var(--kao-logo-movement);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.wp-block-site-logo:hover .kao-logo-accent,
	.kao-logo-heading:hover .kao-logo-accent {
		transform: var(--kao-logo-movement);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kao-logo-accent {
		transition: none;
	}
}

@media (max-width: 599px) {
	.kao-header .wp-block-site-logo img,
	.kao-header .wp-block-site-logo .kao-logo {
		width: 160px;
	}
}

/* -------------------------------------------------------------------------
 * Hero : texte et illustration originale, animée dans le fichier SVG.
 * ---------------------------------------------------------------------- */

#top.kao-hero {
	padding-top: calc(var(--kao-header-height) + 3rem) !important;
	padding-bottom: 3rem !important;
}

.kao-hero .kao-hero-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
	max-width: var(--wp--style--global--wide-size);
}

.kao-hero-layout > * {
	min-width: 0;
	margin: 0 !important;
}

.kao-hero-copy > * {
	text-align: left;
}

.kao-hero-copy h1 {
	max-width: 7em;
}

.kao-hero-copy .kao-logo-heading {
	width: 100%;
	max-width: 38rem;
	line-height: 1;
}

.kao-logo-heading .kao-logo {
	width: 100%;
}

.kao-hero-copy .kao-hero-description {
	max-width: 28rem;
}

.kao-hero-art {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

.kao-crane {
	display: block;
	width: auto;
	height: clamp(28rem, 68vh, 42rem);
	max-width: 100%;
	object-fit: contain;
	pointer-events: none;
}

.kao-crane-controls:not([hidden]) {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
}

.kao-crane-controls button {
	padding: 0.5rem 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--muted-foreground);
	font: inherit;
	font-size: 0.75rem;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.kao-crane-controls button:hover {
	text-decoration: underline;
}

.kao-crane-controls button:not([hidden]) {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.kao-crane-controls button::before {
	content: "";
	width: 0.875rem;
	height: 0.875rem;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--kao-crane-control-icon) center / contain no-repeat;
	mask: var(--kao-crane-control-icon) center / contain no-repeat;
}

.kao-crane-controls [data-crane-pause] {
	--kao-crane-control-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%205v14M15%205v14%22%2F%3E%3C%2Fsvg%3E");
}

.kao-crane.is-paused + .kao-crane-controls [data-crane-pause] {
	--kao-crane-control-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m8%205%2011%207-11%207Z%22%2F%3E%3C%2Fsvg%3E");
}

.kao-crane-controls [data-crane-replay] {
	--kao-crane-control-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010a9%209%200%201%201%202.6%208.4M3%204v6h6%22%2F%3E%3C%2Fsvg%3E");
}

.kao-crane-controls button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

@media (max-width: 767px) {
	#top.kao-hero {
		padding-top: calc(var(--kao-header-height) + 2.5rem) !important;
		padding-bottom: 2rem !important;
	}

	.kao-hero .kao-hero-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.kao-hero-copy > * {
		text-align: center;
	}

	.kao-hero-copy h1,
	.kao-hero-copy .kao-hero-description {
		margin-left: auto;
		margin-right: auto;
	}

	.kao-crane {
		height: 23rem;
	}
}

/* Liens e-mail obfusqués : sans href, le curseur doit être rétabli. */

a[data-kao-mail] {
	cursor: pointer;
}

/* Interlignage compact des textes de petite taille (surtitres, navigation). */

.has-small-font-size {
	line-height: 1.4286;
}

/* -------------------------------------------------------------------------
 * Surtitres coiffés de l'ornement du logo
 *
 * Le motif est le même tracé que la couronne posée au-dessus du « Kao » :
 * repris en masque, il prend la couleur verte du logo et se redimensionne
 * avec le texte, sans jamais alourdir le balisage.
 * ---------------------------------------------------------------------- */

.is-style-kao-surtitre::before {
	content: "";
	display: block;
	width: calc(var(--kao-picto-size) * 2.129);
	height: var(--kao-picto-size);
	margin-bottom: 0.625rem;
	background-color: var(--kao-picto-color);
	-webkit-mask: var(--kao-picto) left center / contain no-repeat;
	mask: var(--kao-picto) left center / contain no-repeat;
}

/* L'ornement suit l'alignement choisi pour le texte. */

.is-style-kao-surtitre.has-text-align-center::before {
	margin-inline: auto;
}

.is-style-kao-surtitre.has-text-align-right::before {
	margin-inline-start: auto;
}

/* -------------------------------------------------------------------------
 * Icônes Lucide en masque CSS
 * ---------------------------------------------------------------------- */

.has-icon-mail {
	--kao-icon: var(--kao-icon-mail);
}

.has-icon-map-pin {
	--kao-icon: var(--kao-icon-map-pin);
}

.has-icon-clock {
	--kao-icon: var(--kao-icon-clock);
}

.has-icon-instagram {
	--kao-icon: var(--kao-icon-instagram);
}

/*
 * L'icône occupe sa propre colonne de grille plutôt qu'un positionnement
 * absolu : elle ne peut donc pas chevaucher le texte, y compris dans
 * l'éditeur de blocs où le remplissage du conteneur est réécrit.
 */

.has-icon-mail,
.has-icon-map-pin,
.has-icon-clock,
.has-icon-instagram {
	display: grid;
	grid-template-columns: 1.25rem minmax(0, 1fr);
	column-gap: 0.75rem;
	align-items: start;
}

.has-icon-mail > *,
.has-icon-map-pin > *,
.has-icon-clock > *,
.has-icon-instagram > * {
	grid-column: 2;
	min-width: 0;
	width: 100%;
	/* Le layout « contraint » centre les enfants avec des marges !important. */
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.has-icon-mail::before,
.has-icon-map-pin::before,
.has-icon-clock::before,
.has-icon-instagram::before {
	content: "";
	grid-column: 1;
	grid-row: 1;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.3rem;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: var(--kao-icon) center / contain no-repeat;
	mask: var(--kao-icon) center / contain no-repeat;
}

/* Icône intégrée au flux du texte (liens, boutons) */

.is-icon-inline {
	display: block;
}

.is-icon-inline::before {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin-top: 0;
	margin-right: 0.5rem;
	vertical-align: -0.15em;
}

.wp-block-button.is-icon-inline .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.wp-block-button.is-icon-inline .wp-block-button__link::before {
	content: "";
	width: 1rem;
	height: 1rem;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--kao-icon) center / contain no-repeat;
	mask: var(--kao-icon) center / contain no-repeat;
}

.wp-block-button.is-icon-inline::before {
	content: none;
}

/* -------------------------------------------------------------------------
 * Bouton au fond décalé
 *
 * Le rectangle est un pseudo-élément pivoté : le libellé reste droit et
 * lisible, dans l'esprit des ornements dessinés à la main du logo.
 * ---------------------------------------------------------------------- */

a.kao-btn-skew {
	position: relative;
	z-index: 0;
	display: inline-block;
	padding: 0.875rem 2.25rem;
	color: var(--wp--preset--color--primary-foreground);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

/*
 * Le masque découpe le fond en coup de pinceau : bords ondulés, sortie fendue
 * là où le pinceau se lève, et trois entailles qui mordent depuis les bords
 * pour la trace sèche. Elles restent dans le rembourrage horizontal afin de
 * ne jamais entamer le libellé. Le SVG s'étire (preserveAspectRatio none)
 * pour suivre la largeur du texte, quelle qu'elle soit.
 */

a.kao-btn-skew::before {
	content: "";
	position: absolute;
	inset: -0.35rem -0.5rem;
	z-index: -1;
	background-color: var(--wp--preset--color--violet);
	-webkit-mask: var(--kao-brush) center / 100% 100% no-repeat;
	mask: var(--kao-brush) center / 100% 100% no-repeat;
	transform: rotate(-1.75deg);
	transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

a.kao-btn-skew:hover,
a.kao-btn-skew:focus-visible {
	color: var(--wp--preset--color--primary-foreground);
	text-decoration: none;
}

a.kao-btn-skew:focus-visible {
	outline: 2px solid var(--wp--preset--color--violet);
	outline-offset: 6px;
}

@media (prefers-reduced-motion: no-preference) {
	a.kao-btn-skew:hover::before,
	a.kao-btn-skew:focus-visible::before {
		transform: rotate(1.25deg);
	}
}

/* -------------------------------------------------------------------------
 * Cartes, galeries et médias
 * ---------------------------------------------------------------------- */

.kao-card {
	height: 100%;
}

.wp-block-gallery.kao-gallery-strip figure.wp-block-image,
.wp-block-gallery.kao-gallery-strip figure.wp-block-image img {
	height: 16rem;
	width: 100%;
	object-fit: cover;
}

.wp-block-gallery.kao-gallery-square figure.wp-block-image,
.wp-block-gallery.kao-gallery-square figure.wp-block-image img {
	aspect-ratio: 1 / 1;
	height: auto;
	width: 100%;
	object-fit: cover;
}

@media (max-width: 599px) {
	.wp-block-gallery.kao-gallery-square.has-nested-images figure.wp-block-image {
		width: calc(50% - 0.5rem);
	}

	.wp-block-gallery.kao-gallery-strip.has-nested-images figure.wp-block-image {
		width: 100%;
	}
}

.kao-portrait img {
	width: 100%;
	object-fit: cover;
}

/* Carte de la section contact. */

.kao-map {
	margin: 0;
}

.kao-map iframe {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.75rem;
}

/* -------------------------------------------------------------------------
 * Ancres : compense la hauteur de l'en-tête fixe
 * ---------------------------------------------------------------------- */

:where([id]) {
	scroll-margin-top: calc(var(--kao-header-height) + var(--kao-admin-bar) + 1rem);
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* -------------------------------------------------------------------------
 * Éditeur de blocs : l'en-tête ne doit pas se figer dans le canevas
 * ---------------------------------------------------------------------- */

.editor-styles-wrapper .wp-site-blocks > header.wp-block-template-part {
	position: static;
}

.editor-styles-wrapper .wp-site-blocks > header.wp-block-template-part::before {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}