/* =====================================================================
   LES SPIRALES DU BOIS — Theme enfant Astra
   Palette bois chaleureuse + animations & effets au scroll
   ===================================================================== */

:root {
	--wood-deep:    #2b1c12;
	--wood-dark:    #4a2f1d;
	--wood-medium:  #8a5a32;
	--wood-light:   #cf9f6e;
	--wood-pale:    #f3e6d6;
	--cream:        #faf5ee;
	--accent:       #c9852b;
	--accent-light: #e3a85c;
	--text-dark:    #2c2118;
	--text-muted:   #6b5b4d;
	--white:        #ffffff;

	--font-heading: 'Playfair Display', Georgia, serif;
	--font-body:    'Jost', 'Poppins', sans-serif;

	--transition-fast: 0.25s ease;
	--transition-medium: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	--shadow-soft: 0 10px 30px rgba(43, 28, 18, 0.12);
	--shadow-strong: 0 18px 45px rgba(43, 28, 18, 0.22);
}

/* =====================================================================
   GLOBAL
   ===================================================================== */

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	color: var(--text-dark);
	background-color: var(--cream);
	background-image:
		radial-gradient(circle at 20% 0%, rgba(201, 133, 43, 0.05), transparent 40%),
		radial-gradient(circle at 100% 30%, rgba(74, 47, 29, 0.05), transparent 45%);
}

h1, h2, h3, h4, h5,
.entry-title,
.wp-block-heading {
	font-family: var(--font-heading) !important;
	color: var(--wood-deep);
	letter-spacing: 0.01em;
}

a {
	transition: color var(--transition-fast), background-color var(--transition-fast);
}

::selection {
	background: var(--accent-light);
	color: var(--white);
}

/* Animated underline on h2 */
.wp-block-heading.has-text-align-center::after,
h2.wp-block-heading::after {
	content: "";
	display: block;
	width: 70px;
	height: 3px;
	margin: 14px auto 0;
	background: linear-gradient(90deg, var(--accent), var(--wood-medium));
	border-radius: 3px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.6s ease;
}

h2.wp-block-heading:not(.has-text-align-center)::after {
	margin: 14px 0 0;
}

.reveal.in-view h2.wp-block-heading::after {
	transform: scaleX(1);
}

/* Masquer le titre de page sur les pages avec banniere (le banner/hero fait deja office de titre) */
.home .entry-header,
.page-id-69 .entry-header,
.page-id-70 .entry-header,
.page-id-71 .entry-header,
.page-id-73 .entry-header,
.page-id-74 .entry-header {
	display: none;
}

/* Coller le hero/banniere directement sous la barre de navigation, uniquement
   sur les pages qui commencent par un bloc Cover (les autres, ex. boutique,
   panier, mon compte, gardent leur espacement habituel). */
.ast-container:has(#primary .entry-content > .wp-block-cover:first-child) {
	padding-top: 0 !important;
}

#primary:has(.entry-content > .wp-block-cover:first-child) {
	margin-top: 0 !important;
}

.entry-content > .wp-block-cover:first-child {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
	min-height: 100vh !important;
}

/* =====================================================================
   HEADER / NAVIGATION
   ===================================================================== */

#masthead {
	position: sticky;
	top: 0;
	z-index: 100;
}

.ast-theme-transparent-header .site-header,
#masthead,
.main-header-bar,
.ast-primary-header-bar,
.ast-primary-header-bar .site-primary-header-wrap,
.main-header-bar .main-header-menu > .menu-item {
	transition: background-color var(--transition-medium), box-shadow var(--transition-medium), padding var(--transition-medium), min-height var(--transition-medium), line-height var(--transition-medium);
}

#masthead.spirales-scrolled,
.main-header-bar.spirales-scrolled {
	box-shadow: var(--shadow-soft);
	background-color: rgba(250, 245, 238, 0.96) !important;
	backdrop-filter: blur(10px);
}

/* La hauteur du header Astra est pilotee par min-height / line-height, pas par le padding */
#masthead.spirales-scrolled .ast-primary-header-bar,
#masthead.spirales-scrolled .site-primary-header-wrap {
	min-height: 56px !important;
}

#masthead.spirales-scrolled .main-header-menu > .menu-item {
	line-height: 56px !important;
}

#masthead.spirales-scrolled .ast-site-identity .custom-logo-link img {
	max-width: 120px;
}

@media (max-width: 544px) {
	#masthead.spirales-scrolled .ast-site-identity .custom-logo-link img {
		max-width: 100px;
	}
}

.main-header-menu .menu-item > .menu-link {
	font-family: var(--font-body);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.85rem;
	position: relative;
	transition: color var(--transition-fast);
}

.main-header-menu .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 2px;
	width: 0;
	height: 2px;
	background: var(--accent);
	transition: width var(--transition-fast);
}

.main-header-menu .menu-item:hover > .menu-link::after,
.main-header-menu .current-menu-item > .menu-link::after {
	width: 100%;
}

.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link {
	color: var(--accent) !important;
}

/* Icones Panier / Mon compte dans la navigation */
.spirales-nav-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.spirales-nav-icon svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	vertical-align: middle;
}

.spirales-cart-count {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--white);
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.spirales-cart-count.is-hidden {
	display: none;
}

.main-header-menu .menu-item > .menu-link:has(.spirales-nav-icon)::after {
	display: none;
}

.ast-site-identity img {
	transition: transform var(--transition-fast);
}
.ast-site-identity img:hover {
	transform: scale(1.05) rotate(-2deg);
}

/* Le logo horizontal contient deja le texte "Les Spirales du Bois" :
   on masque le titre du site et on limite la largeur du logo. */
.ast-site-identity .site-title,
.ast-site-identity .site-description {
	display: none;
}

.ast-site-identity .custom-logo-link img {
	max-width: 230px;
	width: auto;
	height: auto;
	transition: max-width var(--transition-medium);
}

@media (max-width: 544px) {
	.ast-site-identity .custom-logo-link img {
		max-width: 170px;
	}
}

/* =====================================================================
   BUTTONS
   ===================================================================== */

.wp-block-button__link,
.ast-custom-button,
button[type="submit"],
.wp-element-button,
.wpcf7-submit,
.woocommerce a.button,
.woocommerce button.button {
	position: relative;
	overflow: hidden;
	border-radius: 50px !important;
	background: linear-gradient(135deg, var(--accent), var(--wood-medium)) !important;
	border: none !important;
	color: var(--white) !important;
	font-family: var(--font-body);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.8rem;
	padding: 0.9em 2.2em !important;
	box-shadow: var(--shadow-soft);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
	z-index: 1;
}

