/*
Theme Name: Papamoise
Theme URI: https://papamoise.com
Author: Papamoise
Author URI: https://papamoise.com
Description: Thème WordPress sur mesure pour Papamoise, épices et poivres d'exception. Design minimaliste et luxueux, compatible WooCommerce. Remplace l'ancien thème Divi.
Version: 1.11.12
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: papamoise
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   0. Reset & variables
   ========================================================================== */

:root {
	--fond-page: #F7F4EE;
	--fond-hero-haut: #3D2E1E;
	--fond-hero-bas: #241C14;
	--texte-principal: #1A1714;
	--texte-secondaire: #6B6459;
	--texte-inverse: #FFFFFF;
	--bordure: #E8E2D6;
	--accent: #1A1714;
	/*
	 * Accent orange "peps" (retour client 2026-10 : « il manque ce petit
	 * peps de couleur orange sur le site, la couleur comme la boite »),
	 * couleur de la boîte produit. Utilisé avec parcimonie (hover/état
	 * actif du menu, trait sous le slogan…) — ne remplace jamais
	 * --accent (noir, boutons/titres principaux) : voir usages plus bas
	 * (.primary-menu, .site-header__tagline, .hero__divider,
	 * nav.shop-filters). Pas de réglage Customizer dédié : valeur fixe
	 * de marque, ajuster ici si une teinte exacte est fournie.
	 */
	--accent-peps: #C47A2C;
	--prix-couleur: #1A1714;
	--header-bg: #F7F4EE;
	--header-text: #1A1714;
	--header-link: #1A1714;

	--font-titre: Georgia, 'Times New Roman', serif;
	--font-corps: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--size-h1: 52px;
	--size-h2: 24px;
	--size-h3: 18px;
	--size-nav: 11px;
	--size-price: 13px;

	--container-max: 1280px;
	--radius: 2px;
}

/*
 * Toutes les variables ci-dessus sont réécrites dynamiquement par
 * inc/customizer.php (fonction papamoise_customizer_css), en fonction
 * des réglages choisis dans Apparence → Personnaliser. Les valeurs
 * ci-dessus ne servent que de secours si le Customizer n'a encore
 * jamais été enregistré.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	direction: ltr !important;
}

body {
	margin: 0;
	background: var(--fond-page);
	direction: ltr !important;
	text-align: left;
	color: var(--texte-principal);
	font-family: var(--font-corps);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4 {
	font-family: var(--font-titre);
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 0.5em;
	color: var(--texte-principal);
}

h2 {
	font-size: var(--size-h2);
}

h3 {
	font-size: var(--size-h3);
}

p {
	margin: 0 0 1em;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 24px;
}

/* ==========================================================================
   1. Boutons
   ========================================================================== */

.btn {
	display: inline-block;
	font-family: var(--font-corps);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 12px 28px;
	border-radius: var(--radius);
	border: 1px solid var(--accent);
	background: transparent;
	color: var(--accent);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.btn:hover {
	background: var(--accent);
	color: var(--fond-page);
}

.btn--outline {
	border-color: var(--texte-inverse);
	color: var(--texte-inverse);
}

.btn--outline:hover {
	background: var(--texte-inverse);
	color: var(--texte-principal);
}

.btn--dark {
	background: var(--accent);
	color: var(--texte-inverse);
}

.btn--dark:hover {
	background: transparent;
	color: var(--texte-principal);
}

/* ==========================================================================
   2. Header
   ========================================================================== */

.site-header {
	background: var(--header-bg);
	color: var(--header-text);
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 0.5px solid var(--bordure);
}

.site-header__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 18px 24px 0;
	max-width: var(--container-max);
	margin: 0 auto;
}

.site-header__search {
	order: 2;
	flex: 1 1 100%;
}

.site-header__brand {
	order: 1;
	flex: 1 1 100%;
	text-align: center;
}

.site-header__actions {
	order: 3;
	flex: 1 1 100%;
	text-align: right;
}

.site-header__logo,
.custom-logo-link {
	font-family: var(--font-titre);
	font-size: 20px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--header-text);
}

.custom-logo {
	/* 84px (au lieu de 64px) : logo du header agrandi à la demande du
	   client (vidéo 2026-09), sur toutes les pages. */
	max-height: 84px;
	width: auto;
	margin: 0 auto;
}

.site-header__tagline {
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--texte-secondaire);
	margin: 4px 0 0;
	position: relative;
	display: inline-block;
	padding-bottom: 12px;
}

/* Petit trait orange sous le slogan — seul accent peps du header, voir --accent-peps */
.site-header__tagline::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 56px;
	height: 2.5px;
	background: var(--accent-peps);
	border-radius: 1px;
}

.site-header__cart {
	font-size: var(--size-nav);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--header-text);
}

.search-form {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 320px;
}

.search-form__label {
	display: none;
}

.search-field {
	width: 100%;
	border: none;
	border-bottom: 0.5px solid var(--bordure);
	background: transparent;
	padding: 6px 0;
	font-size: 13px;
	color: var(--header-text);
	font-family: var(--font-corps);
}

.search-field:focus {
	outline: none;
	border-bottom-color: var(--header-text);
}

.search-submit {
	display: none;
}

.site-header__nav {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 14px 24px;
	overflow-x: auto;
}

.primary-menu {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
}

.primary-menu a {
	display: inline-block;
	font-size: var(--size-nav);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--header-link);
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
}

.primary-menu a:hover {
	opacity: 1;
	color: var(--accent-peps);
	border-bottom-color: var(--accent-peps);
}

/* Page/section courante — trait orange fin, voir --accent-peps */
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a {
	border-bottom-color: var(--accent-peps);
}

