/*
Theme Name: Ecom Factory Child
Description: Thème enfant de Blocksy pour la fabrique de boutiques. Aucune valeur de design en dur : tout vient des tokens (theme.json + variation d'univers). Polices auto-hébergées, zéro requête tierce.
Template: blocksy
Version: 1.0.0
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: ecom-factory-child
*/

/* ------------------------------------------------------------------ 1. Alias des tokens (une seule source : theme.json / variation) */
:root {
	--ef-bg: var(--wp--preset--color--base);
	--ef-surface: var(--wp--preset--color--surface);
	--ef-surface-alt: var(--wp--preset--color--surface-alt);
	--ef-text: var(--wp--preset--color--contrast);
	--ef-muted: var(--wp--preset--color--muted);
	--ef-heading: var(--wp--preset--color--heading);
	--ef-accent: var(--wp--preset--color--accent);
	--ef-accent-hover: var(--wp--preset--color--accent-hover);
	--ef-on-accent: var(--wp--preset--color--on-accent);
	--ef-border: var(--wp--preset--color--border);
	--ef-gap: var(--wp--custom--ef--space--gap);
	--ef-section: var(--wp--custom--ef--space--section);
	--ef-title: var(--wp--custom--ef--size--title);
	--ef-section-title: var(--wp--custom--ef--size--section);
	--ef-duration: var(--wp--custom--ef--motion--duration);
	--ef-easing: var(--wp--custom--ef--motion--easing);

	/* Pont vers les variables du parent : il s'habille avec nos tokens, sans que ses fichiers soient touchés */
	--theme-font-family: var(--wp--custom--ef--font--body);
	--theme-text-color: var(--ef-text);
	--theme-headings-color: var(--ef-heading);
	--theme-link-initial-color: var(--ef-accent);
	--theme-link-hover-color: var(--ef-accent-hover);
	--theme-border-color: var(--ef-border);
	--theme-button-background-initial-color: var(--ef-accent);
	--theme-button-background-hover-color: var(--ef-accent-hover);
	--theme-button-text-initial-color: var(--ef-on-accent);
	--theme-button-text-hover-color: var(--ef-on-accent);
	--theme-button-border-radius: var(--wp--custom--ef--radius--button);
	--theme-form-field-border-radius: var(--wp--custom--ef--radius--input);
	--theme-form-field-border-initial-color: var(--ef-muted);
	--theme-form-field-border-focus-color: var(--ef-accent);
	--theme-transition: all var(--ef-duration) var(--ef-easing);
}

@media (max-width: 689.98px) {
	:root {
		--ef-section: var(--wp--custom--ef--space--section-mobile);
		--ef-title: var(--wp--custom--ef--size--title-mobile);
		--ef-section-title: var(--wp--custom--ef--size--section-mobile);
	}
}

body {
	background-color: var(--ef-bg);
	font-variant-numeric: var(--wp--custom--ef--numeric);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--wp--custom--ef--font--heading);
	font-weight: var(--wp--custom--ef--weight--heading);
	line-height: var(--wp--custom--ef--leading--heading);
	letter-spacing: var(--wp--custom--ef--tracking--heading);
	text-transform: var(--wp--custom--ef--transform--heading);
	color: var(--ef-heading);
	text-wrap: balance;
	font-variant-numeric: lining-nums;
}

/* ------------------------------------------------------------------ 2. Accessibilité : focus visible, cibles ≥ 44 px, mouvement réduit */
:focus-visible {
	outline: 2px solid var(--ef-accent);
	outline-offset: 3px;
}

.ef-button, .ef-link, .ef-faq__item > summary, .ef-footer-nav a, .ef-sticky__btn {
	min-height: 44px;
	min-width: 44px;
}

.ct-breadcrumbs {
	font-size: var(--wp--custom--ef--size--label);
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--ef-muted);
	--theme-link-initial-color: var(--ef-muted);
}

.ct-breadcrumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; text-decoration: underline; text-underline-offset: 4px; }

