/*
Theme Name: Pétence Florale
Theme URI:
Author: GinsengWeb
Author URI:
Description: Thème WordPress classique, léger et performant, codé sur mesure pour Pétence Florale, fleuriste premium à Bamako (Mali). Boutique WooCommerce, sans page builder.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: petence-florale
Domain Path: /languages
Tags: woocommerce, custom-menu, featured-images, translation-ready, accessibility-ready
*/

/* =========================================================
   0. Polices auto-hébergées (RGPD — aucun appel externe)
   ========================================================= */

/* --- Playfair Display (variable 500–700) --- */
@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-display: swap;
	font-weight: 400 700;
	src: url("assets/fonts/playfair-display-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-display: swap;
	font-weight: 400 700;
	src: url("assets/fonts/playfair-display-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Inter (variable 400–700) --- */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-display: swap;
	font-weight: 400 700;
	src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-display: swap;
	font-weight: 400 700;
	src: url("assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Cormorant Garamond (400, 500, 400 italique) --- */
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url("assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url("assets/fonts/cormorant-garamond-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-display: swap;
	font-weight: 500;
	src: url("assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-display: swap;
	font-weight: 500;
	src: url("assets/fonts/cormorant-garamond-latin-ext-500-normal.woff2") format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-display: swap;
	font-weight: 400;
	src: url("assets/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-display: swap;
	font-weight: 400;
	src: url("assets/fonts/cormorant-garamond-latin-ext-400-italic.woff2") format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================
   1. Variables — Charte Pétence Florale
   ========================================================= */
:root {
	/* Couleurs de marque */
	--pf-fuchsia: #C14177;      /* CTA, liens */
	--pf-blanc: #FFFFFF;        /* Fond principal */
	--pf-rose-pastel: #F9E2E9;  /* Fonds secondaires */
	--pf-gris: #4A4A4A;         /* Texte courant */
	--pf-noir: #2D2D2D;         /* Titres */
	--pf-dore: #D4AF37;         /* Détails, bordures */
	--pf-hover: #FFF0F5;        /* États de survol */
	--pf-gris-clair: #f4f4f4;   /* Fond très clair (hero, sections) */
	--pf-chair: #F3EAE3;        /* Nude crème, clair et nuancé (bande signature) */

	/* Typographie */
	--pf-font-titre: "Playfair Display", Georgia, "Times New Roman", serif;
	--pf-font-corps: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--pf-font-accent: "Cormorant Garamond", Georgia, serif;

	/* Échelle typographique (mobile-first) */
	--pf-fs-base: 1rem;         /* 16px */
	--pf-fs-h1: clamp(2rem, 5vw, 3rem);
	--pf-fs-h2: clamp(1.6rem, 4vw, 2.25rem);
	--pf-fs-h3: clamp(1.3rem, 3vw, 1.75rem);
	--pf-lh-base: 1.65;
	--pf-lh-titre: 1.2;

	/* Espacements */
	--pf-space-xs: 0.5rem;
	--pf-space-sm: 1rem;
	--pf-space-md: 1.5rem;
	--pf-space-lg: 2.5rem;
	--pf-space-xl: 4rem;

	/* Mise en page */
	--pf-max-width: 1200px;
	--pf-gutter: 1.25rem;
	--pf-radius: 6px;
	--pf-header-h: 72px;

	/* Effets */
	--pf-shadow: 0 2px 12px rgba(45, 45, 45, 0.08);
	--pf-transition: 0.25s ease;
}

/* =========================================================
   2. Reset léger / normalisation
   ========================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	font-family: var(--pf-font-corps);
	font-size: var(--pf-fs-base);
	line-height: var(--pf-lh-base);
	color: var(--pf-gris);
	background-color: var(--pf-blanc);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--pf-fuchsia);
	text-decoration: none;
	transition: color var(--pf-transition);
}

a:hover,
a:focus {
	color: var(--pf-noir);
	text-decoration: underline;
}

button {
	font: inherit;
	cursor: pointer;
}

ul,
ol {
	padding-left: 1.25rem;
}

/* =========================================================
   3. Typographie
   ========================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--pf-font-titre);
	color: var(--pf-noir);
	line-height: var(--pf-lh-titre);
	margin: 0 0 var(--pf-space-sm);
	font-weight: 400;
}

h1 { font-size: var(--pf-fs-h1); }
h2 { font-size: var(--pf-fs-h2); }
h3 { font-size: var(--pf-fs-h3); }

p {
	margin: 0 0 var(--pf-space-sm);
}

.pf-accent {
	font-family: var(--pf-font-accent);
	font-style: italic;
	color: var(--pf-fuchsia);
}

/* =========================================================
   4. Mise en page utilitaire
   ========================================================= */
.pf-container {
	width: 100%;
	max-width: var(--pf-max-width);
	margin-inline: auto;
	padding-inline: var(--pf-gutter);
}

/* =========================================================
   5. Accessibilité — skip link & screen-reader
   ========================================================= */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--pf-noir);
	color: var(--pf-blanc);
	border-radius: 0 0 var(--pf-radius) 0;
}

.skip-link:focus {
	left: 0;
	color: var(--pf-blanc);
	text-decoration: none;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--pf-blanc);
	clip: auto !important;
	clip-path: none;
	color: var(--pf-noir);
	display: block;
	height: auto;
	left: 5px;
	top: 5px;
	padding: 0.75rem 1rem;
	width: auto;
	z-index: 100000;
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* =========================================================
   6. Header (desktop) — barre sticky, logo centré, menu
   ========================================================= */

/* --- Sticky + conteneur --- */
.pf-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: var(--pf-blanc);
	border-bottom: 1px solid var(--pf-rose-pastel);
}

.pf-header-inner {
	max-width: var(--pf-max-width);
	margin-inline: auto;
	padding: var(--pf-space-sm) var(--pf-gutter);
}

/* --- Ligne 1 : barre 3 zones --- */
.pf-header-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.pf-header-left {
	justify-self: start;
	display: flex;
	align-items: center;
	gap: var(--pf-space-md);
}

.pf-header-logo {
	justify-self: center;
}

.pf-header-actions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: var(--pf-space-md);
}

/* --- Logo --- */
.pf-header-logo img {
	display: block;
	height: 56px;
	width: auto;
}

.pf-site-title {
	margin: 0;
	font-family: var(--pf-font-titre);
	font-size: var(--pf-fs-h3);
	line-height: var(--pf-lh-titre);
}

.pf-site-title a {
	color: var(--pf-noir);
	text-decoration: none;
}

.pf-site-title a:hover,
.pf-site-title a:focus {
	color: var(--pf-fuchsia);
}

/* --- Utilitaires (recherche, compte, panier) --- */
.pf-search-toggle,
.pf-account,
.pf-cart {
	display: inline-flex;
	align-items: center;
	gap: var(--pf-space-xs);
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--pf-noir);
	font-family: var(--pf-font-corps);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition: color var(--pf-transition);
}

.pf-search-toggle svg,
.pf-account svg,
.pf-cart svg {
	width: 22px;
	height: 22px;
}

.pf-search-toggle:hover,
.pf-search-toggle:focus,
.pf-account:hover,
.pf-account:focus,
.pf-cart:hover,
.pf-cart:focus {
	color: var(--pf-fuchsia);
}

/* --- Pastille panier --- */
.pf-cart {
	position: relative;
}

.pf-cart-count {
	position: absolute;
	top: -0.5em;
	right: -0.7em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background-color: var(--pf-fuchsia);
	color: var(--pf-blanc);
	font-size: 0.65rem;
	font-weight: 600;
	line-height: 1;
}

/* --- Ligne 2 : menu principal centré --- */
.pf-primary-nav {
	display: flex;
	justify-content: center;
	padding-block: var(--pf-space-xs);
}

.pf-menu {
	display: flex;
	align-items: center;
	gap: var(--pf-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pf-menu li {
	position: relative;
}

.pf-menu a {
	display: block;
	position: relative;
	padding-block: var(--pf-space-xs);
	font-family: var(--pf-font-corps);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pf-noir);
	text-decoration: none;
	transition: color var(--pf-transition);
}

.pf-menu a:hover,
.pf-menu a:focus {
	color: var(--pf-fuchsia);
}

/* Soulignement fuchsia animé (hover/focus/actif) */
.pf-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background-color: var(--pf-fuchsia);
	transform: scaleX(0);
	transition: transform var(--pf-transition);
}

.pf-menu a:hover::after,
.pf-menu a:focus::after,
.pf-menu .current-menu-item > a::after,
.pf-menu .current_page_item > a::after {
	transform: scaleX(1);
}

.pf-menu .current-menu-item > a,
.pf-menu .current_page_item > a {
	color: var(--pf-fuchsia);
}

/* --- Sous-menus (depth 2) --- */
.pf-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	margin: 0;
	padding: var(--pf-space-xs) 0;
	list-style: none;
	background-color: var(--pf-blanc);
	border: 1px solid var(--pf-rose-pastel);
	box-shadow: var(--pf-shadow);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--pf-transition);
	z-index: 10;
}

.pf-menu li:hover > .sub-menu,
.pf-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.pf-menu .sub-menu a {
	padding: var(--pf-space-xs) var(--pf-space-sm);
	text-transform: none;
	letter-spacing: 0;
}

.pf-menu .sub-menu a::after {
	display: none;
}

/* --- Panneau de recherche --- */
.pf-search-panel[hidden] {
	display: none;
}

.pf-search-panel {
	display: flex;
	justify-content: center;
	padding: var(--pf-space-md) var(--pf-gutter);
	border-top: 1px solid var(--pf-dore);
	background-color: var(--pf-rose-pastel);
}

.pf-search-panel .search-form {
	display: flex;
	gap: var(--pf-space-xs);
	width: 100%;
	max-width: 560px;
}

.pf-search-panel .search-form label {
	flex: 1;
	margin: 0;
}

.pf-search-panel .search-field {
	width: 100%;
	height: 44px;
	padding: 0 var(--pf-space-sm);
	border: 1px solid var(--pf-gris);
	border-radius: var(--pf-radius);
	background-color: var(--pf-blanc);
	color: var(--pf-gris);
	font-family: var(--pf-font-corps);
	font-size: var(--pf-fs-base);
}

.pf-search-panel .search-field:focus {
	outline: 2px solid var(--pf-fuchsia);
	outline-offset: 1px;
}

.pf-search-panel .search-submit {
	height: 44px;
	padding: 0 var(--pf-space-md);
	border: 0;
	border-radius: var(--pf-radius);
	background-color: var(--pf-fuchsia);
	color: var(--pf-blanc);
	font-family: var(--pf-font-corps);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: background-color var(--pf-transition);
}

.pf-search-panel .search-submit:hover,
.pf-search-panel .search-submit:focus {
	background-color: var(--pf-noir);
}

/* --- Hamburger masqué en desktop (réactivé en mobile, brief C) --- */
.pf-nav-toggle {
	display: none;
}

/* ---------------------------------------------------------
   Header responsive — mobile / tablette (≤ 768px)
   Le desktop (≥ 769px) reste strictement inchangé.
   --------------------------------------------------------- */
@media (max-width: 768px) {

	/* 1. Hamburger visible (3 barres dessinées en CSS) */
	.pf-nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		padding: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
		color: var(--pf-noir);
	}

	.pf-nav-toggle__bars,
	.pf-nav-toggle__bars::before,
	.pf-nav-toggle__bars::after {
		content: "";
		display: block;
		width: 24px;
		height: 2px;
		background-color: var(--pf-noir);
		transition: transform var(--pf-transition), background-color var(--pf-transition);
	}

	.pf-nav-toggle__bars {
		position: relative;
	}

	.pf-nav-toggle__bars::before {
		position: absolute;
		left: 0;
		top: -7px;
	}

	.pf-nav-toggle__bars::after {
		position: absolute;
		left: 0;
		top: 7px;
	}

	/* État ouvert → croix */
	.pf-nav-toggle[aria-expanded="true"] .pf-nav-toggle__bars {
		background-color: transparent;
	}

	.pf-nav-toggle[aria-expanded="true"] .pf-nav-toggle__bars::before {
		transform: translateY(7px) rotate(45deg);
	}

	.pf-nav-toggle[aria-expanded="true"] .pf-nav-toggle__bars::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Resserrer la ligne 1 */
	.pf-header-left,
	.pf-header-actions {
		gap: var(--pf-space-sm);
	}

	/* 2. Menu en tiroir */
	.pf-primary-nav {
		display: none;
		padding-block: 0;
	}

	.pf-primary-nav.is-open {
		display: block;
	}

	.pf-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.pf-menu a {
		padding: var(--pf-space-sm);
		border-bottom: 1px solid var(--pf-rose-pastel);
	}

	.pf-menu a:hover,
	.pf-menu a:focus {
		background-color: var(--pf-hover);
	}

	/* En colonne : le soulignement animé est remplacé par le passage fuchsia */
	.pf-menu a::after {
		display: none;
	}

	/* Sous-menus dépliés dans le tiroir (pas de survol au tactile) */
	.pf-menu .sub-menu {
		position: static;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		background-color: var(--pf-rose-pastel);
	}

	.pf-menu .sub-menu a {
		padding-left: var(--pf-space-lg);
	}

	/* 3. Libellés utilitaires masqués visuellement mais lus par les lecteurs d'écran */
	.pf-search-label,
	.pf-account-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		border: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* 4. Logo réduit */
	.pf-header-logo img {
		height: 44px;
	}

	/* 5. Panneau de recherche compacté */
	.pf-search-panel {
		padding: var(--pf-space-sm) var(--pf-gutter);
	}

	/* 6. Bloquer le scroll de fond quand le tiroir est ouvert */
	body.pf-nav-open {
		overflow: hidden;
	}
}

/* =========================================================
   7. Footer — charcoal, 3 colonnes, retour-en-haut
   ========================================================= */