/* ==========================================================================
   3. Hero  (v1.11.6 — mêmes règles désormais dupliquées en style en ligne
      dans le HTML généré par papamoise_render_hero(), voir functions.php
      et CHANGELOG v1.11.6 : filet contre un chargement différé/combiné de
      ce fichier, qui laissait une fenêtre où une image de fond (grande
      taille intrinsèque, contrairement à une vidéo) pouvait s'afficher non
      cadrée et pousser le titre hors de son emplacement centré)
   ========================================================================== */

/*
 * Centrage structurel + filet anti-conflit (2026-10, v1.11.5).
 * - .hero reste un flex container centré.
 * - .hero__overlay devient LUI-MÊME un flex column centré (plus robuste
 *   qu’un simple text-align + margin auto).
 * - Image / vidéo de fond forcées en object-fit + object-position center.
 * - Sélecteurs profonds + !important pour gagner contre CSS additionnel,
 *   reliquat Divi ou plugin de minification.
 */
.hero {
	position: relative !important;
	min-height: 60vh;
	overflow: hidden !important;
	background-color: var(--fond-hero-bas);
	background-image: var(--hero-image, none), linear-gradient(180deg, var(--fond-hero-haut) 0%, var(--fond-hero-bas) 100%);
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-blend-mode: normal;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	direction: ltr !important;
}

.hero__bg-image,
.hero__bg-video,
.hero__bg-iframe {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center center !important;
	border: 0 !important;
	pointer-events: none !important;
	z-index: 0 !important;
	left: 0 !important;
	right: 0 !important;
	top: 0 !important;
	bottom: 0 !important;
	transform: none !important;
	margin: 0 !important;
	/*
	 * float:none ajouté ici (v1.11.6) : absent jusque-là de ce bloc alors
	 * que .hero/.hero__overlay/.hero__title l'ont tous. Un <img> (seul
	 * .hero__bg-image est une vraie balise <img>, jamais .hero__bg-video
	 * ni .hero__bg-iframe) reste la cible la plus probable d'un sélecteur
	 * générique externe (ex. reliquat Divi/éditeur ciblant "img"), même si
	 * position:absolute neutralise déjà float en théorie (CSS2.1 §9.7) —
	 * filet de sécurité explicite, aucun changement visuel attendu.
	 */
	float: none !important;
}

.hero__scrim {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
	background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.6) 100%);
	pointer-events: none !important;
}

.hero__overlay {
	position: relative !important;
	z-index: 2 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: 720px !important;
	margin: 0 auto !important;
	padding: 40px 24px !important;
	box-sizing: border-box !important;
	text-align: center !important;
	float: none !important;
	transform: none !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
	direction: ltr !important;
}

.hero__kicker {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--texte-inverse);
	font-family: var(--font-corps);
	margin: 0 auto 10px !important;
	text-align: center !important;
	float: none !important;
	width: 100% !important;
}

.hero__divider {
	width: 44px;
	height: 2px;
	/* Trait orange "peps" (retour client 2026-10), voir --accent-peps */
	background: var(--accent-peps);
	margin: 0 auto 18px !important;
	flex-shrink: 0;
}

.hero__title {
	display: block !important;
	color: var(--texte-inverse);
	font-size: clamp(28px, 6.5vw, var(--size-h1));
	line-height: 1.15 !important;
	margin: 0 auto 14px !important;
	padding: 0 8px !important;
	text-align: center !important;
	float: none !important;
	position: static !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow-wrap: break-word !important;
	word-break: normal !important;
	hyphens: none;
	direction: ltr !important;
}

/* Sélecteurs ultra-spécifiques — gagnent même contre une règle externe !important de spécificité moindre ou égale */
.site-main .hero,
main.site-main .hero {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	direction: ltr !important;
}

.site-main .hero .hero__overlay,
main.site-main .hero .hero__overlay {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
	transform: none !important;
	float: none !important;
	position: relative !important;
	left: auto !important;
	right: auto !important;
	width: 100% !important;
	max-width: 720px !important;
}

.site-main .hero .hero__overlay .hero__title,
main.site-main .hero .hero__overlay .hero__title {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
	transform: none !important;
	float: none !important;
	position: static !important;
	left: auto !important;
	right: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	direction: ltr !important;
}

.hero__subtitle {
	color: #EDE8DE;
	font-style: italic;
	font-family: var(--font-titre);
	font-size: 15px;
	margin: 0 auto 24px !important;
	text-align: center !important;
	float: none !important;
	width: 100% !important;
}

/* ==========================================================================
   4. Sélection produits (accueil + boutique)
   ========================================================================== */

.selection {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 56px 24px;
}

.selection__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
}

.selection__head h2 {
	margin: 0;
}

.selection__all {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.selection__all:hover {
	color: var(--texte-secondaire);
}

.product-grid,
.woocommerce ul.products,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
	gap: 40px 24px;
	margin: 0 !important;
	padding: 0 !important;
}

.product-card,
.woocommerce ul.products li.product,
ul.products li.product {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	width: auto !important;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.product-card__media,
.woocommerce ul.products li.product a.product-card__media {
	position: relative;
	display: block;
	background-color: #0F0D0A;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
}

.product-card__media img,
.woocommerce ul.products li.product img,
ul.products li.product img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	aspect-ratio: 1 / 1;
	object-fit: cover !important;
	object-position: center;
}

.badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: var(--fond-page);
	color: var(--texte-principal);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: var(--radius);
}

.product-card__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-corps);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	margin: 16px 0 4px;
	overflow-wrap: break-word;
	/* Réserve la hauteur de 2 lignes : les prix/boutons démarrent tous
	   à la même position, même si les titres font des longueurs différentes. */
	min-height: 2.8em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-card__title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	color: var(--texte-principal);
}