.single-product .entry-summary .quantity[data-type] { --quantity-height: var(--wp--custom--ef--buy--height); --quantity-width: 132px; }
.single-product .entry-summary .quantity[data-type] .ct-increase,
.single-product .entry-summary .quantity[data-type] .ct-decrease { width: 44px; height: 44px; top: calc(50% - 22px); }
.single-product .entry-summary .quantity[data-type] .ct-increase { inset-inline-end: 3px; }
.single-product .entry-summary .quantity[data-type] .ct-decrease { inset-inline-start: 3px; }
.single-product .entry-summary .quantity[data-type] input[type=number] { padding-inline: 46px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------ 3. Bandeau de boutique de test, en-tête, pied de page */
.ef-testbar {
	background: var(--wp--preset--color--notice);
	color: var(--wp--preset--color--on-notice);
	font-size: var(--wp--custom--ef--size--label);
	letter-spacing: var(--wp--custom--ef--tracking--label);
	text-transform: var(--wp--custom--ef--transform--label);
	text-align: center;
	padding: 10px 16px;
	line-height: 1.4;
}

#header [data-row] {
	background-color: var(--wp--preset--color--header);
	border-bottom: 1px solid var(--ef-border);
}

#header, #offcanvas {
	--theme-text-color: var(--wp--preset--color--on-header);
	--theme-link-initial-color: var(--wp--preset--color--on-header);
	--theme-link-hover-color: var(--wp--preset--color--on-header);
	--theme-link-active-color: var(--wp--preset--color--on-header);
	--theme-icon-color: var(--wp--preset--color--on-header);
	--theme-icon-hover-color: var(--wp--preset--color--on-header);
}

#header .site-title a, #header .ct-cart-item, #header .ct-header-trigger, .woocommerce-product-gallery__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}

#header .site-title a, #header .ct-cart-item, #header .ct-label, #header .ct-header-trigger { color: var(--wp--preset--color--on-header); }
#header .menu > li > a:hover, #header .menu > li.current-menu-item > a { text-decoration: underline; text-underline-offset: 6px; }
#offcanvas .ct-panel-inner { background: var(--wp--preset--color--header); }

#header .site-title {
	font-variant-numeric: lining-nums;
	font-family: var(--wp--custom--ef--font--heading);
	font-weight: var(--wp--custom--ef--weight--heading);
	text-transform: var(--wp--custom--ef--transform--heading);
	letter-spacing: var(--wp--custom--ef--tracking--heading);
}

#header .menu > li > a,
#offcanvas .menu a {
	font-size: var(--wp--custom--ef--size--label);
	letter-spacing: var(--wp--custom--ef--tracking--label);
	text-transform: var(--wp--custom--ef--transform--label);
	font-weight: 500;
	min-height: 44px;
}

.ef-footer-nav {
	border-top: 1px solid var(--ef-border);
	background: var(--ef-surface-alt);
	padding: calc(var(--ef-section) / 2) 24px 8px;
}

.ef-footer-nav ul {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--wp--custom--ef--container);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 28px;
}

.ef-footer-nav a {
	display: inline-flex;
	align-items: center;
	color: var(--ef-text);
	font-size: var(--wp--custom--ef--size--label);
	letter-spacing: var(--wp--custom--ef--tracking--label);
	text-transform: var(--wp--custom--ef--transform--label);
	text-decoration: none;
}

.ef-footer-nav a:hover { color: var(--ef-accent); text-decoration: underline; text-underline-offset: 4px; }

#footer [data-row] { background: var(--ef-surface-alt); }
#footer .ct-footer-copyright { color: var(--ef-muted); font-size: var(--wp--custom--ef--size--label); }

/* ------------------------------------------------------------------ 4. Composants communs */
.ef-eyebrow {
	margin: 0 0 12px;
	color: var(--ef-muted);
	font-size: var(--wp--custom--ef--size--label);
	letter-spacing: var(--wp--custom--ef--tracking--label);
	text-transform: var(--wp--custom--ef--transform--label);
	font-weight: 500;
}

.ef-lead {
	font-size: calc(var(--wp--custom--ef--size--body) * 1.15);
	color: var(--ef-muted);
	max-width: var(--wp--custom--ef--measure);
}