.wp-block-button__link::before,
.wpcf7-submit::before,
.woocommerce a.button::before,
.woocommerce button.button::before {
	content: "";
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
	transform: skewX(-25deg);
	transition: left 0.7s ease;
}

.wp-block-button__link:hover::before,
.wpcf7-submit:hover::before,
.woocommerce a.button:hover::before,
.woocommerce button.button:hover::before {
	left: 130%;
}

.wp-block-button__link:hover,
.ast-custom-button:hover,
.wpcf7-submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: var(--shadow-strong);
	color: var(--white) !important;
}

/* Outline button style */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--wood-deep) !important;
	border: 2px solid var(--wood-medium) !important;
	box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wood-medium) !important;
	color: var(--white) !important;
	border-color: var(--wood-medium) !important;
}

/* =====================================================================
   HERO / COVER BLOCK
   ===================================================================== */

.wp-block-cover {
	position: relative;
	overflow: hidden;
}

.wp-block-cover__background {
	background: linear-gradient(160deg, rgba(43,28,18,0.88), rgba(43,28,18,0.60)) !important;
}

.wp-block-cover img.wp-block-cover__image-background {
	transform: scale(1.08);
	animation: spirales-hero-zoom 16s ease-in-out infinite alternate;
}

@keyframes spirales-hero-zoom {
	0%   { transform: scale(1.08) translateY(0); }
	100% { transform: scale(1.18) translateY(-2%); }
}

.wp-block-cover__inner-container > * {
	opacity: 0;
	transform: translateY(28px);
	animation: spirales-fade-up 1s ease forwards;
}

.wp-block-cover__inner-container > *:nth-child(1) { animation-delay: 0.15s; }
.wp-block-cover__inner-container > *:nth-child(2) { animation-delay: 0.4s; }
.wp-block-cover__inner-container > *:nth-child(3) { animation-delay: 0.65s; }

@keyframes spirales-fade-up {
	to { opacity: 1; transform: translateY(0); }
}

.wp-block-cover h1 {
	font-size: clamp(2.6rem, 6vw, 4.5rem) !important;
	font-weight: 800 !important;
	text-shadow: 0 4px 30px rgba(0,0,0,0.35);
}

.wp-block-cover p {
	font-size: clamp(1rem, 2vw, 1.3rem);
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* =====================================================================
   SECTIONS DE PAGE (alternance de fonds + sections parallax)
   ===================================================================== */

.spirales-section {
	padding: 6rem 1.5rem;
}

.spirales-section-alt {
	background-color: var(--wood-pale);
	background-image:
		radial-gradient(circle at 0% 100%, rgba(201, 133, 43, 0.08), transparent 50%),
		radial-gradient(circle at 100% 0%, rgba(43, 28, 18, 0.05), transparent 45%);
}

/* Sections "parallax" basees sur un bloc Cover */
.spirales-parallax {
	min-height: 60vh !important;
}

.spirales-parallax .wp-block-cover__image-background {
	animation: none !important;
	transform: scale(1.18) translateY(0);
	will-change: transform;
}

.spirales-parallax .wp-block-cover__background {
	background: linear-gradient(160deg, rgba(43,28,18,0.85), rgba(43,28,18,0.58)) !important;
}

.spirales-parallax .wp-block-cover__inner-container {
	max-width: 900px;
	margin: 0 auto;
}

.spirales-highlights {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2.5rem !important;
	width: 100%;
}

.spirales-highlights .spirales-highlight {
	text-align: center;
	padding: 1.5rem 1rem;
	border: 1px solid rgba(250, 245, 238, 0.25);
	border-radius: 14px;
	background: rgba(43, 28, 18, 0.25);
	backdrop-filter: blur(4px);
	transition: transform var(--transition-fast), background var(--transition-fast);
}

.spirales-highlights .spirales-highlight:hover {
	transform: translateY(-6px);
	background: rgba(201, 133, 43, 0.25);
}

.spirales-highlights .spirales-highlight .spirales-highlight-number {
	display: block;
	font-family: var(--font-heading);
	font-size: 2.4rem;
	font-weight: 800;
	color: var(--accent-light);
	margin-bottom: 0.3rem;
}

.spirales-highlights .spirales-highlight p {
	margin: 0;
	font-size: 0.9rem;
}

@media (max-width: 768px) {
	.spirales-highlights {
		grid-template-columns: 1fr;
	}
	.spirales-section {
		padding: 3rem 1.2rem;
	}
}

/* Scroll indicator */
.wp-block-cover::after {
	content: "";
	position: absolute;
	bottom: 24px;
	left: 50%;
	width: 22px;
	height: 22px;
	margin-left: -11px;
	border-right: 2px solid rgba(255,255,255,0.85);
	border-bottom: 2px solid rgba(255,255,255,0.85);
	transform: rotate(45deg);
	animation: spirales-bounce 2.2s infinite;
	pointer-events: none;
}

@keyframes spirales-bounce {
	0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.4; }
	50% { transform: rotate(45deg) translate(8px, 8px); opacity: 1; }
}

/* =====================================================================
   SCROLL REVEAL ANIMATIONS (driven by assets/js/animations.js)
   ===================================================================== */

/* L'etat "cache" n'est applique qu'une fois le JS pret (classe js-ready
   ajoutee par animations.js), pour que le contenu reste visible si le
   script ne se charge pas. */
.reveal.js-ready {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.js-ready.in-view {
	opacity: 1;
	transform: translateY(0);
}

.reveal-stagger.js-ready.in-view > * {
	animation: spirales-fade-up 0.7s ease forwards;
	opacity: 0;
}
.reveal-stagger.in-view > *:nth-child(1) { animation-delay: 0.05s; }
.reveal-stagger.in-view > *:nth-child(2) { animation-delay: 0.18s; }
.reveal-stagger.in-view > *:nth-child(3) { animation-delay: 0.31s; }
.reveal-stagger.in-view > *:nth-child(4) { animation-delay: 0.44s; }
.reveal-stagger.in-view > *:nth-child(5) { animation-delay: 0.57s; }
.reveal-stagger.in-view > *:nth-child(6) { animation-delay: 0.70s; }

/* =====================================================================
   IMAGES & GALLERIES
   ===================================================================== */

.wp-block-image,
.wp-block-gallery .wp-block-image {
	overflow: hidden;
	border-radius: 14px;
}

.wp-block-image img,
.wp-block-gallery .wp-block-image img {
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
	border-radius: 14px;
	display: block;
}

.wp-block-image:hover img,
.wp-block-gallery .wp-block-image:hover img {
	transform: scale(1.07);
	filter: brightness(1.05) saturate(1.1);
}

.wp-block-gallery .wp-block-image {
	position: relative;
	box-shadow: var(--shadow-soft);
	transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.wp-block-gallery .wp-block-image:hover {
	box-shadow: var(--shadow-strong);
	transform: translateY(-6px);
}

.wp-block-gallery .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(43,28,18,0.45), transparent 55%);
	opacity: 0;
	transition: opacity var(--transition-fast);
	border-radius: 14px;
	pointer-events: none;
}

