/*
Theme Name: Vajuca
Theme URI: https://vajuca.fr
Description: Thème enfant de Twenty Twenty-Five pour la boutique Vajuca — créations couture, crochet et bijoux faits main par deux sœurs. Motif de piqûre, palette lin/brique/sauge/rose.
Author: Vajuca
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: vajuca
Tags: e-commerce, block-patterns, full-site-editing
*/

/* ==========================================================================
   Sommaire
   1.  Variables locales
   2.  Fondations & accessibilité
   3.  Le motif signature : la piqûre
   4.  En-tête & navigation
   5.  Hero
   6.  Rail de catégories
   7.  Grille et fiches produit
   8.  Badges (nouveauté, dernière pièce, épuisé)
   9.  Filtres
   10. Page produit
   11. Panier & tunnel de commande
   12. Barre CTA collante (mobile)
   13. FAQ
   14. Page 404
   15. Pied de page
   ========================================================================== */

/* 1. Variables locales ---------------------------------------------------- */

:root {
	--vj-piqure: 1.5px dashed #c9b79c;
	--vj-filet: 1px solid #e0d3bf;
	--vj-transition: 180ms cubic-bezier(0.2, 0, 0.3, 1);
	--vj-ombre-douce: 0 2px 0 0 #e6d9c5;
	--vj-cta-hauteur: 4.25rem;
}

/* 2. Fondations & accessibilité ------------------------------------------- */

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

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

/* Focus visible et non ambigu, obligation d'accessibilité et confort réel. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2.5px solid var(--wp--preset--color--brique);
	outline-offset: 3px;
	border-radius: 2px;
}

p, li { max-width: var(--wp--custom--largeur-texte); }
.entry-content > p:not([class]) { text-wrap: pretty; }

img { height: auto; }

/* 3. Le motif signature : la piqûre --------------------------------------- */

.vj-piqure-haut { border-top: var(--vj-piqure); }
.vj-piqure-bas { border-bottom: var(--vj-piqure); }

/* Séparation de sections : une couture, pas un trait plein. */
.vj-section + .vj-section { border-top: var(--vj-piqure); }

/* Bouton : la piqûre apparaît à l'intérieur au survol, comme un surpiquage. */
.wp-block-button__link,
.wc-block-components-button,
button.single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	position: relative;
	font-family: var(--wp--preset--font-family--texte);
	font-weight: 700;
	letter-spacing: 0.01em;
	border-radius: 3px;
	transition: background-color var(--vj-transition), transform var(--vj-transition);
}

.wp-block-button__link::after,
button.single_add_to_cart_button::after,
.woocommerce a.button::after {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1.5px dashed transparent;
	border-radius: 2px;
	transition: border-color var(--vj-transition);
	pointer-events: none;
}

.wp-block-button__link:hover::after,
button.single_add_to_cart_button:hover::after,
.woocommerce a.button:hover::after {
	border-color: rgba(251, 246, 238, 0.55);
}

/* Bouton secondaire : contour piqué sur fond lin. */
.is-style-outline .wp-block-button__link,
.wp-block-button.vj-bouton-secondaire .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--noyer);
	border: var(--vj-piqure);
}

.is-style-outline .wp-block-button__link:hover,
.wp-block-button.vj-bouton-secondaire .wp-block-button__link:hover {
	background: var(--wp--preset--color--creme);
	border-color: var(--wp--preset--color--noyer);
	color: var(--wp--preset--color--noyer);
}

/* 4. En-tête & navigation ------------------------------------------------- */

.wp-block-template-part.vj-entete,
header.wp-block-template-part {
	background: var(--wp--preset--color--creme);
	border-bottom: var(--vj-piqure);
}

.wp-block-navigation a {
	color: var(--wp--preset--color--noyer);
	text-decoration: none;
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
	transition: border-color var(--vj-transition), color var(--vj-transition);
}

.wp-block-navigation a:hover,
.wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--brique);
	border-bottom-color: var(--wp--preset--color--rose);
	text-decoration: none;
}

/* Pastille panier dans l'en-tête */
.vj-panier-lien {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 700;
	color: var(--wp--preset--color--noyer);
	text-decoration: none;
}