/* --- Base --- */
.pf-footer {
	background-color: var(--pf-noir);
	color: var(--pf-blanc);
	padding-block: var(--pf-space-xl);
}

.pf-footer-inner {
	max-width: var(--pf-max-width);
	margin-inline: auto;
	padding-inline: var(--pf-gutter);
}

.pf-footer a {
	color: var(--pf-blanc);
	text-decoration: none;
	transition: color var(--pf-transition);
}

.pf-footer a:hover,
.pf-footer a:focus {
	color: var(--pf-fuchsia);
}

/* --- Grille 3 colonnes --- */
.pf-footer-main {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: var(--pf-space-lg);
	align-items: start;
	padding-block: var(--pf-space-lg);
}

/* --- Col 1 : marque + coordonnées --- */
.pf-footer-logo {
	display: block;
	width: 150px;
	height: auto;
	margin-bottom: var(--pf-space-sm);
}

.pf-footer-contact {
	font-style: normal;
	font-size: 0.875rem;
	line-height: var(--pf-lh-base);
}

/* --- Col 2 : menu (Playfair) --- */
.pf-footer-menu {
	display: flex;
	flex-direction: column;
	gap: var(--pf-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pf-footer-menu a {
	font-family: var(--pf-font-titre);
	font-size: 1.05rem;
	color: var(--pf-blanc);
}

/* --- Col 3 : réseaux sociaux --- */
.pf-footer-heading {
	margin-bottom: var(--pf-space-sm);
	font-family: var(--pf-font-titre);
	font-size: var(--pf-fs-h3);
	color: var(--pf-dore);
}

.pf-social-list {
	display: flex;
	gap: var(--pf-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Scopé sous .pf-footer pour primer sur « .pf-footer a » (doré, pas blanc) */
.pf-footer .pf-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--pf-dore);
	border-radius: 50%;
	color: var(--pf-dore);
	transition: background-color var(--pf-transition), color var(--pf-transition);
}

.pf-footer .pf-social-link svg {
	width: 20px;
	height: 20px;
}

.pf-footer .pf-social-link:hover,
.pf-footer .pf-social-link:focus {
	background-color: var(--pf-dore);
	color: var(--pf-noir);
}

/* --- Barre basse --- */
.pf-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--pf-space-md);
	flex-wrap: wrap;
	margin-top: var(--pf-space-md);
	padding-block: var(--pf-space-md);
	border-top: 1px solid color-mix(in srgb, var(--pf-blanc) 15%, transparent);
}

.pf-footer-copyright {
	margin: 0;
	font-size: 0.8rem;
	color: color-mix(in srgb, var(--pf-blanc) 70%, transparent);
}

.pf-footer-legal {
	display: flex;
	gap: var(--pf-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pf-footer-legal a {
	font-size: 0.8rem;
}

/* --- Bouton retour-en-haut (flottant) --- */
.pf-back-to-top {
	position: fixed;
	bottom: var(--pf-space-md);
	right: var(--pf-space-md);
	z-index: 900;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background-color: var(--pf-dore);
	color: var(--pf-noir);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--pf-transition), visibility var(--pf-transition), transform var(--pf-transition);
}

.pf-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.pf-back-to-top-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Footer responsive (≤ 768px) : tout en 1 colonne centrée --- */
@media (max-width: 768px) {

	.pf-footer-main {
		grid-template-columns: 1fr;
		gap: var(--pf-space-md);
		justify-items: center;
		text-align: center;
	}

	.pf-social-list {
		justify-content: center;
	}

	.pf-footer-bottom {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* =========================================================
   8. Hero — page d'accueil (texte gauche / image droite)
   ========================================================= */

.pf-hero {
	background-color: var(--pf-gris-clair);
	padding-block: var(--pf-space-xl);
}

.pf-hero-inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--pf-space-xl);
	align-items: center;
	max-width: var(--pf-max-width);
	margin-inline: auto;
	padding-inline: var(--pf-gutter);
}

/* --- Texte --- */
.pf-hero-title {
	margin: 0 0 var(--pf-space-sm);
	font-family: var(--pf-font-titre);
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	font-weight: 400;
	line-height: 1.1;
	color: var(--pf-noir);
}

.pf-hero-accent {
	color: var(--pf-dore);
}

.pf-hero-subtitle {
	max-width: 46ch;
	margin: 0 0 var(--pf-space-lg);
	font-family: var(--pf-font-corps);
	font-size: 1.15rem;
	line-height: var(--pf-lh-base);
	color: var(--pf-gris);
}

/* --- Bouton (pill) --- */
.pf-hero-cta {
	display: inline-block;
	padding: var(--pf-space-sm) var(--pf-space-lg);
	border-radius: 999px;
	background-color: var(--pf-fuchsia);
	color: var(--pf-blanc);
	font-family: var(--pf-font-corps);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition: background-color var(--pf-transition);
}

.pf-hero-cta:hover,
.pf-hero-cta:focus {
	background-color: var(--pf-noir);
	color: var(--pf-blanc);
}

/* --- Image --- */
.pf-hero-image {
	display: block;
	width: 100%;
	height: auto;
}

.pf-hero-placeholder {
	aspect-ratio: 3 / 4;
	background-color: var(--pf-rose-pastel);
}

/* --- Hero responsive (≤ 768px) : empilé, centré --- */
@media (max-width: 768px) {

	.pf-hero-inner {
		grid-template-columns: 1fr;
		gap: var(--pf-space-lg);
		text-align: center;
		justify-items: center;
	}

	.pf-hero-subtitle {
		margin-inline: auto;
	}

	.pf-hero-media {
		width: 100%;
		max-width: 420px;
	}
}

/* =========================================================
   9. WooCommerce — archives & carte produit
   ========================================================= */

/* --- Conteneur : caler la boutique sur la largeur du site ---
   (le wrapper de contenu WooCommerce, PAS le <body>.woocommerce,
   sinon header/footer pleine largeur seraient contraints) */
.woocommerce-page .content-area {
	width: 100%;
	max-width: var(--pf-max-width);
	margin-inline: auto;
	padding-inline: var(--pf-gutter);
	float: none;
}

/* --- En-tête d'archive --- */
.woocommerce-products-header {
	padding-block: var(--pf-space-lg) var(--pf-space-md);
}

.woocommerce-products-header__title {
	margin: 0 0 var(--pf-space-xs);
	font-family: var(--pf-font-titre);
	font-size: var(--pf-fs-h2);
	color: var(--pf-noir);
}

/* Fil d'Ariane discret */
body.woocommerce .woocommerce-breadcrumb {
	margin-bottom: var(--pf-space-md);
	font-family: var(--pf-font-corps);
	font-size: 0.8rem;
	color: var(--pf-gris);
}

body.woocommerce .woocommerce-breadcrumb a {
	color: var(--pf-gris);
	text-decoration: none;
}

body.woocommerce .woocommerce-breadcrumb a:hover,
body.woocommerce .woocommerce-breadcrumb a:focus {
	color: var(--pf-fuchsia);
}

/* Barre résultats / tri */
.woocommerce-result-count {
	margin-bottom: var(--pf-space-md);
	font-family: var(--pf-font-corps);
	font-size: 0.85rem;
	color: var(--pf-gris);
}

.woocommerce-ordering select {
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--pf-rose-pastel);
	border-radius: var(--pf-radius);
	background-color: var(--pf-blanc);
	color: var(--pf-noir);
	font-family: var(--pf-font-corps);
}

/* --- Grille produits (3 colonnes) ---
   Neutralise float/largeurs/marges WooCommerce par défaut.
   Préfixe body.woocommerce pour primer sur la feuille WooCommerce. */
body.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin: 0 0 var(--pf-space-lg);
	padding: 0;
	list-style: none;
}

body.woocommerce ul.products::before,
body.woocommerce ul.products::after {
	content: none;
}

body.woocommerce ul.products li.product {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
}

/* Surclasse la largeur fixe de WooCommerce (.columns-N li.product : 30.75%…),
   spécificité (0,4,3) > règle WC (0,4,2), sans !important.
   La largeur réelle est gérée par la grille (pistes 1fr). */
body.woocommerce ul.products[class*="columns-"] li.product {
	width: auto;
	margin: 0;
	float: none;
}

/* --- Carte produit --- */
body.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--pf-blanc);
	border: 1px solid var(--pf-rose-pastel);
	border-radius: var(--pf-radius);
	transition: transform var(--pf-transition), box-shadow var(--pf-transition);
}

body.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--pf-shadow);
}

/* Image carrée, fond clair pour les vignettes manquantes */
body.woocommerce ul.products li.product img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	background-color: var(--pf-gris-clair);
}

/* Lien de carte : jamais souligné (annule a:hover de la base) */
body.woocommerce ul.products li.product a.woocommerce-loop-product__link,
body.woocommerce ul.products li.product a.woocommerce-loop-product__link:hover,
body.woocommerce ul.products li.product a.woocommerce-loop-product__link:focus {
	text-decoration: none;
}

/* Titre Playfair noir, fuchsia au survol, jamais souligné */
body.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: var(--pf-space-sm) var(--pf-gutter) 0;
	font-family: var(--pf-font-titre);
	font-size: 1.2rem;
	color: var(--pf-noir);
	text-decoration: none;
	transition: color var(--pf-transition);
}

body.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	color: var(--pf-fuchsia);
}

/* Prix noir (écrase le vert WooCommerce par défaut), jamais souligné */
body.woocommerce ul.products li.product .price {
	padding: var(--pf-space-xs) var(--pf-gutter) var(--pf-space-sm);
	color: var(--pf-noir);
	font-family: var(--pf-font-corps);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

body.woocommerce ul.products li.product .price .woocommerce-Price-amount {
	color: var(--pf-noir);
}

body.woocommerce ul.products li.product .price del {
	color: var(--pf-gris);
	opacity: 0.7;
}

body.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

/* (Le bouton de carte a été retiré : l'action « add to cart » de boucle
   est désenregistrée et remplacée par l'incrustation .pf-card-cta — voir
   section 13. Aucun .button n'est donc rendu dans la carte.) */

/* --- Correctifs : étirement interne + anti-retour à la ligne --- */

/* Le lien interne occupe toute la largeur de la carte : sans cela,
   l'<img> impose une largeur réduite et le titre/prix se tassent. */
body.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	display: block;
	width: 100%;
}

/* Prix sur une seule ligne (« 80 000 CFA » : espace de milliers + CFA) */
body.woocommerce ul.products li.product .price,
body.woocommerce ul.products li.product .price .woocommerce-Price-amount {
	white-space: nowrap;
}

/* --- Responsive : 2 colonnes --- */
@media (max-width: 980px) {

	body.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--pf-space-md);
	}
}

@media (max-width: 480px) {

	/* 1 colonne : à ~360px, 2 colonnes serrent trop les titres Playfair */
	body.woocommerce ul.products {
		grid-template-columns: 1fr;
		gap: var(--pf-space-md);
	}

	body.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 1.1rem;
	}
}

/* --- Bloc SEO d'archive (sous la grille, discret) --- */
.pf-archive-seo {
	max-width: var(--pf-max-width);
	margin: var(--pf-space-xl) auto var(--pf-space-xl);
	padding: var(--pf-space-lg) var(--pf-gutter) 0;
	border-top: 1px solid var(--pf-rose-pastel);
	font-family: var(--pf-font-corps);
	font-size: 0.9rem;
	line-height: var(--pf-lh-base);
	color: var(--pf-gris);
}

.pf-archive-seo h2,
.pf-archive-seo h3 {
	margin: 0 0 var(--pf-space-sm);
	font-family: var(--pf-font-titre);
	font-size: var(--pf-fs-h3);
	color: var(--pf-noir);
}

.pf-archive-seo p {
	margin: 0 0 var(--pf-space-sm);
}

.pf-archive-seo a {
	color: var(--pf-fuchsia);
}

/* =========================================================
   10. WooCommerce — fiche produit
   ========================================================= */

/* Titre produit */
body.woocommerce div.product .product_title {
	font-family: var(--pf-font-titre);
	color: var(--pf-noir);
}

/* Prix (écrase l'olive WooCommerce) */
body.woocommerce div.product .summary .price,
body.woocommerce div.product .summary .price .woocommerce-Price-amount {
	color: var(--pf-noir);
	font-family: var(--pf-font-corps);
	font-size: 1.4rem;
	font-weight: 600;
}

/* Disponibilité */
body.woocommerce div.product .stock {
	color: var(--pf-gris);
	font-size: 0.85rem;
}

/* Méta produit */
body.woocommerce div.product .product_meta {
	font-size: 0.8rem;
	color: var(--pf-gris);
}

body.woocommerce div.product .product_meta a {
	color: var(--pf-gris);
	text-decoration: none;
}

body.woocommerce div.product .product_meta a:hover,
body.woocommerce div.product .product_meta a:focus {
	color: var(--pf-fuchsia);
}

/* Quantité */
/* form.cart reste en BLOC (il contient nos champs date/message qui doivent
   s'empiler). On aligne SEULEMENT la quantité et le bouton en inline. */
body.woocommerce div.product form.cart .quantity {
	display: inline-block;
	vertical-align: middle;
	float: none;
	margin: 0;
}

body.woocommerce div.product form.cart .quantity .qty {
	box-sizing: border-box;
	width: 4.5rem;
	height: 52px;
	padding: 0 0.5rem;
	border: 1px solid var(--pf-rose-pastel);
	border-radius: var(--pf-radius);
	text-align: center;
	font-family: var(--pf-font-corps);
}

/* Bouton « Ajouter au panier » : pill fuchsia */
body.woocommerce div.product form.cart .single_add_to_cart_button {
	display: inline-block;
	vertical-align: middle;
	float: none; /* annule le float:left de WooCommerce (sinon bouton à gauche) */
	box-sizing: border-box;
	height: 52px;
	margin-left: var(--pf-space-sm);
	padding: 0 2.5rem;
	border: 0;
	border-radius: 999px;
	background-color: var(--pf-fuchsia);
	color: var(--pf-blanc);
	font-family: var(--pf-font-corps);
	font-size: 0.95rem;
	line-height: 52px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: center;
	transition: background-color var(--pf-transition);
}