.wp-block-gallery .wp-block-image:hover::after {
	opacity: 1;
}

/* =====================================================================
   COLUMNS / SERVICE CARDS
   ===================================================================== */

.wp-block-columns .wp-block-column {
	transition: transform var(--transition-medium), box-shadow var(--transition-medium);
	border-radius: 18px;
	padding: 1.4rem;
}

.wp-block-columns .wp-block-column:hover {
	transform: translateY(-10px);
	background-color: var(--white);
	box-shadow: var(--shadow-strong);
}

.wp-block-columns .wp-block-column:hover .wp-block-image img {
	transform: scale(1.05);
}

.wp-block-columns .wp-block-column h3 {
	position: relative;
	transition: color var(--transition-fast);
}

.wp-block-columns .wp-block-column:hover h3 {
	color: var(--accent);
}

/* =====================================================================
   SECTION DIVIDERS (subtle wood-grain wave)
   ===================================================================== */

.entry-content > .wp-block-group,
.entry-content > .wp-block-columns {
	position: relative;
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}

.entry-content > .wp-block-heading {
	margin-top: 4rem;
	margin-bottom: 1.5rem;
}

/* Lisibilite des boutons "contour" sur les sections parallax (fond image) */
.spirales-parallax .wp-block-button.is-style-outline .wp-block-button__link {
	color: #ffffff !important;
	border-color: #ffffff !important;
	background: transparent !important;
}

.spirales-parallax .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #ffffff !important;
	color: var(--wood-deep) !important;
}

/* Respiration autour des sections cover/parallax */
.entry-content > .wp-block-cover:not(:first-child) {
	margin-top: 2.5rem !important;
	margin-block-start: 2.5rem !important;
}

.entry-content > .wp-block-cover:not(:last-child) {
	margin-bottom: 2.5rem !important;
}

/* =====================================================================
   BOUTIQUE / WOOCOMMERCE
   ===================================================================== */

/* Le fil d'ariane ne doit pas coller la barre de navigation */
.woocommerce-breadcrumb {
	display: block;
	padding-top: 2rem;
	margin-bottom: 1.5rem;
	color: var(--text-muted);
}

/* Cartes produit : on retire le padding par defaut d'Astra sur l'image
   mais on en remet un autour du texte (titre, prix, bouton) */
.astra-shop-summary-wrap {
	padding: 1.1rem 1.3rem 1.4rem;
}

.astra-shop-summary-wrap .woocommerce-loop-product__title {
	margin-top: 0.2rem;
}

/* Categorie produit : simple etiquette texte, sans fond colore */
.ast-woo-product-category {
	display: inline-block;
	background: none;
	color: var(--accent);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0;
	margin-bottom: 0.5rem;
}

/* =====================================================================
   FOOTER
   ===================================================================== */

.spirales-footer {
	background: linear-gradient(135deg, var(--wood-deep), var(--wood-dark));
	padding: 3.5rem 1.5rem 2.5rem;
}

.spirales-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 2.5rem;
}

.spirales-footer-col h3 {
	font-family: var(--font-heading);
	color: var(--cream);
	font-size: 1.15rem;
	margin: 0 0 1.1rem;
	position: relative;
	padding-bottom: 0.6rem;
}

.spirales-footer-col h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 42px;
	height: 2px;
	background: linear-gradient(90deg, var(--accent), var(--accent-light));
	border-radius: 2px;
}

.spirales-footer-logo-img {
	max-width: 140px;
	height: auto;
	margin-bottom: 1.1rem;
	transition: transform var(--transition-fast);
}

.spirales-footer-logo-img:hover {
	transform: scale(1.05);
}

.spirales-footer-brand p {
	color: var(--wood-pale);
	font-size: 0.92rem;
	line-height: 1.7;
	max-width: 320px;
	margin: 0 0 1.4rem;
}

.spirales-footer-social {
	display: flex;
	gap: 0.9rem;
}

.spirales-footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(250, 245, 238, 0.08);
	color: var(--cream);
	transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.spirales-footer-social a svg {
	width: 18px;
	height: 18px;
}

.spirales-footer-social a:hover {
	background: linear-gradient(135deg, var(--accent), var(--accent-light));
	color: var(--wood-deep);
	transform: translateY(-3px);
}

.spirales-footer-contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.spirales-footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	color: var(--wood-pale);
	font-size: 0.92rem;
}

.spirales-footer-contact svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 0.1rem;
	color: var(--accent-light);
}

.spirales-footer-contact a {
	color: var(--wood-pale);
}

.spirales-footer-contact a:hover {
	color: var(--accent-light);
}

.spirales-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.spirales-footer-links a {
	color: var(--wood-pale);
	font-size: 0.92rem;
	position: relative;
	padding-left: 0;
	transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.spirales-footer-links a::before {
	content: "→";
	position: absolute;
	left: -1.2em;
	opacity: 0;
	transition: opacity var(--transition-fast), left var(--transition-fast);
}

.spirales-footer-links a:hover {
	color: var(--accent-light);
	padding-left: 1.2em;
}

.spirales-footer-links a:hover::before {
	left: 0;
	opacity: 1;
}

@media (max-width: 768px) {
	.spirales-footer-inner {
		grid-template-columns: 1fr;
		gap: 2.2rem;
		text-align: center;
	}
	.spirales-footer-brand p {
		max-width: none;
		margin-left: auto;
		margin-right: auto;
	}
	.spirales-footer-social {
		justify-content: center;
	}
	.spirales-footer-col h3::after {
		left: 50%;
		transform: translateX(-50%);
	}
	.spirales-footer-contact li {
		justify-content: center;
	}
}

/* La barre de copyright Astra par defaut est remplacee par .spirales-footer-bottom */
#colophon {
	display: none;
}

.spirales-footer-bottom {
	max-width: 1200px;
	margin: 0 auto;
	margin-top: 2.5rem;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(250, 245, 238, 0.12);
	text-align: center;
}

.spirales-footer-bottom p {
	margin: 0;
	font-size: 0.75rem;
	color: var(--wood-pale);
	opacity: 0.7;
	letter-spacing: 0.02em;
}

/* =====================================================================
   WOOCOMMERCE TWEAKS
   ===================================================================== */

ul.products li.product {
	transition: transform var(--transition-medium), box-shadow var(--transition-medium);
	border-radius: 14px;
	overflow: hidden;
	background: var(--white);
}

