/* ==========================================================================
   Patcheko — styles complémentaires à theme.json
   Les couleurs, typographies et espacements se règlent dans l'éditeur de site
   (Styles). Ce fichier ne contient que ce que theme.json ne sait pas exprimer.
   ========================================================================== */

/* --- Accessibilité ------------------------------------------------------- */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--noir);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-element-button,
	.wp-block-button__link,
	.wc-block-components-button {
		transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	}
	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: translateY(-2px);
	}
}

/* --- Style de bloc : hexagone (Image / Couverture) ----------------------- */
.wp-block-image.is-style-hexagone img,
.wp-block-cover.is-style-hexagone {
	clip-path: var(--wp--custom--hexagone, polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%));
	border-radius: 0;
}
.wp-block-cover.is-style-hexagone {
	aspect-ratio: 1 / 1.1547;
}

/* --- Style de bloc : étiquette (Groupe / Colonne) ------------------------ *
 * Reprend le cartouche du logo : contour épais, coins arrondis, fond crème. */
.wp-block-group.is-style-etiquette,
.wp-block-column.is-style-etiquette {
	background-color: var(--wp--preset--color--creme);
	border: var(--wp--custom--contour, 3px) solid var(--wp--preset--color--noir);
	border-radius: var(--wp--custom--rayon, 14px);
	padding: var(--wp--preset--spacing--30);
	box-shadow: var(--wp--preset--shadow--etiquette);
}

/* Le texte d'une étiquette reste sombre, même posée sur une texture foncée */
:where(.is-style-etiquette),
:where(.is-style-etiquette) a:not(.wp-element-button) {
	color: var(--wp--preset--color--noir);
}

/* --- Styles de bloc : textures (Groupe) ---------------------------------- */
.wp-block-group[class*="is-style-texture-"] {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.wp-block-group.is-style-texture-tartan {
	background-image: var(--patcheko-tartan);
}
.wp-block-group.is-style-texture-jean {
	/* voile marine pour garantir la lisibilité du texte crème sur le jean */
	background-image: linear-gradient(rgba(12, 38, 93, 0.72), rgba(12, 38, 93, 0.72)), var(--patcheko-jean);
	background-color: var(--wp--preset--color--marine);
	color: var(--wp--preset--color--creme);
}
.wp-block-group.is-style-texture-monstera {
	background-image: var(--patcheko-monstera);
	background-size: 520px auto;
	background-repeat: repeat;
}
.wp-block-group.is-style-texture-papillons {
	background-image: var(--patcheko-papillons);
	background-size: 520px auto;
	background-repeat: repeat;
}
/* Papillons voilés : la texture reste visible, le texte sombre reste lisible.
   Le voile se règle avec --patcheko-voile (ici crème à 78 %). */
.wp-block-group.is-style-texture-papillons-voile {
	--patcheko-voile: rgba(243, 229, 217, 0.78);
	background-image: linear-gradient(var(--patcheko-voile), var(--patcheko-voile)), var(--patcheko-papillons);
	background-size: auto, 520px auto;
	background-repeat: no-repeat, repeat;
	background-color: var(--wp--preset--color--creme);
}
.wp-block-group.is-style-texture-cuir {
	background-image: var(--patcheko-cuir);
	background-size: 520px auto;
	background-repeat: repeat;
	color: var(--wp--preset--color--creme);
}
/* Lisibilité du texte sur les textures : un groupe « étiquette » imbriqué
   reste lisible, mais on garde aussi une couleur de lien adaptée aux fonds sombres. */
.wp-block-group.is-style-texture-jean a:not(.wp-element-button),
.wp-block-group.is-style-texture-cuir a:not(.wp-element-button) {
	color: var(--wp--preset--color--jaune);
}
.wp-block-group.is-style-texture-jean :where(.is-style-etiquette) a:not(.wp-element-button),
.wp-block-group.is-style-texture-cuir :where(.is-style-etiquette) a:not(.wp-element-button) {
	color: var(--wp--preset--color--noir);
}

/* --- Style de bloc : couture (Séparateur) -------------------------------- */
.wp-block-separator.is-style-couture {
	background: none;
	border: 0;
	border-top: 3px dashed currentColor;
	height: 0;
	max-width: 100%;
	opacity: 1;
}

/* --- Éléments décoratifs réutilisables (classes à ajouter dans « Avancé ») */
.patcheko-bulle-prix {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: 7.5rem;
	height: 7.5rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--wp--preset--color--menthe);
	color: var(--wp--preset--color--noir);
	font-family: var(--wp--preset--font-family--montserrat-alternates);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--grand);
	line-height: 1;
	margin: 0;
}