body.woocommerce div.product form.cart .single_add_to_cart_button:hover,
body.woocommerce div.product form.cart .single_add_to_cart_button:focus {
	background-color: var(--pf-noir);
	color: var(--pf-blanc);
}

/* --- Champs date de livraison + message --- */
.pf-product-fields {
	display: flex;
	flex-direction: column;
	gap: var(--pf-space-sm);
	margin-block: var(--pf-space-md);
}

.pf-field {
	display: flex;
	flex-direction: column;
	gap: var(--pf-space-xs);
	margin: 0;
}

.pf-field label {
	font-family: var(--pf-font-corps);
	font-size: 0.9rem;
	color: var(--pf-noir);
}

.pf-field .required {
	border: 0;
	color: var(--pf-fuchsia);
	text-decoration: none;
}

.pf-field__input {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--pf-rose-pastel);
	border-radius: var(--pf-radius);
	background-color: var(--pf-blanc);
	color: var(--pf-gris);
	font-family: var(--pf-font-corps);
	font-size: var(--pf-fs-base);
}

.pf-field__input:focus {
	border-color: var(--pf-fuchsia);
	outline: 2px solid var(--pf-fuchsia);
	outline-offset: 1px;
}

textarea.pf-field__input {
	min-height: 4.5em;
	resize: vertical;
}

/* --- Onglets (description / avis) --- */
body.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--pf-space-md);
	margin: 0 0 var(--pf-space-md);
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--pf-rose-pastel);
}

body.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}

body.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

body.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
body.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

body.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: var(--pf-space-xs) 0;
	border-bottom: 2px solid transparent;
	font-family: var(--pf-font-corps);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--pf-noir);
	text-decoration: none;
}

body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
body.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
body.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus {
	color: var(--pf-fuchsia);
	border-bottom-color: var(--pf-fuchsia);
}

body.woocommerce div.product .woocommerce-tabs .panel h2 {
	font-family: var(--pf-font-titre);
	color: var(--pf-noir);
}

/* --- Galerie produit --- */
body.woocommerce div.product .woocommerce-product-gallery {
	margin-bottom: var(--pf-space-lg);
}

body.woocommerce div.product .woocommerce-product-gallery img {
	border-radius: var(--pf-radius);
}

/* --- Produits liés « Vous aimerez aussi » --- */
body.woocommerce .related.products > h2 {
	margin-bottom: var(--pf-space-md);
	font-family: var(--pf-font-titre);
	font-size: var(--pf-fs-h2);
	color: var(--pf-noir);
}
/* (la grille 3 col + les cartes réutilisent la section 9 :
   body.woocommerce ul.products, y compris le responsive 3→2→1) */

/* --- Mise en page galerie (gauche, collante) + résumé (droite) --- */
.pf-product-layout {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: var(--pf-space-xl);
	align-items: start;
}

/* Rythme vertical régulier dans la colonne de droite (de l'air) */
body.woocommerce div.product .pf-product-layout .summary > * {
	margin-block: 0 var(--pf-space-md);
}

body.woocommerce div.product .pf-product-layout .summary > *:last-child {
	margin-bottom: 0;
}

body.woocommerce div.product .pf-product-layout .summary .product_title {
	line-height: var(--pf-lh-titre);
}

/* Badge promo hors flux (sinon il occuperait une cellule de la grille) */
.pf-product-layout .onsale {
	position: absolute;
	top: var(--pf-space-sm);
	left: var(--pf-space-sm);
	z-index: 2;
}

.pf-single-gallery {
	position: sticky;
	top: 1.5rem;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: var(--pf-space-sm);
}

.pf-single-gallery__item {
	margin: 0;
}

.pf-single-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--pf-radius);
	background-color: var(--pf-gris-clair);
}

/* Neutralise width:48% + float:right de WooCommerce DANS la grille
   (spécificité 0,4,2 > règle WC 0,3,2, sans !important) → la colonne
   droite remplit toute sa cellule. */
body.woocommerce div.product .pf-product-layout .summary {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}

/* --- Description en accordéon (natif <details>, fermé) --- */
.pf-accordion {
	margin-top: var(--pf-space-md);
	border-top: 1px solid var(--pf-rose-pastel);
	border-bottom: 1px solid var(--pf-rose-pastel);
}

.pf-accordion__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pf-space-sm);
	padding: var(--pf-space-sm) 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--pf-font-titre);
	color: var(--pf-noir);
}

.pf-accordion__title::-webkit-details-marker {
	display: none;
}

/* Chevron */
.pf-accordion__title::after {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid var(--pf-fuchsia);
	border-bottom: 2px solid var(--pf-fuchsia);
	transform: rotate(45deg);
	transition: transform var(--pf-transition);
}

.pf-accordion[open] .pf-accordion__title::after {
	transform: rotate(-135deg);
}

.pf-accordion__body {
	padding-block: 0 var(--pf-space-md);
	font-family: var(--pf-font-corps);
	color: var(--pf-gris);
	line-height: var(--pf-lh-base);
}

.pf-accordion__body a {
	color: var(--pf-fuchsia);
}

.pf-accordion__body h2,
.pf-accordion__body h3 {
	font-family: var(--pf-font-titre);
	color: var(--pf-noir);
}

/* Responsive : 1 colonne, galerie non collante */
@media (max-width: 768px) {

	.pf-product-layout {
		grid-template-columns: 1fr;
	}

	.pf-single-gallery {
		position: relative; /* désactive le sticky mais garde l'ancrage des étiquettes */
		top: auto;
	}
}

/* =========================================================
   11. WooCommerce — bande signature (Alima)
   ========================================================= */

.pf-signature {
	display: grid;
	grid-template-columns: 0.45fr 0.55fr;
	align-items: center;
	gap: var(--pf-space-xl);
	margin-block: var(--pf-space-xl);
	padding: var(--pf-space-xl);
	background-color: var(--pf-chair);
	border-radius: 16px;
}

/* Image encadrée : marge (le fond chair l'entoure), filet doré + ombre douce */
.pf-signature__media {
	align-self: center;
}

.pf-signature__media img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--pf-dore);
	border-radius: var(--pf-radius);
	box-shadow: var(--pf-shadow);
}

.pf-signature__content {
	padding: 0;
}

.pf-signature__title {
	margin: 0 0 var(--pf-space-sm);
	font-family: var(--pf-font-titre);
	font-size: var(--pf-fs-h2);
	color: var(--pf-noir);
}

.pf-signature__content p {
	max-width: 52ch;
	margin: 0 0 var(--pf-space-sm);
	font-family: var(--pf-font-corps);
	line-height: var(--pf-lh-base);
	color: var(--pf-gris);
}

.pf-signature__content p:last-child {
	margin-bottom: 0;
}

/* Responsive : empilé (image encadrée au-dessus, texte dessous) */
@media (max-width: 768px) {

	.pf-signature {
		grid-template-columns: 1fr;
		gap: var(--pf-space-lg);
		padding: var(--pf-space-lg);
	}
}

/* =========================================================
   12. Accueil — Sélection du moment (onglets + cartes)
   ========================================================= */

.pf-selection {
	max-width: var(--pf-max-width);
	margin-inline: auto;
	padding-inline: var(--pf-gutter);
	padding-block: var(--pf-space-xl);
	text-align: center;
}

/* --- En-tête --- */
.pf-selection__head {
	margin-bottom: var(--pf-space-lg);
}

.pf-selection__head h2 {
	margin: 0 0 var(--pf-space-sm);
	font-family: var(--pf-font-titre);
	font-size: var(--pf-fs-h2);
	color: var(--pf-noir);
}

.pf-selection__accent {
	font-family: var(--pf-font-accent);
	font-style: italic;
	color: var(--pf-fuchsia);
}

.pf-selection__subtitle {
	max-width: 60ch;
	margin-inline: auto;
	font-family: var(--pf-font-corps);
	color: var(--pf-gris);
}

/* --- Onglets --- */
.pf-selection__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pf-space-md);
	margin-bottom: var(--pf-space-lg);
}

.pf-selection__tab {
	padding: var(--pf-space-xs) var(--pf-space-xs);
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font-family: var(--pf-font-corps);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--pf-gris);
	transition: color var(--pf-transition), border-color var(--pf-transition);
}

.pf-selection__tab.is-active,
.pf-selection__tab:hover,
.pf-selection__tab:focus-visible {
	color: var(--pf-fuchsia);
	border-bottom-color: var(--pf-fuchsia);
}

/* --- Panneaux --- */
.pf-tab-panel[hidden] {
	display: none;
}

/* --- Grille + cartes (langage boutique, scopé .pf-selection) --- */
.pf-selection ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.pf-selection ul.products li.product {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--pf-blanc);
	border: 1px solid var(--pf-rose-pastel);
	border-radius: var(--pf-radius);
	transition: transform var(--pf-transition), box-shadow var(--pf-transition);
}

.pf-selection ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--pf-shadow);
}

/* Lien de carte : jamais souligné (annule a:hover de la base) */
.pf-selection ul.products li.product a.woocommerce-loop-product__link,
.pf-selection ul.products li.product a.woocommerce-loop-product__link:hover,
.pf-selection ul.products li.product a.woocommerce-loop-product__link:focus {
	display: block;
	width: 100%;
	text-decoration: none;
}

.pf-selection ul.products li.product img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	background-color: var(--pf-gris-clair);
}

.pf-selection ul.products li.product .woocommerce-loop-product__title {
	padding: var(--pf-space-sm) var(--pf-gutter) 0;
	font-family: var(--pf-font-titre);
	font-size: 1.2rem;
	color: var(--pf-noir);
	text-decoration: none;
	transition: color var(--pf-transition);
}

.pf-selection ul.products li.product:hover .woocommerce-loop-product__title {
	color: var(--pf-fuchsia);
}

.pf-selection ul.products li.product .price {
	padding: var(--pf-space-xs) var(--pf-gutter) var(--pf-space-sm);
	color: var(--pf-noir);
	font-family: var(--pf-font-corps);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.pf-selection ul.products li.product .price .woocommerce-Price-amount {
	color: var(--pf-noir);
	white-space: nowrap;
}

/* (Bouton de carte retiré : incrustation .pf-card-cta au survol, voir section 13.) */

/* --- CTA boutique --- */
.pf-selection__cta {
	display: inline-block;
	margin-top: var(--pf-space-lg);
	padding: var(--pf-space-sm) var(--pf-space-lg);
	border-radius: 999px;
	background-color: var(--pf-fuchsia);
	color: var(--pf-blanc);
	font-family: var(--pf-font-corps);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition: background-color var(--pf-transition);
}

.pf-selection__cta:hover,
.pf-selection__cta:focus {
	background-color: var(--pf-noir);
	color: var(--pf-blanc);
}

/* --- Responsive : grille 3 → 2 → 1 --- */
@media (max-width: 980px) {

	.pf-selection ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--pf-space-md);
	}
}

@media (max-width: 480px) {

	.pf-selection ul.products {
		grid-template-columns: 1fr;
		gap: var(--pf-space-md);
	}

	.pf-selection__tabs {
		gap: var(--pf-space-sm);
	}
}

/* =========================================================
   13. Carte produit — incrustation « Commander » au survol
   Markup commun (boutique + accueil), donc styles NON scopés :
   .pf-card-media enveloppe la vignette dans le lien de carte.
   ========================================================= */

.pf-card-media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background-color: var(--pf-gris-clair);
}

.pf-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Pilule « Commander » posée sur l'image (purement visuelle) */
.pf-card-cta {
	position: absolute;
	left: 50%;
	bottom: var(--pf-space-sm);
	transform: translateX(-50%) translateY(8px);
	padding: var(--pf-space-xs) var(--pf-space-md);
	border-radius: 999px;
	background-color: var(--pf-fuchsia);
	color: var(--pf-blanc);
	font-family: var(--pf-font-corps);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--pf-transition), transform var(--pf-transition);
}

/* Révélation au survol / focus clavier de la carte */
li.product:hover .pf-card-cta,
li.product:focus-within .pf-card-cta {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Tactile (pas de survol) : la pilule reste visible */
@media (hover: none) {

	.pf-card-cta {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

/* =========================================================
   14. WooCommerce — Filtres (barre horizontale)
   (la section 13 est « incrustation cartes » ; on poursuit en 14)
   ========================================================= */

.pf-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pf-space-md) var(--pf-space-lg);
	margin-bottom: var(--pf-space-lg);
	padding-bottom: var(--pf-space-md);
	border-bottom: 1px solid var(--pf-rose-pastel);
}

.pf-filters__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pf-space-xs);
}

.pf-filters__label {
	margin-right: var(--pf-space-xs);
	font-family: var(--pf-font-corps);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--pf-gris);
}

.pf-filter-chip {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--pf-rose-pastel);
	border-radius: 999px;
	font-family: var(--pf-font-corps);
	font-size: 0.85rem;
	color: var(--pf-gris);
	text-decoration: none;
	transition: color var(--pf-transition), border-color var(--pf-transition), background-color var(--pf-transition);
}

.pf-filter-chip:hover,
.pf-filter-chip:focus {
	color: var(--pf-fuchsia);
	border-color: var(--pf-fuchsia);
	text-decoration: none;
}

.pf-filter-chip.is-active {
	background-color: var(--pf-fuchsia);
	border-color: var(--pf-fuchsia);
	color: var(--pf-blanc);
}

@media (max-width: 768px) {

	.pf-filters {
		gap: var(--pf-space-sm) var(--pf-space-md);
	}
}

/* =========================================================
   15. Cartes — Étiquettes (NOUVEAU / EN PROMO)
   Classes maison, stylées une fois (boutique + accueil).
   ========================================================= */