ul.products li.product:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-strong);
}

ul.products li.product img {
	transition: transform 0.6s ease;
}

ul.products li.product:hover img {
	transform: scale(1.06);
}

/* --- Distinction catégories / produits --- */
ul.products li.product-category {
	background: linear-gradient(145deg, var(--wood-deep), var(--wood-dark)) !important;
	border: none !important;
	box-shadow: 0 6px 24px rgba(43,28,18,0.25) !important;
}

ul.products li.product-category a {
	color: var(--wood-pale) !important;
}

ul.products li.product-category a:hover {
	color: var(--accent-light) !important;
}

ul.products li.product-category img {
	opacity: 0.35;
	mix-blend-mode: luminosity;
}

ul.products li.product-category .woocommerce-loop-category__title {
	color: var(--white) !important;
	font-family: var(--font-heading) !important;
	font-size: 1.05rem !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

ul.products li.product-category mark {
	background: rgba(201,133,43,0.25);
	color: var(--accent-light) !important;
	border-radius: 4px;
	padding: 0.1em 0.4em;
}

/* Étiquette "Catégorie" en badge */
ul.products li.product-category::before {
	content: "Catégorie";
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--accent);
	color: var(--white);
	font-family: var(--font-body);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.25em 0.75em;
	border-radius: 999px;
	z-index: 2;
}

.woocommerce span.onsale {
	background: var(--accent) !important;
	border-radius: 50px;
}

/* =====================================================================
   BOUTIQUE — LAYOUT SIDEBAR + PRODUITS
   ===================================================================== */

.spirales-shop-with-sidebar {
	display: flex;
	gap: 2.5rem;
	align-items: flex-start;
}

/* Sidebar catégories */
.spirales-shop-sidebar {
	width: 220px;
	flex-shrink: 0;
	position: sticky;
	top: 110px;
}

.spirales-shop-sidebar-title {
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--wood-pale);
}

.spirales-shop-cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.spirales-shop-cat-list > li > a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.65rem 0.9rem;
	border-radius: 10px;
	color: var(--text-dark);
	font-family: var(--font-body);
	font-size: 0.92rem;
	font-weight: 500;
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.spirales-shop-cat-list > li > a:hover {
	background: var(--wood-pale);
	color: var(--wood-dark);
}

.spirales-shop-cat-list > li.active > a {
	background: linear-gradient(135deg, var(--accent), var(--accent-light));
	color: var(--white);
	font-weight: 600;
}

.spirales-shop-cat-list .cat-thumb {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
}

.spirales-shop-cat-list .cat-name {
	flex: 1;
}

.spirales-shop-cat-list .cat-count {
	font-size: 0.75rem;
	color: var(--text-muted);
	background: var(--wood-pale);
	border-radius: 999px;
	padding: 0.1em 0.5em;
	font-weight: 600;
}

.spirales-shop-cat-list > li.active .cat-count {
	background: rgba(255,255,255,0.25);
	color: var(--white);
}

/* Sous-catégories */
.spirales-shop-cat-children {
	list-style: none;
	margin: 2px 0 0 1.6rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.spirales-shop-cat-children li a {
	display: block;
	padding: 0.4rem 0.7rem;
	border-radius: 7px;
	color: var(--text-muted);
	font-size: 0.85rem;
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.spirales-shop-cat-children li a:hover {
	background: var(--wood-pale);
	color: var(--wood-dark);
}

.spirales-shop-cat-children li.active a {
	color: var(--accent);
	font-weight: 600;
}

/* Zone produits */
.spirales-shop-content {
	flex: 1;
	min-width: 0;
}

/* Mobile : sidebar au-dessus des produits */
@media (max-width: 768px) {
	.spirales-shop-with-sidebar {
		flex-direction: column;
		gap: 1.5rem;
	}

	.spirales-shop-sidebar {
		width: 100%;
		position: static;
	}

	.spirales-shop-cat-list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px;
	}

	.spirales-shop-cat-list > li > a {
		padding: 0.45rem 0.8rem;
		font-size: 0.82rem;
		border-radius: 999px;
		border: 1px solid var(--wood-pale);
	}

	.spirales-shop-cat-list .cat-thumb { display: none; }
	.spirales-shop-cat-children { display: none; }
}

/* =====================================================================
   PANIER / COMMANDE - aeration + design moderne
   ===================================================================== */

/* Espace sous la barre de navigation, comme le reste du site */
body.woocommerce-cart .ast-container,
body.woocommerce-checkout .ast-container {
	padding-top: 2.6rem !important;
}

body.woocommerce-account .ast-container {
	padding-top: 1rem !important;
}

body.woocommerce-cart #primary,
body.woocommerce-checkout #primary,
body.woocommerce-account #primary {
	margin-top: 0.5rem;
}

body.woocommerce-cart .page-title,
body.woocommerce-checkout .page-title,
body.woocommerce-account .page-title {
	font-family: var(--font-heading);
	color: var(--wood-deep);
	margin-bottom: 1.8rem;
}

/* --- Tableau du panier en carte --- */
.woocommerce-cart-form table.shop_table,
.woocommerce-checkout table.shop_table {
	border: none;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	background: var(--white);
}

.woocommerce-cart-form table.shop_table thead {
	background: var(--wood-pale);
}

.woocommerce-cart-form table.shop_table thead th {
	font-family: var(--font-heading);
	color: var(--wood-deep);
	font-weight: 600;
	letter-spacing: 0.02em;
	border: none;
	padding: 1rem 1.2rem;
}

.woocommerce-cart-form table.shop_table td {
	border: none;
	border-top: 1px solid rgba(78, 52, 36, 0.08);
	padding: 1.2rem;
	vertical-align: middle;
}

.woocommerce-cart-form table.shop_table img {
	border-radius: 10px;
	width: 72px;
	height: auto;
}

.woocommerce-cart-form .product-name a {
	color: var(--wood-deep);
	font-weight: 600;
	transition: color var(--transition-fast);
}

.woocommerce-cart-form .product-name a:hover {
	color: var(--accent);
}

.woocommerce-cart-form .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(196, 92, 51, 0.1) !important;
	color: var(--accent) !important;
	font-size: 1.1rem;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.woocommerce-cart-form .product-remove a.remove:hover {
	background: var(--accent) !important;
	color: var(--white) !important;
}

.woocommerce-cart-form .quantity .qty {
	border: 1px solid rgba(78, 52, 36, 0.15);
	border-radius: 8px;
	padding: 0.5rem 0.6rem;
	font-family: var(--font-body);
	text-align: center;
	width: 4rem;
}

.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-subtotal {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--wood-deep);
}