.vj-panier-compteur {
	min-width: 1.45rem;
	height: 1.45rem;
	display: grid;
	place-items: center;
	padding-inline: 0.35rem;
	border-radius: 999px;
	background: var(--wp--preset--color--brique);
	color: var(--wp--preset--color--creme);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

.vj-panier-compteur[data-vide="1"] {
	background: transparent;
	color: var(--wp--preset--color--noyer);
	border: var(--vj-filet);
}

/* 5. Hero ----------------------------------------------------------------- */

/* Objectif du brief : le CTA doit être lisible sans défilement.
   On plafonne donc la hauteur utile et on réserve la place du texte. */
.vj-hero {
	position: relative;
	min-height: min(78svh, 40rem);
	display: flex;
	align-items: flex-end;
	overflow: clip;
}

.vj-hero__media,
.vj-hero .wp-block-cover__image-background {
	object-position: center 35%;
}

.vj-hero__contenu {
	position: relative;
	background: rgba(251, 246, 238, 0.94);
	border-top: var(--vj-piqure);
	padding: clamp(1.5rem, 4vw, 2.75rem);
	max-width: 34rem;
	margin: 0 0 clamp(1.5rem, 4vw, 3rem) 0;
}

.vj-hero__contenu h1 {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--titre-1);
}

.vj-hero__accroche {
	margin: 0 0 1.5rem;
	font-size: var(--wp--preset--font-size--moyen);
	color: var(--wp--preset--color--noyer);
	max-width: 30ch;
}

.vj-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media (max-width: 781px) {
	.vj-hero { min-height: min(72svh, 34rem); }
	.vj-hero__contenu { max-width: none; margin-bottom: 0; }
}

/* 6. Rail de catégories --------------------------------------------------- */

.vj-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(9.5rem, 1fr);
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block: 0.5rem 1rem;
	scrollbar-width: thin;
}

.vj-rail > * { scroll-snap-align: start; }

.vj-rail__item {
	display: block;
	text-decoration: none;
	text-align: center;
}

.vj-rail__vignette {
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	border: var(--vj-piqure);
	padding: 4px;
	background: var(--wp--preset--color--creme);
}

.vj-rail__vignette img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.vj-rail__item span {
	display: block;
	margin-top: 0.6rem;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--noyer);
}

.vj-rail__item:hover .vj-rail__vignette { border-color: var(--wp--preset--color--rose); }

@media (min-width: 900px) {
	.vj-rail { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; }
}

/* 7. Grille et fiches produit --------------------------------------------- */

.woocommerce ul.products,
.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: clamp(1.25rem, 3vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 560px) {
	.woocommerce ul.products,
	.wc-block-product-template {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
}

.woocommerce ul.products li.product,
.wc-block-product-template li {
	position: relative;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	background: var(--wp--preset--color--creme);
	border: var(--vj-filet);
	border-top: var(--vj-piqure);
	border-radius: 2px;
	padding: 0.65rem 0.65rem 1rem;
	transition: box-shadow var(--vj-transition), border-color var(--vj-transition);
}

.woocommerce ul.products li.product:hover {
	border-color: #cdb896;
	box-shadow: var(--vj-ombre-douce);
}

.woocommerce ul.products li.product a img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	margin-bottom: 0.85rem;
	border-radius: 2px;
	background: var(--wp--preset--color--lin);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--titre);
	font-size: 1.0625rem !important;
	font-weight: 500;
	line-height: 1.25;
	color: var(--wp--preset--color--noyer);
	padding: 0 !important;
	margin: 0 0 0.35rem;
}

.woocommerce ul.products li.product .price {
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 600;
	color: var(--wp--preset--color--noyer);
	font-size: 1rem;
}

/* Le bouton de la grille reste visible en permanence sur mobile :
   pas de révélation au survol, qui n'existe pas au doigt. */
.woocommerce ul.products li.product .button {
	display: block;
	width: 100%;
	margin-top: 0.85rem;
	text-align: center;
	font-size: 0.9375rem;
}

