/* Complète theme.json : ce que les réglages globaux ne savent pas exprimer. */

:root {
	--z-bordure: #e2d6c6;
	--z-rayon-petit: 8px;
	--z-rayon-moyen: 16px;
	--z-focus: var(--wp--preset--color--brique);
}

html {
	scroll-behavior: smooth;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--z-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

.wp-element-button,
.wp-block-button__link {
	min-height: 48px;
	transition: background-color 150ms ease, box-shadow 150ms ease;
}

.wp-element-button:disabled,
.wp-element-button[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* En-tête et pied */

.z-entete {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--wp--preset--color--creme);
	border-bottom: 1px solid var(--z-bordure);
	padding-block: 0.75rem;
}

.admin-bar .z-entete {
	top: var(--wp-admin--admin-bar--height, 0);
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

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

.z-pied {
	margin-block-start: 0;
	background: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--creme);
	padding-block: var(--wp--preset--spacing--60);
	--z-focus: var(--wp--preset--color--ambre);
}

.z-pied .wp-block-site-title a,
.z-pied a {
	color: var(--wp--preset--color--creme);
}

.z-pied__liens a {
	display: inline-block;
	padding-block: 0.25rem;
}

.z-pied__liens ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.z-pied .z-a-valider {
	color: var(--wp--preset--color--ambre);
}

/* Sections de la landing */

.z-landing,
.z-landing > .wp-block-post-content {
	margin-block: 0;
}

.z-landing .wp-block-post-content > * + * {
	margin-block-start: 0;
}

.z-section {
	padding-block: var(--wp--preset--spacing--60);
}

@media (min-width: 782px) {
	.z-section {
		padding-block: var(--wp--preset--spacing--70);
	}
}

.z-section--sable {
	background: var(--wp--preset--color--sable);
}

.z-hero {
	padding-block-start: var(--wp--preset--spacing--50);
}

.z-hero__grille {
	gap: var(--wp--preset--spacing--50);
}

.z-chapeau {
	font-size: var(--wp--preset--font-size--medium);
	max-width: 36ch;
}

.z-mention {
	color: var(--wp--preset--color--gris);
	font-size: var(--wp--preset--font-size--small);
}

.z-prix {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	margin-block: var(--wp--preset--spacing--30) 0;
}

.z-visuel {
	margin: 0;
}

.z-visuel img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--z-rayon-moyen);
}

/* Cartes et badges */

.z-cartes {
	gap: var(--wp--preset--spacing--40);
}

.z-carte {
	background: var(--wp--preset--color--creme);
	border-radius: var(--z-rayon-moyen);
	box-shadow: var(--wp--preset--shadow--carte);
	padding: var(--wp--preset--spacing--40);
}

.z-carte h3::before {
	content: "";
	display: block;
	width: 28px;
	height: 4px;
	margin-block-end: 0.75rem;
	border-radius: 2px;
	background: var(--wp--preset--color--ambre);
}

.z-badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: var(--z-rayon-petit);
	background: var(--wp--preset--color--sable);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.z-a-valider {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	border: 1px dashed var(--wp--preset--color--brique);
	border-radius: var(--z-rayon-petit);
	color: var(--wp--preset--color--brique);
	font-weight: 600;
}

/* Étapes et précautions */

.z-etapes {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	counter-reset: etape;
	list-style: none;
	padding: 0;
}

@media (min-width: 782px) {
	.z-etapes {
		grid-template-columns: repeat(3, 1fr);
	}
}

.z-etapes li {
	counter-increment: etape;
	padding-block-start: 0.25rem;
}

.z-etapes li::before {
	content: counter(etape);
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-block-end: 0.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--creme);
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 600;
}

@media (min-width: 782px) {
	.z-precautions {
		columns: 2;
		column-gap: var(--wp--preset--spacing--50);
	}
}

.z-precautions li {
	break-inside: avoid;
	margin-block-end: 0.75rem;
}

/* Achat */

.z-achat__grille {
	gap: var(--wp--preset--spacing--50);
}

.z-achat .wc-block-components-product-price,
.z-achat .wp-block-woocommerce-product-price {
	font-weight: 600;
}

.z-achat .wc-block-components-product-image img {
	border-radius: var(--z-rayon-moyen);
	aspect-ratio: 1;
	object-fit: cover;
}

/* Tableaux : listes empilées sur petit écran */

.z-tableau table {
	border-collapse: collapse;
}

.z-tableau th,
.z-tableau td {
	border: 0;
	border-bottom: 1px solid var(--z-bordure);
	padding: 0.75rem 0.5rem;
	text-align: start;
	vertical-align: top;
}

.z-tableau th {
	width: 40%;
	color: var(--wp--preset--color--gris);
	font-weight: 600;
}

@media (max-width: 600px) {
	.z-tableau table,
	.z-tableau tbody,
	.z-tableau tr,
	.z-tableau th,
	.z-tableau td {
		display: block;
		width: auto;
	}

	.z-tableau th {
		border-bottom: 0;
		padding-block-end: 0;
	}
}

/* FAQ */

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	padding-inline-end: 1.5rem;
}

.wp-block-details > :not(summary) {
	margin-block-start: 0.75rem;
}

/* Formulaires WooCommerce */

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce select,
.woocommerce textarea,
.wc-block-components-text-input input {
	border-radius: var(--z-rayon-petit);
}

.wc-block-components-validation-error,
.woocommerce-error {
	color: var(--wp--preset--color--erreur);
}

/* Mini-panier fermé : hors écran mais focalisable au clavier ; visibility le retire de l’ordre de tabulation. */
.wc-block-components-drawer__screen-overlay--is-hidden .wc-block-mini-cart__drawer {
	visibility: hidden;
	transition: transform 0.3s, visibility 0s 0.3s;
}

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

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