/* Ligne actions : code promo + mise a jour du panier */
.woocommerce-cart-form .actions {
	background: var(--cream);
	border-top: 1px solid rgba(78, 52, 36, 0.08);
}

.woocommerce-cart-form .actions {
	padding: 1.4rem !important;
}

@media (max-width: 600px) {
	.woocommerce-cart-form .actions {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
}

/* --- Disposition panier / total en deux colonnes --- */
@media (min-width: 992px) {
	body.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: 1fr 360px;
		gap: 2.5rem;
		align-items: start;
	}

	body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	body.woocommerce-cart .woocommerce > form.woocommerce-cart-form {
		grid-column: 1;
		grid-row: 2;
	}

	body.woocommerce-cart .woocommerce > .cart-collaterals {
		grid-column: 2;
		grid-row: 2;
	}
}

/* Annuler les floats WooCommerce sur le panier */
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart-collaterals {
	float: none !important;
	width: 100% !important;
}

body.woocommerce-cart .cart-collaterals .cart_totals {
	float: none !important;
	width: 100% !important;
}

.cart-collaterals .cart_totals {
	background: var(--white);
	border-radius: 16px;
	padding: 1.8rem;
	box-shadow: var(--shadow-soft);
	position: sticky;
	top: 110px;
	width: 100%;
	box-sizing: border-box;
}

.cart_totals h2 {
	font-family: var(--font-heading);
	color: var(--wood-deep);
	font-size: 1.3rem;
	margin-top: 0;
	margin-bottom: 1rem;
}

.cart_totals table.shop_table {
	border: none;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	border: none;
	border-top: 1px solid rgba(78, 52, 36, 0.08);
	padding: 0.8rem 0;
}

.cart_totals .order-total th,
.cart_totals .order-total td {
	font-family: var(--font-heading);
	font-size: 1.1rem;
	color: var(--wood-deep);
	font-weight: 700;
}

.wc-proceed-to-checkout {
	padding-top: 1.2rem !important;
}

.wc-proceed-to-checkout a.checkout-button {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	text-align: center !important;
	background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
	color: var(--white) !important;
	border-radius: 14px !important;
	padding: 1rem 1.5rem !important;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: 0.85rem;
	line-height: 1.4 !important;
	height: auto !important;
	white-space: normal !important;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.wc-proceed-to-checkout a.checkout-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-strong);
}

/* --- Notice WooCommerce (ajout panier, infos) — style palette bois --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: 3px solid var(--accent) !important;
	background: var(--cream) !important;
	color: var(--text-dark) !important;
	border-radius: 0 0 12px 12px;
	box-shadow: var(--shadow-soft);
}

.woocommerce-message::before,
.woocommerce-info::before {
	display: none !important;
}

.woocommerce-message a.button,
.woocommerce-info a.button {
	background: var(--accent) !important;
	color: var(--white) !important;
	border-radius: 999px !important;
	padding: 0.55rem 1.3rem !important;
	font-size: 0.8rem !important;
	font-weight: 600;
	border: none !important;
}

/* --- Icône carrée bleue dans la section paiement — remplacement par ℹ accent --- */
.woocommerce-checkout #payment .woocommerce-info,
.woocommerce-checkout .payment_box .woocommerce-info {
	background: rgba(201,133,43,0.08) !important;
	border-top: none !important;
	border-left: 3px solid var(--accent) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	padding: 0.9rem 1.2rem;
}

.woocommerce-checkout #payment .woocommerce-info::before,
.woocommerce-checkout .payment_box .woocommerce-info::before {
	display: none !important;
}

/* Icône bleue checkbox woocommerce-info dans la section paiement */
.woocommerce-checkout #payment ul.payment_methods .woocommerce-info {
	border-top: none !important;
}

/* --- Fond récapitulatif commande — harmonisé avec la palette --- */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
	background: var(--cream) !important;
}

.woocommerce-checkout #order_review table.shop_table {
	background: var(--white);
	border-radius: 10px;
	overflow: hidden;
	padding: 1rem;
}

.woocommerce-checkout #order_review table.shop_table tfoot tr:last-child th,
.woocommerce-checkout #order_review table.shop_table tfoot tr:last-child td {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--wood-deep);
	font-size: 1.05rem;
	border-top: 2px solid rgba(78,52,36,0.15) !important;
}

/* --- Code promo (panier et commande) --- */
.woocommerce-cart-form .coupon,
.woocommerce-form-coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
}

.woocommerce-cart-form .coupon label,
.woocommerce-form-coupon label {
	display: none;
}

.woocommerce-cart-form .coupon #coupon_code,
.woocommerce-form-coupon #coupon_code {
	border: 1px solid rgba(78, 52, 36, 0.18) !important;
	border-radius: 999px !important;
	padding: 0.75rem 1.4rem !important;
	font-family: var(--font-body);
	background: var(--white);
	min-width: 220px;
	flex: 1 1 220px;
}

.woocommerce-cart-form .coupon #coupon_code:focus,
.woocommerce-form-coupon #coupon_code:focus {
	outline: none;
	border-color: var(--accent) !important;
}

.woocommerce-cart-form .coupon button[name="apply_coupon"],
.woocommerce-form-coupon button[name="apply_coupon"] {
	background: var(--wood-deep) !important;
	color: var(--white) !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 0.75rem 1.6rem !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.8rem;
	transition: background var(--transition-fast), transform var(--transition-fast);
}

.woocommerce-cart-form .coupon button[name="apply_coupon"]:hover,
.woocommerce-form-coupon button[name="apply_coupon"]:hover {
	background: var(--accent) !important;
	transform: translateY(-2px);
}

.woocommerce form.checkout_coupon {
	border: 0 !important;
	padding: 1rem !important;
	margin-bottom: 2rem !important;
}

.woocommerce-form-coupon {
	background: var(--cream);
	border-radius: 14px;
	padding: 1.4rem;
	margin-bottom: 1.5rem;
	border: 1px dashed rgba(78, 52, 36, 0.2);
}

/* Lien "Vous avez un code promo ?" sur la page commande */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	background: var(--cream);
	border: none;
	border-left: 4px solid var(--accent);
	border-radius: 10px;
	padding: 1rem 1.4rem;
	color: var(--text-dark);
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon {
	color: var(--accent);
	font-weight: 600;
	text-decoration: underline;
}

/* --- Page commande : sections en cartes --- */
.woocommerce-checkout #customer_details {
	background: var(--white);
	border-radius: 16px;
	padding: 2rem;
	box-shadow: var(--shadow-soft);
}

/* Astra place #customer_details et #order_review en deux colonnes flottantes ;
   les champs additionnels (notes de commande) ne sont pas flottants et viennent
   se glisser entre les deux colonnes. On les fait passer sous les deux colonnes
   et on leur donne le meme style de carte que les details de facturation. */