.product-card__subtitle {
	font-size: 11px;
	color: var(--texte-secondaire);
	margin: 0 0 4px;
}

.product-card__price,
.woocommerce ul.products li.product .price {
	font-size: var(--size-price);
	color: var(--prix-couleur) !important;
	margin: 0;
	/* Pousse le prix (et tout ce qui suit : bouton) en bas de la carte,
	   pour un alignement parfait quelle que soit la longueur du titre. */
	margin-top: auto !important;
	padding-top: 8px;
}

.woocommerce ul.products li.product .price del {
	color: var(--texte-secondaire);
	opacity: 0.7;
}

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

/* --- Bouton (Ajouter au panier / Lire la suite) : même style discret,
   quelle que soit l'étiquette générée par WooCommerce --- */

.product-card__action {
	margin-top: 12px;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button {
	display: inline-block;
	background: transparent !important;
	color: var(--accent) !important;
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid var(--accent) !important;
	padding: 10px 18px;
	border-radius: var(--radius);
	box-shadow: none !important;
	line-height: 1.2;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce ul.products li.product a.button:hover {
	background: var(--accent) !important;
	color: var(--fond-page) !important;
}

.woocommerce ul.products li.product .added_to_cart {
	display: block;
	margin-top: 8px;
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--texte-secondaire);
}

/* ==========================================================================
   5. Notre Maison (histoire)
   ========================================================================== */

.maison {
	background: #EFE6D6;
	display: grid;
	grid-template-columns: 1fr;
}

.maison__text {
	padding: 40px 24px;
	align-self: center;
}

.maison__text p {
	color: var(--texte-secondaire);
	max-width: 480px;
}

.maison__image {
	/*
	 * `aspect-ratio` (plutôt qu'une hauteur fixe en px) : proportion
	 * stable 2:1, quelle que soit la largeur de la colonne (pleine
	 * largeur mobile vs colonne desktop) — demande client (2026-09).
	 *
	 * `align-self: center` (au lieu du stretch par défaut du conteneur
	 * grid `.maison`) reste indispensable : sans lui, cette cellule
	 * s'étire à la hauteur du texte en face, ce qui annule l'aspect-
	 * ratio et reproduit le bug de section trop haute déjà corrigé une
	 * fois avec une hauteur fixe.
	 *
	 * `max-height` sert de garde-fou : `.maison` est en pleine largeur
	 * (pas de max-width), donc sur un très grand écran la colonne
	 * pourrait sinon dépasser une hauteur raisonnable.
	 */
	position: relative;
	aspect-ratio: 2 / 1;
	min-height: 0;
	max-height: 420px;
	align-self: center;
	background-color: #DCCEB2;
	overflow: hidden;
}

.maison__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.maison__image-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	margin: 0;
	text-align: center;
	font-family: var(--font-titre);
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #FFF9F0;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   6. Footer
   ========================================================================== */

.site-footer {
	background: var(--fond-hero-bas);
	color: #B8AFA2;
	padding: 44px 24px 20px;
	overflow: hidden;
}

.site-footer .site-footer__columns {
	max-width: var(--container-max);
	margin: 0 auto;
	display: flex !important;
	flex-wrap: wrap !important;
	flex-direction: row !important;
	align-items: flex-start;
	gap: 28px;
	padding-bottom: 24px;
}

.site-footer .site-footer__col {
	flex: 1 1 100% !important;
	min-width: 0;
	max-width: 100%;
}

.site-footer__col h3 {
	color: var(--texte-inverse);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.site-footer__col p,
.site-footer__col a {
	font-size: 12px;
	line-height: 1.9;
	overflow-wrap: break-word;
	word-break: break-word;
}

.site-footer__col a {
	display: inline-block;
}

.site-footer__col a:hover {
	color: var(--texte-inverse);
}

.footer-menu {
	display: flex;
	flex-direction: column;
}

.site-footer__bottom {
	max-width: var(--container-max);
	margin: 0 auto;
	border-top: 0.5px solid rgba(255,255,255,0.12);
	padding-top: 16px;
	text-align: center;
}

.site-footer__bottom p {
	font-size: 11px;
	margin: 0;
}

.site-footer__tagline {
	font-family: var(--font-titre);
	font-style: italic;
	font-size: 14px !important;
	color: var(--texte-inverse) !important;
	opacity: 0.85;
	margin-bottom: 12px !important;
}

@media (min-width: 768px) {
	.site-footer .site-footer__col {
		flex: 1 1 calc((100% - 2 * 28px) / 3) !important;
		max-width: calc((100% - 2 * 28px) / 3);
	}
}

/* ==========================================================================
   7. Pages génériques
   ========================================================================== */

.page-content,
.contact-page {
	max-width: 800px;
	margin: 0 auto;
	padding: 56px 24px;
}

.page-title {
	font-size: 28px;
	margin-bottom: 24px;
}

/* ==========================================================================
   8. Page Contact
   ========================================================================== */

.contact-page {
	max-width: var(--container-max);
}

.contact-page__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

.contact-page__infos h2 {
	font-size: 16px;
}

.contact-page__infos p {
	font-size: 14px;
	color: var(--texte-secondaire);
}

.contact-page__infos a {
	color: var(--texte-principal);
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.contact-form label {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--texte-secondaire);
	margin-top: 12px;
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	border: 0.5px solid var(--bordure);
	border-radius: var(--radius);
	padding: 12px;
	font-family: var(--font-corps);
	font-size: 14px;
	background: #FFFFFF;
	color: var(--texte-principal);
}

.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--texte-principal);
}

.contact-form button {
	margin-top: 20px;
	align-self: flex-start;
}

.form-message {
	padding: 12px 16px;
	border-radius: var(--radius);
	font-size: 13px;
	margin-bottom: 16px;
}

