/* =========================================================================
   Koezia — feuille de style custom (thème enfant Blocksy)
   Reproduit les composants de la maquette Pencil : sections, eyebrows,
   cartes services, étapes méthode, CTA strip, formes organiques, footer.
   S'appuie sur les presets theme.json (--wp--preset--*).
   ========================================================================= */

:root {
	--kz-encre:       #262321;
	--kz-vert-foret:  #2E3D33;
	--kz-sauge:       #9EAE8F;
	--kz-terracotta:  #C97C5D;
	--kz-or:          #D8A23F;
	--kz-creme:       #F6E7DB;
	--kz-off-white:   #FBF4EC;
	--kz-radius-sm:   8px;
	--kz-radius-md:   16px;
	--kz-radius-lg:   28px;
	--kz-radius-pill: 999px;
}

/* ---------- Base ---------- */
body {
	background-color: var(--kz-off-white);
	color: var(--kz-encre);
}

/* ---------- Eyebrow (libellés en capitales espacées) ---------- */
.kz-eyebrow {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--kz-terracotta);
}

/* ---------- Section : rythme vertical homogène ---------- */
.kz-section {
	padding-block: clamp(3rem, 6vw, 6rem);
}
.kz-section--cream { background-color: var(--kz-creme); }
.kz-section--white { background-color: #ffffff; }

/* ---------- Bouton outline (CTA secondaire) ---------- */
.wp-block-button.is-style-kz-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--kz-encre);
	border: 1.5px solid var(--kz-encre);
}
.wp-block-button.is-style-kz-outline .wp-block-button__link:hover {
	background-color: var(--kz-encre);
	color: var(--kz-off-white);
}

/* ---------- Carte service ---------- */
.kz-card {
	background-color: #ffffff;
	border: 1px solid rgba(38, 35, 33, 0.08);
	border-radius: var(--kz-radius-md);
	padding: 1.75rem;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	height: 100%;
}
.kz-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(38, 35, 33, 0.10);
}
.kz-card__icon {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--kz-radius-pill);
	background-color: var(--kz-creme);
	color: var(--kz-terracotta);
	margin-bottom: 1rem;
}
.kz-card__title {
	font-family: var(--wp--preset--font-family--playfair);
	font-size: 1.35rem;
	margin: 0 0 0.5rem;
}

/* ---------- Étape méthode (numérotée) ---------- */
.kz-step__num {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--kz-radius-pill);
	background-color: var(--kz-vert-foret);
	color: var(--kz-off-white);
	font-family: var(--wp--preset--font-family--playfair);
	font-size: 1.1rem;
	font-weight: 600;
}