.woocommerce-checkout .woocommerce-additional-fields {
	clear: both;
	float: none;
	width: 100%;
	background: var(--white);
	border-radius: 16px;
	padding: 2rem;
	box-shadow: var(--shadow-soft);
	margin-top: 1.5rem;
}

.woocommerce-checkout .woocommerce-additional-fields h3 {
	font-family: var(--font-heading);
	color: var(--wood-deep);
	margin-top: 0;
}

.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
	background: var(--white);
	box-shadow: var(--shadow-soft);
}

.woocommerce-checkout #order_review_heading {
	border-radius: 16px 16px 0 0;
	padding: 2.2rem 2.5rem 0.8rem;
	margin-bottom: 0;
	font-family: var(--font-heading);
	color: var(--wood-deep);
	box-shadow: none;
}

.woocommerce-checkout #order_review {
	border-radius: 0 0 16px 16px;
	padding: 0.5rem 2.5rem 2.5rem;
}

@media (min-width: 922px) {
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review {
		clear: right;
	}
}

.woocommerce-checkout table.shop_table thead th {
	font-family: var(--font-heading);
	color: var(--wood-deep);
	border: none;
	border-bottom: 2px solid rgba(78, 52, 36, 0.1);
}

.woocommerce-checkout table.shop_table td,
.woocommerce-checkout table.shop_table th {
	border: none;
	border-top: 1px solid rgba(78, 52, 36, 0.08);
}

.woocommerce-checkout h3#ship-to-different-address {
	font-family: var(--font-heading);
	color: var(--wood-deep);
	font-size: 1.05rem;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-selection {
	border: 1px solid rgba(78, 52, 36, 0.18) !important;
	border-radius: 10px !important;
	padding: 0.7rem 1rem !important;
	font-family: var(--font-body);
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus {
	outline: none;
	border-color: var(--accent) !important;
}

.woocommerce-checkout #payment {
	background: var(--cream);
	border-radius: 14px;
	margin-top: 1.5rem;
}

.woocommerce-checkout #payment div.payment_box {
	background: rgba(78, 52, 36, 0.05) !important;
	border-radius: 10px;
}

.woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 1rem;
}

.woocommerce-checkout #place_order {
	background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
	color: var(--white) !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 1.1rem 1.6rem !important;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: 0.9rem;
	width: 100%;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.woocommerce-checkout #place_order:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-strong);
}

@media (max-width: 991px) {
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review {
		padding: 1.4rem;
	}
}

/* Mobile : formulaire code promo en colonne */
@media (max-width: 600px) {
	.woocommerce-cart-form .coupon,
	.woocommerce-form-coupon {
		flex-direction: column;
		align-items: stretch;
	}

	.woocommerce-cart-form .coupon #coupon_code,
	.woocommerce-form-coupon #coupon_code {
		flex: 1 1 auto;
		width: 100% !important;
		min-width: 0;
	}

	.woocommerce-cart-form .coupon button[name="apply_coupon"],
	.woocommerce-form-coupon button[name="apply_coupon"] {
		width: 100% !important;
		text-align: center;
	}
}

/* =====================================================================
   PAGE MON COMPTE
   ===================================================================== */

/* Cercle parasite (radio button Astra) — masqué partout sur la page compte */
body.woocommerce-account .ast-container::before,
body.woocommerce-account #primary::before,
body.woocommerce-account .woocommerce::before,
body.woocommerce-account .woocommerce-MyAccount-content::before {
	display: none !important;
	content: none !important;
}

/* Liens bleus → accent */
body.woocommerce-account .woocommerce a,
body.woocommerce-account .woocommerce-LostPassword a,
body.woocommerce-account .woocommerce p a,
body.woocommerce-account .woocommerce .privacy-policy-link {
	color: var(--accent) !important;
	text-decoration: none;
}

body.woocommerce-account .woocommerce a:hover {
	color: var(--wood-dark) !important;
	text-decoration: underline;
}

/* Navigation sidebar du compte */
body.woocommerce-account .woocommerce-MyAccount-navigation {
	background: var(--white);
	border-radius: 16px;
	box-shadow: var(--shadow-soft);
	overflow: hidden;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	border: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 0.8rem 1.4rem;
	color: var(--text-dark) !important;
	font-family: var(--font-body);
	font-size: 0.92rem;
	font-weight: 500;
	text-decoration: none !important;
	transition: background var(--transition-fast), color var(--transition-fast);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--wood-pale);
	color: var(--wood-dark) !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: linear-gradient(135deg, var(--accent), var(--accent-light));
	color: var(--white) !important;
	font-weight: 600;
}

/* Zone de contenu du compte */
body.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--white);
	border-radius: 16px;
	box-shadow: var(--shadow-soft);
	padding: 1.5rem 2rem;
}

/* Pas de trait accent ni fond coloré sur les notices dans le contenu compte */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
	border-top: none !important;
	border-radius: 10px !important;
	margin-bottom: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* Tableau de commandes */
body.woocommerce-account .woocommerce-orders-table {
	border: none;
	border-radius: 12px;
	overflow: hidden;
	width: 100%;
}

body.woocommerce-account .woocommerce-orders-table thead {
	background: var(--wood-pale);
}

body.woocommerce-account .woocommerce-orders-table thead th {
	font-family: var(--font-heading);
	color: var(--wood-deep);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.9rem 1rem;
	border: none;
}

body.woocommerce-account .woocommerce-orders-table td {
	border: none;
	border-top: 1px solid rgba(78,52,36,0.07);
	padding: 0.9rem 1rem;
	color: var(--text-dark);
}

/* Boutons du compte */
body.woocommerce-account .woocommerce-Button,
body.woocommerce-account .button[name="login"],
body.woocommerce-account .button[name="register"],
body.woocommerce-account .woocommerce-MyAccount-content .button {
	background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
	color: var(--white) !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 0.75rem 2rem !important;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.82rem;
	text-decoration: none !important;
	transition: opacity var(--transition-fast);
}

body.woocommerce-account .woocommerce-Button:hover,
body.woocommerce-account .woocommerce-MyAccount-content .button:hover {
	opacity: 0.88;
}

/* Formulaires de login / inscription en cartes */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register {
	background: var(--white);
	border: 1px solid rgba(78,52,36,0.1) !important;
	border-radius: 16px !important;
	padding: 2rem !important;
	box-shadow: var(--shadow-soft);
}

/* Marge entre "Se souvenir de moi" et le bouton */
body.woocommerce-account .woocommerce-form-login .form-row.remember-me {
	margin-bottom: 1.5rem !important;
}

/* =====================================================================
   FOOTER - liens legaux
   ===================================================================== */