.form-message--success {
	background: #E9F1E4;
	color: #33502A;
}

.form-message--error {
	background: #F7E4E1;
	color: #7A2A20;
}

/* ==========================================================================
   9. Produit unique (WooCommerce single-product)
   ========================================================================== */

.single-product-page .woocommerce {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 40px 24px 64px;
}

.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

.woocommerce div.product .woocommerce-product-gallery {
	background: #EFE6D6;
	border-radius: var(--radius);
	overflow: hidden;
}

.woocommerce div.product .summary {
	padding-top: 8px;
}

.woocommerce div.product .product_title {
	font-size: 26px;
}

.woocommerce div.product p.price {
	font-size: 18px;
	color: var(--prix-couleur);
	margin: 8px 0 16px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--texte-secondaire);
	font-style: italic;
	font-family: var(--font-titre);
}

.woocommerce div.product form.cart .button {
	border-radius: var(--radius);
	background: var(--texte-principal);
	color: var(--texte-inverse);
	border: 1px solid var(--texte-principal);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 14px 28px;
}

.woocommerce div.product form.cart .button:hover {
	background: transparent;
	color: var(--texte-principal);
}

.woocommerce #reviews,
.woocommerce-tabs {
	margin-top: 40px;
	border-top: 0.5px solid var(--bordure);
	padding-top: 24px;
}

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: 24px;
	margin-bottom: 20px;
}

.woocommerce-tabs ul.tabs li {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.related.products {
	margin-top: 56px;
	border-top: 0.5px solid var(--bordure);
	padding-top: 32px;
}

.related.products > h2 {
	font-size: 20px;
	text-align: center;
	margin-bottom: 24px;
}

/* ==========================================================================
   10. Boutique / archive produits
   ========================================================================== */

.shop-page .woocommerce {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 24px 56px;
}

.shop-header {
	text-align: center;
	padding: 40px 24px;
}

.shop-header__title {
	font-size: 26px;
}

.woocommerce-result-count,
.woocommerce-ordering {
	font-size: 12px;
	color: var(--texte-secondaire);
}

/* ==========================================================================
   11. Responsive — tablette / desktop
   ========================================================================== */

@media (min-width: 640px) {
	.product-grid,
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.contact-page__grid {
		grid-template-columns: 1fr 1.4fr;
	}
}

@media (min-width: 880px) {
	.site-header__top {
		flex-wrap: nowrap;
	}

	.site-header__search,
	.site-header__brand,
	.site-header__actions {
		flex: 1;
		order: initial;
	}

	.site-header__search {
		text-align: left;
	}

	.site-header__actions {
		text-align: right;
	}

	.maison {
		/* 1.15fr / 1fr : équilibre le bloc pour que l'image ne domine plus
		   la section (2026-09) — auparavant 1fr / 1fr avec une image plus
		   haute rendait la section disproportionnée. La hauteur de
		   .maison__image n'a plus besoin d'override ici : aspect-ratio
		   (règle de base) s'adapte déjà à la largeur de cette colonne. */
		grid-template-columns: 1.15fr 1fr;
	}

	.plantations-intro {
		grid-template-columns: 1fr 1fr;
	}

	.plantations-intro__image {
		min-height: 320px;
	}

	.plantations-intro__image img {
		min-height: 320px;
	}
}

/* ==========================================================================
   12. Pages internes — histoire, plantations, équipe, partenaires
   ========================================================================== */

/* --- Notre histoire --- */

.histoire {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 24px 64px;
}

.histoire__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
}

.histoire__text p {
	color: var(--texte-secondaire);
	font-size: 15px;
	line-height: 1.8;
}

.histoire__text .btn {
	margin-top: 12px;
}

/*
 * Filet de sécurité (retour client 2026-10) : masque un éventuel titre
 * "Notre histoire" resté en double en tête du texte (le hero affiche
 * déjà ce titre), si jamais le filtre PHP de page-notre-histoire.php
 * (papamoise_strip_leading_duplicate_title_line()/_block()) ne le
 * détectait pas — ex. contenu plus riche que le cas simple couvert
 * (titre suivi d'une image, balises imbriquées…). Le filtre PHP reste
 * la correction prioritaire ; ceci ne fait que masquer visuellement un
 * doublon qui aurait échappé au filtre, sans retirer le contenu du HTML.
 */
.site-main--histoire .histoire__text > h1:first-child,
.site-main--histoire .histoire__text > h2:first-child,
.site-main--histoire .histoire__text > h3:first-child {
	display: none;
}

.histoire__image {
	min-height: 260px;
	background-color: #EFE6D6;
	background-size: cover;
	background-position: center;
	border-radius: var(--radius);
}

/* --- Nos plantations --- */

.hero--plantations {
	min-height: 42vh;
}

.plantation-section {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 48px 24px;
}

.plantation-section--alt {
	background: #EFE6D6;
	max-width: none;
	padding: 48px 24px;
}

.plantation-section--alt > * {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
}

.plantation-section h2 {
	margin-bottom: 24px;
	text-align: center;
}

.cta-boutique {
	text-align: center;
	padding: 48px 24px 72px;
}

/* --- Notre équipe --- */

/* Espace entre le bas de la bannière et le contenu (intro ou grille des
   membres) : ciblé sur .site-main--equipe pour ne pas affecter le hero
   des autres pages. Marge (pas padding) : se cumule avec la marge haute
   déjà présente sur .team-intro quand celle-ci est affichée, sans jamais
   descendre sous ~20px quand elle est absente. */
.site-main--equipe > .hero {
	margin-bottom: 20px;
}

.team-grid-wrap {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 24px 72px;
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 20px;
}

.team-card {
	text-align: center;
}