/* ---------- CTA strip (bande terracotta pleine largeur) ---------- */
.kz-cta-strip {
	background-color: var(--kz-terracotta);
	color: #ffffff;
	border-radius: var(--kz-radius-lg);
	padding: clamp(2.5rem, 5vw, 4rem);
	text-align: center;
}
.kz-cta-strip :where(h1, h2, h3) { color: #ffffff; }
.kz-cta-strip .wp-block-button__link {
	background-color: #ffffff;
	color: var(--kz-encre);
}
.kz-cta-strip .wp-block-button__link:hover {
	background-color: var(--kz-vert-foret);
	color: #ffffff;
}

/* ---------- Formes organiques décoratives ---------- */
.kz-blob {
	position: absolute;
	border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
	background-color: var(--kz-creme);
	z-index: 0;
	pointer-events: none;
}
.kz-decor-wrap { position: relative; }
.kz-decor-wrap > * { position: relative; z-index: 1; }

/* Image hero ronde / portrait */
.kz-portrait img {
	border-radius: var(--kz-radius-lg);
	object-fit: cover;
}
.kz-portrait--round img { border-radius: var(--kz-radius-pill); }

/* ---------- Wavy divider ---------- */
.kz-wavy {
	display: block;
	width: 100%;
	line-height: 0;
}
.kz-wavy svg { width: 100%; height: auto; display: block; }

/* ---------- Témoignage ---------- */
.kz-quote {
	font-family: var(--wp--preset--font-family--playfair);
	font-style: italic;
	font-size: clamp(1.2rem, 2.5vw, 1.6rem);
	line-height: 1.5;
	color: var(--kz-encre);
}

/* ---------- Footer (vert forêt) ---------- */
.kz-footer {
	background-color: var(--kz-vert-foret);
	color: rgba(251, 244, 236, 0.85);
}
.kz-footer a { color: rgba(251, 244, 236, 0.85); text-decoration: none; }
.kz-footer a:hover { color: #ffffff; }
.kz-footer .kz-footer__brand {
	font-family: var(--wp--preset--font-family--playfair);
	color: #ffffff;
	letter-spacing: 0.04em;
}

/* =========================================================================
   CORRECTIONS GLOBALES (tous breakpoints)
   ========================================================================= */

/* Masquer la barre de titre Blocksy (« Accueil », « Services »…) et son
   conteneur .hero-section : chaque page a déjà son propre hero/eyebrow dans
   le contenu, donc ce bandeau ne laisse qu'un espace vide de ~57px. */
.page .hero-section,
.single-page .hero-section,
.page .entry-header,
.single-page .entry-header { display: none; }

/* Header : logo seul. On masque le titre de site dupliqué (« Koezia » texte)
   — la marque reste portée par le logo (alt="Koezia"). */
.site-branding .site-title-container { display: none; }

/* =========================================================================
   RESPONSIVE — réf maquette : desktop 1280 / mobile 390
   Breakpoints : ≤1024 (tablette) · ≤900 (2-col empilées) · ≤600 (mono-colonne)
   Le ciblage par `:has()` distingue les grilles 3+ colonnes (services, méthode,
   convictions) des blocs 2 colonnes (hero, contact, détails services).
   ========================================================================= */

/* ---------- Tablette : grilles 3+ colonnes → 2 colonnes ---------- */
@media (max-width: 1024px) {
	.kz-section .wp-block-columns:has(> .wp-block-column:nth-child(3)),
	.kz-decor-wrap .wp-block-columns:has(> .wp-block-column:nth-child(3)) {
		flex-wrap: wrap;
	}
	.kz-section .wp-block-columns:has(> .wp-block-column:nth-child(3)) > .wp-block-column,
	.kz-decor-wrap .wp-block-columns:has(> .wp-block-column:nth-child(3)) > .wp-block-column {
		flex-basis: calc(50% - var(--wp--style--block-gap, 1.5rem) / 2) !important;
		flex-grow: 1;
	}
}

/* ---------- ≤900 : blocs 2 colonnes (hero, contact, détails) → empilés ---------- */
@media (max-width: 900px) {
	.kz-section .wp-block-columns:not(:has(> .wp-block-column:nth-child(3))),
	.kz-decor-wrap .wp-block-columns:not(:has(> .wp-block-column:nth-child(3))) {
		flex-wrap: wrap;
		flex-direction: column;
	}
	.kz-section .wp-block-columns:not(:has(> .wp-block-column:nth-child(3))) > .wp-block-column,
	.kz-decor-wrap .wp-block-columns:not(:has(> .wp-block-column:nth-child(3))) > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
	/* Portrait/visuel : limiter la hauteur une fois empilé (maquette ≈ 260px) */
	.kz-portrait img { max-height: 360px; width: 100%; object-fit: cover; }
}

/* ---------- ≤600 : tout en une colonne ---------- */
@media (max-width: 600px) {
	.kz-section,
	.kz-decor-wrap {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}
	.kz-section { padding-block: clamp(2.25rem, 8vw, 3.25rem); }

	.kz-section .wp-block-columns,
	.kz-decor-wrap .wp-block-columns {
		flex-wrap: wrap;
		flex-direction: column;
		gap: 1rem;
	}
	.kz-section .wp-block-column,
	.kz-decor-wrap .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	/* Hero : CTA empilés pleine largeur (maquette mobile) */
	.kz-decor-wrap .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.kz-decor-wrap .wp-block-buttons .wp-block-button { width: 100%; }
	.kz-decor-wrap .wp-block-buttons .wp-block-button__link { display: block; text-align: center; }

	/* Cartes : padding réduit, hover désactivé (pas de survol au doigt) */
	.kz-card { padding: 1.5rem; }
	.kz-card:hover { transform: none; box-shadow: none; }

	/* Décor organique masqué sur petit écran */
	.kz-blob { display: none; }

	/* Titres un cran plus serrés */
	.kz-quote { font-size: 1.15rem; }
}