.spirales-footer-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem 1.6rem;
	margin-top: 1rem;
}

.spirales-footer-legal a {
	color: var(--wood-pale);
	font-size: 0.78rem;
	opacity: 0.8;
	transition: color var(--transition-fast), opacity var(--transition-fast);
}

.spirales-footer-legal a:hover {
	color: var(--accent-light);
	opacity: 1;
}

.woocommerce-Price-amount {
	color: var(--wood-deep);
	font-weight: 600;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 768px) {
	.wp-block-cover h1 {
		font-size: 2.4rem !important;
	}
	.wp-block-columns .wp-block-column:hover {
		transform: none;
	}
}

/* Reduced motion */
@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;
	}
	.reveal.js-ready {
		opacity: 1;
		transform: none;
	}
}

/* =====================================================================
   REFONTE 2025 — Tendances haut de gamme artisanat bois
   ===================================================================== */

/* -----------------------------------------------------------------
   CURSEUR PERSONNALISÉ — cercle élégant qui suit la souris
   ----------------------------------------------------------------- */
.spirales-cursor {
	position: fixed;
	top: 0; left: 0;
	width: 8px; height: 8px;
	background: var(--accent);
	border-radius: 50%;
	pointer-events: none;
	z-index: 99999;
	transform: translate(-50%, -50%);
	transition: width 0.25s ease, height 0.25s ease, opacity 0.25s ease, background 0.25s ease;
	will-change: transform;
}

.spirales-cursor-ring {
	position: fixed;
	top: 0; left: 0;
	width: 38px; height: 38px;
	border: 1.5px solid var(--accent);
	border-radius: 50%;
	pointer-events: none;
	z-index: 99998;
	transform: translate(-50%, -50%);
	transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
	opacity: 0.45;
	will-change: transform;
}

.spirales-cursor.is-hovering {
	width: 18px; height: 18px;
	background: var(--wood-medium);
	opacity: 0.7;
}

.spirales-cursor-ring.is-hovering {
	width: 58px; height: 58px;
	opacity: 0.25;
}

.spirales-cursor.on-dark {
	background: var(--accent-light);
}

.spirales-cursor-ring.on-dark {
	border-color: var(--accent-light);
}

@media (hover: none), (max-width: 768px) {
	.spirales-cursor, .spirales-cursor-ring { display: none !important; }
}

/* -----------------------------------------------------------------
   MARQUEE — bande de valeurs défilante
   ----------------------------------------------------------------- */
.spirales-marquee {
	background: var(--wood-deep);
	padding: 0.95rem 0;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	border-top: 1px solid rgba(250, 245, 238, 0.06);
	border-bottom: 1px solid rgba(250, 245, 238, 0.06);
}

.spirales-marquee::before,
.spirales-marquee::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: 100px;
	z-index: 2;
	pointer-events: none;
}

.spirales-marquee::before {
	left: 0;
	background: linear-gradient(to right, var(--wood-deep), transparent);
}

.spirales-marquee::after {
	right: 0;
	background: linear-gradient(to left, var(--wood-deep), transparent);
}

.spirales-marquee-inner {
	display: inline-flex;
	animation: spirales-marquee 32s linear infinite;
}

.spirales-marquee:hover .spirales-marquee-inner {
	animation-play-state: paused;
}

.spirales-marquee-item {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0 1.8rem;
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wood-pale);
	opacity: 0.85;
}

.spirales-marquee-item .dot {
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--accent);
	display: inline-block;
	flex-shrink: 0;
}

.spirales-marquee-item strong {
	color: var(--accent-light);
	font-weight: 600;
}

@keyframes spirales-marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* -----------------------------------------------------------------
   GRAIN TEXTURE — overlay subtil sur les sections sombres
   ----------------------------------------------------------------- */
.spirales-parallax::after,
.spirales-stats-bar::after {
	/* On réutilise ::after pour le grain ; pointer-events none pour ne pas bloquer les clics */
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
	opacity: 0.55;
	pointer-events: none;
	z-index: 2;
	mix-blend-mode: overlay;
}

/* Le scroll indicator (flèche) doit passer au dessus du grain */
.wp-block-cover::after {
	z-index: 3;
}

/* -----------------------------------------------------------------
   BARRE DE STATS — chiffres clés animés
   ----------------------------------------------------------------- */
.spirales-stats-bar {
	background: linear-gradient(135deg, var(--wood-deep) 0%, var(--wood-dark) 60%, #1a0f08 100%);
	padding: 4rem 1.5rem;
	position: relative;
	overflow: hidden;
}

.spirales-stats-bar-inner {
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	position: relative;
	z-index: 3;
}

.spirales-stat {
	text-align: center;
	padding: 2rem 1.5rem;
	border-radius: 18px;
	background: rgba(250, 245, 238, 0.04);
	border: 1px solid rgba(250, 245, 238, 0.08);
	backdrop-filter: blur(4px);
	transition: transform var(--transition-medium), background var(--transition-medium), border-color var(--transition-medium);
}

.spirales-stat:hover {
	transform: translateY(-8px);
	background: rgba(201, 133, 43, 0.14);
	border-color: rgba(201, 133, 43, 0.3);
}

.spirales-stat-number {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(2.8rem, 5vw, 4rem);
	font-weight: 800;
	color: var(--accent-light);
	line-height: 1;
	margin-bottom: 0.4rem;
}

.spirales-stat-label {
	display: block;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wood-pale);
	opacity: 0.75;
}

@media (max-width: 600px) {
	.spirales-stats-bar-inner {
		grid-template-columns: 1fr;
		max-width: 300px;
	}
}

/* -----------------------------------------------------------------
   BOUTON FLOTTANT — devis / contact
   ----------------------------------------------------------------- */