.team-card__photo img,
.team-card__placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	background: #EFE6D6;
	display: block;
	margin: 0 auto 14px;
	max-width: 160px;
}

/* Photos en noir et blanc, à la demande du client (2026-09). */
.team-card__photo img {
	filter: grayscale(100%);
}

.team-card__name {
	margin: 0 0 4px;
}

.team-card__role {
	font-size: 12px;
	color: var(--texte-secondaire);
	margin: 0;
}

/* --- Nos partenaires --- */

.partners-section {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 40px 24px;
}

.partners-section--alt {
	background: #EFE6D6;
	max-width: none;
}

.partners-section--alt > * {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
}

.partners-section h2 {
	text-align: center;
	margin-bottom: 28px;
}

.partners-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 32px;
}

.partners-logos img {
	max-height: 56px;
	width: auto;
	filter: grayscale(100%);
	opacity: 0.75;
	transition: opacity 0.25s ease, filter 0.25s ease;
}

.partners-logos img:hover {
	filter: grayscale(0%);
	opacity: 1;
}

.partners-tabs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.partners-tabs__item {
	/*
	 * Carte recentrée (retour client 2026-10) : seuls le nom et le logo,
	 * s'il est uploadé, sont affichés — plus de paragraphe de
	 * présentation (voir page-nos-partenaires.php).
	 */
	text-align: center;
}

.partners-tabs__logo {
	/*
	 * Agrandi de 64px (retour client 2026-10 : logos Kr Traiteur / Des
	 * Hommes et des Bœufs trop petits) — valeur mobile par défaut (ce
	 * thème est mobile-first, voir §14 plus bas pour le palier 112px à
	 * partir de 880px).
	 */
	max-height: 88px;
	width: auto;
	object-fit: contain;
	margin: 0 auto 12px;
}

.partners-tabs__item h3 {
	font-size: 16px;
	margin: 0;
}

.partners-tabs__item a:hover h3 {
	color: var(--texte-secondaire);
}

.testimonial {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	padding: 0;
}

.testimonial__title {
	font-family: var(--font-titre);
	font-size: 20px;
	color: var(--texte-principal);
	margin-bottom: 12px;
}

.testimonial p {
	font-style: italic;
	color: var(--texte-secondaire);
	font-size: 15px;
	line-height: 1.8;
}

.testimonial cite {
	display: block;
	font-style: normal;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--texte-principal);
	margin-top: 12px;
}

/* --- Nos partenaires : institutionnels (liste texte de repli) et labels --- */

.partners-institutional-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 40px;
	text-align: center;
}

.partners-institutional-list li {
	max-width: 320px;
	font-size: 14px;
	color: var(--texte-secondaire);
}

.partners-labels .certification-badges {
	justify-content: center;
	margin: 0;
}

/* ==========================================================================
   12bis. Nouveaux blocs pilotés par le Customizer (v1.2)
   ========================================================================== */

/* --- Introductions génériques de page (boutique, équipe, partenaires, contact) --- */

.shop-intro,
.team-intro,
.partners-intro,
.contact-intro {
	max-width: 640px;
	margin: 24px auto 0;
	padding: 0 24px;
	text-align: center;
	color: var(--texte-secondaire);
	font-size: 15px;
	line-height: 1.7;
}

/* --- Boutique : filtre catégories --- */

.shop-header {
	text-align: center;
	padding: 48px 24px 8px;
}

.shop-header__description {
	max-width: 640px;
	margin: 12px auto 0;
	color: var(--texte-secondaire);
	font-size: 14px;
}

nav.shop-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 28px;
	max-width: var(--container-max);
	margin: 40px auto 16px;
	padding: 0 24px;
	border: none;
}

nav.shop-filters a.shop-filters__link {
	font-family: var(--font-corps);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--texte-secondaire);
	padding-bottom: 6px;
	border: none;
	border-bottom: 1px solid transparent;
	background: none;
}

nav.shop-filters a.shop-filters__link:hover,
nav.shop-filters a.shop-filters__link.is-active {
	color: var(--texte-principal);
	/* Soulignement orange "peps" (retour client 2026-10), voir --accent-peps */
	border-bottom-color: var(--accent-peps);
}

/* --- Fil d'Ariane WooCommerce (natif) --- */

.woocommerce-breadcrumb {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 16px 24px 0;
	font-size: 12px;
	color: var(--texte-secondaire);
}

.woocommerce-breadcrumb a {
	color: var(--texte-secondaire);
}

.woocommerce-breadcrumb a:hover {
	color: var(--texte-principal);
}

/* --- Notre Histoire : chapeau et citation --- */

.histoire__chapeau {
	font-family: var(--font-titre);
	font-style: italic;
	font-size: 17px;
	color: var(--texte-principal);
	margin-bottom: 20px;
}

.histoire__quote {
	margin: 28px 0;
	padding: 20px 24px;
	border-left: 2px solid var(--accent);
	background: #EFE6D6;
	border-radius: var(--radius);
}

.histoire__quote p {
	font-family: var(--font-titre);
	font-style: italic;
	font-size: 15px;
	color: var(--texte-principal);
	margin: 0 0 8px;
}

.histoire__quote cite {
	font-style: normal;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--texte-secondaire);
}

/* --- Nos Plantations : introduction (texte + image optionnelle) --- */

.plantations-intro {
	background: #EFE6D6;
	display: grid;
	grid-template-columns: 1fr;
}

.plantations-intro__text {
	padding: 48px 24px;
	align-self: center;
}

.plantations-intro__text p {
	color: var(--texte-secondaire);
	max-width: 480px;
}

.plantations-intro__image {
	min-height: 240px;
	background-color: #DCCEB2;
	overflow: hidden;
}