.ef-button,
.ef-button:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 32px;
	min-height: var(--wp--custom--ef--buy--height);
	background: var(--ef-accent);
	color: var(--ef-on-accent);
	border-radius: var(--wp--custom--ef--radius--button);
	font-size: var(--wp--custom--ef--size--button);
	font-weight: var(--wp--custom--ef--weight--button);
	letter-spacing: var(--wp--custom--ef--tracking--button);
	text-transform: var(--wp--custom--ef--transform--button);
	text-decoration: none;
	transition: background-color var(--ef-duration) var(--ef-easing);
}

.ef-button:hover, .ef-button:focus-visible { background: var(--ef-accent-hover); color: var(--ef-on-accent); }

.ef-link {
	display: inline-flex;
	align-items: center;
	margin-top: 16px;
	color: var(--ef-accent);
	font-size: var(--wp--custom--ef--size--label);
	letter-spacing: var(--wp--custom--ef--tracking--label);
	text-transform: var(--wp--custom--ef--transform--label);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 5px;
}

.ef-link:hover { color: var(--ef-accent-hover); }

/* ------------------------------------------------------------------ 5. Patterns : même balisage pour tous les univers */
.ef-product-body { clear: both; }

.ef-pattern { margin-top: var(--ef-section); }
.ef-page > .ef-pattern:first-child { margin-top: 0; }

.ef-pattern__head { margin-bottom: calc(var(--ef-gap) * 1.25); max-width: var(--wp--custom--ef--measure); }
.ef-pattern__title { margin: 0; font-size: var(--ef-section-title); }

.ef-cards, .ef-assures, .ef-mosaic, .ef-care { list-style: none; margin: 0; padding: 0; }

.ef-cards {
	display: grid;
	/* au plus N colonnes (token de densité) ; s'il y a moins de cartes que de colonnes, elles se partagent la ligne */
	grid-template-columns: repeat(auto-fit, minmax(max(200px, calc((100% - (var(--wp--custom--ef--cols--benefits) - 1) * var(--ef-gap)) / var(--wp--custom--ef--cols--benefits))), 1fr));
	gap: var(--ef-gap);
}

.ef-card {
	background: var(--wp--custom--ef--card--background);
	border: 1px solid var(--wp--custom--ef--card--border);
	border-top-color: var(--wp--custom--ef--card--rule);
	border-radius: var(--wp--custom--ef--radius--card);
	padding: var(--wp--custom--ef--card--pad);
	padding-top: max(var(--wp--custom--ef--card--pad), 20px);
}

.ef-card__title {
	margin: 0 0 8px;
	font-size: var(--wp--custom--ef--size--card);
}

.ef-card__text { margin: 0; color: var(--ef-muted); }

.ef-mosaic {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ef-gap);
}

.ef-mosaic__item {
	aspect-ratio: var(--wp--custom--ef--image--ratio);
	background: var(--wp--custom--ef--image--surface);
	border-radius: var(--wp--custom--ef--radius--image);
	overflow: hidden;
}

.ef-mosaic__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ef-table-wrap { overflow-x: auto; }

.ef-specs {
	width: 100%;
	max-width: 880px;
	border-collapse: collapse;
	border: 0;
	font-size: var(--wp--custom--ef--size--body);
}

.ef-specs th, .ef-specs td {
	padding: var(--wp--custom--ef--space--row) 16px var(--wp--custom--ef--space--row) 0;
	border: 0;
	border-bottom: 1px solid var(--ef-border);
	text-align: left;
	vertical-align: top;
}

.ef-specs th {
	width: 38%;
	padding-left: 12px;
	color: var(--ef-muted);
	font-weight: 500;
	font-size: var(--wp--custom--ef--size--label);
	letter-spacing: var(--wp--custom--ef--tracking--label);
	text-transform: var(--wp--custom--ef--transform--label);
}

.ef-specs tbody tr:nth-child(odd) { background: var(--wp--custom--ef--table--stripe); }
.ef-specs tbody tr:first-child th, .ef-specs tbody tr:first-child td { border-top: 1px solid var(--ef-border); }