/* Aperçu des coloris disponibles sous la fiche */
.vj-coloris {
	display: flex;
	gap: 0.3rem;
	margin-top: 0.6rem;
	flex-wrap: wrap;
}

.vj-coloris__puce {
	width: 0.95rem;
	height: 0.95rem;
	border-radius: 50%;
	border: 1px solid rgba(51, 38, 29, 0.25);
}

/* 8. Badges --------------------------------------------------------------- */

.vj-badge,
.woocommerce span.onsale {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
	margin: 0;
	padding: 0.3rem 0.65rem;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--texte);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	background: var(--wp--preset--color--rose);
	color: #4a1f27;
	min-height: 0;
	min-width: 0;
}

.vj-badge--derniere { background: var(--wp--preset--color--brique); color: var(--wp--preset--color--creme); }
.vj-badge--epuise { background: #cfc4b4; color: #3c332a; }
.vj-badge--nature { background: var(--wp--preset--color--sauge); color: #1f2a17; }

.vj-stock-faible {
	display: inline-block;
	margin-top: 0.4rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wp--preset--color--brique);
}

/* 9. Filtres -------------------------------------------------------------- */

.vj-filtres {
	background: var(--wp--preset--color--creme);
	border: var(--vj-filet);
	border-top: var(--vj-piqure);
	border-radius: 2px;
	padding: 1.25rem;
}

.vj-filtres h2,
.vj-filtres h3 {
	font-size: 1.0625rem;
	margin: 0 0 0.75rem;
}

.wc-block-components-checkbox__label,
.wc-block-attribute-filter label {
	font-size: 0.9375rem;
}

.wc-block-components-price-slider__range-input-progress,
.wc-block-components-filter-submit-button {
	--range-color: var(--wp--preset--color--brique);
	accent-color: var(--wp--preset--color--brique);
}

/* Puces de filtres actifs */
.wc-block-active-filters__list-item-remove,
.vj-filtre-actif {
	border: var(--vj-filet);
	border-radius: 999px;
	padding: 0.2rem 0.6rem;
	font-size: 0.8125rem;
}

@media (min-width: 900px) {
	.vj-boutique { display: grid; grid-template-columns: 16rem 1fr; gap: 2.5rem; align-items: start; }
	.vj-filtres { position: sticky; top: 1.5rem; }
}

/* 10. Page produit -------------------------------------------------------- */

.woocommerce div.product .product_title {
	font-size: var(--wp--preset--font-size--titre-2);
	margin-bottom: 0.4rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--wp--preset--font-family--titre);
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--wp--preset--color--noyer);
}

.woocommerce div.product form.cart { border-top: var(--vj-piqure); padding-top: 1.25rem; }

.woocommerce div.product form.cart .variations {
	margin-bottom: 1rem;
	border: 0;
}

.woocommerce div.product form.cart .variations label {
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--noyer);
}

.woocommerce div.product form.cart select {
	padding: 0.7rem 0.75rem;
	border: var(--vj-filet);
	border-radius: 3px;
	background: var(--wp--preset--color--creme);
	font-family: inherit;
	font-size: 1rem;
	min-height: 3rem;
}

.woocommerce div.product .quantity input.qty {
	min-height: 3rem;
	padding: 0.5rem;
	border: var(--vj-filet);
	border-radius: 3px;
	background: var(--wp--preset--color--creme);
}

button.single_add_to_cart_button {
	min-height: 3.25rem;
	font-size: 1.0625rem;
	padding-inline: 2rem;
}

/* Réassurance sous le bouton : le fait main impose d'annoncer le délai. */
.vj-reassurance {
	display: grid;
	gap: 0.55rem;
	margin-top: 1.25rem;
	padding-top: 1.1rem;
	border-top: var(--vj-piqure);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--noyer);
}

.vj-reassurance li { list-style: none; display: flex; gap: 0.55rem; align-items: baseline; }
.vj-reassurance li::before { content: "·"; color: var(--wp--preset--color--rose); font-weight: 700; }

/* 11. Panier & tunnel de commande ----------------------------------------- */