.patcheko-hex-logo-centre {
	position: relative;
	z-index: 2;
	margin-inline: auto;
}

/* Mosaïque de marque : le logo chevauche les blocs de couleur */
.patcheko-mosaique {
	position: relative;
}
.patcheko-mosaique .patcheko-mosaique__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	margin: 0;
	width: clamp(8rem, 16vw, 13rem);
}
@media (max-width: 781px) {
	.patcheko-mosaique .patcheko-mosaique__logo {
		position: static;
		transform: none;
		margin: var(--wp--preset--spacing--30) auto;
	}
}

/* --- Cartes produit statiques (compositions avec emplacements) ---------- */
.patcheko-carte-produit {
	height: 100%;
}
.patcheko-carte-produit .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--rayon, 14px);
}
.patcheko-carte-produit .wp-block-heading a,
.patcheko-carte-produit .wp-block-heading {
	margin-block: 0;
}

/* --- WooCommerce --------------------------------------------------------- */
/* Pastille de promotion : bulle menthe, comme sur la planche de marque */
.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale,
.woocommerce span.onsale {
	background: var(--wp--preset--color--menthe);
	color: var(--wp--preset--color--noir);
	border: 3px solid var(--wp--preset--color--noir);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--montserrat-alternates);
	font-weight: 900;
	font-variant-caps: small-caps;
	padding: 0.35em 0.9em;
	min-height: 0;
	min-width: 0;
	line-height: 1.1;
}

/* Prix */
.wc-block-components-product-price,
.wc-block-components-product-price .amount {
	font-family: var(--wp--preset--font-family--montserrat-alternates);
	font-weight: 700;
}
.wc-block-components-product-price del {
	opacity: 0.6;
}
.wc-block-components-product-price ins {
	text-decoration: none;
	color: var(--wp--preset--color--orange);
}

/* Boutons WooCommerce = boutons du thème */
.wc-block-components-button:not(.is-link),
.wp-block-button.wc-block-components-product-button .wp-block-button__link,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.single_add_to_cart_button {
	background: var(--wp--preset--color--marine);
	color: var(--wp--preset--color--creme);
	border: 3px solid var(--wp--preset--color--marine);
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--montserrat-alternates);
	font-weight: 700;
	font-variant-caps: small-caps;
	letter-spacing: 0.02em;
}
.wc-block-components-button:not(.is-link):hover,
.wp-block-button.wc-block-components-product-button .wp-block-button__link:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.single_add_to_cart_button:hover {
	background: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--blanc);
}

/* Champs de formulaire (panier, paiement, compte, recherche) */
.wc-block-components-text-input input,
.wc-block-components-select .wc-blocks-components-select__select,
.wc-block-components-textarea,
.woocommerce input.input-text,
.woocommerce select,
.woocommerce textarea {
	border: 2px solid var(--wp--preset--color--noir);
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--philosopher);
}

/* Vignettes produit : contour « étiquette » discret au survol */
.wc-block-product .wc-block-components-product-image img,
.wp-block-woocommerce-product-collection .wc-block-components-product-image img {
	border-radius: var(--wp--custom--rayon, 14px);
}
.wp-block-woocommerce-product-collection .wc-block-product:hover .wc-block-components-product-image img {
	outline: 3px solid var(--wp--preset--color--noir);
	outline-offset: -3px;
}

/* Fil d'Ariane, onglets et méta produit */
.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
	font-size: var(--wp--preset--font-size--petit);
}
.wc-tabs li a,
.wp-block-woocommerce-product-details .wc-tabs li a {
	font-family: var(--wp--preset--font-family--montserrat-alternates);
	font-weight: 700;
	font-variant-caps: small-caps;
}

/* Messages (ajout au panier, erreurs) */
.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info {
	border-radius: 10px;
}

/* --- Utilitaires de mise en page ---------------------------------------- */
/* Colonnes collées (mosaïque, bandeaux) */
.wp-block-columns.patcheko-sans-espace {
	gap: 0;
	margin-block: 0;
}
.wp-block-columns.patcheko-sans-espace > .wp-block-column {
	margin: 0;
}