.pf-badges {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.pf-badge {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	font-family: var(--pf-font-corps);
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--pf-blanc);
}

.pf-badge--sale {
	background-color: var(--pf-fuchsia);
}

.pf-badge--new {
	background-color: var(--pf-noir);
}

@media (max-width: 768px) {

	.pf-badges {
		top: 0.5rem;
		left: 0.5rem;
	}

	.pf-badge {
		padding: 0.2rem 0.5rem;
		font-size: 0.65rem;
	}
}

/* =========================================================
   16. Accueil — Univers (3 cartes pleine largeur)
   ========================================================= */

.pf-univers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	min-height: clamp(520px, 62vh, 740px);
	grid-auto-rows: 1fr; /* la rangée remplit le min-height → cartes pleine hauteur */
}

.pf-univers__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--pf-space-xl) var(--pf-space-lg);
	text-align: center;
	overflow: hidden;
}

/* --- Carte gauche : fuchsia, texte blanc --- */
.pf-univers__card--left {
	background-color: var(--pf-fuchsia);
}

.pf-univers__card--left .pf-univers__title,
.pf-univers__card--left .pf-univers__text {
	color: var(--pf-blanc);
}

/* --- Carte droite : chair, texte foncé --- */
.pf-univers__card--right {
	background-color: var(--pf-chair);
}

.pf-univers__card--right .pf-univers__title {
	color: var(--pf-noir);
}

.pf-univers__card--right .pf-univers__text {
	color: var(--pf-gris);
}

/* Image en arche (cartes côtés) */
.pf-univers__img {
	width: min(72%, 320px);
	aspect-ratio: 3 / 4;
	object-fit: cover;
	margin-bottom: var(--pf-space-md);
	border-radius: 45% 45% 10px 10px / 32% 32% 10px 10px;
	box-shadow: var(--pf-shadow);
}

.pf-univers__title {
	margin: 0 0 var(--pf-space-sm);
	font-family: var(--pf-font-titre);
	font-size: var(--pf-fs-h2);
}

.pf-univers__text {
	max-width: 34ch;
	margin: 0 0 var(--pf-space-md);
	font-family: var(--pf-font-corps);
	line-height: var(--pf-lh-base);
}

/* Bouton = lien souligné (pas la pilule) */
.pf-univers__btn {
	display: inline-block;
	padding-bottom: 0.2rem;
	border-bottom: 1px solid currentColor;
	font-family: var(--pf-font-corps);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	transition: opacity var(--pf-transition);
}

.pf-univers__card--left .pf-univers__btn {
	color: var(--pf-blanc);
}

.pf-univers__card--right .pf-univers__btn {
	color: var(--pf-noir);
}

.pf-univers__btn:hover,
.pf-univers__btn:focus {
	opacity: 0.7;
	text-decoration: none;
}

/* --- Carte milieu : image de fond + voile + overlay --- */
.pf-univers__card--mid {
	padding: 0;
	color: var(--pf-blanc);
}

.pf-univers__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pf-univers__card--mid::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.22); /* voile discret pour la lisibilité */
}

.pf-univers__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--pf-space-lg);
}

.pf-univers__mid-text {
	margin: 0;
	font-family: var(--pf-font-corps);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--pf-blanc);
}

.pf-univers__logo {
	margin: auto 0;
	max-width: 160px;
	height: auto;
}

/* --- Responsive : empilé ≤900px --- */
@media (max-width: 900px) {

	.pf-univers {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		min-height: 0;
	}

	.pf-univers__card {
		min-height: clamp(420px, 70vh, 560px);
	}
}

/* =========================================================
   17. Accueil — Inspiration par occasion (tuiles catégories)
   ========================================================= */

.pf-occasions {
	max-width: var(--pf-max-width);
	margin-inline: auto;
	margin-bottom: var(--pf-space-xl);
	padding-top: clamp(3.5rem, 8vw, 7rem); /* plus d'air avant le titre */
	padding-bottom: var(--pf-space-xl);
	padding-inline: var(--pf-gutter);
}

.pf-occasions__head {
	margin-bottom: var(--pf-space-lg);
	text-align: center;
}

.pf-occasions__head h2 {
	margin: 0 0 var(--pf-space-sm);
	font-family: var(--pf-font-titre);
	font-size: var(--pf-fs-h2);
	color: var(--pf-noir);
}

.pf-occasions__accent {
	font-family: var(--pf-font-accent);
	font-style: italic;
	color: var(--pf-fuchsia);
}

.pf-occasions__subtitle {
	max-width: 60ch;
	margin-inline: auto;
	font-family: var(--pf-font-corps);
	color: var(--pf-gris);
}

.pf-occasions__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pf-space-md);
}

.pf-occasion-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 220px;
	max-width: 280px;
	text-decoration: none;
}

.pf-occasion-card:hover,
.pf-occasion-card:focus {
	text-decoration: none;
}

.pf-occasion-card__media {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--pf-radius);
}

.pf-occasion-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--pf-transition);
}

.pf-occasion-card:hover .pf-occasion-card__media img,
.pf-occasion-card:focus .pf-occasion-card__media img {
	transform: scale(1.04);
}

/* Nom SOUS l'image, en flux normal */
.pf-occasion-card__name {
	margin-top: var(--pf-space-sm);
	padding: 0 var(--pf-space-xs);
	font-family: var(--pf-font-titre);
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	text-align: center;
	color: var(--pf-noir);
	transition: color var(--pf-transition);
}

.pf-occasion-card:hover .pf-occasion-card__name,
.pf-occasion-card:focus .pf-occasion-card__name {
	color: var(--pf-fuchsia);
}

@media (max-width: 768px) {

	.pf-occasions__grid {
		gap: var(--pf-space-sm);
	}
}

/* =========================================================
   18. Accueil — Notre histoire (teaser, état au repos)
   ========================================================= */

.pf-histoire {
	position: relative;
	max-width: var(--pf-max-width);
	margin-inline: auto;
	padding-block: var(--pf-space-xl);
	padding-inline: var(--pf-gutter);
	text-align: center;
}

.pf-histoire__inner {
	position: relative;
	max-width: 820px;
	margin-inline: auto;
	padding-top: clamp(3rem, 7vw, 6rem); /* place le titre plus bas → l'image le chevauche */
}

/* Grand titre (derrière l'image) — noir, fin, statique */
.pf-histoire__title {
	position: relative;
	z-index: 1;
	max-width: 14ch;
	margin: 0 auto;
	font-family: var(--pf-font-titre);
	font-size: clamp(2.5rem, 6vw, 5rem);
	font-weight: 400;
	line-height: 1.05;
	color: var(--pf-noir);
}

/* Bouquet centré, en chevauchement (effet collage) */
.pf-histoire__img {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%) scale(var(--pf-img-scale, 1));
	transform-origin: center;
	transition: transform var(--pf-transition);
	z-index: 2;
	width: min(40%, 340px);
	height: auto;
}

/* Bloc « N + NOTRE HISTOIRE » cliquable */
.pf-histoire__link {
	position: relative;
	display: inline-block;
	margin-top: var(--pf-space-xl);
	text-decoration: none;
}

.pf-histoire__link:hover,
.pf-histoire__link:focus {
	text-decoration: none;
}

.pf-histoire__bigletter {
	display: block;
	font-family: var(--pf-font-titre);
	font-size: clamp(6rem, 14vw, 12rem);
	line-height: 1;
	--fill: 0%;
	background-image: linear-gradient(to top, var(--pf-fuchsia) var(--fill), var(--pf-rose-pastel) var(--fill));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.pf-histoire__label {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
	font-family: var(--pf-font-corps);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--pf-noir);
	white-space: nowrap;
}

/* Responsive : chevauchement plus compact */
@media (max-width: 768px) {

	.pf-histoire__inner {
		padding-top: clamp(2rem, 12vw, 4rem);
	}

	.pf-histoire__img {
		width: min(52%, 240px);
	}
}

/* Mouvement réduit : état statique (titre noir, N rose, image normale) */
@media (prefers-reduced-motion: reduce) {

	.pf-histoire__title,
	.pf-histoire__bigletter {
		--fill: 0%;
	}

	.pf-histoire__img {
		--pf-img-scale: 1;
		transition: none;
	}
}

/* =========================================================
   19. Accueil — Boutique Bamako (fond rose, panneau fuchsia)
   ========================================================= */

.pf-boutique {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--pf-space-xl);
	align-items: center;
	/* Boîte : marges blanches autour (plus de fond pleine largeur) */
	margin-block: clamp(2rem, 5vw, 4rem);
	margin-inline: clamp(1.5rem, 6vw, 6rem);
	background-color: var(--pf-rose-pastel);
	padding: clamp(2.5rem, 5vw, 4rem);
}

/* --- Panneau fuchsia --- */
.pf-boutique__panel {
	position: relative;
	padding: var(--pf-space-lg);
	padding-left: var(--pf-space-xl); /* place pour le label vertical */
	background-color: var(--pf-fuchsia);
}

.pf-boutique__img {
	display: block;
	width: 100%;
	height: auto;
}

.pf-boutique__vlabel {
	position: absolute;
	top: var(--pf-space-lg);
	left: var(--pf-space-sm);
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--pf-font-corps);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--pf-blanc);
}

/* Fin filet blanc (haut-droite) */
.pf-boutique__panel::after {
	content: "";
	position: absolute;
	top: var(--pf-space-lg);
	right: var(--pf-space-lg);
	width: 2px;
	height: 28%;
	background-color: var(--pf-blanc);
}

/* --- Contenu --- */
.pf-boutique__title {
	margin: 0 0 var(--pf-space-md);
	font-family: var(--pf-font-titre);
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	line-height: var(--pf-lh-titre);
	color: var(--pf-noir);
	/* graisse héritée du 400 global */
}

.pf-boutique__accent {
	font-family: var(--pf-font-accent);
	font-style: italic;
	color: var(--pf-fuchsia);
	white-space: nowrap;
}

.pf-boutique__text {
	max-width: 40ch;
	margin: 0 0 var(--pf-space-md);
	font-family: var(--pf-font-corps);
	line-height: var(--pf-lh-base);
	color: var(--pf-gris);
}

.pf-boutique__cta {
	display: inline-block;
	padding-bottom: 0.2rem;
	border-bottom: 1px solid var(--pf-noir);
	font-family: var(--pf-font-corps);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pf-noir);
	text-decoration: none;
	transition: color var(--pf-transition), border-color var(--pf-transition);
}

.pf-boutique__cta:hover,
.pf-boutique__cta:focus {
	color: var(--pf-fuchsia);
	border-color: var(--pf-fuchsia);
	text-decoration: none;
}

/* --- Responsive : 1 colonne (panneau puis contenu) --- */
@media (max-width: 900px) {

	.pf-boutique {
		grid-template-columns: 1fr;
		gap: var(--pf-space-lg);
	}
}

/* =========================================================
   20. Page — Notre histoire (Bloc A : hero, intro, galerie)
   ========================================================= */

/* Hero plein cadre (bloc pleine largeur, comme « Univers ») */
.pf-story-hero__img {
	display: block;
	width: 100%;
	height: clamp(320px, 45vw, 560px);
	object-fit: cover;
}

/* Intro centrée */
.pf-story-intro {
	max-width: 760px;
	margin-inline: auto;
	padding-block: var(--pf-space-xl);
	padding-inline: var(--pf-gutter);
	text-align: center;
}

.pf-story-intro__title {
	margin: 0 0 var(--pf-space-md);
	font-family: var(--pf-font-titre);
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 3rem);
	color: var(--pf-noir);
}

.pf-story-intro__text {
	margin: 0;
	font-family: var(--pf-font-corps);
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.8;
	color: var(--pf-gris);
}

/* Galerie 3 images — composition décalée (escalier) */
.pf-story-gallery {
	display: grid;
	grid-template-columns: 1fr 0.85fr 1fr;
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: start;
	max-width: var(--pf-max-width);
	margin-inline: auto;
	padding-block: var(--pf-space-xl);
	padding-inline: var(--pf-gutter);
}

.pf-story-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pf-radius);
}

/* L'image centrale descend (effet escalier) */
.pf-story-gallery__img:nth-child(2) {
	margin-top: clamp(1.5rem, 6vw, 4.5rem);
}

/* Responsive : 1 colonne empilée, sans décalage */
@media (max-width: 720px) {

	.pf-story-gallery {
		grid-template-columns: 1fr;
		gap: var(--pf-space-md);
	}

	.pf-story-gallery__img:nth-child(2) {
		margin-top: 0;
	}
}

/* =========================================================
   21. Page — Notre histoire (Bloc B : Philosophie + Approche)
   ========================================================= */

/* Philosophie — même esprit centré que l'intro */
.pf-story-philo {
	max-width: 760px;
	margin-inline: auto;
	padding-block: var(--pf-space-xl);
	padding-inline: var(--pf-gutter);
	text-align: center;
}

.pf-story-philo__title {
	margin: 0 0 var(--pf-space-md);
	font-family: var(--pf-font-titre);
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 3rem);
	color: var(--pf-noir);
}

.pf-story-philo__text p {
	margin: 0 0 var(--pf-space-md);
	font-family: var(--pf-font-corps);
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.8;
	color: var(--pf-gris);
}

.pf-story-philo__text p:last-child {
	margin-bottom: 0;
}

/* Approche — bandeau pleine largeur (bloc grid, comme « Univers ») */
.pf-story-approche {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: clamp(420px, 50vw, 620px);
}

.pf-story-approche__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pf-story-approche__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2rem, 5vw, 4.5rem);
	background-color: var(--pf-noir);
	color: var(--pf-blanc);
}

.pf-story-approche__title {
	margin: 0 0 var(--pf-space-sm);
	font-family: var(--pf-font-titre);
	font-weight: 400;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--pf-blanc);
}