.ef-steps { margin: 0; padding: 0; list-style: none; counter-reset: ef-step; display: grid; gap: var(--ef-gap); max-width: var(--wp--custom--ef--measure); }
.ef-step { counter-increment: ef-step; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: baseline; }
.ef-step::before {
	content: counter(ef-step, decimal-leading-zero);
	font-family: var(--wp--custom--ef--font--heading);
	font-size: var(--wp--custom--ef--size--card);
	color: var(--ef-accent);
}

.ef-care { display: grid; gap: 0; max-width: var(--wp--custom--ef--measure); }
.ef-care li { padding: var(--wp--custom--ef--space--row) 0; border-bottom: 1px solid var(--ef-border); }
.ef-care li:first-child { border-top: 1px solid var(--ef-border); }

.ef-prose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--ef-gap) * 1.5) calc(var(--ef-gap) * 2); }
.ef-pattern--editorial { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(var(--ef-gap) * 2); border-top: 1px solid var(--ef-border); padding-top: calc(var(--ef-gap) * 1.5); }
.ef-pattern--editorial .ef-pattern__head { margin-bottom: 0; }
.ef-pattern--editorial .ef-prose { grid-template-columns: minmax(0, 1fr); }
.ef-prose__block { max-width: var(--wp--custom--ef--measure); }
.ef-prose__title { margin: 0 0 10px; font-size: var(--wp--custom--ef--size--card); }
.ef-prose p { margin: 0 0 0.9em; }
.ef-prose ul { margin: 0 0 0.9em; padding-left: 1.2em; }

.ef-faq { max-width: 880px; border-top: 1px solid var(--ef-border); }
.ef-faq__item { border-bottom: 1px solid var(--ef-border); }
.ef-faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: var(--wp--custom--ef--space--row) 0;
	cursor: pointer;
	list-style: none;
	font-weight: 500;
	color: var(--ef-heading);
}
.ef-faq__item > summary::-webkit-details-marker { display: none; }
.ef-faq__item > summary::after { content: "+"; font-size: 1.4em; font-weight: 300; color: var(--ef-accent); line-height: 1; }
.ef-faq__item[open] > summary::after { content: "–"; }
.ef-faq__item > p { margin: 0 0 var(--wp--custom--ef--space--row); color: var(--ef-muted); max-width: var(--wp--custom--ef--measure); }

.ef-pattern--reassurance {
	background: var(--ef-surface-alt);
	border-radius: var(--wp--custom--ef--radius--card);
	padding: calc(var(--ef-gap) * 1.5) calc(var(--ef-gap) * 1.5);
}
.ef-assures { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ef-gap); }
.ef-assure .ef-card__text { color: var(--ef-text); }

.ef-pattern--hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: calc(var(--ef-gap) * 2);
	background: var(--ef-surface-alt);
	border-radius: var(--wp--custom--ef--radius--card);
	padding: clamp(24px, 5vw, 72px);
}
.ef-hero__title { margin: 0 0 20px; font-size: calc(var(--ef-title) * 1.15); }
.ef-hero__text .ef-lead { margin: 0 0 32px; }
.ef-hero__media { aspect-ratio: 1 / 1; border-radius: var(--wp--custom--ef--radius--image); overflow: hidden; background: var(--wp--custom--ef--image--surface); }
.ef-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ef-feature { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ef-gap); align-items: center; }
.ef-feature__img { aspect-ratio: var(--wp--custom--ef--image--ratio); overflow: hidden; border-radius: var(--wp--custom--ef--radius--image); background: var(--wp--custom--ef--image--surface); }
.ef-feature__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ef-feature__text { padding-left: var(--ef-gap); }
.ef-feature__price { margin: 0 0 12px; font-size: var(--wp--custom--ef--size--price); font-weight: var(--wp--custom--ef--weight--price); color: var(--ef-heading); }
.ef-feature__text .ef-button { margin-top: 24px; }