/* Listes sans puces (pied de page) */
.wp-block-list.patcheko-liste-nue {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wp-block-list.patcheko-liste-nue li + li {
	margin-top: 0.4em;
}

/* Pied de page : liens hérités de la couleur du texte */
.patcheko-pied a {
	color: inherit;
}
.patcheko-pied a:hover {
	color: var(--wp--preset--color--orange);
}

/* En-tête : logo compact, navigation qui passe à la ligne proprement */
.patcheko-entete .wp-block-site-title {
	margin: 0;
}
.patcheko-entete .wp-block-image {
	margin: 0;
}

/* ==========================================================================
   Catalogue et fiches produit : même look « étiquette » que les cartes
   « Les dernières créations » (cartouche crème, contour noir, ombre franche)
   ========================================================================== */

/* Cartes du catalogue (bloc Collection de produits, produits similaires,
   anciens blocs grille) */
:is(.wc-block-product, .wc-block-grid__product, .wp-block-woocommerce-product-template > li) {
	background-color: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--noir);
	border: var(--wp--custom--contour, 3px) solid var(--wp--preset--color--noir);
	border-radius: var(--wp--custom--rayon, 14px);
	box-shadow: var(--wp--preset--shadow--etiquette);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	height: 100%;
	box-sizing: border-box;
}
:is(.wc-block-product, .wc-block-grid__product, .wp-block-woocommerce-product-template > li) > * {
	margin-block: 0;
}
:is(.wc-block-product, .wc-block-grid__product) :is(.wp-block-post-title, .wc-block-grid__product-title) {
	font-family: var(--wp--preset--font-family--montserrat-alternates);
	font-weight: 700;
	font-variant-caps: small-caps;
	line-height: 1.15;
}
:is(.wc-block-product, .wc-block-grid__product) :is(.wp-block-post-title, .wc-block-grid__product-title) a {
	color: inherit;
	text-decoration: none;
}
:is(.wc-block-product, .wc-block-grid__product) :is(.wp-block-post-title, .wc-block-grid__product-title) a:hover {
	text-decoration: underline;
}
:is(.wc-block-product, .wc-block-grid__product) .wp-block-woocommerce-product-button {
	margin-top: auto;
}
@media (prefers-reduced-motion: no-preference) {
	:is(.wc-block-product, .wc-block-grid__product) {
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}
	:is(.wc-block-product, .wc-block-grid__product):hover {
		transform: translate(-2px, -2px);
		box-shadow: 6px 6px 0 var(--wp--preset--color--noir);
	}
}
/* Le contour de survol sur l'image est remplacé par l'effet de carte */
.wp-block-woocommerce-product-collection .wc-block-product:hover .wc-block-components-product-image img {
	outline: none;
}

/* Tri, nombre de résultats, pagination */
.wc-block-catalog-sorting select,
.woocommerce-ordering select {
	border: 2px solid var(--wp--preset--color--noir);
	border-radius: 10px;
	padding: 0.4em 0.8em;
	font-family: var(--wp--preset--font-family--philosopher);
	background-color: var(--wp--preset--color--blanc);
}
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	font-family: var(--wp--preset--font-family--montserrat-alternates);
	font-weight: 700;
	text-decoration: none;
}

/* Fiche produit ----------------------------------------------------------- */
/* Galerie : cadre étiquette */
.single-product :is(.wp-block-woocommerce-product-image-gallery, .woocommerce-product-gallery) {
	border: var(--wp--custom--contour, 3px) solid var(--wp--preset--color--noir);
	border-radius: var(--wp--custom--rayon, 14px);
	box-shadow: var(--wp--preset--shadow--etiquette);
	overflow: hidden;
	background-color: var(--wp--preset--color--creme);
}
.single-product :is(.wp-block-woocommerce-product-image-gallery, .woocommerce-product-gallery) img {
	border-radius: 0;
}

/* Colonne « résumé » (titre, prix, ajout au panier) : cartouche crème */
.single-product .wp-block-column:has(.wp-block-add-to-cart-form, .wp-block-woocommerce-add-to-cart-form, form.cart) {
	background-color: var(--wp--preset--color--creme);
	border: var(--wp--custom--contour, 3px) solid var(--wp--preset--color--noir);
	border-radius: var(--wp--custom--rayon, 14px);
	box-shadow: var(--wp--preset--shadow--etiquette);
	padding: var(--wp--preset--spacing--30);
}
.single-product .wp-block-post-title {
	font-size: var(--wp--preset--font-size--tres-grand);
	margin-block: 0;
}
.single-product .wp-block-woocommerce-product-price,
.single-product .wc-block-components-product-price {
	font-size: var(--wp--preset--font-size--grand);
}