/* Filet de marque (fuchsia) */
.pf-story-approche__rule {
	display: block;
	width: 48px;
	height: 2px;
	margin: 0 0 var(--pf-space-md);
	background-color: var(--pf-fuchsia);
}

.pf-story-approche__text p {
	margin: 0 0 var(--pf-space-md);
	font-family: var(--pf-font-corps);
	font-size: clamp(0.95rem, 1.3vw, 1.0625rem);
	line-height: 1.8;
	color: var(--pf-blanc);
	opacity: 0.92;
}

.pf-story-approche__text p:last-child {
	margin-bottom: 0;
}

/* Responsive : empilé (image au-dessus, panneau dessous) */
@media (max-width: 820px) {

	.pf-story-approche {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.pf-story-approche__img {
		max-height: 60vh;
	}
}

/* =========================================================
   22. Page — Notre histoire (Bloc C : Confiance + carrousel + Fondatrice)
   ========================================================= */

/* Confiance — texte centré (même esprit que philo / intro) */
.pf-story-confiance {
	max-width: 760px;
	margin-inline: auto;
	padding-block: var(--pf-space-xl) var(--pf-space-md);
	padding-inline: var(--pf-gutter);
	text-align: center;
}

.pf-story-confiance__title {
	margin: 0 0 var(--pf-space-md);
	font-family: var(--pf-font-titre);
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 3rem);
	color: var(--pf-noir);
}

.pf-story-confiance__text p {
	margin: 0 0 var(--pf-space-md);
	font-family: var(--pf-font-corps);
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.8;
	color: var(--pf-gris);
}

.pf-story-confiance__text p:last-child {
	margin-bottom: 0;
}

/* Carrousel léger */
.pf-carousel {
	position: relative;
	max-width: var(--pf-max-width);
	margin-inline: auto;
	padding-block: var(--pf-space-lg);
	padding-inline: var(--pf-gutter);
}

.pf-carousel__track {
	display: flex;
	gap: var(--pf-space-md);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.pf-carousel__track::-webkit-scrollbar {
	display: none;
}

.pf-carousel__slide {
	flex: 0 0 auto;
	width: min(82%, 760px);
	scroll-snap-align: center;
	margin: 0;
}

.pf-carousel__slide img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pf-radius);
}

.pf-carousel__cap {
	margin-top: var(--pf-space-sm);
	font-size: 0.875rem;
	color: var(--pf-gris);
	text-align: left;
}

.pf-carousel__nav {
	position: absolute;
	top: 38%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--pf-rose-pastel);
	border-radius: 50%;
	background-color: var(--pf-blanc);
	color: var(--pf-noir);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--pf-shadow);
	transition: background-color var(--pf-transition), color var(--pf-transition), border-color var(--pf-transition);
}

.pf-carousel__prev {
	left: 0;
}

.pf-carousel__next {
	right: 0;
}

.pf-carousel__nav:hover,
.pf-carousel__nav:focus {
	background-color: var(--pf-fuchsia);
	border-color: var(--pf-fuchsia);
	color: var(--pf-blanc);
}

/* Bandeau partagé (Fondatrice ; motif identique à Approche) */
.pf-story-band {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: clamp(420px, 50vw, 620px);
}

.pf-story-founder__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pf-story-founder__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2rem, 5vw, 4.5rem);
	background-color: var(--pf-noir);
	color: var(--pf-blanc);
}

.pf-story-founder__name {
	margin: 0;
	font-family: var(--pf-font-titre);
	font-weight: 400;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--pf-blanc);
}

.pf-story-founder__role {
	display: block;
	margin-top: var(--pf-space-xs);
	margin-bottom: var(--pf-space-md);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--pf-dore);
}

.pf-story-founder__text p {
	margin: 0 0 var(--pf-space-md);
	font-family: var(--pf-font-corps);
	font-size: clamp(0.95rem, 1.3vw, 1.0625rem);
	line-height: 1.8;
	color: var(--pf-blanc);
	opacity: 0.92;
}

.pf-story-founder__text p:last-child {
	margin-bottom: 0;
}

/* Responsive */
@media (max-width: 820px) {

	.pf-story-band {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.pf-story-founder__img {
		max-height: 60vh;
	}
}

@media (max-width: 720px) {

	.pf-carousel__slide {
		width: 90%;
	}

	.pf-carousel__nav {
		width: 38px;
		height: 38px;
		font-size: 1.25rem;
	}
}

/* =========================================================
   23. Page — Notre histoire (Bloc D : clôture)
   ========================================================= */

.pf-story-closing {
	max-width: 860px;
	margin-inline: auto;
	padding-block: clamp(3rem, 7vw, 5.5rem);
	padding-inline: var(--pf-gutter);
	text-align: center;
}

.pf-story-closing__emblem {
	display: block;
	width: auto;
	max-height: 72px;
	height: auto;
	margin: 0 auto var(--pf-space-lg);
}

.pf-story-closing__quote {
	margin: 0 0 var(--pf-space-xl);
	padding: 0;
	border: 0;
	quotes: none;
	font-family: var(--pf-font-titre);
	font-weight: 400;
	font-size: clamp(1.5rem, 3.2vw, 2.25rem);
	line-height: 1.45;
	color: var(--pf-noir);
}

.pf-story-closing__btn {
	display: inline-block;
	padding: 0.9em 2.2em;
	border: 1px solid var(--pf-noir);
	border-radius: var(--pf-radius);
	background-color: transparent;
	color: var(--pf-noir);
	font-family: var(--pf-font-corps);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-decoration: none;
	transition: background-color var(--pf-transition), color var(--pf-transition), border-color var(--pf-transition);
}

.pf-story-closing__btn:hover,
.pf-story-closing__btn:focus-visible {
	background-color: var(--pf-fuchsia);
	border-color: var(--pf-fuchsia);
	color: var(--pf-blanc);
	text-decoration: none;
}

/* Parallaxe (Bloc A) : préparation perf de l'image centrale de la galerie */
.pf-story-gallery__img:nth-child(2) {
	will-change: transform;
}

/* =========================================================
   24. Instagram « Follow us » (avant le footer)
   ========================================================= */

.pf-insta {
	max-width: var(--pf-max-width);
	margin-inline: auto;
	padding-block: var(--pf-space-xl);
	padding-inline: var(--pf-gutter);
	text-align: center;
}

.pf-insta__head {
	margin-bottom: var(--pf-space-lg);
}

.pf-insta__title {
	margin: 0;
	font-family: var(--pf-font-titre);
	font-weight: 400;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	color: var(--pf-noir);
}

.pf-insta__handle {
	display: inline-block;
	margin-top: var(--pf-space-xs);
	color: var(--pf-fuchsia);
	letter-spacing: 0.08em;
	text-decoration: none;
}

.pf-insta__handle:hover,
.pf-insta__handle:focus-visible {
	text-decoration: underline;
}

.pf-insta__feed {
	margin-top: var(--pf-space-md);
}

/* =========================================================
   25. Page — Contact (bannière, infos, formulaire CF7)
   ========================================================= */

/* Bannière plein cadre (bloc pleine largeur, comme « Univers ») */
.pf-contact-hero__img {
	display: block;
	width: 100%;
	height: clamp(280px, 38vw, 480px);
	object-fit: cover;
}

.pf-contact {
	max-width: 720px;
	margin-inline: auto;
	padding-block: var(--pf-space-xl);
	padding-inline: var(--pf-gutter);
	text-align: center;
}

.pf-contact__title {
	margin: 0 0 var(--pf-space-md);
	font-family: var(--pf-font-titre);
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 3rem);
	color: var(--pf-noir);
}

.pf-contact__subtitle p {
	margin: 0 0 var(--pf-space-lg);
	font-family: var(--pf-font-corps);
	line-height: 1.8;
	color: var(--pf-gris);
}

/* Infos (téléphone | filet | e-mail) */
.pf-contact__info {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-block: var(--pf-space-lg);
}

.pf-contact__divider {
	flex: 0 0 auto;
	width: 1px;
	height: 44px;
	background-color: var(--pf-dore);
}

.pf-contact__item {
	margin: 0;
}

.pf-contact__label {
	display: block;
	margin-bottom: var(--pf-space-xs);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--pf-gris);
}

.pf-contact__item a {
	color: var(--pf-noir);
	text-decoration: none;
	transition: color var(--pf-transition);
}

.pf-contact__item a:hover,
.pf-contact__item a:focus-visible {
	color: var(--pf-fuchsia);
}

/* Formulaire CF7 */
.pf-contact__form {
	margin-top: var(--pf-space-lg);
	text-align: left;
}

.pf-contact__form p {
	margin: 0 0 var(--pf-space-md);
}

.pf-contact__form input[type="text"],
.pf-contact__form input[type="email"],
.pf-contact__form input[type="tel"],
.pf-contact__form textarea {
	width: 100%;
	padding: 0.75em 0;
	border: 0;
	border-bottom: 1px solid var(--pf-gris-clair);
	background-color: transparent;
	color: var(--pf-noir);
	font: inherit;
}

.pf-contact__form input[type="text"]:focus,
.pf-contact__form input[type="email"]:focus,
.pf-contact__form input[type="tel"]:focus,
.pf-contact__form textarea:focus {
	outline: none;
	border-bottom-color: var(--pf-fuchsia);
}

.pf-contact__form ::placeholder {
	color: var(--pf-gris);
}

.pf-contact__form textarea {
	min-height: 120px;
	resize: vertical;
}

/* Submit : bouton contour → fuchsia (motif .pf-story-closing__btn) */
.pf-contact__form .wpcf7-submit {
	display: inline-block;
	margin-top: var(--pf-space-md);
	padding: 0.9em 2.2em;
	border: 1px solid var(--pf-noir);
	border-radius: var(--pf-radius);
	background-color: transparent;
	color: var(--pf-noir);
	font-family: var(--pf-font-corps);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	cursor: pointer;
	transition: background-color var(--pf-transition), color var(--pf-transition), border-color var(--pf-transition);
}

.pf-contact__form .wpcf7-submit:hover,
.pf-contact__form .wpcf7-submit:focus-visible {
	background-color: var(--pf-fuchsia);
	border-color: var(--pf-fuchsia);
	color: var(--pf-blanc);
}

.pf-contact__form .wpcf7-response-output {
	margin-top: var(--pf-space-md);
	border-radius: var(--pf-radius);
	font-size: 0.9rem;
}

.pf-contact__form .wpcf7-not-valid-tip {
	font-size: 0.8rem;
	color: var(--pf-fuchsia);
}

/* Responsive : infos en colonne, filet masqué */
@media (max-width: 640px) {

	.pf-contact__info {
		flex-direction: column;
	}

	.pf-contact__divider {
		display: none;
	}
}

/* Contact — « Votre message » : cadre complet (boîte) au lieu du soulignement */
.pf-contact__form textarea {
	border: 1px solid var(--pf-gris-clair);
	border-radius: var(--pf-radius);
	padding: 0.85em 1em;
	min-height: 140px;
}

.pf-contact__form textarea:focus {
	border-color: var(--pf-fuchsia);
}

/* =========================================================
   26. WooCommerce — Mon compte
   (scopé .woocommerce-account ; n'affecte ni boutique ni fiche ni panier)
   ========================================================= */

/* Conteneur centré */
body.woocommerce-account .woocommerce {
	max-width: var(--pf-max-width);
	margin-inline: auto;
}

/* Titre « Mon compte » (rendu par page.php) */
body.woocommerce-account .pf-page__title {
	margin-bottom: var(--pf-space-xl);
	font-family: var(--pf-font-titre);
	font-weight: 400;
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	color: var(--pf-noir);
	text-align: center;
}

/* Mise en pile : nav en haut, contenu dessous (annule les floats WC) */
body.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	width: 100%;
	margin: 0 0 var(--pf-space-lg);
}

body.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

/* Navigation → barre d'onglets horizontale centrée */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: inline-block;
	padding: 0 0 var(--pf-space-xs);
	border-bottom: 2px solid transparent;
	color: var(--pf-noir);
	text-decoration: none;
	transition: color var(--pf-transition), border-color var(--pf-transition);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
	color: var(--pf-fuchsia);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--pf-fuchsia);
	border-bottom-color: var(--pf-fuchsia);
}

/* Liens de contenu (hors boutons) en fuchsia */
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-Button) {
	color: var(--pf-fuchsia);
	text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-Button):hover,
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-Button):focus-visible {
	text-decoration: underline;
}

/* Boutons en contour (uniquement dans l'espace compte ; motif clôture) */
body.woocommerce-account .woocommerce a.button,
body.woocommerce-account .woocommerce button.button,
body.woocommerce-account .woocommerce input.button,
body.woocommerce-account .woocommerce button.woocommerce-Button,
body.woocommerce-account .woocommerce input.woocommerce-Button {
	padding: 0.9em 2.2em;
	border: 1px solid var(--pf-noir);
	border-radius: var(--pf-radius);
	background-color: transparent;
	color: var(--pf-noir);
	font-family: var(--pf-font-corps);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	cursor: pointer;
	transition: background-color var(--pf-transition), color var(--pf-transition), border-color var(--pf-transition);
}

body.woocommerce-account .woocommerce a.button:hover,
body.woocommerce-account .woocommerce a.button:focus-visible,
body.woocommerce-account .woocommerce button.button:hover,
body.woocommerce-account .woocommerce button.button:focus-visible,
body.woocommerce-account .woocommerce input.button:hover,
body.woocommerce-account .woocommerce input.button:focus-visible,
body.woocommerce-account .woocommerce button.woocommerce-Button:hover,
body.woocommerce-account .woocommerce button.woocommerce-Button:focus-visible,
body.woocommerce-account .woocommerce input.woocommerce-Button:hover,
body.woocommerce-account .woocommerce input.woocommerce-Button:focus-visible {
	background-color: var(--pf-fuchsia);
	border-color: var(--pf-fuchsia);
	color: var(--pf-blanc);
}