.spirales-float-cta {
	position: fixed;
	bottom: 2.2rem;
	right: 1.8rem;
	z-index: 9000;
	opacity: 0;
	transform: translateY(20px) scale(0.88);
	transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.spirales-float-cta.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.spirales-float-cta a {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	background: linear-gradient(135deg, var(--accent), var(--wood-dark));
	color: var(--white) !important;
	border-radius: 999px;
	padding: 0.85rem 1.5rem;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: 0 8px 28px rgba(43, 28, 18, 0.4), 0 2px 8px rgba(201, 133, 43, 0.35);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	white-space: nowrap;
}

.spirales-float-cta a:hover {
	transform: translateY(-4px) scale(1.03);
	box-shadow: 0 16px 40px rgba(43, 28, 18, 0.45), 0 4px 14px rgba(201, 133, 43, 0.5);
	color: var(--white) !important;
}

.spirales-float-cta svg {
	width: 16px; height: 16px;
	flex-shrink: 0;
}

/* Pulse d'attention sur le bouton flottant */
@keyframes spirales-float-pulse {
	0%, 100% { box-shadow: 0 8px 28px rgba(43, 28, 18, 0.4), 0 0 0 0 rgba(201, 133, 43, 0.5); }
	50%       { box-shadow: 0 8px 28px rgba(43, 28, 18, 0.4), 0 0 0 10px rgba(201, 133, 43, 0); }
}

.spirales-float-cta.is-visible a {
	animation: spirales-float-pulse 2.8s ease infinite;
	animation-delay: 1.5s;
}

.spirales-float-cta.is-visible a:hover {
	animation: none;
}

/* Masquer si on est sur la page contact */
body.page-id-74 .spirales-float-cta {
	display: none;
}

/* -----------------------------------------------------------------
   PAGE TRANSITION — fade-in au chargement
   ----------------------------------------------------------------- */
@keyframes spirales-page-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.entry-content {
	animation: spirales-page-in 0.6s ease forwards;
}

/* -----------------------------------------------------------------
   SECTIONS DARK améliorées — contraste plus marqué
   ----------------------------------------------------------------- */
.spirales-section-alt {
	background-color: #f0e8da;
	background-image:
		radial-gradient(circle at 5% 95%, rgba(201, 133, 43, 0.1), transparent 45%),
		radial-gradient(circle at 95% 5%, rgba(43, 28, 18, 0.06), transparent 40%);
}

/* -----------------------------------------------------------------
   CARTES COLONNES — accent border animé + shadow améliorée
   ----------------------------------------------------------------- */
.wp-block-columns .wp-block-column {
	border: 1px solid transparent;
	background-clip: padding-box;
	transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium), background-color var(--transition-medium);
}

.wp-block-columns .wp-block-column:hover {
	border-color: rgba(201, 133, 43, 0.2);
}

/* Numéro / étape dans les cartes processus */
.spirales-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent), var(--wood-medium));
	color: var(--white);
	font-family: var(--font-heading);
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 1rem;
	box-shadow: var(--shadow-soft);
}

/* -----------------------------------------------------------------
   IMAGES — overlay texte amélioré + zoom encore plus doux
   ----------------------------------------------------------------- */
.wp-block-gallery .wp-block-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, transparent 50%, rgba(43,28,18,0.5));
	border-radius: 14px;
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 1;
	pointer-events: none;
}

.wp-block-gallery .wp-block-image:hover::before {
	opacity: 1;
}

/* -----------------------------------------------------------------
   PRODUITS — badge "Nouveau" + hover amélioré
   ----------------------------------------------------------------- */
ul.products li.product {
	background: var(--white);
	box-shadow: 0 4px 16px rgba(43, 28, 18, 0.07);
	transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

ul.products li.product::after {
	content: "";
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent), var(--accent-light));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
	border-radius: 0 0 3px 3px;
}

ul.products li.product:hover::after {
	transform: scaleX(1);
}

/* -----------------------------------------------------------------
   HERO — typographie plus grande et aérée
   ----------------------------------------------------------------- */
.wp-block-cover h1 {
	font-size: clamp(3rem, 7vw, 5.5rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em;
	line-height: 1.05 !important;
	text-shadow: 0 4px 40px rgba(0,0,0,0.4);
}

.wp-block-cover p {
	font-size: clamp(1.05rem, 2.2vw, 1.35rem);
	opacity: 0.92;
	letter-spacing: 0.01em;
	line-height: 1.75;
}

/* -----------------------------------------------------------------
   SÉPARATEUR DÉCORATIF bois (entre certaines sections)
   ----------------------------------------------------------------- */
.spirales-wood-divider {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	justify-content: center;
	margin: 3rem auto;
	max-width: 280px;
}

.spirales-wood-divider::before,
.spirales-wood-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--accent), transparent);
	opacity: 0.5;
}

.spirales-wood-divider-icon {
	width: 28px; height: 28px;
	color: var(--accent);
	flex-shrink: 0;
}

/* -----------------------------------------------------------------
   RESPONSIVE GLOBAL final
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
	.wp-block-cover h1 {
		font-size: 2.6rem !important;
		line-height: 1.1 !important;
	}
	.spirales-float-cta {
		bottom: 1.2rem;
		right: 1rem;
	}
	.spirales-float-cta a {
		padding: 0.75rem 1.2rem;
		font-size: 0.78rem;
	}
	/* Stats bar : 2 colonnes sur tablette */
	.spirales-stats-bar-inner {
		grid-template-columns: repeat(2, 1fr);
		max-width: 600px;
	}
	/* Marquee : gradients plus courts sur tablette */
	.spirales-marquee::before,
	.spirales-marquee::after {
		width: 60px;
	}
	/* Hero inner container : plus de padding latéral */
	.wp-block-cover__inner-container {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}
}

@media (max-width: 480px) {
	/* Hero : taille ajustée pour très petits écrans */
	.wp-block-cover h1 {
		font-size: 2.1rem !important;
		line-height: 1.12 !important;
	}
	.wp-block-cover p {
		font-size: 0.97rem;
	}
	/* Stats bar : 1 colonne sur mobile */
	.spirales-stats-bar-inner {
		grid-template-columns: 1fr;
		max-width: 280px;
	}
	/* Colonnes Gutenberg : forcer l'empilement sur mobile */
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
		min-width: 100% !important;
	}
	/* Marquee : gradients très courts sur mobile */
	.spirales-marquee::before,
	.spirales-marquee::after {
		width: 40px;
	}
	/* Footer legaux en colonne */
	.spirales-footer-legal {
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
	}
	/* Float CTA mobile : pill compact avec texte visible */
	.spirales-float-cta a {
		padding: 0.7rem 1.1rem;
		border-radius: 999px;
		font-size: 0.72rem;
		gap: 0.4rem;
		white-space: nowrap;
		width: auto;
		height: auto;
	}
	.spirales-float-cta svg {
		width: 15px;
		height: 15px;
		flex-shrink: 0;
	}
}

/* Boutique mobile — bouton "Ajouter au panier" compact */
@media (max-width: 480px) {
	ul.products li.product .button,
	ul.products li.product a.button {
		font-size: 0.7rem !important;
		padding: 0.55rem 0.7rem !important;
		letter-spacing: 0.04em;
	}
}

/* Bouton scroll-to-top Astra — masqué partout */
.ast-scroll-top,
#ast-scroll-top,
[data-scroll-to-top] {
	display: none !important;
}

/* Hero 100vh : svh pour iOS (barre d'adresse qui bouge) */
@supports (min-height: 100svh) {
	.entry-content > .wp-block-cover:first-child {
		min-height: 100svh !important;
	}
}