/* Quantité et variations */
.single-product .quantity input.qty,
.single-product .variations select,
.wc-block-components-quantity-selector {
	border: 2px solid var(--wp--preset--color--noir);
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--montserrat-alternates);
}

/* Onglets (description, informations, avis) : panneau étiquette */
.wp-block-woocommerce-product-details .wc-tabs {
	border-bottom: var(--wp--custom--contour, 3px) solid var(--wp--preset--color--noir);
}
.wp-block-woocommerce-product-details :is(.woocommerce-Tabs-panel, .panel) {
	background-color: var(--wp--preset--color--creme);
	border: var(--wp--custom--contour, 3px) solid var(--wp--preset--color--noir);
	border-top: 0;
	border-radius: 0 0 var(--wp--custom--rayon, 14px) var(--wp--custom--rayon, 14px);
	padding: var(--wp--preset--spacing--30);
}

/* Panier et paiement : blocs en cartouche */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	background-color: var(--wp--preset--color--creme);
	border: var(--wp--custom--contour, 3px) solid var(--wp--preset--color--noir);
	border-radius: var(--wp--custom--rayon, 14px);
	box-shadow: var(--wp--preset--shadow--etiquette);
	padding: var(--wp--preset--spacing--30) !important;
}

/* --- Mosaïque de marque : gouttières blanches entre les blocs, logo aéré --- */
.patcheko-mosaique .wp-block-columns.patcheko-mosaique-rangee {
	gap: 1rem;
	margin-block: 0;
}
.patcheko-mosaique .patcheko-mosaique__logo {
	width: clamp(8rem, 15vw, 12rem);
	filter: drop-shadow(0 0 0.75rem rgba(255, 255, 255, 0.9));
}

/* --- Pied de page : panneau semi-opaque sous le texte -------------------- */
.patcheko-panneau,
.patcheko-pied__panneau {
	background-color: rgba(243, 229, 217, 0.92);
	border-radius: var(--wp--custom--rayon, 14px);
}
.patcheko-pied .wp-block-heading {
	margin-bottom: 0.6rem;
}

/* ==========================================================================
   v1.2 — Promo dynamique, onglets et avis produit
   ========================================================================== */

/* Promo : la carte « étiquette » des produits est neutralisée, c'est le bandeau
   orange (colonnes) qui fait le visuel. */
.patcheko-promo-collection :is(.wc-block-product, .wp-block-woocommerce-product-template > li) {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	display: block;
	height: auto;
	transform: none;
}
.patcheko-promo-collection .wc-block-product:hover {
	transform: none;
	box-shadow: none;
}
.patcheko-promo.wp-block-columns {
	margin: 0;
	gap: 0;
	align-items: stretch;
}
.patcheko-promo__texte {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
}
.patcheko-promo__texte > * {
	margin-block: 0;
}
.patcheko-promo__image,
.patcheko-promo__image .wc-block-components-product-image,
.patcheko-promo__image .wc-block-components-product-image a {
	display: block;
	height: 100%;
}
.patcheko-promo__image .wc-block-components-product-image {
	margin: 0;
}
.patcheko-promo__image img {
	width: 100%;
	height: 100% !important;
	min-height: 320px;
	object-fit: cover;
	border-radius: 0;
	aspect-ratio: auto;
}
.patcheko-promo__texte .wp-block-post-title a,
.patcheko-promo__texte .wp-block-post-title {
	color: var(--wp--preset--color--blanc);
	text-decoration: none;
}

/* Bulle de prix avec le bloc « Prix du produit » */
.patcheko-bulle-prix {
	min-width: 8.5rem;
	width: 8.5rem;
	height: 8.5rem;
	padding: 0.5rem;
	text-align: center;
}
.patcheko-bulle-prix .wc-block-components-product-price {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.15;
	font-weight: 900;
	color: var(--wp--preset--color--noir);
	text-align: center;
}
.patcheko-bulle-prix .wc-block-components-product-price del {
	display: block;
	font-size: 0.75em;
	font-weight: 700;
}
.patcheko-bulle-prix .wc-block-components-product-price ins {
	color: var(--wp--preset--color--noir);
}
@media (max-width: 781px) {
	.patcheko-promo__image img { min-height: 240px; }
}