/* Responsive : onglets resserrés */
@media (max-width: 640px) {

	body.woocommerce-account .woocommerce-MyAccount-navigation ul {
		gap: var(--pf-space-md);
	}
}

/* =========================================================
   27. WooCommerce — Mon compte (tableaux & adresses)
   (scopé .woocommerce-account ; classes WooCommerce standard)
   ========================================================= */

/* Intro (« Les adresses suivantes… », etc.) */
body.woocommerce-account .woocommerce-MyAccount-content > p {
	margin-bottom: var(--pf-space-lg);
	text-align: left;
	color: var(--pf-gris);
}

/* --- Tableaux (commandes + détail) : boîte à filet doré --- */
body.woocommerce-account table.woocommerce-orders-table,
body.woocommerce-account table.woocommerce-table--order-details {
	width: 100%;
	margin: 0 0 var(--pf-space-lg);
	border: 1px solid var(--pf-dore);
	border-collapse: collapse;
}

body.woocommerce-account table.woocommerce-orders-table th,
body.woocommerce-account table.woocommerce-table--order-details th {
	padding: 1rem;
	text-align: left;
	font-family: var(--pf-font-corps);
	font-weight: 600;
	border-bottom: 1px solid var(--pf-dore);
}

body.woocommerce-account table.woocommerce-orders-table td,
body.woocommerce-account table.woocommerce-table--order-details td {
	padding: 1rem;
	border-bottom: 1px solid var(--pf-gris-clair);
}

/* Colonne Actions (commandes) alignée à droite */
body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
	text-align: right;
}

/* Totaux du détail (alignés à droite, « Total » en gras) */
body.woocommerce-account table.woocommerce-table--order-details tfoot th,
body.woocommerce-account table.woocommerce-table--order-details tfoot td,
body.woocommerce-account table.woocommerce-table--order-details .product-total {
	text-align: right;
}

body.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child th,
body.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child td {
	font-weight: 600;
	color: var(--pf-noir);
}

/* --- Titres de section (détail + adresses) en Playfair --- */
body.woocommerce-account .woocommerce-order-details__title,
body.woocommerce-account .woocommerce-column__title,
body.woocommerce-account .woocommerce-Address-title h3 {
	font-family: var(--pf-font-titre);
	font-weight: 400;
	color: var(--pf-noir);
}

/* --- Grilles d'adresses (détail + page adresses) : 2 colonnes --- */
body.woocommerce-account .woocommerce-columns--addresses,
body.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
}

/* Annule les colonnes flottées de WooCommerce dans ces grilles */
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address,
body.woocommerce-account .woocommerce-columns--addresses .woocommerce-column {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/* Boîte filet doré : .woocommerce-Address (page adresses) et
   <address> autonome (détail commande) — sans double encadrement */
body.woocommerce-account .woocommerce-Address,
body.woocommerce-account .woocommerce-customer-details address {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--pf-dore);
	border-radius: var(--pf-radius);
	font-style: normal;
}

/* Lien « Modifier » d'une adresse */
body.woocommerce-account .woocommerce-Address-title .edit {
	color: var(--pf-fuchsia);
	text-decoration: none;
}

body.woocommerce-account .woocommerce-Address-title .edit:hover,
body.woocommerce-account .woocommerce-Address-title .edit:focus-visible {
	text-decoration: underline;
}

/* --- Responsive : grilles d'adresses en 1 colonne --- */
@media (max-width: 768px) {

	body.woocommerce-account .woocommerce-columns--addresses,
	body.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   28. WooCommerce — Mon compte (formulaires + téléchargements)
   (scopé .woocommerce-account ; classes WooCommerce standard)
   ========================================================= */

/* Boîte de formulaire (détails du compte + édition d'adresse) */
body.woocommerce-account .woocommerce-EditAccountForm,
body.woocommerce-account .woocommerce-address-fields {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 1px solid var(--pf-dore);
	border-radius: var(--pf-radius);
}

/* Libellés */
body.woocommerce-account .woocommerce-EditAccountForm label,
body.woocommerce-account .woocommerce-address-fields label {
	display: block;
	margin-bottom: var(--pf-space-xs);
	font-weight: 600;
	color: var(--pf-noir);
}

body.woocommerce-account .woocommerce-EditAccountForm .required,
body.woocommerce-account .woocommerce-address-fields .required {
	border: 0;
	color: var(--pf-fuchsia);
	text-decoration: none;
}

/* Champs */
body.woocommerce-account .woocommerce-EditAccountForm .input-text,
body.woocommerce-account .woocommerce-EditAccountForm select,
body.woocommerce-account .woocommerce-EditAccountForm textarea,
body.woocommerce-account .woocommerce-address-fields .input-text,
body.woocommerce-account .woocommerce-address-fields select,
body.woocommerce-account .woocommerce-address-fields textarea {
	width: 100%;
	padding: 0.7em 0.9em;
	border: 1px solid var(--pf-dore);
	border-radius: var(--pf-radius);
	background-color: transparent;
	color: var(--pf-noir);
	font: inherit;
}

body.woocommerce-account .woocommerce-EditAccountForm .input-text:focus,
body.woocommerce-account .woocommerce-EditAccountForm select:focus,
body.woocommerce-account .woocommerce-EditAccountForm textarea:focus,
body.woocommerce-account .woocommerce-address-fields .input-text:focus,
body.woocommerce-account .woocommerce-address-fields select:focus,
body.woocommerce-account .woocommerce-address-fields textarea:focus {
	border-color: var(--pf-fuchsia);
	outline: none;
}

body.woocommerce-account .woocommerce-EditAccountForm ::placeholder,
body.woocommerce-account .woocommerce-address-fields ::placeholder {
	color: var(--pf-gris);
}

/* select2 / selectWoo (Pays, Région) harmonisé */
body.woocommerce-account .select2-container .select2-selection--single {
	height: auto;
	padding: 0.45em 0.9em;
	border: 1px solid var(--pf-dore);
	border-radius: var(--pf-radius);
}

body.woocommerce-account .select2-container--focus .select2-selection--single,
body.woocommerce-account .select2-container--open .select2-selection--single {
	border-color: var(--pf-fuchsia);
}

/* Prénom / nom sur une ligne */
body.woocommerce-account .form-row-first,
body.woocommerce-account .form-row-last {
	width: calc(50% - (var(--pf-space-md) / 2));
}

body.woocommerce-account .form-row-first {
	float: left;
	clear: left;
}

body.woocommerce-account .form-row-last {
	float: right;
}

/* Hints */
body.woocommerce-account .woocommerce-EditAccountForm .description,
body.woocommerce-account .woocommerce-EditAccountForm em,
body.woocommerce-account .woocommerce-address-fields .description {
	font-style: italic;
	font-size: 0.85rem;
	color: var(--pf-gris);
}

/* Sous-titre « Changement de mot de passe » */
body.woocommerce-account .woocommerce-EditAccountForm fieldset {
	margin-top: var(--pf-space-lg);
	padding: 0;
	border: 0;
}

body.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
	margin-bottom: var(--pf-space-sm);
	font-weight: 600;
	color: var(--pf-noir);
}

/* --- Téléchargements : état vide (scopé compte) --- */
body.woocommerce-account .woocommerce .woocommerce-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pf-space-md);
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--pf-dore);
	border-radius: var(--pf-radius);
	background-color: transparent;
	color: var(--pf-gris);
}

body.woocommerce-account .woocommerce .woocommerce-info::before {
	content: none;
}

@media (max-width: 640px) {

	body.woocommerce-account .form-row-first,
	body.woocommerce-account .form-row-last {
		float: none;
		width: 100%;
	}

	body.woocommerce-account .woocommerce .woocommerce-info {
		flex-direction: column;
		text-align: center;
	}
}

/* =========================================================
   29. Mon compte / Wishlist (TI WooCommerce Wishlist)
   ========================================================= */

/* --- A. État vide de la liste de souhaits ---
   Scopé .tinv-wishlist (conteneur propre au plugin → jamais sur
   boutique/panier/checkout, quel que soit le type de page). */
.tinv-wishlist .cart-empty.woocommerce-info {
	margin: 0 auto;
	padding-block: var(--pf-space-xl);
	border: 0;
	background-color: transparent;
	text-align: center;
	color: var(--pf-gris);
}

.tinv-wishlist .cart-empty.woocommerce-info::before {
	content: none;
}

.tinv-wishlist .return-to-shop {
	margin-top: var(--pf-space-md);
	text-align: center;
}

/* Bouton de retour boutique → contour (motif clôture) */
.tinv-wishlist .return-to-shop .button {
	display: inline-block;
	padding: 0.9em 2.2em;
	border: 1px solid var(--pf-noir);
	border-radius: var(--pf-radius);
	background-color: transparent;
	color: var(--pf-noir);
	font-family: var(--pf-font-corps);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--pf-transition), color var(--pf-transition), border-color var(--pf-transition);
}

.tinv-wishlist .return-to-shop .button:hover,
.tinv-wishlist .return-to-shop .button:focus-visible {
	background-color: var(--pf-fuchsia);
	border-color: var(--pf-fuchsia);
	color: var(--pf-blanc);
}

/* --- B. Cœur « Ajouter à la liste » (boutique + fiche, global) ---
   Épuré, cohérent avec le cœur de l'en-tête : transparent, sans chrome,
   noir au repos → fuchsia au survol et à l'état « ajouté ». */
.tinv-wraper.tinv-wishlist .tinvwl_add_to_wishlist_button {
	min-width: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--pf-noir);
	line-height: 1;
	cursor: pointer;
	transition: color var(--pf-transition);
}

.tinv-wraper.tinv-wishlist .tinvwl_add_to_wishlist_button:hover,
.tinv-wraper.tinv-wishlist .tinvwl_add_to_wishlist_button:focus-visible {
	background-color: transparent;
	color: var(--pf-fuchsia);
}

/* État « ajouté » → cœur fuchsia */
.tinv-wraper.tinvwl-product-in-list .tinvwl_add_to_wishlist_button,
.tinv-wraper.tinvwl-product-make-remove .tinvwl_add_to_wishlist_button {
	color: var(--pf-fuchsia);
}

/* Libellé discret (si affiché) */
.tinv-wraper.tinv-wishlist .tinvwl_add_to_wishlist_button .tinvwl-txt {
	font-size: 0.8rem;
	letter-spacing: 0;
	color: var(--pf-gris);
}

/* Icône cœur à taille raisonnable */
.tinv-wraper.tinv-wishlist .tinvwl-icon-heart::before {
	font-size: 1.1rem;
}

/* =========================================================
   30. Mon compte — filets dorés fiables + adresses + cœur
   ========================================================= */

/* --- A. Tableaux : filets dorés complets (separate + spacing 0) --- */
body.woocommerce-account table.woocommerce-orders-table,
body.woocommerce-account table.woocommerce-table--order-details {
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 1px solid var(--pf-dore);
	border-radius: var(--pf-radius);
}

/* Annule le border-top faible de WooCommerce sur toutes les cellules */
body.woocommerce-account table.woocommerce-orders-table th,
body.woocommerce-account table.woocommerce-orders-table td,
body.woocommerce-account table.woocommerce-table--order-details th,
body.woocommerce-account table.woocommerce-table--order-details td {
	border-top: 0;
}

/* En-tête : filet doré sous le thead */
body.woocommerce-account table.woocommerce-orders-table thead th,
body.woocommerce-account table.woocommerce-table--order-details thead th {
	border-bottom: 1px solid var(--pf-dore);
}

/* Lignes : séparateur uniforme sur toute la largeur */
body.woocommerce-account table.woocommerce-orders-table tbody td,
body.woocommerce-account table.woocommerce-orders-table tbody th,
body.woocommerce-account table.woocommerce-table--order-details tbody td,
body.woocommerce-account table.woocommerce-table--order-details tbody th {
	border-bottom: 1px solid var(--pf-gris-clair);
}

/* Dernière ligne du corps : la bordure de table referme (pas de double filet) */
body.woocommerce-account table.woocommerce-orders-table tbody tr:last-child td,
body.woocommerce-account table.woocommerce-orders-table tbody tr:last-child th,
body.woocommerce-account table.woocommerce-table--order-details tbody tr:last-child td,
body.woocommerce-account table.woocommerce-table--order-details tbody tr:last-child th {
	border-bottom: 0;
}

/* Totaux (tfoot) : filet doré de séparation */
body.woocommerce-account table.woocommerce-table--order-details tfoot th,
body.woocommerce-account table.woocommerce-table--order-details tfoot td {
	border-top: 1px solid var(--pf-dore);
}

/* --- B. Blocs adresses : grille 2 colonnes alignée --- */
body.woocommerce-account .woocommerce-Addresses,
body.woocommerce-account .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