.plantations-intro__image img {
	width: 100%;
	height: 100%;
	min-height: 240px;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* --- Nos Plantations : blocs texte + image alternés --- */

.plantation-blocks {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 8px 24px 48px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.plantation-block {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: center;
}

.plantation-block__text p {
	color: var(--texte-secondaire);
	font-size: 14px;
	line-height: 1.8;
}

.plantation-block__image {
	min-height: 220px;
	background-color: #DED2BC;
	background-size: cover;
	background-position: center;
	border-radius: var(--radius);
}

/* --- Nos Plantations : texte de localisation (juste sous le hero) --- */

.plantations-location {
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 24px;
	text-align: center;
}

.plantations-location p {
	color: var(--texte-secondaire);
	font-size: 14px;
	line-height: 1.8;
}

/* --- Notre Équipe : texte court additionnel --- */

.team-card__text {
	font-size: 12px;
	color: var(--texte-secondaire);
	margin-top: 4px;
}

/* ==========================================================================
   13. États de focus accessibles (clavier)
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
	outline: 2px solid var(--texte-principal);
	outline-offset: 2px;
}

/* ==========================================================================
   14. Responsive complémentaire — pages internes
   ========================================================================== */

@media (min-width: 880px) {
	.histoire__grid {
		grid-template-columns: 1.2fr 1fr;
	}

	.partners-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.partners-tabs__logo {
		/* Palier desktop/tablette du logo partenaire commercial (voir règle de base, mobile-first) */
		max-height: 112px;
	}

	.plantation-block {
		grid-template-columns: 1fr 1fr;
	}

	.plantation-block__image {
		min-height: 320px;
	}

	.plantation-block--reverse .plantation-block__image {
		order: -1;
	}
}

@media (min-width: 1024px) {
	/*
	 * .team-grid reste volontairement à 3 colonnes (fixées dès la
	 * règle de base, toutes tailles d'écran confondues) même en
	 * desktop : le client veut explicitement une grille "3 par ligne"
	 * (Emmanuel/Ludovic/Aurélie puis Franklin/William/Kylian), pas la
	 * grille 5 colonnes qui coupait cet ordre en 5+1 (2026-09).
	 */

	.product-grid,
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}

	.hero {
		min-height: 78vh;
	}

	.woocommerce div.product {
		grid-template-columns: 1.1fr 1fr;
	}
}

/* ==========================================================================
   15. Fiche produit (single-product.php)
   ========================================================================== */

.product-single {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 40px 24px 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: start;
}

.product-single .woocommerce-product-gallery {
	background: #0F0D0A;
	border-radius: var(--radius);
	overflow: hidden;
}

.product-single .woocommerce-product-gallery__image {
	aspect-ratio: 1 / 1;
}

.product-single .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Vignettes du carrousel (flexslider) : mêmes proportions, bien alignées */
.product-single .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
}

.product-single .flex-control-thumbs li {
	list-style: none;
	width: 64px;
}

.product-single .flex-control-thumbs img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--radius);
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.product-single .flex-control-thumbs img:hover,
.product-single .flex-control-thumbs img.flex-active {
	opacity: 1;
}

.product-single .product_title {
	font-size: clamp(24px, 4vw, 30px);
	margin-bottom: 8px;
}

.product-single .woocommerce-product-rating {
	margin-bottom: 8px;
}

.product-single .price {
	font-size: 20px;
	color: var(--prix-couleur);
	margin: 4px 0 16px;
	display: block;
}

.product-single .woocommerce-product-details__short-description {
	font-family: var(--font-titre);
	font-style: italic;
	color: var(--texte-secondaire);
	font-size: 15px;
	line-height: 1.7;
	margin-bottom: 20px;
}

.certification-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.certification-badges__item {
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--texte-secondaire);
	border: 1px solid var(--bordure);
	border-radius: var(--radius);
	padding: 5px 10px;
}

/* --- Formulaire d'ajout au panier --- */

.product-single form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.product-single form.cart .quantity {
	margin: 0;
}

.product-single form.cart .button.single_add_to_cart_button {
	background: var(--accent);
	color: var(--fond-page);
	border: 1px solid var(--accent);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 14px 28px;
	border-radius: var(--radius);
}

.product-single form.cart .button.single_add_to_cart_button:hover {
	background: transparent;
	color: var(--accent);
}

/*
 * Boutons de paiement express ajoutés par une extension tierce
 * (Google Pay, Stripe Link, etc.) : on ne peut pas recolorer ces
 * boutons (chaque prestataire impose sa propre charte graphique), on
 * harmonise seulement l'espacement pour qu'ils s'intègrent proprement
 * sous le bouton "Ajouter au panier" plutôt que de coller dessus.
 */
.product-single__summary > div[class*="pay"],
.product-single__summary > div[id*="pay"],
.product-single__summary > div[class*="express"] {
	margin-top: 16px;
	max-width: 320px;
}

/* --- Onglets produit (Description, Informations complémentaires…) --- */

.woocommerce-tabs {
	max-width: var(--container-max);
	margin: 56px auto 0;
	padding: 0 24px;
	border-top: 1px solid var(--bordure);
	padding-top: 32px;
}

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 0 0 28px;
	padding: 0;
	border: none;
}

.woocommerce-tabs ul.tabs li {
	list-style: none;
	margin: 0;
	padding: 0;
	background: none !important;
	border: none !important;
}

.woocommerce-tabs ul.tabs li a {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--texte-secondaire);
	padding: 0 0 8px;
	border-bottom: 1px solid transparent;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--texte-principal);
	border-bottom-color: var(--accent);
}

.woocommerce-tabs .panel h2 {
	font-size: 20px;
	margin-bottom: 16px;
}

