/*
Theme Name: Tuck Planche
Template: twentytwentyfive
Description: Thème de la boutique Tuck Planche, enfant de Twenty Twenty-Five.
Version: 2.0
*/

/* Réglages communs. */
::selection { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--base); }
:focus-visible { outline: 3px solid var(--wp--preset--color--accent-1); outline-offset: 3px; }
a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.woocommerce-Price-amount, .tp-card__price { font-variant-numeric: tabular-nums lining-nums; }
.tp-hero, .tp-section, .tp-atelier { padding-inline: var(--wp--preset--spacing--50); }
h1, h2, h3 { text-wrap: balance; }
.tp-eyebrow { margin: 0; font: 600 0.8125rem/1 var(--wp--preset--font-family--text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--accent-1); }

/* Accueil : le t-shirt vedette d'abord, la promesse à côté. */
.tp-hero {
	max-width: 1280px; margin: 0 auto; box-sizing: content-box;
	display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
	padding-block: clamp(1.5rem, 4vw, 3.5rem);
}
.tp-hero__product img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.tp-hero h1 { margin: 0.9rem 0 0; font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 0.98; }
.tp-hero__text > p:not(.tp-eyebrow) { max-width: 30em; margin: 1.25rem 0 0; font-size: 1.125rem; color: var(--wp--preset--color--accent-4); }
.tp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.tp-hero__actions .wp-element-button { text-decoration: none; padding: 1rem 1.6rem; }
.tp-hero__actions span { font-size: 0.9375rem; font-weight: 600; color: var(--wp--preset--color--contrast); }

/* Grilles de produits : la vanne est le nom du produit ; l'anthracite apparaît au survol. */
.tp-section { max-width: 1280px; margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; box-sizing: content-box; }
.tp-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 2rem; padding-bottom: 0.9rem; border-bottom: 2px solid var(--wp--preset--color--contrast); }
.tp-section__head h2 { margin: 0; }
.tp-section__head p { margin: 0; color: var(--wp--preset--color--accent-4); }
.tp-section__head span { margin-left: 0.5rem; font-weight: 600; color: var(--wp--preset--color--contrast); }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 2rem 1rem; margin-top: 1.25rem; }
#vedettes .tp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tp-card { display: grid; gap: 0.45rem; align-content: start; color: inherit; text-decoration: none; }
.tp-card__img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--wp--preset--color--accent-2); }
.tp-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-card__dark { opacity: 0; transition: opacity 0.2s ease-out; }
.tp-card:hover .tp-card__dark, .tp-card:focus-visible .tp-card__dark { opacity: 1; }
.tp-card__name { font: 400 1rem/1.15 var(--wp--preset--font-family--display); text-transform: uppercase; text-wrap: balance; }
.tp-card__price { font-size: 0.875rem; color: var(--wp--preset--color--accent-4); }
.tp-card:hover .tp-card__name, .tp-card:focus-visible .tp-card__name { color: var(--wp--preset--color--accent-1); }
@media (prefers-reduced-motion: reduce) { .tp-card__dark { transition: none; } }

/* Fabrication, signée par le pigeon témoin. */
.tp-atelier {
	max-width: 1280px; margin: clamp(4rem, 8vw, 6rem) auto clamp(3rem, 6vw, 4.5rem); box-sizing: content-box;
	display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
}
.tp-atelier img { width: 100%; height: auto; }
.tp-atelier h2 { margin: 0 0 1.25rem; }
.tp-atelier dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.25rem 2rem; }
.tp-atelier dl div { border-top: 2px solid var(--wp--preset--color--accent-1); padding-top: 0.7rem; }
.tp-atelier dt { font: 400 1rem/1 var(--wp--preset--font-family--display); text-transform: uppercase; }
.tp-atelier dd { margin: 0.45rem 0 0; color: var(--wp--preset--color--accent-4); }

@media (max-width: 820px) {
	.tp-hero { grid-template-columns: 1fr; }
	.tp-grid, #vedettes .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0.75rem; }
	.tp-card__name { font-size: 0.875rem; }
	.tp-atelier { grid-template-columns: 1fr; }
	.tp-atelier img { width: 6rem; }
}

/* Boutique et fiches produit. */
.wc-block-components-product-name, .wp-block-post-title { font-family: var(--wp--preset--font-family--display); text-transform: uppercase; }
.woocommerce-product-gallery img, .wc-block-components-product-image img { background: var(--wp--preset--color--accent-2); }
.wp-block-woocommerce-product-price { font-weight: 600; }
.wp-block-add-to-cart-form .single_add_to_cart_button { padding: 1rem 1.6rem; }
.variations select { font: inherit; height: auto; min-height: 2.75rem; line-height: 1.5; padding: 0.55rem 2.25rem 0.55rem 0.75rem; border: 2px solid var(--wp--preset--color--contrast); border-radius: 0; background-color: var(--wp--preset--color--base); }
html { scrollbar-color: var(--wp--preset--color--accent-4) var(--wp--preset--color--base); }
input, textarea { caret-color: var(--wp--preset--color--accent-1); }