/* Neutralise floats/largeurs des vraies colonnes WooCommerce */
body.woocommerce-account .woocommerce-Addresses .col-1,
body.woocommerce-account .woocommerce-Addresses .col-2,
body.woocommerce-account .woocommerce-Addresses .u-column1,
body.woocommerce-account .woocommerce-Addresses .u-column2,
body.woocommerce-account .woocommerce-Addresses .pf-address-col,
body.woocommerce-account .woocommerce-columns--addresses .woocommerce-column {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/* Titre AU-DESSUS de la boîte (page via .pf-address-heading ; détail via column title) */
body.woocommerce-account .pf-address-heading,
body.woocommerce-account .woocommerce-column__title,
body.woocommerce-account .woocommerce-columns--addresses > .woocommerce-column > h2,
body.woocommerce-account .woocommerce-columns--addresses > .woocommerce-column > h3 {
	margin: 0 0 var(--pf-space-sm);
	font-family: var(--pf-font-titre);
	font-weight: 400;
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	color: var(--pf-noir);
}

/* Lien « Modifier » : 1re ligne dans la boîte, fuchsia, sans float */
body.woocommerce-account .woocommerce-Address .edit {
	display: inline-block;
	float: none;
	margin-bottom: var(--pf-space-sm);
	color: var(--pf-fuchsia);
	text-decoration: none;
}

body.woocommerce-account .woocommerce-Address .edit:hover,
body.woocommerce-account .woocommerce-Address .edit:focus-visible {
	text-decoration: underline;
}

/* Adresse lisible */
body.woocommerce-account .woocommerce-Address address,
body.woocommerce-account .woocommerce-customer-details address {
	line-height: 1.7;
}

/* --- C. Cœur wishlist : position (global, hors compte) --- */
/* Carte boutique : coin haut-droit */
body.woocommerce ul.products li.product {
	position: relative;
}

body.woocommerce ul.products li.product .tinvwl-loop-button-wrapper {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 3;
	margin: 0;
}

/* Cœur seul sur la carte : libellé masqué (accessible aux lecteurs d'écran) */
body.woocommerce ul.products li.product .tinvwl-loop-button-wrapper .tinvwl-txt {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Fiche produit : cœur resserré près du panier */
body.woocommerce div.product .tinv-wraper.tinvwl-after-add-to-cart {
	margin-top: var(--pf-space-sm);
}

/* --- Responsive : adresses en 1 colonne --- */
@media (max-width: 768px) {

	body.woocommerce-account .woocommerce-Addresses,
	body.woocommerce-account .woocommerce-columns--addresses {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   31. WooCommerce — Commander (checkout classique)
   (scopé .woocommerce-checkout ; n'affecte ni compte ni boutique ni panier)
   ========================================================= */

/* 1. Titre de page */
body.woocommerce-checkout .pf-page__title {
	margin-bottom: var(--pf-space-xl);
	font-family: var(--pf-font-titre);
	font-weight: 400;
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	color: var(--pf-noir);
	text-align: center;
}

/* 2. Titres de section */
body.woocommerce-checkout #customer_details h3,
body.woocommerce-checkout .woocommerce-shipping-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3,
body.woocommerce-checkout #order_review_heading {
	margin-bottom: var(--pf-space-md);
	font-family: var(--pf-font-titre);
	font-weight: 400;
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	color: var(--pf-noir);
}

/* 3. Conteneur + boîtes facturation/livraison (filet doré) */
body.woocommerce-checkout .woocommerce {
	max-width: var(--pf-max-width);
	margin-inline: auto;
}

body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
	margin-bottom: var(--pf-space-lg);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 1px solid var(--pf-dore);
	border-radius: var(--pf-radius);
}

/* 4. Champs (mêmes règles que le compte, étendues au checkout) */
body.woocommerce-checkout .input-text,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea {
	width: 100%;
	padding: 0.7em 0.9em;
	border: 1px solid var(--pf-dore);
	border-radius: var(--pf-radius);
	background-color: transparent;
	color: var(--pf-noir);
	font: inherit;
}

body.woocommerce-checkout .input-text:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus {
	border-color: var(--pf-fuchsia);
	outline: none;
}

body.woocommerce-checkout ::placeholder {
	color: var(--pf-gris);
}

body.woocommerce-checkout .woocommerce-checkout label {
	display: block;
	margin-bottom: var(--pf-space-xs);
	font-weight: 600;
	color: var(--pf-noir);
}

body.woocommerce-checkout .woocommerce-checkout .required {
	border: 0;
	color: var(--pf-fuchsia);
	text-decoration: none;
}

body.woocommerce-checkout .woocommerce-checkout .description,
body.woocommerce-checkout .woocommerce-checkout em {
	font-style: italic;
	font-size: 0.85rem;
	color: var(--pf-gris);
}

/* select2 (Pays / Région) harmonisé */
body.woocommerce-checkout .select2-container .select2-selection--single {
	height: auto;
	padding: 0.45em 0.9em;
	border: 1px solid var(--pf-dore);
	border-radius: var(--pf-radius);
}

body.woocommerce-checkout .select2-container--focus .select2-selection--single,
body.woocommerce-checkout .select2-container--open .select2-selection--single {
	border-color: var(--pf-fuchsia);
}

/* 5. Récap commande — boîte dorée + lignes homogènes */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 1px solid var(--pf-dore);
	border-radius: var(--pf-radius);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
	padding: 0.85rem 1rem;
	border-top: 0;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
	border-bottom: 1px solid var(--pf-dore);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody th {
	border-bottom: 1px solid var(--pf-gris-clair);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
	border-top: 1px solid var(--pf-gris-clair);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total td {
	font-weight: 600;
	color: var(--pf-noir);
	border-top: 1px solid var(--pf-dore);
}

/* Méta produit (Date de livraison / Message) sous le nom : discret */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-name .wc-item-meta,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-name dl {
	margin: var(--pf-space-xs) 0 0;
	font-size: 0.85rem;
	color: var(--pf-gris);
}

/* 6. Paiement — sans fond gris WC */
body.woocommerce-checkout #payment {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--pf-dore);
	border-radius: var(--pf-radius);
	background-color: transparent;
}

body.woocommerce-checkout #payment ul.payment_methods {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

body.woocommerce-checkout #payment ul.payment_methods li {
	margin-bottom: var(--pf-space-sm);
}

body.woocommerce-checkout #payment .payment_box {
	margin-top: var(--pf-space-xs);
	padding: var(--pf-space-sm);
	background-color: var(--pf-gris-clair);
	border-radius: var(--pf-radius);
	font-size: 0.9rem;
	color: var(--pf-gris);
}

body.woocommerce-checkout #payment .payment_box::before {
	display: none;
}

/* 7. Bouton « Commander » — fuchsia plein (2 IDs pour primer sur WC) */
body.woocommerce-checkout #payment #place_order {
	display: block;
	width: 100%;
	margin-top: var(--pf-space-md);
	padding: var(--pf-space-sm) var(--pf-space-lg);
	border: 0;
	border-radius: 999px;
	background-color: var(--pf-fuchsia);
	color: var(--pf-blanc);
	font-family: var(--pf-font-corps);
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: background-color var(--pf-transition);
}

body.woocommerce-checkout #payment #place_order:hover,
body.woocommerce-checkout #payment #place_order:focus-visible {
	background-color: var(--pf-noir);
	color: var(--pf-blanc);
}

/* 8. Notices (coupon / connexion) discrètes — scopées checkout */
body.woocommerce-checkout .woocommerce-info {
	padding: clamp(1rem, 3vw, 1.5rem);
	border: 1px solid var(--pf-dore);
	border-radius: var(--pf-radius);
	background-color: transparent;
	color: var(--pf-gris);
}

body.woocommerce-checkout .woocommerce-info::before {
	content: none;
}

/* 9. Liens fuchsia pertinents */
body.woocommerce-checkout .woocommerce-info a,
body.woocommerce-checkout .woocommerce-form-coupon-toggle a,
body.woocommerce-checkout .showcoupon {
	color: var(--pf-fuchsia);
	text-decoration: none;
}

body.woocommerce-checkout .woocommerce-info a:hover,
body.woocommerce-checkout .woocommerce-form-coupon-toggle a:hover,
body.woocommerce-checkout .showcoupon:hover {
	text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {

	body.woocommerce-checkout #customer_details .col-1,
	body.woocommerce-checkout #customer_details .col-2 {
		float: none;
		width: 100%;
	}
}

@media (max-width: 640px) {

	body.woocommerce-checkout .form-row-first,
	body.woocommerce-checkout .form-row-last {
		float: none;
		width: 100%;
	}
}

/* --- 31 (P1) : mise en page 2 colonnes (structure ; habillage fin = P2) --- */
body.woocommerce-checkout .pf-checkout__cols {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var(--pf-space-xl);
	align-items: start;
}

body.woocommerce-checkout .pf-checkout__col--review {
	position: sticky;
	top: 1.5rem;
}

@media (max-width: 768px) {

	body.woocommerce-checkout .pf-checkout__cols {
		grid-template-columns: 1fr;
	}

	body.woocommerce-checkout .pf-checkout__col--review {
		position: static;
	}
}

/* --- 31 (P1.5) : colonne gauche empilée (facturation puis livraison+notes) ---
   #customer_details = ID → prime sur .col2-set de WooCommerce sans !important. */
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
}

/* =========================================================
   31 (P2) — Checkout : gauche aérée + récap en carte dorée
   (append ; neutralise les filets antérieurs sans !important)
   ========================================================= */

/* 1. GAUCHE aérée : plus de cartes (bordures/padding retirés) ; rythme par marges */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
	margin-bottom: var(--pf-space-xl);
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* 4. Titre « Expédier à une adresse différente ? » : taille de sous-titre + section resserrée */
body.woocommerce-checkout #customer_details #ship-to-different-address {
	margin-bottom: var(--pf-space-sm);
	font-size: 1.05rem;
}

body.woocommerce-checkout #customer_details #ship-to-different-address label {
	font-weight: 600;
	color: var(--pf-noir);
}

/* 2. RÉCAP : élargir un peu la colonne droite (date sur une ligne) */
body.woocommerce-checkout .pf-checkout__cols {
	grid-template-columns: 1.4fr 1fr;
}

/* 2. RÉCAP : carte dorée soignée posée sur le wrapper (sticky conservé) */
body.woocommerce-checkout .pf-checkout__col--review {
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid var(--pf-dore);
	border-radius: var(--pf-radius);
	background-color: var(--pf-blanc);
	box-shadow: var(--pf-shadow);
}

/* Tableau interne sans double bordure (la carte fournit le cadre) */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	border: 0;
	border-radius: 0;
}

/* Méta produit (Date de livraison / Message) discrète, qui ne casse pas */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-name .wc-item-meta,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-name dl {
	margin: var(--pf-space-xs) 0 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--pf-gris);
}

/* 3. PAIEMENT : délimitation LÉGÈRE = filet doré fin en haut (pas une carte) */
body.woocommerce-checkout #payment {
	margin-top: var(--pf-space-lg);
	padding: var(--pf-space-md) 0 0;
	border: 0;
	border-top: 1px solid var(--pf-dore);
	border-radius: 0;
	background-color: transparent;
}

/* =====================================================================
   30b. NETTOYAGE — Neutraliser le clearfix de .col2-set sur les grilles
        d'adresses (corrige la diagonale facturation / livraison).

   WooCommerce génère `.col2-set::before/::after { content:" "; display:table }`
   (clearfix historique). Quand le wrapper passe en `display:grid` (section 30),
   ces deux pseudos deviennent des ITEMS de grille : on se retrouve avec 4
   cases (pseudo, facturation, livraison, pseudo) → disposition en diagonale.
   On supprime simplement leur `content` pour qu'ils ne soient plus générés.

   Scopé .woocommerce-account ; spécificité (body + 2 classes + pseudo) > WC ;
   aucun !important, aucun hex.
   ===================================================================== */
body.woocommerce-account .woocommerce-Addresses::before,
body.woocommerce-account .woocommerce-Addresses::after,
body.woocommerce-account .woocommerce-columns--addresses::before,
body.woocommerce-account .woocommerce-columns--addresses::after {
	content: none;
}

/* =====================================================================
   30c. NETTOYAGE — Aérer les boîtes adresses.

   (1) PADDING INTÉRIEUR. Le reset anti-float (section 30) cible aussi
       `.woocommerce-Addresses .woocommerce-Address` avec `padding:0`
       (spécificité 0,3,1) → il écrase le padding du filet doré
       (`.woocommerce-Address`, 0,2,1) et le texte colle au filet. On
       redonne le padding via un sélecteur de spécificité ≥ (même 3
       classes, déclaré plus bas → l'emporte). Le détail commande
       (`.woocommerce-customer-details address`) garde déjà son padding,
       on le re-déclare en token par cohérence.

   (2) MARGE BASSE. Les grilles d'adresses n'ont aucune marge basse →
       elles collent au footer. On espace les deux wrappers de grille.

   Scopé .woocommerce-account ; tokens :root ; aucun hex ; aucun
   !important (spécificité). N'altère ni l'alignement (30/30b) ni le reste.
   ===================================================================== */

/* (1) Texte/lien décollés du filet doré */
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address,
body.woocommerce-account .woocommerce-customer-details address {
	padding: var(--pf-space-lg);
}

/* (2) Espace entre les blocs adresses et le footer */
body.woocommerce-account .woocommerce-Addresses,
body.woocommerce-account .woocommerce-columns--addresses {
	margin-bottom: var(--pf-space-xl);
}

/* =========================================================
   32. WooCommerce — Panier (shortcode [woocommerce_cart])

   Habillage cohérent avec le checkout (section 31) : 2 colonnes
   1.4fr/1fr + total STICKY, carte dorée + --pf-shadow, bouton
   « Valider la commande » fuchsia, table à filets dorés, code promo
   habillé. Scopé body.woocommerce-cart ; tokens :root (0 hex) ;
   0 !important (spécificité ; la croix passe par --wc-red). Mobile
   ≤768px : empilé, table responsive native WC (filets simplifiés).
   ========================================================= */

/* 1. Titre de page (même traitement que le checkout) */
body.woocommerce-cart .pf-page__title {
	margin-bottom: var(--pf-space-xl);
	font-family: var(--pf-font-titre);
	font-weight: 400;
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	color: var(--pf-noir);
	text-align: center;
}

/* 2. Grille 2 colonnes : formulaire (gauche) / totaux (droite) */
body.woocommerce-cart .woocommerce {
	max-width: var(--pf-max-width);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--pf-space-xl);
	align-items: start;
}

/* Notices en pleine largeur au-dessus des deux colonnes */
body.woocommerce-cart .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

/* Neutralise les flottants/largeurs WC des deux colonnes */
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart-collaterals {
	float: none;
	width: auto;
	margin: 0;
}

/* 3. Colonne droite (totaux) STICKY (même offset que le checkout) */
body.woocommerce-cart .cart-collaterals {
	position: sticky;
	top: 1.5rem;
}