.woocommerce-cart table.shop_table,
.wc-block-cart-items {
	border: var(--vj-filet);
	border-radius: 2px;
	background: var(--wp--preset--color--creme);
}

.wc-block-components-totals-item__value,
.woocommerce-cart .order-total .amount {
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 600;
}

.wc-block-components-checkout-step__title { font-family: var(--wp--preset--font-family--titre); }

.wc-block-components-text-input input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	border: var(--vj-filet);
	border-radius: 3px;
	background: var(--wp--preset--color--creme);
	min-height: 3rem;
	font-family: inherit;
}

.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner {
	border-radius: 2px;
	border-top: var(--vj-piqure);
	background: var(--wp--preset--color--sauge-claire);
	color: #2b3321;
}

.woocommerce-error { border-radius: 2px; background: #f6e0dc; color: #6b241b; }

/* 12. Barre CTA collante (mobile) ----------------------------------------- */

.vj-cta-fixe {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 90;
	display: none;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem clamp(0.85rem, 4vw, 1.25rem);
	padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
	background: var(--wp--preset--color--creme);
	border-top: var(--vj-piqure);
	box-shadow: 0 -6px 18px rgba(51, 38, 29, 0.09);
}

.vj-cta-fixe__infos { flex: 1 1 auto; min-width: 0; }

.vj-cta-fixe__titre {
	display: block;
	font-family: var(--wp--preset--font-family--titre);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--noyer);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vj-cta-fixe__prix {
	display: block;
	font-family: var(--wp--preset--font-family--titre);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--wp--preset--color--noyer);
}

.vj-cta-fixe__action {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0 1.4rem;
	border: 0;
	border-radius: 3px;
	background: var(--wp--preset--color--brique);
	color: var(--wp--preset--color--creme);
	font-family: var(--wp--preset--font-family--texte);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.vj-cta-fixe__action[disabled] { background: #b7a894; cursor: not-allowed; }

@media (max-width: 781px) {
	.vj-cta-fixe { display: flex; }
	body.vj-a-cta-fixe { padding-bottom: var(--vj-cta-hauteur); }
	/* Ne pas doubler le CTA quand le vrai bouton est à l'écran. */
	body.vj-cta-masque .vj-cta-fixe { transform: translateY(110%); transition: transform var(--vj-transition); }
}

/* 13. FAQ ----------------------------------------------------------------- */

.vj-faq { max-width: 46rem; }

.vj-faq details {
	border-bottom: var(--vj-piqure);
	padding: 1.1rem 0;
}

.vj-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--titre);
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--wp--preset--color--noyer);
}

.vj-faq summary::-webkit-details-marker { display: none; }

.vj-faq summary::after {
	content: "+";
	font-size: 1.4rem;
	line-height: 1;
	color: var(--wp--preset--color--brique);
	flex: 0 0 auto;
}

.vj-faq details[open] summary::after { content: "–"; }
.vj-faq details p { margin: 0.75rem 0 0; }

/* 14. Page 404 ------------------------------------------------------------ */

.vj-404 {
	text-align: left;
	max-width: 34rem;
	margin-inline: auto;
	padding-block: clamp(3rem, 9vw, 7rem);
}

.vj-404__code {
	font-family: var(--wp--preset--font-family--titre);
	font-size: clamp(4rem, 14vw, 7rem);
	line-height: 0.9;
	color: var(--wp--preset--color--rose);
	margin: 0 0 1rem;
}

/* 15. Pied de page -------------------------------------------------------- */

footer.wp-block-template-part {
	background: var(--wp--preset--color--sauge-claire);
	border-top: var(--vj-piqure);
	color: #2b3321;
}

footer.wp-block-template-part a { color: #3d4a2f; }
footer.wp-block-template-part a:hover { color: var(--wp--preset--color--brique-sombre); }

.vj-mentions {
	font-size: 0.8125rem;
	opacity: 0.85;
}

/* Bandeau cookies : rester sobre, ne pas masquer le contenu sur mobile. */
.cmplz-cookiebanner,
#cookie-law-info-bar {
	font-family: var(--wp--preset--font-family--texte) !important;
	border-radius: 3px !important;
}