/* pages éditoriales rendues par le plugin (FAQ, à propos, livraison, contact) */
.ef-page > h1 { font-size: var(--ef-title); margin: 0 0 16px; }
.ef-page .ef-section { margin-top: calc(var(--ef-section) / 2); max-width: var(--wp--custom--ef--measure); }
.ef-page .ef-section h2 { font-size: var(--wp--custom--ef--size--card); margin: 0 0 12px; }
.ef-page .ef-faq details { border-bottom: 1px solid var(--ef-border); }
.ef-page .ef-faq summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 500; color: var(--ef-heading); padding: var(--wp--custom--ef--space--row) 0; }
.ef-page .ef-faq p { color: var(--ef-muted); max-width: var(--wp--custom--ef--measure); }
.ef-page .ef-more { display: inline-flex; align-items: center; min-height: 44px; }
.ef-page .ef-channels, .ef-page .ef-steps { max-width: var(--wp--custom--ef--measure); }

/* ------------------------------------------------------------------ 6. Fiche produit WooCommerce (structure du parent, habillage par tokens) */
.single-product .entry-summary .entry-title { font-size: var(--ef-title); margin-bottom: 12px; }

.single-product .entry-summary .price {
	font-size: var(--wp--custom--ef--size--price);
	font-weight: var(--wp--custom--ef--weight--price);
	color: var(--ef-heading);
}

.single-product .woocommerce-product-details__short-description { color: var(--ef-muted); max-width: var(--wp--custom--ef--measure); }

.single-product .entry-summary .single_add_to_cart_button {
	flex: 1 1 auto;
	width: var(--wp--custom--ef--buy--width);
	min-height: var(--wp--custom--ef--buy--height);
	font-size: var(--wp--custom--ef--size--button);
	font-weight: var(--wp--custom--ef--weight--button);
	letter-spacing: var(--wp--custom--ef--tracking--button);
	text-transform: var(--wp--custom--ef--transform--button);
}

.single-product .woocommerce-product-gallery img { border-radius: var(--wp--custom--ef--radius--image); }
.single-product .woocommerce-product-gallery .ct-media-container { background: var(--wp--custom--ef--image--surface); }

.ef-assurance {
	list-style: none;
	margin: 20px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--ef-border);
	color: var(--ef-muted);
	font-size: calc(var(--wp--custom--ef--size--body) * 0.9);
	display: grid;
	gap: 6px;
}

/* ------------------------------------------------------------------ 7. Appel à l'action collant (mobile uniquement) */
.ef-sticky { display: none; }

@media (max-width: 689.98px) {
	.ef-sticky {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 60;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: var(--ef-surface);
		border-top: 1px solid var(--ef-border);
		transition: transform var(--ef-duration) var(--ef-easing);
	}
	.ef-sticky.is-hidden { transform: translateY(110%); visibility: hidden; }
	.ef-sticky__info { display: grid; min-width: 0; line-height: 1.25; }
	.ef-sticky__name { font-size: 13px; color: var(--ef-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.ef-sticky__price { font-weight: var(--wp--custom--ef--weight--price); color: var(--ef-heading); }
	.ef-sticky__btn { min-height: 48px; padding: 0 20px; white-space: nowrap; }
	.single-product #main-container { padding-bottom: 76px; }
}

/* ------------------------------------------------------------------ 8. Adaptation aux petits écrans */
@media (max-width: 999.98px) {
	.ef-pattern--editorial { grid-template-columns: minmax(0, 1fr); gap: var(--ef-gap); }
	.ef-cards { grid-template-columns: repeat(auto-fit, minmax(max(200px, calc(50% - var(--ef-gap))), 1fr)); }
	.ef-prose { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 689.98px) {
	.woocommerce-product-gallery .flexy-pills li { --thumbs-width: 20%; }
	.ef-cards { grid-template-columns: minmax(0, 1fr); }
	.ef-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ef-pattern--hero { grid-template-columns: minmax(0, 1fr); }
	.ef-hero__media { order: -1; }
	.ef-feature { grid-template-columns: minmax(0, 1fr); }
	.ef-feature__text { padding-left: 0; }
	.ef-specs th { width: 44%; }
	.ef-button { width: 100%; }
	.ef-sticky .ef-button { width: auto; }
}