/* --- Onglets produit (Description / Informations / Avis) ------------------ */
.wp-block-woocommerce-product-details ul.wc-tabs,
.wp-block-woocommerce-product-details .wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
	overflow: visible;
}
.wp-block-woocommerce-product-details .wc-tabs::before,
.wp-block-woocommerce-product-details .wc-tabs::after,
.wp-block-woocommerce-product-details .wc-tabs li::before,
.wp-block-woocommerce-product-details .wc-tabs li::after {
	display: none !important;
}
.wp-block-woocommerce-product-details .wc-tabs li {
	margin: 0;
	padding: 0;
	background: var(--wp--preset--color--blanc);
	border: 3px solid var(--wp--preset--color--noir);
	border-radius: 10px;
}
.wp-block-woocommerce-product-details .wc-tabs li a {
	display: block;
	padding: 0.45em 1.1em;
	color: var(--wp--preset--color--noir);
	text-decoration: none;
	border: 0;
}
.wp-block-woocommerce-product-details .wc-tabs li.active {
	background: var(--wp--preset--color--marine);
}
.wp-block-woocommerce-product-details .wc-tabs li.active a {
	color: var(--wp--preset--color--creme);
}

/* Panneau : cadre complet et marge intérieure (l'ancienne règle n'avait pas de haut) */
.wp-block-woocommerce-product-details .woocommerce-Tabs-panel,
.wp-block-woocommerce-product-details .wc-tab,
.wp-block-woocommerce-product-details .panel {
	background-color: var(--wp--preset--color--creme);
	border: var(--wp--custom--contour, 3px) solid var(--wp--preset--color--noir);
	border-radius: var(--wp--custom--rayon, 14px);
	box-shadow: var(--wp--preset--shadow--etiquette);
	padding: var(--wp--preset--spacing--40) !important;
	margin: 0 0 var(--wp--preset--spacing--30);
	box-sizing: border-box;
}
.wp-block-woocommerce-product-details .woocommerce-Tabs-panel > :first-child {
	margin-top: 0;
}
.wp-block-woocommerce-product-details .woocommerce-Tabs-panel > :last-child {
	margin-bottom: 0;
}

/* --- Avis : titre, formulaire, étoiles ----------------------------------- */
.woocommerce-Reviews-title,
#reviews h2 {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--grand);
}
#review_form_wrapper,
.wp-block-woocommerce-product-reviews {
	margin-top: var(--wp--preset--spacing--30);
}
.comment-reply-title {
	display: block;
	margin-bottom: 1rem;
	font-family: var(--wp--preset--font-family--montserrat-alternates);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--moyen);
}
.comment-form p {
	margin: 0 0 1.1rem;
}
.comment-form label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 700;
}
.comment-form :is(textarea, input[type="text"], input[type="email"]) {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7em 0.9em;
	background: var(--wp--preset--color--blanc);
	border: 2px solid var(--wp--preset--color--noir);
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--philosopher);
	font-size: inherit;
}
.comment-form .comment-form-cookies-consent label {
	display: inline;
	font-weight: 400;
}
.comment-form p.stars a,
.comment-form .stars a {
	color: var(--wp--preset--color--orange);
}
.comment-form .form-submit {
	margin-bottom: 0;
}
.commentlist,
.woocommerce-Reviews .commentlist {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
}
.commentlist li {
	margin: 0 0 1rem;
	padding: 1rem;
	background: var(--wp--preset--color--blanc);
	border: 2px solid var(--wp--preset--color--noir);
	border-radius: 10px;
}

/* --- v1.2.1 : promo compacte et panneau de lisibilité sur l'accueil -------- */
/* Hauteur du bandeau promo plafonnée, même si le produit n'a pas de photo */
.patcheko-promo__image {
	height: clamp(280px, 26vw, 380px);
	overflow: hidden;
}
.patcheko-promo__image .wc-block-components-product-image,
.patcheko-promo__image .wc-block-components-product-image a {
	height: 100%;
}
.patcheko-promo__image img {
	height: 100% !important;
	width: 100%;
	min-height: 0;
	object-fit: cover;
}
.patcheko-promo__texte {
	min-height: clamp(280px, 26vw, 380px);
	justify-content: center;
}
/* Le bouton ne doit plus être poussé en bas de la colonne */
.patcheko-promo-collection .wp-block-woocommerce-product-button,
.patcheko-promo-collection .wc-block-components-product-button {
	margin-top: 0;
}
.patcheko-promo__texte .wp-block-woocommerce-product-button {
	align-self: flex-start;
}