.woocommerce-tabs .panel p {
	color: var(--texte-secondaire);
	font-size: 14px;
	line-height: 1.8;
	max-width: 760px;
}

/* --- Onglet "Propriétés du poivre blanc" (propriétés médicinales) --- */

.medicinal-properties {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 760px;
	display: grid;
	gap: 16px;
}

.medicinal-properties li {
	position: relative;
	padding-left: 26px;
	color: var(--texte-secondaire);
	font-size: 14px;
	line-height: 1.7;
}

.medicinal-properties li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--accent);
}

/*
 * --- Onglet "Idées de recettes" (Ingrédients / Préparation en 2
 * colonnes) ---
 *
 * Ce contenu est saisi par le client directement dans WooCommerce (ce
 * n'est pas un onglet généré par le thème — voir CHANGELOG.md) : ces
 * classes n'ont donc d'effet QUE si ce balisage est bien celui utilisé
 * dans l'éditeur du produit (mode "Texte"/HTML) — voir INSTALL.md §5
 * pour le squelette HTML exact à coller.
 */
.recipe-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin-top: 8px;
	max-width: 760px;
}

.recipe-columns__header {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.recipe-columns__header img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 50%;
	flex-shrink: 0;
}

.recipe-columns__header h2,
.recipe-columns__header h3 {
	margin: 0;
	font-size: 20px;
}

.recipe-columns__col h3 {
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--texte-principal);
	margin: 0 0 14px;
}

.recipe-columns__col ul,
.recipe-columns__col ol {
	margin: 0;
	padding-left: 20px;
	color: var(--texte-secondaire);
	font-size: 14px;
	line-height: 1.8;
}

.recipe-columns__col li + li {
	margin-top: 6px;
}

@media (min-width: 640px) {
	.recipe-columns {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-tabs table.shop_attributes {
	width: 100%;
	max-width: 600px;
	border-collapse: collapse;
}

.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td {
	padding: 10px 0;
	border-bottom: 1px solid var(--bordure);
	font-size: 13px;
	text-align: left;
}

.woocommerce-tabs table.shop_attributes th {
	color: var(--texte-secondaire);
	font-weight: 400;
	width: 35%;
}

/* --- Produits similaires (même style que la grille boutique) --- */

.product-single__related {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 48px 24px 64px;
}

.product-single__related h2 {
	font-size: 20px;
	text-align: center;
	margin-bottom: 28px;
}

.product-single__related ul.products {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
	.product-single__related ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.product-single__related ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.product-single {
		grid-template-columns: 1.1fr 1fr;
	}
}

/* ==========================================================================
   16. Panier (woocommerce/cart/cart.php)
   ========================================================================== */

.cart-page,
.woocommerce-checkout .woocommerce {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 40px 24px 64px;
}

table.cart-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 32px;
}

table.cart-table thead th {
	text-align: left;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--texte-secondaire);
	font-weight: 400;
	padding: 0 12px 16px;
	border-bottom: 1px solid var(--bordure);
}

table.cart-table td {
	padding: 20px 12px;
	border-bottom: 1px solid var(--bordure);
	vertical-align: middle;
	font-size: 14px;
}

table.cart-table .product-thumbnail img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	background: #0F0D0A;
	border-radius: var(--radius);
	display: block;
}

table.cart-table .product-name a {
	color: var(--texte-principal);
	font-weight: 500;
}

table.cart-table .product-price,
table.cart-table .product-subtotal {
	color: var(--prix-couleur);
	white-space: nowrap;
}

.cart-remove-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 16px;
	line-height: 1;
	color: var(--texte-secondaire);
	text-decoration: none;
}

.cart-remove-link:hover {
	color: var(--fond-page);
	background: var(--accent);
}

.quantity .qty {
	width: 64px;
	padding: 8px 10px;
	border: 0.5px solid var(--bordure);
	border-radius: var(--radius);
	font-family: var(--font-corps);
	font-size: 14px;
	text-align: center;
	background: #FFFFFF;
	color: var(--texte-principal);
}

.cart-actions-row {
	padding-top: 20px !important;
}

.cart-coupon {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-right: 16px;
}

.cart-coupon__input {
	padding: 10px 14px;
	border: 0.5px solid var(--bordure);
	border-radius: var(--radius);
	font-family: var(--font-corps);
	font-size: 13px;
	background: #FFFFFF;
	color: var(--texte-principal);
	min-width: 180px;
}