/* 4. Carte dorée des totaux (même traitement que la récap checkout) */
body.woocommerce-cart .cart_totals {
	float: none;
	width: auto;
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid var(--pf-dore);
	border-radius: var(--pf-radius);
	background-color: var(--pf-blanc);
	box-shadow: var(--pf-shadow);
}

/* Tableau interne des totaux : sans double cadre (la carte fait le cadre) */
body.woocommerce-cart .cart_totals table.shop_table {
	margin: 0;
	border: 0;
}

body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
	padding: 0.7rem 0;
	border-top: 0;
	border-bottom: 1px solid var(--pf-gris-clair);
}

body.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
body.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
	font-weight: 600;
	color: var(--pf-noir);
	border-bottom: 0;
	border-top: 1px solid var(--pf-dore);
}

/* 5. Bouton « Valider la commande » — fuchsia plein (cf. #place_order) */
body.woocommerce-cart .wc-proceed-to-checkout {
	margin-top: var(--pf-space-md);
	padding: 0;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	padding: var(--pf-space-sm) var(--pf-space-lg);
	border: 0;
	border-radius: 999px;
	background-color: var(--pf-fuchsia);
	color: var(--pf-blanc);
	font-family: var(--pf-font-corps);
	font-size: 0.95rem;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: background-color var(--pf-transition);
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus-visible {
	background-color: var(--pf-noir);
	color: var(--pf-blanc);
}

/* 6. Boutons secondaires (mettre à jour / appliquer le code) — contour doré */
body.woocommerce-cart .woocommerce-cart-form button[name="update_cart"],
body.woocommerce-cart .coupon button[name="apply_coupon"] {
	padding: 0.6em 1.3em;
	border: 1px solid var(--pf-dore);
	border-radius: 999px;
	background-color: transparent;
	color: var(--pf-noir);
	font: inherit;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: color var(--pf-transition), border-color var(--pf-transition);
}

body.woocommerce-cart .woocommerce-cart-form button[name="update_cart"]:hover,
body.woocommerce-cart .woocommerce-cart-form button[name="update_cart"]:focus-visible,
body.woocommerce-cart .coupon button[name="apply_coupon"]:hover,
body.woocommerce-cart .coupon button[name="apply_coupon"]:focus-visible {
	color: var(--pf-fuchsia);
	border-color: var(--pf-fuchsia);
}

/* 7. Table du panier : filets dorés fins */
body.woocommerce-cart table.shop_table.cart {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 1px solid var(--pf-dore);
	border-radius: var(--pf-radius);
}

body.woocommerce-cart table.shop_table.cart th,
body.woocommerce-cart table.shop_table.cart td {
	padding: 1rem;
	border-top: 0;
}

body.woocommerce-cart table.shop_table.cart thead th {
	border-bottom: 1px solid var(--pf-dore);
	font-family: var(--pf-font-titre);
	font-weight: 400;
	color: var(--pf-noir);
}

body.woocommerce-cart table.shop_table.cart tbody td {
	border-bottom: 1px solid var(--pf-gris-clair);
}

/* Nom produit en lien fuchsia */
body.woocommerce-cart table.shop_table.cart td.product-name a {
	color: var(--pf-fuchsia);
	text-decoration: none;
}

body.woocommerce-cart table.shop_table.cart td.product-name a:hover,
body.woocommerce-cart table.shop_table.cart td.product-name a:focus-visible {
	text-decoration: underline;
}

/* Miniature arrondie */
body.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
	border-radius: var(--pf-radius);
}

/* Méta « Date de livraison / Message » discrète */
body.woocommerce-cart table.shop_table.cart td.product-name .wc-item-meta,
body.woocommerce-cart table.shop_table.cart td.product-name dl {
	margin: var(--pf-space-xs) 0 0;
	font-size: 0.85rem;
	color: var(--pf-gris);
}

/* Croix de suppression discrète : on redéfinit la variable WC en scope
   (la règle WC est color:var(--wc-red)!important → on change la VALEUR,
   sans écrire de !important nous-mêmes). */
body.woocommerce-cart td.product-remove a.remove {
	--wc-red: var(--pf-gris);
}

body.woocommerce-cart td.product-remove a.remove:hover,
body.woocommerce-cart td.product-remove a.remove:focus-visible {
	--wc-red: var(--pf-fuchsia);
	background-color: transparent;
}

/* 8. Champ quantité (cohérent avec les champs du checkout) */
body.woocommerce-cart table.shop_table.cart td.product-quantity input.qty {
	padding: 0.5em 0.6em;
	border: 1px solid var(--pf-dore);
	border-radius: var(--pf-radius);
	background-color: transparent;
	color: var(--pf-noir);
	font: inherit;
}

body.woocommerce-cart table.shop_table.cart td.product-quantity input.qty:focus {
	border-color: var(--pf-fuchsia);
	outline: none;
}

/* 9. Code promo : input habillé (bouton traité au point 6) */
body.woocommerce-cart .coupon input#coupon_code {
	padding: 0.6em 0.9em;
	border: 1px solid var(--pf-dore);
	border-radius: var(--pf-radius);
	background-color: transparent;
	color: var(--pf-noir);
	font: inherit;
}

body.woocommerce-cart .coupon input#coupon_code:focus {
	border-color: var(--pf-fuchsia);
	outline: none;
}

/* 10. Mobile ≤768px : une colonne, total non sticky, filets simplifiés
   (la table bascule en vue empilée shop_table_responsive de WC). */
@media (max-width: 768px) {

	body.woocommerce-cart .woocommerce {
		grid-template-columns: 1fr;
	}

	body.woocommerce-cart .cart-collaterals {
		position: static;
	}

	/* En vue empilée, le cadre/rayon de la table « baverait » : on simplifie
	   en lignes séparées par un filet doré, sans cadre global. */
	body.woocommerce-cart table.shop_table.cart {
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	body.woocommerce-cart table.shop_table.cart tbody tr.cart_item {
		display: block;
		margin-bottom: var(--pf-space-md);
		padding-bottom: var(--pf-space-sm);
		border: 1px solid var(--pf-dore);
		border-radius: var(--pf-radius);
	}

	body.woocommerce-cart table.shop_table.cart tbody td {
		border-bottom: 1px solid var(--pf-gris-clair);
	}
}

/* =========================================================
   32b. Panier — largeur du bloc Total + titre + alignement
   (append ; desktop uniquement ; le mobile ≤768px reste en 1 colonne)
   ========================================================= */

/* 1. Colonne Total plus large (spécifique au panier : 1fr/1fr).
   Surcharge le 1.4fr/1fr de la section 32 par ordre de cascade. */
body.woocommerce-cart .woocommerce {
	grid-template-columns: 1fr 1fr;
}

/* 2. Table des totaux : pleine largeur + label (gauche) / valeur (droite)
   → corrige « Sous-total5 000 FCFA » collés et remplit la carte. */
body.woocommerce-cart .cart_totals table.shop_table {
	width: 100%;
}

body.woocommerce-cart .cart_totals table.shop_table th {
	text-align: left;
}

body.woocommerce-cart .cart_totals table.shop_table td {
	text-align: right;
}

/* 3. Titre « Total panier » : tient sur une ligne une fois la colonne
   élargie (police serif conservée via héritage des titres). */
body.woocommerce-cart .cart_totals h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
}

/* Garde-fou mobile : la grille reste empilée sous le breakpoint. */
@media (max-width: 768px) {

	body.woocommerce-cart .woocommerce {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   32c. Panier — le bloc Total remplit sa colonne

   WooCommerce (woocommerce-layout.css) impose
   `.woocommerce .cart-collaterals .cart_totals { float:right; width:48% }`
   (spécificité 0,3,0), qui battait l'override 0,2,1 de la section 32 :
   la carte ne remplissait que 48 % de la colonne et se collait à droite,
   laissant un vide au milieu (effet « grille étalée »). On reprend la
   main avec une spécificité 0,3,1 (body + 3 classes) > 0,3,0, sans
   !important. La grille est déjà contrainte à 1200px (section 32).
   ========================================================= */
body.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100%;
	float: none;
}

/* =========================================================
   32d. Panier — ratio 2/3 – 1/3 (liste large, total compact)

   Surcharge le 1fr/1fr (32b) par cascade (même sélecteur, plus bas).
   À 1200px : liste ≈ 770px (noms produits sur 1 ligne), total ≈ 385px
   (adresse sur ~2 lignes). Mobile ≤768px : le media query repasse en
   1 colonne (inchangé).
   ========================================================= */
body.woocommerce-cart .woocommerce {
	grid-template-columns: 2fr 1fr;
}

/* Garde-fou mobile : cette règle est plus bas que les media queries de
   32/32b ; sans ce bloc, le 2fr/1fr ci-dessus gagnerait à ≤768px par
   ordre de cascade. On ré-affirme l'empilement après. */
@media (max-width: 768px) {

	body.woocommerce-cart .woocommerce {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   32e. Panier — espace avant le footer

   --pf-space-2xl n'existe pas (:root va de xs à xl=4rem) → on prend xl,
   le plus généreux. S'ajoute proprement (la 32 ne pose que margin-inline).
   ========================================================= */
body.woocommerce-cart .woocommerce {
	margin-bottom: var(--pf-space-xl);
}

/* =========================================================
   33. Fiche produit — Avis clients + Produits similaires
   (scopé body.single-product / .related ; natif WooCommerce ;
    :root only ; 0 !important — spécificité)
   ========================================================= */

/* ---------- A. AVIS CLIENTS (bloc dédié sous le produit) ---------- */

body.single-product .pf-reviews {
	max-width: var(--pf-max-width);
	margin: var(--pf-space-xl) auto 0;
}

/* Titre « N avis pour … » en Playfair */
body.single-product #reviews .woocommerce-Reviews-title {
	margin-bottom: var(--pf-space-lg);
	font-family: var(--pf-font-titre);
	font-weight: 400;
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--pf-noir);
}

/* Étoiles affichées : pleines dorées, vides rose pastel */
body.single-product #reviews .star-rating span::before {
	color: var(--pf-dore);
}

body.single-product #reviews .star-rating::before {
	color: var(--pf-rose-pastel);
}

/* Liste des avis */
body.single-product #reviews ol.commentlist {
	margin: 0 0 var(--pf-space-xl);
	padding: 0;
	list-style: none;
}

body.single-product #reviews ol.commentlist li.review {
	margin-bottom: var(--pf-space-lg);
	padding-bottom: var(--pf-space-lg);
	border-bottom: 1px solid var(--pf-gris-clair);
}

body.single-product #reviews .comment_container {
	display: flex;
	gap: var(--pf-space-md);
	align-items: flex-start;
}

body.single-product #reviews .comment_container img.avatar {
	width: 48px;
	height: 48px;
	margin: 0;
	border-radius: 50%;
}

body.single-product #reviews .comment-text {
	flex: 1;
}

body.single-product #reviews .comment-text .meta {
	margin: var(--pf-space-xs) 0;
	font-size: 0.9rem;
	color: var(--pf-gris);
}

body.single-product #reviews .woocommerce-review__author {
	font-family: var(--pf-font-titre);
	font-style: normal;
	color: var(--pf-noir);
}

body.single-product #reviews .comment-text .description {
	color: var(--pf-gris);
}

/* ---------- Formulaire d'avis ---------- */

body.single-product #review_form .comment-reply-title {
	display: block;
	margin-bottom: var(--pf-space-md);
	font-family: var(--pf-font-titre);
	font-weight: 400;
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	color: var(--pf-noir);
}

body.single-product #review_form label {
	display: block;
	margin-bottom: var(--pf-space-xs);
	font-weight: 600;
	color: var(--pf-noir);
}

/* Étoiles interactives : dorées, survol fuchsia */
body.single-product #review_form p.stars a {
	color: var(--pf-dore);
}

body.single-product #review_form p.stars a:hover,
body.single-product #review_form p.stars:hover a {
	color: var(--pf-fuchsia);
}

/* Champs encadrés, focus fuchsia (cohérent avec le tunnel) */
body.single-product #review_form input[type="text"],
body.single-product #review_form input[type="email"],
body.single-product #review_form textarea {
	width: 100%;
	padding: 0.7em 0.9em;
	border: 1px solid var(--pf-dore);
	border-radius: var(--pf-radius);
	background-color: transparent;
	color: var(--pf-noir);
	font: inherit;
}

body.single-product #review_form input[type="text"]:focus,
body.single-product #review_form input[type="email"]:focus,
body.single-product #review_form textarea:focus {
	border-color: var(--pf-fuchsia);
	outline: none;
}

/* Bouton « Publier » fuchsia plein.
   .product dans le sélecteur → spécificité 2,1,2 > WC #respond input#submit (2,1,1). */
body.single-product .product #review_form input#submit {
	display: inline-block;
	margin-top: var(--pf-space-sm);
	padding: var(--pf-space-sm) var(--pf-space-lg);
	border: 0;
	border-radius: 999px;
	background-color: var(--pf-fuchsia);
	color: var(--pf-blanc);
	font-family: var(--pf-font-corps);
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: background-color var(--pf-transition);
}

body.single-product .product #review_form input#submit:hover,
body.single-product .product #review_form input#submit:focus-visible {
	background-color: var(--pf-noir);
	color: var(--pf-blanc);
}

/* ---------- B. PRODUITS SIMILAIRES (4 / 2 / 1) ---------- */

body.woocommerce .related.products {
	max-width: var(--pf-max-width);
	margin: var(--pf-space-xl) auto 0;
}

/* 4 colonnes (les cartes réutilisent le composant boutique, section 9).
   Spécificité 0,3,2 > la grille boutique 0,2,1 ; les media queries plus
   bas (mêmes breakpoints) reprennent la main en 2 puis 1 colonne. */
body.woocommerce .related.products ul.products {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 980px) {

	body.woocommerce .related.products ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {

	body.woocommerce .related.products ul.products {
		grid-template-columns: 1fr;
	}
}