.cart-actions-row .button {
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cart-actions-row button[name="update_cart"] {
	margin-top: 12px;
}

/* --- Totaux + bouton "Passer la commande" (généré nativement par
   WooCommerce dans woocommerce_cart_collaterals / woocommerce_cart_totals) --- */

.cart-collaterals {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

.cart_totals {
	background: #EFE6D6;
	padding: 28px 24px;
	border-radius: var(--radius);
}

.cart_totals h2 {
	font-size: 18px;
	margin-bottom: 16px;
}

.cart_totals table {
	width: 100%;
	border-collapse: collapse;
}

.cart_totals table th,
.cart_totals table td {
	padding: 10px 0;
	border-bottom: 1px solid var(--bordure);
	font-size: 13px;
	text-align: left;
}

.cart_totals table th {
	color: var(--texte-secondaire);
	font-weight: 400;
	width: 40%;
}

.cart_totals .order-total td,
.cart_totals .order-total th {
	border-bottom: none;
	font-size: 16px;
	font-weight: 500;
	color: var(--texte-principal);
	padding-top: 16px;
}

.wc-proceed-to-checkout {
	margin-top: 20px;
}

/*
 * Message d'aide ajouté sous "Options de livraison introuvables..."
 * (voir papamoise_no_shipping_available_help_text() dans functions.php)
 * — reprend le style discret déjà utilisé pour les textes secondaires.
 */
.papamoise-shipping-help {
	margin-top: 8px;
	font-size: 13px;
	color: var(--texte-secondaire);
}

.wc-proceed-to-checkout a.checkout-button {
	display: block;
	text-align: center;
	background: var(--accent);
	color: var(--fond-page);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 16px 24px;
	border-radius: var(--radius);
}

.wc-proceed-to-checkout a.checkout-button:hover {
	opacity: 0.85;
}

/* --- Ventes croisées (cross-sells) : réutilise le style .products déjà défini --- */

.cross-sells {
	margin-top: 48px;
}

.cross-sells h2 {
	font-size: 18px;
	margin-bottom: 20px;
}

/* --- Panier vide --- */

.cart-continue-shopping {
	margin: 0 0 20px;
}

.cart-continue-shopping a {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--texte-secondaire);
}

.cart-continue-shopping a:hover {
	color: var(--texte-principal);
}

.cart-empty-state {
	text-align: center;
	padding: 64px 24px;
}

.cart-empty-state p.cart-empty {
	font-size: 15px;
	color: var(--texte-secondaire);
	margin-bottom: 20px;
}

/* ==========================================================================
   17. Commande / paiement (checkout WooCommerce natif — habillage CSS)
   ========================================================================== */

.woocommerce-checkout .col2-set,
.woocommerce-checkout .woocommerce-checkout-review-order {
	max-width: 720px;
}

.woocommerce-checkout form .form-row label {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--texte-secondaire);
}

.woocommerce-checkout form .input-text,
.woocommerce-checkout form select,
.woocommerce-checkout form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 0.5px solid var(--bordure);
	border-radius: var(--radius);
	font-family: var(--font-corps);
	font-size: 14px;
	background: #FFFFFF;
	color: var(--texte-principal);
}

#order_review,
.woocommerce-checkout-review-order {
	background: #EFE6D6;
	padding: 28px 24px;
	border-radius: var(--radius);
}

.woocommerce-checkout #payment {
	background: transparent;
}

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

.woocommerce-checkout #payment div.payment_box {
	background: #FFFFFF;
	border-radius: var(--radius);
}

#place_order,
.woocommerce-checkout .place-order .button {
	width: 100%;
	background: var(--accent);
	color: var(--fond-page);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 16px 24px;
	border-radius: var(--radius);
	border: none;
}

#place_order:hover {
	opacity: 0.85;
}

/* ==========================================================================
   18. Compatibilité Panier/Commande en blocs WooCommerce (Cart & Checkout
   Blocks) — au cas où ces pages utiliseraient les blocs plutôt que les
   shortcodes classiques surchargés ci-dessus.
   ========================================================================== */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 40px 24px 64px;
	font-family: var(--font-corps);
	color: var(--texte-principal);
}

.wc-block-components-product-thumbnail img,
.wc-block-cart-item__image img {
	background: #0F0D0A;
	border-radius: var(--radius);
}

.wc-block-components-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	background: var(--accent) !important;
	color: var(--fond-page) !important;
	border-radius: var(--radius) !important;
	font-size: 11px !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wc-block-components-totals-wrapper,
.wc-block-components-order-summary {
	background: #EFE6D6;
	border-radius: var(--radius);
}

/* ==========================================================================
   19. Lightbox / zoom image produit (PhotoSwipe, natif WooCommerce)
   ========================================================================== */

/*
 * On revient au zoom/lightbox natif de WooCommerce (PhotoSwipe) plutôt
 * qu'une visionneuse maison : ses CSS/JS sont livrés ensemble par
 * WooCommerce comme un tout cohérent (y compris le carrousel de
 * vignettes), et le désactiver partiellement cassait la mise en page.
 * On se contente donc de renforcer le bouton de fermeture, qui peut
 * rester invisible si la feuille de style d'origine de PhotoSwipe est
 * incomplète ou entre en conflit avec un plugin de cache/minification.
 * On la reconstruit ici entièrement à la main (sans dépendre du sprite
 * d'icônes d'origine, potentiellement cassé) : un "×" est dessiné
 * directement en CSS.
 */

.pswp {
	z-index: 100000 !important;
}

.pswp__bg {
	background: #0F0D0A !important;
	opacity: 0.92 !important;
}

.pswp__top-bar {
	background: transparent !important;
}

.pswp__button {
	opacity: 1 !important;
	visibility: visible !important;
}

.pswp__button--close {
	position: fixed !important;
	top: 20px !important;
	right: 20px !important;
	width: 48px !important;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: rgba(15, 13, 10, 0.75) !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	z-index: 100001 !important;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pswp__button--close .pswp__icn {
	/* Masque le sprite d'icône d'origine, potentiellement cassé : on
	   dessine notre propre croix via ::before ci-dessous. */
	display: none !important;
}

.pswp__button--close::before {
	content: "\2715";
	color: #FFFFFF;
	font-size: 20px;
	line-height: 1;
	font-family: system-ui, -apple-system, sans-serif;
}

.pswp__button--close:hover {
	background: rgba(255, 255, 255, 0.95) !important;
	border-color: #FFFFFF !important;
}

.pswp__button--close:hover::before {
	color: #0F0D0A;
}

.pswp__caption,
.pswp__counter {
	font-family: var(--font-corps);
	font-size: 12px;
}

.pswp__button--arrow--left,
.pswp__button--arrow--right {
	opacity: 0.9 !important;
}

/* Image bien centrée et proportionnée, jamais en débordement. */
.pswp__img {
	max-width: 100% !important;
	max-height: 100% !important;
}

/* Le curseur "loupe" indique que l'image s'agrandit au clic. */
.woocommerce-product-gallery__image {
	cursor: zoom-in;
}