/*
Theme Name: Cabrio - Dolce Machja
Theme URI: https://dolce-machja.local
Author: Cyrille Bernard
Author URI: https://cabrio.local
Description: Thème de blocs (FSE) pour une boutique de confitures artisanales sous WooCommerce. Identité gourmande, catalogue produits, panier et retrait en point de vente.
Version: 1.63.13
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Requires Plugins: woocommerce
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cab-dolce-machja
Tags: full-site-editing, block-patterns, block-styles, woocommerce, e-commerce, custom-colors, custom-menu, wide-blocks, translation-ready
*/

/*
 * Le style visuel du thème est piloté par theme.json (FSE).
 * Ce fichier ne sert qu'aux ajustements CSS ponctuels non couverts
 * par theme.json. Préfixe des classes personnalisées : .cab-dolce-
 */

/* -------------------------------------------------------------------------
 * Page d'accueil — sections pleine largeur qui s'enchaînent sans blanc
 * ---------------------------------------------------------------------- */

/* Supprime l'espace au-dessus du contenu (header collé au hero). */
.cab-dolce-home {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
}

/* Pied de page collé à la dernière section (pas de bande blanche). */
footer.wp-block-template-part {
	margin-top: 0 !important;
}

/* -------------------------------------------------------------------------
 * Ancres : défilement doux + décalage sous l'en-tête collant (pas de coupe)
 * ---------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
}

/* Utilisateur connecté : ajouter la hauteur de la barre d'admin (32 px). */
html:has( body.admin-bar ) {
	scroll-padding-top: 152px;
}

@media screen and ( max-width: 782px ) {
	html:has( body.admin-bar ) {
		scroll-padding-top: 166px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}
}

/* -------------------------------------------------------------------------
 * Bouton « retour en haut » (injecté par back-to-top.js)
 * ---------------------------------------------------------------------- */
.cab-dolce-top {
	position: fixed;
	right: clamp( 1rem, 3vw, 2rem );
	bottom: clamp( 1rem, 3vw, 2rem );
	z-index: 200;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 999px;
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 22px -6px rgba( 58, 35, 24, 0.55 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( 12px );
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.18s ease;
}

.cab-dolce-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.cab-dolce-top:hover,
.cab-dolce-top:focus-visible {
	background-color: var( --wp--preset--color--secondary );
}

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-top {
		transition: opacity 0.2s ease;
		transform: none;
	}
}

/* Supprime les blancs entre les sections (hero / diaporama / etc.). */
.cab-dolce-home > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* -------------------------------------------------------------------------
 * Boutons — survol harmonisé et fluide
 * ---------------------------------------------------------------------- */

/* Transition douce sur tous les boutons. */
.wp-block-button__link {
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* Boutons à fond « accent » (hero, points de vente…) : même survol que le
 * bouton par défaut du thème → fond prune foncé + texte clair. */
.wp-block-button__link.has-accent-background-color:hover,
.wp-block-button__link.has-accent-background-color:focus {
	background-color: var( --wp--preset--color--secondary ) !important;
	color: var( --wp--preset--color--base ) !important;
}

/* Boutons « contour » (is-style-outline) : se remplissent en terracotta au survol. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var( --wp--preset--color--primary ) !important;
	border-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--base ) !important;
}

/* -------------------------------------------------------------------------
 * WooCommerce — cartes produit gourmandes (grille de la boutique)
 * ---------------------------------------------------------------------- */

/* Coins arrondis + ombre douce sur les visuels produit. */
.wc-block-product-template .wp-block-woocommerce-product-image img,
.woocommerce ul.products li.product img {
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba( 58, 35, 24, 0.08 );
}

/* Léger soulèvement de la carte au survol. */
.wc-block-product-template .wc-block-product {
	transition: transform 0.18s ease;
}

.wc-block-product-template .wc-block-product:hover {
	transform: translateY( -4px );
}

/* Prix mis en valeur (repli si le style theme.json n'est pas appliqué). */
.wc-block-product-template .wp-block-woocommerce-product-price {
	font-weight: 700;
}

/* Prix barré — même traitement discret que sur la fiche produit, qui l'avait
 * déjà : opacité réduite, graisse normale, taille légèrement inférieure.
 *
 * Le thème le traitait dans trois contextes seulement — la fiche produit, les
 * ventes incitatives et l'ancien widget latéral `ul.product_list_widget` — donc
 * jamais dans le balisage bloc. Partout ailleurs le tarif d'origine gardait la
 * couleur pleine du prix courant, et les deux se confondaient : grille de la
 * boutique, pages de catégorie, colonne latérale d'aujourd'hui.
 *
 * La règle de la fiche produit reste plus spécifique et garde la main sur la
 * taille, adaptée à son prix de 1,8 rem. */
.wc-block-components-product-price del,
.wc-block-grid__product-price del {
	opacity: 0.55;
	font-weight: 400;
	font-size: 0.85em;
}

@media ( prefers-reduced-motion: reduce ) {
	.wc-block-product-template .wc-block-product {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Slider « produits en vedette » (accueil) — défilement horizontal, sans JS
 * ---------------------------------------------------------------------- */
.cab-dolce-slider .wc-block-product-template {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: clamp( 1rem, 2.5vw, 1.75rem );
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0.5rem;
	padding: 0.5rem 0.25rem 1.5rem;
	margin: 0;
	list-style: none;
	scrollbar-color: var( --wp--preset--color--primary ) transparent;
}

.cab-dolce-slider .wc-block-product-template > .wc-block-product {
	flex: 0 0 auto;
	width: clamp( 240px, 42vw, 320px );
	scroll-snap-align: start;
	background-color: var( --wp--preset--color--base );
	border-radius: 16px;
	padding: 0.85rem 0.85rem 0.35rem;
	box-shadow: 0 12px 32px -18px rgba( 58, 35, 24, 0.5 );
}

.cab-dolce-slider .wc-block-product-template::-webkit-scrollbar {
	height: 8px;
}

.cab-dolce-slider .wc-block-product-template::-webkit-scrollbar-thumb {
	background: var( --wp--preset--color--primary );
	border-radius: 999px;
}

.cab-dolce-slider .wc-block-product-template::-webkit-scrollbar-track {
	background: color-mix( in srgb, var( --wp--preset--color--contrast ) 10%, transparent );
	border-radius: 999px;
}

/* Flèches de navigation du carrousel (injectées par carousel.js). */
.cab-dolce-slider {
	position: relative;
}

.cab-dolce-slider__nav {
	position: absolute;
	top: 38%;
	transform: translateY( -50% );
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 999px;
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px -6px rgba( 58, 35, 24, 0.55 );
	transition: background-color 0.18s ease, transform 0.18s ease;
	z-index: 3;
}

.cab-dolce-slider__nav:hover,
.cab-dolce-slider__nav:focus-visible {
	background-color: var( --wp--preset--color--secondary );
	transform: translateY( -50% ) scale( 1.08 );
}

.cab-dolce-slider__nav--prev {
	left: -12px;
}

.cab-dolce-slider__nav--next {
	right: -12px;
}

/* Sur mobile : pas de flèches, on fait glisser au doigt. */
@media ( max-width: 600px ) {
	.cab-dolce-slider__nav {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Diaporama plein écran (accueil) — une confiture à la fois
 * ---------------------------------------------------------------------- */
.cab-dolce-slideshow {
	position: relative;
}

.cab-dolce-slideshow__track,
.cab-dolce-slideshow .wc-block-product-template {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cab-dolce-slideshow__track::-webkit-scrollbar,
.cab-dolce-slideshow .wc-block-product-template::-webkit-scrollbar {
	display: none;
}

.cab-dolce-slideshow__track > .cab-dolce-slideshow__slide,
.cab-dolce-slideshow .wc-block-product-template > .wc-block-product {
	flex: 0 0 100%;
	scroll-snap-align: start;
	margin: 0;
}

/* Diapo « produit » : photo plein cadre + nom/prix/bouton en surimpression. */
.cab-dolce-slideshow .wc-block-product {
	position: relative;
	min-height: 74vh;
	display: block;
	overflow: hidden;
	background-color: var( --wp--preset--color--secondary );
	padding: 0;
	border: 0;
}

/* Pas de soulèvement au survol dans le diaporama (chaque diapo est plein écran). */
.cab-dolce-slideshow .wc-block-product-template .wc-block-product,
.cab-dolce-slideshow .wc-block-product-template .wc-block-product:hover {
	transform: none;
	transition: none;
}

.cab-dolce-slideshow .wc-block-product .cab-dolce-slide__image,
.cab-dolce-slideshow .wc-block-product .wc-block-components-product-image,
.cab-dolce-slideshow .wc-block-product .wc-block-components-product-image a,
.cab-dolce-slideshow .wc-block-product .wc-block-components-product-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
}

.cab-dolce-slideshow .wc-block-product .wc-block-components-product-image img {
	object-fit: cover;
}

.cab-dolce-slide__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: clamp( 2rem, 6vw, 4.5rem ) 1.5rem clamp( 2.5rem, 6vw, 4rem );
	background: linear-gradient( to top, rgba( 28, 26, 25, 0.82 ) 0%, rgba( 28, 26, 25, 0.35 ) 55%, rgba( 28, 26, 25, 0 ) 100% );
}

/* Titre et prix en clair pour rester lisibles sur la diapo (au repos). */
.cab-dolce-slide__overlay .wp-block-post-title,
.cab-dolce-slide__overlay .wp-block-post-title a,
.cab-dolce-slide__overlay .wp-block-woocommerce-product-price,
.cab-dolce-slide__overlay .wp-block-woocommerce-product-price * {
	color: var( --wp--preset--color--base ) !important;
}

.cab-dolce-slide__overlay .wp-block-woocommerce-product-price {
	font-weight: 700;
}

/* Survol du titre : passage en terracotta (primaire). */
.cab-dolce-slide__overlay .wp-block-post-title a:hover,
.cab-dolce-slide__overlay .wp-block-post-title a:focus {
	color: var( --wp--preset--color--primary ) !important;
}

/* Capsule promo du diaporama (badge conditionnel WooCommerce) — coin haut-droit. */
.cab-dolce-slideshow .wc-block-product .wp-block-woocommerce-product-sale-badge {
	position: absolute;
	top: clamp( 1.5rem, 5vh, 3rem );
	right: clamp( 1.5rem, 4vw, 3.5rem );
	left: auto;
	z-index: 4;
	margin: 0;
	font-size: 1rem;
	padding: 0.5rem 1.4rem;
	letter-spacing: 0.08em;
}

/* Prix + poids par variation, centrés et lisibles dans le diaporama. */
.cab-dolce-slide__overlay .cab-dolce-pricing {
	margin-block: 0.6rem 1.4rem;
}

.cab-dolce-slide__overlay .cab-dolce-pw__row {
	font-size: 1.25rem;
}

/* Description courte : claire, centrée, largeur de lecture, max 3 lignes. */
.cab-dolce-slide__desc {
	max-width: 48ch;
	margin-inline: auto;
	color: var( --wp--preset--color--base ) !important;
	opacity: 0.92;
	font-size: 1.05rem;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cab-dolce-slide__desc .wp-block-post-excerpt__more-text {
	display: none;
}

/* -------------------------------------------------------------------------
 * Grille produits « façon Instagram » — photo en fond + texte par-dessus
 * ---------------------------------------------------------------------- */
/* Filtres rapides (pastilles de catégories) au-dessus de la grille. */
.cab-dolce-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 auto var( --wp--preset--spacing--50 );
	max-width: 1200px;
}

/* L'espace sous le titre « Nos confitures » était porté par la phrase
   d'accroche qui le suit. Si celle-ci est absente — elle a été retirée de la
   page d'accueil en production —, les filtres se collent au titre. Le
   sélecteur d'adjacence ne s'applique donc QUE dans ce cas : dès que la phrase
   est présente, les filtres ne suivent plus le titre et la règle s'annule
   d'elle-même, sans risque de double espacement. */
.wp-block-heading + .cab-dolce-filters {
	margin-top: var( --wp--preset--spacing--70 );
}

.cab-dolce-filter {
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--contrast ) 18%, transparent );
	background: transparent;
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1;
	padding: 0.55rem 1.15rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.cab-dolce-filter:hover,
.cab-dolce-filter:focus-visible {
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--primary );
}

.cab-dolce-filter.is-active {
	background-color: var( --wp--preset--color--primary );
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

/* Tuiles très serrées, sans arrondi (grille façon Instagram). */
.cab-dolce-grid .wc-block-product-template {
	gap: 0.1rem !important;
}

.cab-dolce-grid .wc-block-product {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 0;
	margin: 0;
	padding: 0;
	background-color: var( --wp--preset--color--contrast );
}

/* Ceinture/bretelles : la photo remplit vraiment toute la tuile (jusqu'en bas). */
.cab-dolce-grid .wc-block-product .wc-block-grid__product-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

/* Date cachée (sert uniquement au filtre « Nouveautés »). */
.cab-dolce-tile__date {
	display: none !important;
}

/* Badge promo dans le coin haut-droit de la tuile. */
.cab-dolce-grid .wc-block-product .wp-block-woocommerce-product-sale-badge {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	left: auto;
	z-index: 3;
	margin: 0;
}

/* La photo remplit toute la tuile. */
.cab-dolce-grid .wc-block-product .cab-dolce-tile__image,
.cab-dolce-grid .wc-block-product .wc-block-components-product-image,
.cab-dolce-grid .wc-block-product .wc-block-components-product-image a,
.cab-dolce-grid .wc-block-product .wc-block-components-product-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
}

.cab-dolce-grid .wc-block-product .wc-block-components-product-image img {
	object-fit: cover;
	transition: transform 0.5s ease;
}

/* Zoom léger de la photo au survol (pas de soulèvement de la tuile). */
.cab-dolce-grid .wc-block-product-template .wc-block-product:hover {
	transform: none;
}

.cab-dolce-grid .wc-block-product:hover .wc-block-components-product-image img {
	transform: scale( 1.06 );
}

/* Voile plein cadre + nom/prix centrés : CACHÉS au repos, révélés au survol. */
.cab-dolce-tile__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 0.35rem;
	padding: 1.5rem;
	background-color: rgba( 28, 26, 25, 0.58 );
	opacity: 0;
	transition: opacity 0.4s ease;
}

.cab-dolce-grid .wc-block-product:hover .cab-dolce-tile__overlay,
.cab-dolce-grid .wc-block-product:focus-within .cab-dolce-tile__overlay {
	opacity: 1;
}

/* Toute la tuile est cliquable. WooCommerce pose déjà un lien sur l'image,
 * qui couvre tout le cadre ; c'est le voile, posé par-dessus, qui interceptait
 * les clics et obligeait à viser le titre. On le rend transparent au pointeur
 * plutôt que d'ajouter un second lien étiré, qui ferait doublon au clavier et
 * pour les lecteurs d'écran. Le survol continue de fonctionner : il se
 * déclenche sur la tuile entière, dont l'image reste un enfant. */
.cab-dolce-tile__overlay {
	pointer-events: none;
}

/* Le titre reste cliquable pour lui-même. */
.cab-dolce-tile__overlay a {
	pointer-events: auto;
}

/* Le texte monte doucement en apparaissant. */
.cab-dolce-tile__overlay > * {
	transform: translateY( 14px );
	transition: transform 0.4s ease;
}

.cab-dolce-grid .wc-block-product:hover .cab-dolce-tile__overlay > *,
.cab-dolce-grid .wc-block-product:focus-within .cab-dolce-tile__overlay > * {
	transform: translateY( 0 );
}

.cab-dolce-tile__overlay .wp-block-post-title,
.cab-dolce-tile__overlay .wp-block-post-title a,
.cab-dolce-tile__overlay .wp-block-woocommerce-product-price,
.cab-dolce-tile__overlay .wp-block-woocommerce-product-price * {
	color: var( --wp--preset--color--base ) !important;
	margin: 0;
}

.cab-dolce-tile__overlay .wp-block-post-title {
	line-height: 1.2;
}

/* Liste prix + poids par variation (une ligne par format). */
.cab-dolce-pricing {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	margin-top: 0.4rem;
}

.cab-dolce-pricing,
.cab-dolce-pricing * {
	color: var( --wp--preset--color--base ) !important;
}

.cab-dolce-pw__row {
	font-size: 1.05rem;
	line-height: 1.3;
}

/* Ancien prix barré (promo) plus discret, prix promo en gras. */
.cab-dolce-pw__price del {
	opacity: 0.7;
	font-weight: 400;
	margin-right: 0.3rem;
}

.cab-dolce-pw__price ins {
	text-decoration: none;
	font-weight: 700;
}

.cab-dolce-pw__unit {
	font-size: 0.85rem;
	opacity: 0.85;
	margin-left: 0.3rem;
}

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-grid .wc-block-product .wc-block-components-product-image img,
	.cab-dolce-tile__overlay,
	.cab-dolce-tile__overlay > * {
		transition: none;
	}

	.cab-dolce-tile__overlay > * {
		transform: none;
	}
}

/* Flèches de navigation. */
.cab-dolce-slideshow__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 999px;
	background-color: rgba( 255, 255, 255, 0.85 );
	color: var( --wp--preset--color--contrast );
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px -6px rgba( 58, 35, 24, 0.5 );
	transition: background-color 0.18s ease, transform 0.18s ease;
	z-index: 3;
}

.cab-dolce-slideshow__nav:hover,
.cab-dolce-slideshow__nav:focus-visible {
	background-color: #fff;
	transform: translateY( -50% ) scale( 1.08 );
}

.cab-dolce-slideshow__nav--prev {
	left: 18px;
}

.cab-dolce-slideshow__nav--next {
	right: 18px;
}

/* Points de navigation. */
.cab-dolce-slideshow__dots {
	position: absolute;
	bottom: 22px;
	left: 0;
	right: 0;
	display: flex;
	gap: 0.55rem;
	justify-content: center;
	z-index: 3;
}

.cab-dolce-slideshow__dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: rgba( 255, 255, 255, 0.6 );
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.4 );
	cursor: pointer;
	transition: transform 0.18s ease, background-color 0.18s ease;
}

.cab-dolce-slideshow__dot[aria-current="true"] {
	background-color: #fff;
	transform: scale( 1.3 );
}

@media ( max-width: 600px ) {
	.cab-dolce-slideshow__nav {
		width: 40px;
		height: 40px;
		font-size: 1.5rem;
	}

	.cab-dolce-slideshow__nav--prev {
		left: 8px;
	}

	.cab-dolce-slideshow__nav--next {
		right: 8px;
	}
}

/* -------------------------------------------------------------------------
 * Accessibilité
 * ---------------------------------------------------------------------- */

/* Masquage visuel réservé aux lecteurs d'écran. */
.screen-reader-text {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Le lien d'évitement réapparaît quand il reçoit le focus clavier. */
.skip-link.screen-reader-text:focus {
	background-color: var( --wp--preset--color--base );
	border-radius: 6px;
	box-shadow: 0 0 2px 2px rgba( 0, 0, 0, 0.3 );
	clip: auto;
	clip-path: none;
	color: var( --wp--preset--color--primary );
	display: block;
	font-weight: 600;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 12px 20px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
}

/* Contour de focus clavier lisible sur tous les éléments interactifs. */
:where( a, button, input, select, textarea, .wp-block-button__link, summary ):focus-visible {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 2px;
}

/* Cible du lien d'évitement : pas de contour disgracieux au focus programmatique. */
#cab-dolce-content:focus {
	outline: none;
}

/* -------------------------------------------------------------------------
 * En-tête & navigation — version moderne
 * ---------------------------------------------------------------------- */

/* En-tête collant : position, marges, bordure et ombre gérées ici (pas de
 * style en ligne dans le markup, pour éviter les erreurs de validation de bloc). */
/* Le conteneur de la partie de modèle « en-tête » est rendu collant : son
 * parent (.wp-site-blocks) fait toute la hauteur de la page, donc il reste
 * bien visible au défilement (le rendre collant sur le header interne ne
 * marche pas : il est enfermé dans un conteneur de sa propre hauteur). */
/* Empêche l'ancrage de défilement de Chrome de "compenser" le rétrécissement
 * du header (cause principale du tremblement au scroll). */
html {
	overflow-anchor: none;
}

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Décalage sous la barre d'administration WordPress (utilisateur connecté). */
.admin-bar header.wp-block-template-part {
	top: 32px;
}

@media screen and ( max-width: 782px ) {
	.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}

.cab-dolce-header {
	position: relative;
	z-index: 100;
	padding-block: 0.7rem;
	padding-inline: clamp( 1rem, 4vw, 2rem );
	border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--contrast ) 8%, transparent );
	box-shadow: 0 6px 22px -14px rgba( 58, 35, 24, 0.45 );
	transition: box-shadow 0.3s ease, background-color 0.3s ease, padding 0.4s ease;
}

/* En-tête compact au défilement : header plus fin + logo réduit. */
.cab-dolce-header.is-scrolled {
	padding-block: 0.3rem;
}

.cab-dolce-logo,
.cab-dolce-logo img {
	transition: width 0.4s ease, height 0.4s ease;
}

.cab-dolce-header.is-scrolled .cab-dolce-logo,
.cab-dolce-header.is-scrolled .cab-dolce-logo img {
	width: 48px !important;
	height: auto !important;
}

/* Fond crème net (pas de backdrop-filter : évite le scintillement au scroll). */
.cab-dolce-header.has-background {
	background-color: var( --wp--preset--color--base );
}

/* Repli pour les navigateurs sans color-mix : fond crème opaque + bordure charte. */
@supports not ( background-color: color-mix( in srgb, red, blue ) ) {
	.cab-dolce-header {
		border-bottom-color: var( --wp--preset--color--base-2 );
	}

	.cab-dolce-header.has-background {
		background-color: var( --wp--preset--color--base );
	}
}

/* Espacements de la barre et du bloc d'actions (compte + panier). */
.cab-dolce-header__bar {
	gap: clamp( 1rem, 3vw, 2rem );
}

/* Logo du site dans l'en-tête. */
.cab-dolce-logo {
	line-height: 0;
}

.cab-dolce-logo img {
	display: block;
	height: auto;
	transition: transform 0.2s ease;
}

.cab-dolce-logo a:hover img,
.cab-dolce-logo a:focus img {
	transform: scale( 1.04 );
}

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-logo img {
		transition: none;
	}
}

/* Bloc marque : nom + baseline corse serrés (conservé au cas où). */
.cab-dolce-brand {
	gap: 0.1rem;
}

.cab-dolce-brand .wp-block-site-title {
	line-height: 1.1;
	margin: 0;
}

/* Baseline « A cunfittura di Baracucca » : petites capitales espacées, caramel. */
.cab-dolce-baseline {
	margin: 0;
	font-family: var( --wp--preset--font-family--heading );
	font-style: italic;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --wp--preset--color--contrast-2 );
}

.cab-dolce-header__actions {
	gap: 0.8rem;
}

/* Espacement aéré entre les entrées du menu. */
.cab-dolce-header .wp-block-navigation {
	font-family: var( --wp--preset--font-family--body );
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 0.01em;
}

.cab-dolce-header .wp-block-navigation .wp-block-navigation__container {
	gap: clamp( 1.1rem, 2vw, 2.2rem );
}

/* Chaque lien : couleur douce au repos, soulignement animé au survol. */
.cab-dolce-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding: 0.35rem 0.15rem;
	color: var( --wp--preset--color--contrast );
	text-decoration: none;
	transition: color 0.18s ease;
}

.cab-dolce-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	border-radius: 2px;
	background-color: var( --wp--preset--color--primary );
	transform: scaleX( 0 );
	transform-origin: center;
	transition: transform 0.22s ease;
}

.cab-dolce-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.cab-dolce-header .wp-block-navigation .wp-block-navigation-item__content:focus,
.cab-dolce-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var( --wp--preset--color--primary );
}

.cab-dolce-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.cab-dolce-header .wp-block-navigation .wp-block-navigation-item__content:focus::after,
.cab-dolce-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX( 1 );
}

/* Lien « Mon compte » : icône + pastille au survol. */
.cab-dolce-header .cab-dolce-account a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	color: var( --wp--preset--color--contrast );
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.cab-dolce-header .cab-dolce-account a::before {
	content: "\1F464"; /* 👤 */
	font-size: 0.95em;
	line-height: 1;
}

.cab-dolce-header .cab-dolce-account a:hover,
.cab-dolce-header .cab-dolce-account a:focus {
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--primary );
}

/* Icône « Compte » (WooCommerce) + panier : mêmes couleurs, même survol. */
.cab-dolce-header__actions .wp-block-woocommerce-customer-account a,
.cab-dolce-header__actions .wc-block-mini-cart__button {
	color: var( --wp--preset--color--contrast );
	transition: color 0.18s ease, transform 0.18s ease;
}

.cab-dolce-header__actions .wp-block-woocommerce-customer-account a:hover,
.cab-dolce-header__actions .wp-block-woocommerce-customer-account a:focus,
.cab-dolce-header__actions .wc-block-mini-cart__button:hover,
.cab-dolce-header__actions .wc-block-mini-cart__button:focus {
	color: var( --wp--preset--color--primary );
}

.cab-dolce-header__actions .wp-block-woocommerce-customer-account svg,
.cab-dolce-header__actions .wc-block-mini-cart__button svg {
	width: 1.4rem;
	height: 1.4rem;
}

/* Lien Connexion / Déconnexion (bloc natif, bascule selon l'état). */
.cab-dolce-header .cab-dolce-loginout a {
	color: var( --wp--preset--color--contrast );
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.18s ease;
}

.cab-dolce-header .cab-dolce-loginout a:hover,
.cab-dolce-header .cab-dolce-loginout a:focus {
	color: var( --wp--preset--color--primary );
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Bouton burger (mobile) aux couleurs de la charte. */
.cab-dolce-header .wp-block-navigation__responsive-container-open,
.cab-dolce-header .wp-block-navigation__responsive-container-close {
	color: var( --wp--preset--color--contrast );
}

/* Overlay mobile : fond crème, liens larges et centrés. */
.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --wp--preset--color--base );
	padding: clamp( 2rem, 8vw, 4rem );
}

.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.4rem;
}

.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.4rem;
	font-family: var( --wp--preset--font-family--heading );
}

.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* -------------------------------------------------------------------------
 * Emplacements photo — page « Les fruits de Corse »
 * Cadrage propre des images de décor, vides comme remplies.
 * ---------------------------------------------------------------------- */

/* Triptyque : 3 photos portrait, gap serré (identique à la grille d'accueil). */
.cab-dolce-triptyque {
	gap: 0.1rem !important;
}

.cab-dolce-triptyque .wp-block-column {
	margin: 0;
}

.cab-dolce-tri-img,
.cab-dolce-tri-img img {
	margin: 0;
}

.cab-dolce-tri-img {
	position: relative;
	display: block;
	overflow: hidden;
}

.cab-dolce-tri-img img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.5s ease;
}

/* Survol : zoom de la photo + assombrissement (même effet que les tuiles). */
.cab-dolce-tri-img:hover img,
.cab-dolce-tri-img:focus-within img {
	transform: scale( 1.06 );
}

.cab-dolce-tri-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba( 28, 26, 25, 0.35 );
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.cab-dolce-tri-img:hover::after,
.cab-dolce-tri-img:focus-within::after {
	opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-tri-img img,
	.cab-dolce-tri-img::after {
		transition: none;
	}

	.cab-dolce-tri-img:hover img,
	.cab-dolce-tri-img:focus-within img {
		transform: none;
	}
}

/* Sur mobile, on conserve les 3 colonnes côte à côte (comme le modèle). */
@media screen and ( max-width: 781px ) {
	.cab-dolce-triptyque {
		flex-wrap: nowrap !important;
	}

	.cab-dolce-triptyque .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1 !important;
	}
}

/* Tuile fruit (bloc Bannière) : photo en fond, format carré, texte par-dessus. */
.cab-dolce-fruit-cover {
	aspect-ratio: 1 / 1;
	min-height: 0 !important;
	border-radius: 12px;
	overflow: hidden;
	padding: 1rem;
}

/* Variante paysage (16/9) : sections à deux tuiles, ex. « trésors du maquis ». */
.cab-dolce-fruit-cover--wide {
	aspect-ratio: 16 / 9;
}

/* La photo de fond couvre toute la tuile. */
.cab-dolce-fruit-cover .wp-block-cover__image-background {
	object-fit: cover;
}

/* Texte centré, espacement resserré, toujours au-dessus du voile. */
.cab-dolce-fruit-cover .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.cab-dolce-fruit-cover .wp-block-cover__inner-container > * {
	margin: 0;
}

/* Le texte de la tuile reste blanc, y compris dans l'éditeur. */
.cab-dolce-fruit-cover .wp-block-cover__inner-container :where( h1, h2, h3, h4, p ) {
	color: var( --wp--preset--color--base );
}

/* Survol : zoom de la photo, assombrissement et texte en fondu
   (même effet que la grille « Nos confitures » de l'accueil). */
.cab-dolce-fruit-cover .wp-block-cover__image-background {
	transition: transform 0.5s ease;
}

.cab-dolce-fruit-cover:hover .wp-block-cover__image-background,
.cab-dolce-fruit-cover:focus-within .wp-block-cover__image-background {
	transform: scale( 1.06 );
}

/* Voile sombre absent au repos, révélé au survol. */
.cab-dolce-fruit-cover .wp-block-cover__background.has-background-dim {
	opacity: 0 !important;
	transition: opacity 0.4s ease;
}

.cab-dolce-fruit-cover:hover .wp-block-cover__background.has-background-dim,
.cab-dolce-fruit-cover:focus-within .wp-block-cover__background.has-background-dim {
	opacity: 0.58 !important;
}

/* Texte masqué au repos, qui remonte en douceur au survol. */
.cab-dolce-fruit-cover .wp-block-cover__inner-container {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.cab-dolce-fruit-cover:hover .wp-block-cover__inner-container,
.cab-dolce-fruit-cover:focus-within .wp-block-cover__inner-container {
	opacity: 1;
}

.cab-dolce-fruit-cover .wp-block-cover__inner-container > * {
	transform: translateY( 14px );
	transition: transform 0.4s ease;
}

.cab-dolce-fruit-cover:hover .wp-block-cover__inner-container > *,
.cab-dolce-fruit-cover:focus-within .wp-block-cover__inner-container > * {
	transform: translateY( 0 );
}

/* Dans l'éditeur, tout reste visible pour pouvoir modifier les textes. */
.editor-styles-wrapper .cab-dolce-fruit-cover .wp-block-cover__inner-container {
	opacity: 1;
}

.editor-styles-wrapper .cab-dolce-fruit-cover .wp-block-cover__inner-container > * {
	transform: none;
}

.editor-styles-wrapper .cab-dolce-fruit-cover .wp-block-cover__background.has-background-dim {
	opacity: 0.5 !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-fruit-cover .wp-block-cover__image-background,
	.cab-dolce-fruit-cover .wp-block-cover__background.has-background-dim,
	.cab-dolce-fruit-cover .wp-block-cover__inner-container,
	.cab-dolce-fruit-cover .wp-block-cover__inner-container > * {
		transition: none;
	}

	.cab-dolce-fruit-cover .wp-block-cover__inner-container > * {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Boutique — mise en page à deux colonnes avec barre latérale
 * ---------------------------------------------------------------------- */
.cab-dolce-shop {
	align-items: flex-start;
}

/* Barre latérale : reste visible pendant le défilement des produits. */
.cab-dolce-shop__sidebar {
	position: sticky;
	top: 120px;
}

.admin-bar .cab-dolce-shop__sidebar {
	top: 152px;
}

.cab-dolce-shop__sidebar h2,
.cab-dolce-shop__sidebar h3 {
	font-family: var( --wp--preset--font-family--heading );
}

.cab-dolce-shop__sidebar > h2:first-child {
	margin-top: 0;
}

/* Conteneur du bloc Recherche : ni cadre ni fond (styles par défaut du bloc). */
.cab-dolce-shop__sidebar .wp-block-search__inside-wrapper {
	gap: 0.4rem;
	padding: 0;
	border: 0;
	background: transparent;
}

/* Bouton loupe : pastille terracotta. */
.cab-dolce-shop__sidebar .wp-block-search__button {
	margin: 0;
	padding: 0.55rem 0.95rem;
	border: 0;
	border-radius: 999px;
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
	transition: background-color 0.18s ease, color 0.18s ease;
}

.cab-dolce-shop__sidebar .wp-block-search__button:hover,
.cab-dolce-shop__sidebar .wp-block-search__button:focus {
	background-color: var( --wp--preset--color--secondary );
	color: var( --wp--preset--color--base );
}

/* Champ de recherche aux couleurs de la charte. */
.cab-dolce-shop__sidebar .wp-block-search__input {
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 999px;
	padding: 0.6rem 1rem;
	background-color: var( --wp--preset--color--base );
	font-size: 0.95rem;
}

.cab-dolce-shop__sidebar .wp-block-search__input:focus {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 1px;
}

/* Liste des catégories : une ligne par catégorie, compteur à droite. */
.cab-dolce-shop__sidebar .wc-block-product-categories-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Le compteur est un frère du lien : c'est le <li> qui porte la mise en ligne. */
.cab-dolce-shop__sidebar .wc-block-product-categories-list-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-shop__sidebar .wc-block-product-categories-list-item:last-child {
	border-bottom: 0;
}

.cab-dolce-shop__sidebar .wc-block-product-categories-list-item > a {
	flex: 1 1 auto;
	padding: 0;
	color: var( --wp--preset--color--contrast );
	text-decoration: none;
	transition: color 0.18s ease;
}

.cab-dolce-shop__sidebar .wc-block-product-categories-list-item > a:hover,
.cab-dolce-shop__sidebar .wc-block-product-categories-list-item > a:focus {
	color: var( --wp--preset--color--primary );
}

/* Compteur en pastille discrète, aligné à droite sur la même ligne. */
.cab-dolce-shop__sidebar .wc-block-product-categories-list-item-count {
	flex: none;
	min-width: 1.8rem;
	padding: 0.08rem 0.5rem;
	border-radius: 999px;
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.78rem;
	line-height: 1.5;
	text-align: center;
}

/* Sous-catégories : ligne entière sous le parent, légèrement décalées. */
.cab-dolce-shop__sidebar .wc-block-product-categories-list-item > .wc-block-product-categories-list {
	flex: 0 0 100%;
	margin: 0.35rem 0 0;
	padding-left: 0.9rem;
	border-left: 2px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-shop__sidebar .wc-block-product-categories-list-item > .wc-block-product-categories-list .wc-block-product-categories-list-item {
	border-bottom: 0;
	padding: 0.3rem 0;
	font-size: 0.92rem;
}

/* Encarts de la barre latérale. */
.cab-dolce-shop__card > *:first-child {
	margin-top: 0;
}

.cab-dolce-shop__card > *:last-child {
	margin-bottom: 0;
}

/* Barre « nombre de résultats + tri ». */
.cab-dolce-shop__toolbar {
	gap: 1rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-shop__toolbar .woocommerce-result-count {
	margin: 0;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.9rem;
}

.cab-dolce-shop__toolbar select {
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 999px;
	padding: 0.45rem 2rem 0.45rem 0.9rem;
	background-color: var( --wp--preset--color--base );
	font-size: 0.9rem;
}

/* Sur tablette et mobile : la barre latérale passe au-dessus des produits. */
@media screen and ( max-width: 781px ) {
	.cab-dolce-shop__sidebar {
		position: static;
		top: auto;
	}
}

/* -------------------------------------------------------------------------
 * Boutique — liste de produits en barre latérale (« Produits les mieux notés »)
 * Vignette à gauche, titre / note / prix à droite.
 * ---------------------------------------------------------------------- */

/* --- Cas 1 : bloc « Collection de produits » --- */
.cab-dolce-shop__sidebar .wc-block-product-template {
	display: flex !important;
	flex-direction: column;
	gap: 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cab-dolce-shop__sidebar .wc-block-product-template .wc-block-product {
	display: grid;
	grid-template-columns: 72px 1fr;
	/* Rangées explicites : indispensable pour que « 1 / -1 » couvre
	   toute la hauteur (sinon -1 vaut la ligne 1 et l'image se décale). */
	grid-template-rows: repeat( 4, min-content );
	align-items: center;
	align-content: center;
	column-gap: 0.85rem;
	row-gap: 0.15rem;
	width: 100% !important;
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: left;
	background: none;
	box-shadow: none;
}

/* Pas de soulèvement au survol dans la barre latérale. */
.cab-dolce-shop__sidebar .wc-block-product-template .wc-block-product:hover {
	transform: none;
}

.cab-dolce-shop__sidebar .wc-block-product-template .wp-block-woocommerce-product-image {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: center;
	margin: 0;
}

/* Titre, note et prix : tous en colonne 2, alignés à gauche. */
.cab-dolce-shop__sidebar .wc-block-product-template .wc-block-product > *:not( .wp-block-woocommerce-product-image ) {
	grid-column: 2;
	justify-self: stretch;
}

/* Les blocs portent des marges en ligne (réglages d'espacement du modèle) :
   on les neutralise, c'est « row-gap » qui gère l'écart entre les lignes. */
.cab-dolce-shop__sidebar .wc-block-product-template .wc-block-product > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.cab-dolce-shop__sidebar .wc-block-product-template .wp-block-woocommerce-product-image img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: none;
}

.cab-dolce-shop__sidebar .wc-block-product-template .wp-block-post-title {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.35;
	text-align: left;
}

.cab-dolce-shop__sidebar .wc-block-product-template .wp-block-post-title a {
	color: var( --wp--preset--color--contrast );
	text-decoration: none;
	transition: color 0.18s ease;
}

.cab-dolce-shop__sidebar .wc-block-product-template .wp-block-post-title a:hover,
.cab-dolce-shop__sidebar .wc-block-product-template .wp-block-post-title a:focus {
	color: var( --wp--preset--color--primary );
}

.cab-dolce-shop__sidebar .wc-block-product-template .wp-block-woocommerce-product-price {
	margin: 0.2rem 0 0;
	font-size: 0.92rem;
	text-align: left;
	color: var( --wp--preset--color--contrast-2 );
}

/* Étoiles (bloc « Note du produit ») aux couleurs de la charte. */
.cab-dolce-shop__sidebar .wc-block-product-template .wc-block-components-product-rating,
.cab-dolce-shop__sidebar .wc-block-product-template .wp-block-woocommerce-product-rating {
	margin: 0 !important;
	font-size: 0.85rem;
	line-height: 1.2;
	text-align: left;
	justify-content: flex-start;
}

.cab-dolce-shop__sidebar .wc-block-components-product-rating__stars,
.cab-dolce-shop__sidebar .wc-block-components-product-rating__stars::before,
.cab-dolce-shop__sidebar .wc-block-components-product-rating__stars span::before {
	color: var( --wp--preset--color--primary );
}

.cab-dolce-shop__sidebar .wc-block-components-product-rating__reviews_count {
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.8rem;
}

/* Bouton d'achat masqué : la barre latérale reste une liste de découverte. */
.cab-dolce-shop__sidebar .wc-block-product-template .wp-block-woocommerce-product-button {
	display: none;
}

/* --- Cas 2 : liste classique WooCommerce (product_list_widget) --- */
.cab-dolce-shop__sidebar ul.product_list_widget {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cab-dolce-shop__sidebar ul.product_list_widget li {
	display: grid;
	grid-template-columns: 72px 1fr;
	grid-template-rows: repeat( 3, min-content );
	align-items: center;
	align-content: center;
	column-gap: 0.85rem;
	row-gap: 0.15rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-shop__sidebar ul.product_list_widget li:last-child {
	border-bottom: 0;
}

.cab-dolce-shop__sidebar ul.product_list_widget li > a {
	display: contents;
	color: var( --wp--preset--color--contrast );
	text-decoration: none;
}

.cab-dolce-shop__sidebar ul.product_list_widget li img {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: center;
	width: 72px;
	height: 72px;
	margin: 0;
	object-fit: cover;
	border-radius: 10px;
	float: none;
}

.cab-dolce-shop__sidebar ul.product_list_widget .product-title {
	font-family: var( --wp--preset--font-family--heading );
	font-size: 0.95rem;
	line-height: 1.35;
	transition: color 0.18s ease;
}

.cab-dolce-shop__sidebar ul.product_list_widget li > a:hover .product-title,
.cab-dolce-shop__sidebar ul.product_list_widget li > a:focus .product-title {
	color: var( --wp--preset--color--primary );
}

.cab-dolce-shop__sidebar ul.product_list_widget .star-rating {
	margin: 0.2rem 0;
	font-size: 0.75rem;
	color: var( --wp--preset--color--primary );
}

.cab-dolce-shop__sidebar ul.product_list_widget .woocommerce-Price-amount {
	font-weight: 600;
	font-size: 0.92rem;
	color: var( --wp--preset--color--contrast-2 );
}

.cab-dolce-shop__sidebar ul.product_list_widget del {
	opacity: 0.6;
	font-weight: 400;
}

/* -------------------------------------------------------------------------
 * Page de résultats de recherche — cartes avec visuel
 * ---------------------------------------------------------------------- */

/* Formulaire de recherche centré, aux couleurs de la charte. */
.cab-dolce-search-form .wp-block-search__inside-wrapper {
	gap: 0.5rem;
	padding: 0;
	border: 0;
	background: transparent;
}

.cab-dolce-search-form .wp-block-search__input {
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 999px;
	padding: 0.7rem 1.1rem;
	background-color: var( --wp--preset--color--base );
}

.cab-dolce-search-form .wp-block-search__input:focus {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 1px;
}

.cab-dolce-search-form .wp-block-search__button {
	margin: 0;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
	font-weight: 600;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.cab-dolce-search-form .wp-block-search__button:hover,
.cab-dolce-search-form .wp-block-search__button:focus {
	background-color: var( --wp--preset--color--secondary );
	color: var( --wp--preset--color--base );
}

/* Grille de résultats. */
.cab-dolce-results .wp-block-post-template {
	gap: clamp( 1.2rem, 2.5vw, 2rem );
}

.cab-dolce-result {
	height: 100%;
}

.cab-dolce-result .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
}

.cab-dolce-result .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.cab-dolce-result:hover .wp-block-post-featured-image img {
	transform: scale( 1.06 );
}

/* Repli visuel quand l'article n'a pas d'image mise en avant. */
.cab-dolce-result .wp-block-post-featured-image:empty {
	display: none;
}

.cab-dolce-result .wp-block-post-title a {
	color: var( --wp--preset--color--contrast );
	text-decoration: none;
	transition: color 0.18s ease;
}

.cab-dolce-result .wp-block-post-title a:hover,
.cab-dolce-result .wp-block-post-title a:focus {
	color: var( --wp--preset--color--primary );
}

.cab-dolce-result .wp-block-post-excerpt {
	color: var( --wp--preset--color--contrast-2 );
	line-height: 1.55;
}

.cab-dolce-result .wp-block-post-excerpt__more-link {
	color: var( --wp--preset--color--primary );
}

/* -------------------------------------------------------------------------
 * Grille d'articles façon Instagram — blog et archives
 *
 * Des photos en portrait, serrées, dont le titre n'apparaît qu'au survol. On
 * reprend la mécanique des tuiles de la boutique — voile sombre, texte centré
 * qui monte, voile transparent au pointeur — et le cadrage 3/4 du triptyque.
 * Les résultats de recherche gardent, eux, la vignette détaillée : on y lit
 * les titres et les résumés, on ne les survole pas un par un.
 * ---------------------------------------------------------------------- */
.cab-dolce-results--tuiles .wp-block-post-template {
	gap: 0.1rem;
}

.cab-dolce-post-tile {
	position: relative;
	overflow: hidden;
}

/* La photo occupe toute la tuile et donne sa hauteur, comme dans le triptyque.
   « padding: 0 » annule le retrait que la mise en page contrainte du groupe
   applique par défaut. */
.cab-dolce-post-tile,
.cab-dolce-post-tile__image {
	padding: 0 !important;
}

.cab-dolce-post-tile__image {
	margin: 0;
}

.cab-dolce-post-tile__image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.5s ease;
}

.cab-dolce-post-tile:hover .cab-dolce-post-tile__image img,
.cab-dolce-post-tile:focus-within .cab-dolce-post-tile__image img {
	transform: scale( 1.06 );
}

/* Voile plein cadre + titre et date centrés : cachés au repos, révélés au
   survol et à la prise de focus au clavier. */
/* Sélecteur à deux classes, et non une : dans l'éditeur de site, le bloc porte
   aussi « .block-editor-block-list__block », que Gutenberg met en
   « position: relative » avec une spécificité supérieure. Le voile repassait
   donc dans le flux — invisible, puisque son opacité est nulle, mais occupant
   250 px sous chaque tuile. D'où le grand vide entre la mosaïque et le bouton,
   visible en édition seulement. */
.cab-dolce-post-tile .cab-dolce-post-tile__overlay {
	position: absolute;
	inset: 0;
	/* La mise en page contrainte pose une marge haute sur tout enfant du
	   groupe. Sur une boîte absolue calée à « inset: 0 », haut et bas sont déjà
	   fixés : la marge devient surnuméraire, le navigateur la résout en
	   décalant le voile vers le bas et en le raccourcissant d'autant. */
	margin: 0 !important;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 1.5rem;
	background-color: rgba( 28, 26, 25, 0.58 );
	text-align: center;
	opacity: 0;
	transition: opacity 0.4s ease;
	/* Le lien de l'image couvre déjà toute la tuile ; sans cette ligne, le
	   voile intercepterait les clics et il faudrait viser le titre. */
	pointer-events: none;
}

.cab-dolce-post-tile__overlay a {
	pointer-events: auto;
}

.cab-dolce-post-tile:hover .cab-dolce-post-tile__overlay,
.cab-dolce-post-tile:focus-within .cab-dolce-post-tile__overlay {
	opacity: 1;
}

/* Le texte monte doucement en apparaissant. */
.cab-dolce-post-tile__overlay > * {
	margin: 0;
	transform: translateY( 14px );
	transition: transform 0.4s ease;
}

.cab-dolce-post-tile:hover .cab-dolce-post-tile__overlay > *,
.cab-dolce-post-tile:focus-within .cab-dolce-post-tile__overlay > * {
	transform: translateY( 0 );
}

.cab-dolce-post-tile__overlay .wp-block-post-title,
.cab-dolce-post-tile__overlay .wp-block-post-title a {
	color: var( --wp--preset--color--base ) !important;
	line-height: 1.2;
	text-decoration: none;
}

/* Accroche de la tuile. Contrairement aux bandeaux, on accepte ici le repli
   automatique de WordPress sur les premiers mots du contenu : une tuile sans
   une ligne de texte ne dit rien de l'article, alors qu'un bandeau a déjà son
   titre et le contenu juste en dessous.
   Le nombre de lignes est borné à l'affichage plutôt qu'au nombre de mots :
   « excerptLength » ne s'applique qu'aux extraits fabriqués, et laisserait un
   extrait rédigé déborder de la tuile. */
.cab-dolce-post-tile__texte {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	color: var( --wp--preset--color--base ) !important;
	line-height: 1.45;
	opacity: 0.9;
}

.cab-dolce-post-tile__date {
	color: var( --wp--preset--color--base ) !important;
	font-style: italic;
	letter-spacing: 0.04em;
	opacity: 0.85;
}

/* Nombre de commentaires : bulle pleine et chiffre en gras, franchement
   lisibles, comme sur la grille d'Instagram. C'est le seul chiffre de la
   tuile ; le mettre en avant lui donne son sens — il y a une conversation
   derrière cet article.
   L'icône est un masque plutôt qu'une image : elle prend ainsi la couleur du
   texte, et suivra un changement de palette sans être redessinée.
   Le compteur disparaît quand l'article n'a aucun commentaire : voir
   « cab_dolce_compteur_commentaires() ». */
.cab-dolce-post-tile__commentaires {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.5rem !important;
	color: var( --wp--preset--color--base ) !important;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1;
}

.cab-dolce-post-tile__commentaires::before {
	content: "";
	flex: none;
	width: 1.25em;
	height: 1.25em;
	background-color: currentColor;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.5 3 2 6.6 2 11c0 2.4 1.3 4.6 3.4 6-.1 1.2-.6 2.5-1.6 3.6 1.9-.3 3.6-1.1 4.9-2.1 1 .3 2.1.4 3.3.4 5.5 0 10-3.6 10-8s-4.5-8-10-8z'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.5 3 2 6.6 2 11c0 2.4 1.3 4.6 3.4 6-.1 1.2-.6 2.5-1.6 3.6 1.9-.3 3.6-1.1 4.9-2.1 1 .3 2.1.4 3.3.4 5.5 0 10-3.6 10-8s-4.5-8-10-8z'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

/* Article sans image mise en avant : la tuile serait un rectangle vide. On
   garde alors le voile en place, sur le fond rosé, pour que le titre reste
   lisible sans avoir à deviner qu'il faut survoler. */
/* Le fond rosé n'est posé que sur les tuiles sans photo. Appliqué à toutes, il
   se voyait partout où la photo ne remplissait pas encore son cadre — dans
   l'aperçu des compositions notamment, où l'image n'est pas chargée. */
.cab-dolce-post-tile:not( :has( img ) ) {
	aspect-ratio: 3 / 4;
	background-color: var( --wp--preset--color--base-2 );
}

.cab-dolce-post-tile:not( :has( img ) ) .cab-dolce-post-tile__overlay {
	background-color: rgba( 28, 26, 25, 0.72 );
	opacity: 1;
}

.cab-dolce-post-tile:not( :has( img ) ) .cab-dolce-post-tile__overlay > * {
	transform: none;
}

/* -------------------------------------------------------------------------
 * Rail d'articles à flèches — composition « DolceNews » (accueil)
 *
 * Les mêmes tuiles que la mosaïque des archives, mises sur un rail horizontal.
 * Le défilement est celui du navigateur, aimanté par « scroll-snap » : le geste
 * tactile fonctionne sans une ligne de script, et les flèches ne font que le
 * commander. Pas de défilement automatique — le visiteur avance quand il veut.
 * ---------------------------------------------------------------------- */
.cab-dolce-articles-slider {
	position: relative;
}

.cab-dolce-articles-slider .wp-block-post-template {
	display: flex;
	gap: 0.1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Barre de défilement masquée : les flèches et le geste suffisent, et une
	   barre sous des photos casserait la mosaïque. */
	scrollbar-width: none;
}

.cab-dolce-articles-slider .wp-block-post-template::-webkit-scrollbar {
	display: none;
}

/* Trois tuiles par écran, gouttières déduites. */
.cab-dolce-articles-slider .wp-block-post-template > * {
	flex: 0 0 calc( ( 100% - 0.2rem ) / 3 );
	scroll-snap-align: start;
	margin: 0;
}

.cab-dolce-articles-slider__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	transform: translateY( -50% );
	border: 0;
	border-radius: 999px;
	background-color: var( --wp--preset--color--base );
	box-shadow: 0 4px 14px rgba( 28, 26, 25, 0.22 );
	color: var( --wp--preset--color--contrast );
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.cab-dolce-articles-slider__nav--prev {
	left: -12px;
}

.cab-dolce-articles-slider__nav--next {
	right: -12px;
}

.cab-dolce-articles-slider__nav:hover:not( :disabled ) {
	transform: translateY( -50% ) scale( 1.08 );
}

/* Une flèche qui ne mène nulle part est un piège : on la montre éteinte plutôt
   que de la faire disparaître, pour que le rail ne saute pas. */
.cab-dolce-articles-slider__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Rien ne dépasse : le rail n'est pas un rail, les flèches n'ont pas lieu
   d'être. Classe posée par le script. */
.cab-dolce-articles-slider--fixe .cab-dolce-articles-slider__nav {
	display: none;
}

@media screen and ( max-width: 1024px ) {
	.cab-dolce-articles-slider .wp-block-post-template > * {
		flex-basis: calc( ( 100% - 0.1rem ) / 2 );
	}
}

@media screen and ( max-width: 600px ) {
	/* Une tuile pleine, et un fragment de la suivante : c'est ce débord qui
	   annonce qu'il y a autre chose à voir. */
	.cab-dolce-articles-slider .wp-block-post-template > * {
		flex-basis: 82%;
	}

	.cab-dolce-articles-slider__nav {
		width: 38px;
		height: 38px;
		font-size: 1.3rem;
	}

	.cab-dolce-articles-slider__nav--prev {
		left: 2px;
	}

	.cab-dolce-articles-slider__nav--next {
		right: 2px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-articles-slider .wp-block-post-template {
		scroll-behavior: auto;
	}

	.cab-dolce-articles-slider__nav {
		transition: none;
	}

	.cab-dolce-articles-slider__nav:hover:not( :disabled ) {
		transform: translateY( -50% );
	}
}

/* Sans survol — un écran tactile —, le titre ne s'afficherait jamais : rien ne
   distinguerait un article d'un autre, et rien n'indiquerait qu'il y a quelque
   chose à lire. Le voile reste donc en place, plus léger, et le texte se range
   en bas de la tuile pour dégager la photo. */
@media ( hover: none ) {
	.cab-dolce-post-tile__overlay {
		justify-content: flex-end;
		padding: 1rem;
		background-image: linear-gradient( to top, rgba( 28, 26, 25, 0.78 ) 0%, rgba( 28, 26, 25, 0.35 ) 45%, rgba( 28, 26, 25, 0 ) 75% );
		background-color: transparent;
		opacity: 1;
	}

	.cab-dolce-post-tile__overlay > * {
		transform: none;
	}
}

/* En petite largeur, la grille de WordPress retombe sur une seule colonne : la
   page devient une pile de grandes photos et l'effet de mosaïque disparaît. On
   en garde deux, comme le triptyque garde ses trois. */
@media screen and ( max-width: 781px ) {
	.cab-dolce-results--tuiles .wp-block-post-template {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
	}

	.cab-dolce-post-tile__overlay .wp-block-post-title {
		font-size: 0.95rem !important;
	}

	.cab-dolce-post-tile__date {
		font-size: 0.72rem !important;
	}

	.cab-dolce-post-tile__commentaires {
		margin-top: 0.35rem !important;
		font-size: 0.85rem;
	}

	/* Sur une tuile de 170 px, l'accroche ne tiendrait pas sans écraser le
	   titre. La légende garde donc le titre, la date et les commentaires. */
	.cab-dolce-post-tile__texte {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-post-tile__image img,
	.cab-dolce-post-tile__overlay,
	.cab-dolce-post-tile__overlay > * {
		transition: none;
	}

	.cab-dolce-post-tile__overlay > * {
		transform: none;
	}

	.cab-dolce-post-tile:hover .cab-dolce-post-tile__image img,
	.cab-dolce-post-tile:focus-within .cab-dolce-post-tile__image img {
		transform: none;
	}
}

/* Pagination des résultats. */
.cab-dolce-results .wp-block-query-pagination {
	gap: 0.6rem;
}

.cab-dolce-results .wp-block-query-pagination a,
.cab-dolce-results .wp-block-query-pagination .current {
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	text-decoration: none;
}

.cab-dolce-results .wp-block-query-pagination .current {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
}

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-result .wp-block-post-featured-image img {
		transition: none;
	}

	.cab-dolce-result:hover .wp-block-post-featured-image img {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Boutique — vignettes produit : zoom + assombrissement au survol
 * (même effet que les tuiles « fruits » et le triptyque)
 * ---------------------------------------------------------------------- */

/* On abandonne le soulèvement de la carte au profit du zoom sur la photo. */
.cab-dolce-shop__main .wc-block-product-template .wc-block-product:hover {
	transform: none;
}

.cab-dolce-shop__main .wc-block-components-product-image {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
}

.cab-dolce-shop__main .wc-block-components-product-image img {
	display: block;
	width: 100%;
	border-radius: 0;
	box-shadow: none;
	transition: transform 0.5s ease;
}

.cab-dolce-shop__main .wc-block-product:hover .wc-block-components-product-image img,
.cab-dolce-shop__main .wc-block-product:focus-within .wc-block-components-product-image img {
	transform: scale( 1.06 );
}

/* Voile sombre révélé au survol. */
.cab-dolce-shop__main .wc-block-components-product-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-color: rgba( 28, 26, 25, 0.35 );
	opacity: 0;
	transition: opacity 0.4s ease;
}

.cab-dolce-shop__main .wc-block-product:hover .wc-block-components-product-image::after,
.cab-dolce-shop__main .wc-block-product:focus-within .wc-block-components-product-image::after {
	opacity: 1;
}

/* Badge promo au-dessus du voile. */
.cab-dolce-shop__main .wp-block-woocommerce-product-sale-badge {
	z-index: 3;
}

/* WooCommerce le colle à 4 px du bord et le dimensionne pour de grandes
 * vignettes : sur les 269 px de la boutique, la capsule occupait le tiers de
 * la largeur de l'image. On la décolle au même retrait que sur la grille
 * d'accueil (0,7 rem) et on la resserre.
 *
 * Les produits similaires utilisent des vignettes de même gabarit : ils
 * partagent donc la règle. La grille d'accueil en est exclue — ses vignettes
 * de 399 px laissent la capsule d'origine à 23 % de la largeur, soit déjà
 * moins qu'ici après correction. */
.cab-dolce-shop__main .wc-block-components-product-sale-badge,
.cab-dolce-related .wc-block-components-product-sale-badge {
	top: 0.7rem;
	right: 0.7rem;
	padding: 0.22rem 0.62rem;
	font-size: 0.72rem;
}

/* -------------------------------------------------------------------------
 * Pastille de note incrustée en bas à droite de la vignette
 * ---------------------------------------------------------------------- */
.cab-dolce-rating-badge {
	position: absolute;
	right: 0.6rem;
	bottom: 0.6rem;
	z-index: 3;
	/* Purement décorative : elle ne doit pas percer un trou dans le lien qui
	   couvre la vignette. Sa lecture accessible passe par l'attribut
	   aria-label du bloc d'étoiles, pas par le pointeur. */
	pointer-events: none;
	padding: 0.25rem 0.55rem;
	border-radius: 999px;
	background-color: rgba( 251, 247, 242, 0.92 );
	box-shadow: 0 4px 12px -4px rgba( 58, 35, 24, 0.45 );
	line-height: 1;
}

/* Étoiles WooCommerce aux couleurs de la charte, compactes.
 *
 * WooCommerce ne stylise « .star-rating » que sous un ancêtre « .woocommerce »
 * (ou sous l'ancien balisage « .wc-block-grid__product-rating »). Le bloc
 * Collection de produits n'en génère aucun : sur la page d'accueil, le badge
 * affichait donc la phrase brute « Noté 5.00 sur 5 basé sur 1 notation
 * client » au lieu des étoiles. On rejoue ici les règles de WooCommerce en
 * les rattachant au badge, ce qui les rend indépendantes du conteneur.
 * La police « WooCommerce », qui porte les glyphes, est déclarée globalement
 * et reste donc disponible. */
.cab-dolce-rating-badge .star-rating {
	display: block;
	position: relative;
	float: none;
	overflow: hidden;
	width: 5.4em;
	height: 1em;
	margin: 0;
	color: var( --wp--preset--color--primary );
	font-family: WooCommerce, sans-serif;
	font-size: 0.78rem;
	line-height: 1;
}

.cab-dolce-rating-badge .star-rating::before {
	content: "sssss";
	position: absolute;
	top: 0;
	left: 0;
	float: left;
	color: color-mix( in srgb, var( --wp--preset--color--contrast ) 22%, transparent );
}

/* La largeur en ligne posée par WooCommerce sur ce span donne la proportion
   d'étoiles pleines ; le décalage vertical repousse le texte hors du cadre. */
.cab-dolce-rating-badge .star-rating > span {
	position: absolute;
	top: 0;
	left: 0;
	float: left;
	overflow: hidden;
	padding-top: 1.5em;
}

.cab-dolce-rating-badge .star-rating > span::before {
	content: "SSSSS";
	position: absolute;
	top: 0;
	left: 0;
}

/* Le libellé « Note x sur 5 » reste pour les lecteurs d'écran uniquement. */
.cab-dolce-rating-badge .rating,
.cab-dolce-rating-badge .star-rating > span > strong {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* Pas de pastille dans la barre latérale : la note y est déjà affichée. */
.cab-dolce-shop__sidebar .cab-dolce-rating-badge {
	display: none;
}

/* Pastille de note révélée au survol, comme les textes des autres visuels,
 * et au même rythme que les voiles des tuiles (0,4 s).
 *
 * Quatre contextes partagent ce comportement : le diaporama « en vedette »,
 * la grille de la page d'accueil, la boutique et les produits similaires. */
.cab-dolce-slideshow .cab-dolce-rating-badge,
.cab-dolce-grid .cab-dolce-rating-badge,
.cab-dolce-shop__main .cab-dolce-rating-badge,
.cab-dolce-related .cab-dolce-rating-badge {
	opacity: 0;
	transform: translateY( 8px );
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.cab-dolce-slideshow .wc-block-product:hover .cab-dolce-rating-badge,
.cab-dolce-slideshow .wc-block-product:focus-within .cab-dolce-rating-badge,
.cab-dolce-grid .wc-block-product:hover .cab-dolce-rating-badge,
.cab-dolce-grid .wc-block-product:focus-within .cab-dolce-rating-badge,
.cab-dolce-shop__main .wc-block-product:hover .cab-dolce-rating-badge,
.cab-dolce-shop__main .wc-block-product:focus-within .cab-dolce-rating-badge,
.cab-dolce-related .wc-block-product:hover .cab-dolce-rating-badge,
.cab-dolce-related .wc-block-product:focus-within .cab-dolce-rating-badge {
	opacity: 1;
	transform: translateY( 0 );
}

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-shop__main .cab-dolce-rating-badge {
		transition: opacity 0.2s ease;
		transform: none;
	}

	.cab-dolce-shop__main .wc-block-product:hover .cab-dolce-rating-badge,
	.cab-dolce-shop__main .wc-block-product:focus-within .cab-dolce-rating-badge {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Boutique — bandeau d'en-tête sur le dégradé de l'accueil
 * Le fil d'Ariane est remonté sur le bandeau du titre : un seul élément
 * porte le dégradé, donc pas de couture dans le dégradé diagonal.
 * ---------------------------------------------------------------------- */

/* Fil d'Ariane superposé au dégradé.
   Il est sorti du flux (position absolue) plutôt que tiré par une marge
   négative : sa hauteur varie selon les pages (boutique, catégorie…), ce qui
   décalait le bandeau. Hors du flux, la position ne dépend plus de lui. */
/* Les articles et leurs archives ont le même traitement : le bandeau y est un
   groupe « .cab-dolce-banner » au lieu du bandeau propre à la boutique, mais le
   fil d'Ariane s'y superpose de la même façon. Les sélecteurs sont donc ajoutés
   aux règles existantes plutôt que recopiés : un second jeu finirait par
   diverger du premier. */
main:has( .cab-dolce-shop ),
main.cab-dolce-has-banner {
	position: relative;
}

main:has( .cab-dolce-shop ) > .wp-block-woocommerce-breadcrumbs,
main.cab-dolce-has-banner > .wp-block-woocommerce-breadcrumbs {
	position: absolute;
	top: 1.5rem;
	left: 0;
	right: 0;
	/* Un élément en position absolue se cale sur la boîte de remplissage de son
	   conteneur : « left: 0 » le plaque donc au bord de l'écran, sans profiter
	   du retrait de « main ». On le lui rend ici pour qu'il s'aligne sur le
	   contenu de la page, à 16 px comme la grille produits. */
	padding-right: var( --wp--style--root--padding-right );
	padding-left: var( --wp--style--root--padding-left );
	z-index: 2;
	font-family: var( --wp--preset--font-family--body );
	letter-spacing: 0.02em;
	color: var( --wp--preset--color--base );
}

main:has( .cab-dolce-shop ) > .wp-block-woocommerce-breadcrumbs .woocommerce-breadcrumb,
main:has( .cab-dolce-shop ) > .wp-block-woocommerce-breadcrumbs nav,
main.cab-dolce-has-banner > .wp-block-woocommerce-breadcrumbs .woocommerce-breadcrumb,
main.cab-dolce-has-banner > .wp-block-woocommerce-breadcrumbs nav {
	font-family: var( --wp--preset--font-family--body );
	color: var( --wp--preset--color--base );
}

main:has( .cab-dolce-shop ) > .wp-block-woocommerce-breadcrumbs a,
main.cab-dolce-has-banner > .wp-block-woocommerce-breadcrumbs a {
	color: var( --wp--preset--color--base );
	text-decoration: none;
	border-bottom: 1px solid rgba( 251, 247, 242, 0.45 );
	transition: border-color 0.18s ease, opacity 0.18s ease;
}

main:has( .cab-dolce-shop ) > .wp-block-woocommerce-breadcrumbs a:hover,
main:has( .cab-dolce-shop ) > .wp-block-woocommerce-breadcrumbs a:focus,
main.cab-dolce-has-banner > .wp-block-woocommerce-breadcrumbs a:hover,
main.cab-dolce-has-banner > .wp-block-woocommerce-breadcrumbs a:focus {
	border-bottom-color: var( --wp--preset--color--base );
	opacity: 0.85;
}

/* Bandeau du titre : pleine largeur + dégradé « confiture ».
   On reproduit le comportement natif de « alignfull » (pas de 100vw,
   donc aucun débordement horizontal lié à la barre de défilement). */
/* Le bandeau colle à l'en-tête (pas de blanc au-dessus). */
main:has( .cab-dolce-shop ) {
	margin-top: 0 !important;
}

main:has( .cab-dolce-shop ) > .wp-block-group:has( > .wp-block-query-title ) {
	max-width: none;
	/* Le bandeau devient le premier élément du flux : il colle à l'en-tête. */
	margin-top: 0 !important;
	/* Marge latérale du site compensée : bord à bord.
	   « !important » nécessaire : la mise en page contrainte de WordPress
	   impose « margin-left/right: auto !important » à ses enfants. */
	margin-right: calc( var( --wp--style--root--padding-right ) * -1 ) !important;
	margin-bottom: var( --wp--preset--spacing--60 ) !important;
	margin-left: calc( var( --wp--style--root--padding-left ) * -1 ) !important;
	/* Le retrait latéral doit être posé ici : le bandeau sort du flux par des
	   marges négatives, et WordPress annule le remplissage d'un conteneur
	   « has-global-padding » imbriqué dans un autre. Sans cela, le texte
	   touchait les bords sur mobile — invisible en desktop, où la mise en page
	   contrainte tient le contenu loin des bords. */
	padding-top: 4.5rem;
	padding-right: var( --wp--style--root--padding-right );
	padding-bottom: 3.5rem;
	padding-left: var( --wp--style--root--padding-left );
	background-image: var( --wp--preset--gradient--confiture );
}

/* Titre et accroche calqués sur le hero de l'accueil.
   « !important » : les classes de taille de police de WordPress en usent aussi. */
main:has( .cab-dolce-shop ) > .wp-block-group:has( > .wp-block-query-title ) .wp-block-query-title {
	color: var( --wp--preset--color--base ) !important;
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--xx-large ) !important;
}

main:has( .cab-dolce-shop ) > .wp-block-group:has( > .wp-block-query-title ) p {
	color: var( --wp--preset--color--base ) !important;
	font-size: var( --wp--preset--font-size--large ) !important;
	font-weight: 400;
	opacity: 0.9;
}

/* Quand le bandeau de la boutique porte un médaillon, il lui faut la même
   place que sur les autres pages : le médaillon déborde par le bas, et la
   marge du bandeau doit lui laisser de l'air. Le bandeau de la boutique n'a
   pas la classe « .cab-dolce-banner », la règle « :has » de celle-ci ne
   s'applique donc pas ici. */
main:has( .cab-dolce-shop ) > .wp-block-group:has( .cab-dolce-featured-image ) {
	margin-bottom: 8rem !important;
	padding-bottom: 2rem;
}

/* Mobile : bandeau un peu plus compact. */
@media screen and ( max-width: 781px ) {
	main:has( .cab-dolce-shop ) > .wp-block-group:has( > .wp-block-query-title ) {
		padding-top: 3.5rem;
		padding-bottom: 2.5rem;
	}
}

/* -------------------------------------------------------------------------
 * Pied de page — listes de liens resserrées et survol terracotta
 * ---------------------------------------------------------------------- */
.cab-dolce-footer .wp-block-navigation__container {
	gap: 0.55rem;
}

.cab-dolce-footer .wp-block-navigation .wp-block-navigation-item__content {
	display: inline-block;
	padding: 0.1rem 0;
	transition: color 0.18s ease, transform 0.18s ease;
}

/* Le lien passe en terracotta et se décale légèrement au survol.
   « !important » : les classes de couleur de WordPress en usent aussi. */
.cab-dolce-footer .wp-block-navigation .wp-block-navigation-item__content:hover,
.cab-dolce-footer .wp-block-navigation .wp-block-navigation-item__content:focus {
	color: var( --wp--preset--color--primary ) !important;
	transform: translateX( 3px );
}

/* Icônes sociales : même couleur de survol. */
.cab-dolce-footer .wp-block-social-links .wp-social-link {
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.cab-dolce-footer .wp-block-social-links .wp-social-link:hover,
.cab-dolce-footer .wp-block-social-links .wp-social-link:focus-within {
	color: var( --wp--preset--color--primary ) !important;
	transform: translateY( -2px );
}

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-footer .wp-block-navigation .wp-block-navigation-item__content,
	.cab-dolce-footer .wp-block-social-links .wp-social-link {
		transition: color 0.18s ease;
	}

	.cab-dolce-footer .wp-block-navigation .wp-block-navigation-item__content:hover,
	.cab-dolce-footer .wp-block-navigation .wp-block-navigation-item__content:focus,
	.cab-dolce-footer .wp-block-social-links .wp-social-link:hover,
	.cab-dolce-footer .wp-block-social-links .wp-social-link:focus-within {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Ruban « Nouveau » — angle haut gauche des tuiles produit et article
 *
 * La couleur vient de la palette du thème (« leaf », le vert olive) : elle se
 * change depuis theme.json ou les styles globaux, sans toucher à cette feuille.
 *
 * Le ruban traverse l'angle en diagonale et déborde volontairement de la
 * tuile : c'est le conteneur qui le rogne, d'où le « overflow: hidden » posé
 * plus bas sur l'image produit. Les tuiles d'articles le portaient déjà.
 * ---------------------------------------------------------------------- */
.cab-dolce-ruban {
	position: absolute;
	z-index: 4;
	padding: 0.26rem 0;
	transform: rotate( -45deg );
	text-align: center;
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	box-shadow: 0 2px 8px rgba( 28, 26, 25, 0.28 );
	/* Le lien de la tuile couvre toute la surface : sans cette ligne, le ruban
	   creuserait un trou mort au milieu de la zone cliquable. */
	pointer-events: none;
}

/* Les deux couleurs viennent de la palette : « leaf » pour la nouveauté,
   « primary » pour la promotion — celle-là même que WooCommerce employait
   pour sa capsule, reprise à l'identique. */
.cab-dolce-ruban--nouveau {
	background-color: var( --wp--preset--color--leaf );
	color: var( --wp--preset--color--base );
}

.cab-dolce-ruban--promo {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
}

/* Les rangs s'éloignent de l'angle. Le centre de chaque bande est posé sur la
   diagonale du coin : « left » vaut donc la distance au coin moins la moitié
   de la largeur, et « top » cette même distance moins la moitié de la hauteur.
   C'est ce qui garde la bande centrée sur l'angle quel que soit son rang.
   La bande du rang 2 traverse plus loin du coin, donc une corde plus longue :
   elle est élargie en conséquence, sans quoi ses extrémités apparaîtraient
   dans la tuile au lieu d'être rognées. */
.cab-dolce-ruban--rang-1 {
	top: 1.6rem;
	width: 11rem;
}

/* Les deux bandes se touchent. Le décalage d'un rang au suivant se fait à
   parts égales sur « top » et « left » — c'est la seule façon de déplacer le
   centre le long de la diagonale du coin. La distance perpendiculaire vaut
   alors ce décalage multiplié par la racine de deux : pour qu'elle égale la
   hauteur d'une bande (1,54 rem), il faut donc 1,045 rem sur chaque axe, un
   cheveu de moins pour garantir le contact malgré les arrondis d'affichage. */
.cab-dolce-ruban--rang-2 {
	top: 2.65rem;
	width: 12rem;
}

/* Le décalage horizontal appartient au côté, jamais au rang : « left » et
   « right » ne doivent pas être posés par la même règle, sinon la valeur
   redonnée à l'un dans une requête média reprend la main sur l'autre — en
   LTR, « left » l'emporte dès que les deux sont définis avec une largeur.
   C'est ce qui envoyait le ruban de la fiche produit à gauche en mobile. */
.cab-dolce-ruban--gauche.cab-dolce-ruban--rang-1 {
	left: -3.2rem;
}

.cab-dolce-ruban--gauche.cab-dolce-ruban--rang-2 {
	left: -2.66rem;
}

/* Côté droit — fiche produit. Miroir exact : la rotation s'inverse. */
.cab-dolce-ruban--droite {
	transform: rotate( 45deg );
}

.cab-dolce-ruban--droite.cab-dolce-ruban--rang-1 {
	right: -3.2rem;
}

.cab-dolce-ruban--droite.cab-dolce-ruban--rang-2 {
	right: -2.66rem;
}

/* La galerie de la fiche produit devient le cadre qui rogne le ruban. Son
   angle haut droit est celui de la grande image : les vignettes sont à gauche
   sur ordinateur, et dessous en mobile. Seul ce coin est arrondi, pour épouser
   la photo sans toucher à celui des vignettes. */
.wp-block-woocommerce-product-image-gallery {
	overflow: hidden;
	border-top-right-radius: 12px;
}

/* La pastille « Promo » d'origine de la fiche fait double emploi avec le
   ruban, au même endroit. */
.wp-block-woocommerce-product-image-gallery span.onsale {
	display: none !important;
}

/* Boucles produit « classiques » — ventes incitatives, ventes croisées et
   produits similaires du gabarit PHP. Le ruban y remplace la pastille ronde,
   qui restait seule de son espèce sur tout le site. */
.upsells li.product .onsale,
.cross-sells li.product .onsale,
.related li.product .onsale {
	display: none !important;
}

/* Filet de sécurité : si le script qui emballe la vignette ne s'exécutait pas,
   la tuile elle-même rogne le ruban. Son angle haut gauche est celui de
   l'image, qui ouvre la tuile. */
.upsells li.product,
.cross-sells li.product,
.related li.product {
	overflow: hidden;
}

/* Le voile de survol des tuiles d'articles est à « z-index: 2 » : le ruban
   passe au-dessus et reste lisible quand le voile apparaît. */

/* L'image produit devient le cadre qui rogne le ruban. En grille d'accueil,
   des règles plus spécifiques la passent en « position: absolute » et en
   angles droits : elles gardent la main, le rognage fonctionne pareil. */
.wp-block-woocommerce-product-image {
	position: relative;
	overflow: hidden;
}

/* Même arrondi que la photo qu'elle contient, sinon le ruban apparaîtrait
   hors du coin arrondi. */
.wc-block-product-template .wp-block-woocommerce-product-image {
	border-radius: 12px;
}

/* Pas de ruban sur les vignettes en liste : celles de la colonne latérale de
   la boutique font 72 px, où une bande de 142 px couvrirait toute l'image.
   Le ruban est une signalétique de tuile, pas de miniature. */
/* Vignettes en liste (72 px) : seule la promotion s'y affiche. C'est
   l'information qui décide d'un achat, et deux bandes empilées couvriraient
   la moitié de l'image. La nouveauté, elle, se lit partout ailleurs. */
.is-product-collection-layout-list .cab-dolce-ruban--nouveau,
.cab-dolce-shop__sidebar .cab-dolce-ruban--nouveau {
	display: none;
}

/* La promotion y occupe donc toujours l'angle, quel que soit le rang que PHP
   lui a donné : elle y est seule. Bande resserrée à la taille de la vignette.
   Sélecteur à trois classes pour passer devant les règles de rang, y compris
   celles de la requête média mobile qui viennent plus bas. */
.is-product-collection-layout-list .cab-dolce-ruban--gauche.cab-dolce-ruban--promo,
.cab-dolce-shop__sidebar .cab-dolce-ruban--gauche.cab-dolce-ruban--promo {
	top: 0.55rem;
	right: auto;
	left: -1.45rem;
	width: 5rem;
	padding: 0.1rem 0;
	font-size: 0.56rem;
	line-height: 1.4;
	letter-spacing: 0.08em;
}

/* Ni sur le diaporama d'accueil : ses slides font 1265 px de large et tiennent
   du bandeau, pas de la tuile. Un ruban s'y perdrait dans l'angle de l'écran,
   loin du produit qu'il désigne. */
.cab-dolce-slide__image .cab-dolce-ruban {
	display: none;
}

/* La capsule « Promo » d'origine est remplacée par le ruban : la garder ferait
   doublon, et à droite en plus. On la neutralise partout où nos rubans
   s'affichent — donc partout sauf dans les deux contextes exclus ci-dessus,
   où elle reprend son rôle et son apparence d'origine. */
.wp-block-woocommerce-product-sale-badge {
	display: none;
}

/* Seul le diaporama garde la capsule : ses slides tiennent du bandeau et non
   de la tuile, le ruban n'y va pas. Les vignettes en liste, elles, ont
   désormais leur ruban de promotion — la capsule y ferait doublon, et elle y
   occupait 94 % de la largeur. */
.cab-dolce-slide__image .wp-block-woocommerce-product-sale-badge {
	display: block;
}

@media screen and ( max-width: 600px ) {
	.cab-dolce-ruban {
		font-size: 0.6rem;
		letter-spacing: 0.1em;
	}

	.cab-dolce-ruban--rang-1 {
		top: 1.35rem;
	}

	/* Même calcul avec la bande mobile, plus basse (1,42 rem) : 0,96 rem. */
	.cab-dolce-ruban--rang-2 {
		top: 2.31rem;
	}

	.cab-dolce-ruban--gauche.cab-dolce-ruban--rang-1 {
		left: -3.4rem;
	}

	.cab-dolce-ruban--gauche.cab-dolce-ruban--rang-2 {
		left: -2.94rem;
	}

	.cab-dolce-ruban--droite.cab-dolce-ruban--rang-1 {
		right: -3.4rem;
	}

	.cab-dolce-ruban--droite.cab-dolce-ruban--rang-2 {
		right: -2.94rem;
	}
}

/* -------------------------------------------------------------------------
 * Pied de page — mention de conception
 * Le lien du crédit hérite sinon de la couleur de lien du thème
 * (« contrast-2 », #7a5233), qui ne donne que 2,54:1 sur le fond du pied
 * de page (#1c1a19) : illisible. On le repasse en « base » (16,26:1) avec
 * un soulignement discret, et en « primary » au survol (7,34:1).
 * ---------------------------------------------------------------------- */
.cab-dolce-credit {
	display: inline-block;
}

/* La barre verticale sépare la mention du copyright sur une même ligne.
   Elle disparaît quand le crédit passe à la ligne (voir plus bas). */
.cab-dolce-credit::before {
	content: "|";
	margin: 0 0.5rem;
	opacity: 0.4;
}

.cab-dolce-footer > p a {
	color: var( --wp--preset--color--base );
	text-decoration: underline;
	text-decoration-color: rgba( 251, 247, 242, 0.4 );
	text-underline-offset: 0.2em;
	transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.cab-dolce-footer > p a:hover,
.cab-dolce-footer > p a:focus {
	color: var( --wp--preset--color--primary );
	text-decoration-color: currentColor;
}

/* Sur mobile la ligne est trop longue : le crédit prend sa propre ligne. */
@media ( max-width: 560px ) {
	.cab-dolce-credit {
		display: block;
	}

	.cab-dolce-credit::before {
		content: none;
	}
}

/* -------------------------------------------------------------------------
 * En-tête et pied de page alignés sur la largeur du contenu des pages
 * Ce sont des groupes « contraints » : leurs enfants sont bridés à la
 * taille de contenu (1080 px) alors que les sections des pages utilisent
 * la largeur étendue (1200 px). On les aligne sur cette dernière.
 * ---------------------------------------------------------------------- */
.cab-dolce-header .cab-dolce-header__bar,
.cab-dolce-footer > .wp-block-columns,
.cab-dolce-footer > .wp-block-separator,
.cab-dolce-footer > .wp-block-group,
.cab-dolce-footer > p {
	max-width: var( --wp--style--global--wide-size );
}

/* -------------------------------------------------------------------------
 * En-tête — menu hamburger étendu aux tablettes
 * Le bouton et le panneau existent déjà (réglage « mobile » du bloc
 * Navigation) : WordPress les masque au-dessus de 600 px. On repousse ce
 * seuil à 1024 px pour couvrir smartphones ET tablettes.
 * ---------------------------------------------------------------------- */
@media screen and ( min-width: 600px ) and ( max-width: 1023px ) {

	/* Bouton hamburger visible. */
	.cab-dolce-header .wp-block-navigation__responsive-container-open:not( .always-shown ) {
		display: flex !important;
	}

	/* Menu en ligne masqué : il ne s'affiche qu'en superposition. */
	.cab-dolce-header .wp-block-navigation__responsive-container:not( .hidden-by-default ):not( .is-menu-open ) {
		display: none !important;
	}

	/* Croix de fermeture disponible dans le panneau ouvert. */
	.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: block !important;
	}
}

/* Confort tactile : zone de clic plus généreuse sur le hamburger. */
.cab-dolce-header .wp-block-navigation__responsive-container-open {
	padding: 0.35rem;
	border-radius: 8px;
	transition: color 0.18s ease, background-color 0.18s ease;
}

.cab-dolce-header .wp-block-navigation__responsive-container-open:hover,
.cab-dolce-header .wp-block-navigation__responsive-container-open:focus-visible {
	color: var( --wp--preset--color--primary );
	background-color: var( --wp--preset--color--base-2 );
}

/* Panneau ouvert : liens bien espacés et lisibles au doigt. */
.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 0.4rem 0;
}

/* Le soulignement animé du menu de bureau n'a pas de sens en superposition. */
.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* -------------------------------------------------------------------------
 * Bouton hamburger — à droite des icônes, aux couleurs de la marque,
 * et icône à 3 barres (celle de WordPress n'en a que 2).
 * ---------------------------------------------------------------------- */
@media screen and ( max-width: 1023px ) {

	/* Ordre : logo à gauche, puis compte/panier, puis le hamburger. */
	.cab-dolce-header .cab-dolce-header__bar {
		justify-content: flex-start;
	}

	.cab-dolce-header .cab-dolce-header__bar > .wp-block-site-logo {
		order: 1;
	}

	.cab-dolce-header .cab-dolce-header__bar > .cab-dolce-header__actions {
		order: 2;
		margin-left: auto;
	}

	.cab-dolce-header .cab-dolce-header__bar > .wp-block-navigation {
		order: 3;
	}
}

/* Pastille du bouton.
   Pas de « display » ici : WordPress masque déjà le bouton au-dessus de
   600 px, et notre requête média le réaffiche jusqu'à 1023 px. En forcer
   un ici le rendrait visible aussi sur grand écran. */
.cab-dolce-header .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 10px;
	color: var( --wp--preset--color--primary );
	background-color: transparent;
	transition: color 0.18s ease, background-color 0.18s ease;
}

.cab-dolce-header .wp-block-navigation__responsive-container-open:hover,
.cab-dolce-header .wp-block-navigation__responsive-container-open:focus-visible {
	color: var( --wp--preset--color--secondary );
	background-color: var( --wp--preset--color--base-2 );
}

/* On masque l'icône native (2 barres) et on en dessine 3. */
.cab-dolce-header .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.cab-dolce-header .wp-block-navigation__responsive-container-open::before {
	content: "";
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background-color: currentColor;
	box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
}

/* Croix de fermeture du panneau, aux mêmes couleurs. */
.cab-dolce-header .wp-block-navigation__responsive-container-close {
	padding: 0.35rem;
	border-radius: 10px;
	color: var( --wp--preset--color--primary );
	transition: color 0.18s ease, background-color 0.18s ease;
}

.cab-dolce-header .wp-block-navigation__responsive-container-close:hover,
.cab-dolce-header .wp-block-navigation__responsive-container-close:focus-visible {
	color: var( --wp--preset--color--secondary );
	background-color: var( --wp--preset--color--base-2 );
}

/* -------------------------------------------------------------------------
 * Panneau du menu ouvert — aux couleurs de la marque
 * ---------------------------------------------------------------------- */
.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --wp--preset--color--secondary );
	background-image: var( --wp--preset--gradient--confiture );
	color: var( --wp--preset--color--base );
	padding: clamp( 2rem, 8vw, 4rem );
}

/* Liens : titrage Roxborough, crème, terracotta au survol. */
.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var( --wp--preset--color--base ) !important;
	font-family: var( --wp--preset--font-family--heading );
	font-size: clamp( 1.35rem, 5vw, 1.7rem );
	padding: 0.45rem 0;
	transition: color 0.18s ease;
}

.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var( --wp--preset--color--primary ) !important;
}

.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0.8rem;
}

/* Croix de fermeture : crème sur le dégradé, terracotta au survol. */
.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var( --wp--preset--color--base );
}

.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover,
.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible {
	color: var( --wp--preset--color--primary );
	background-color: rgba( 251, 247, 242, 0.14 );
}

/* -------------------------------------------------------------------------
 * Pagination — boutique et résultats de recherche
 * ---------------------------------------------------------------------- */
.cab-dolce-shop__main .wp-block-query-pagination,
.cab-dolce-results .wp-block-query-pagination {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: var( --wp--preset--spacing--60 );
	padding-top: var( --wp--preset--spacing--50 );
	border-top: 1px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-shop__main .wp-block-query-pagination-numbers,
.cab-dolce-results .wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

/* Numéros de page en pastilles. */
.cab-dolce-shop__main .page-numbers,
.cab-dolce-results .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.65rem;
	border-radius: 999px;
	color: var( --wp--preset--color--contrast );
	font-size: 0.95rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.cab-dolce-shop__main a.page-numbers:hover,
.cab-dolce-shop__main a.page-numbers:focus-visible,
.cab-dolce-results a.page-numbers:hover,
.cab-dolce-results a.page-numbers:focus-visible {
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--secondary );
}

/* Page courante : pastille terracotta, texte foncé (charte). */
.cab-dolce-shop__main .page-numbers.current,
.cab-dolce-results .page-numbers.current {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
	font-weight: 600;
}

.cab-dolce-shop__main .page-numbers.dots,
.cab-dolce-results .page-numbers.dots {
	min-width: 1.5rem;
	padding: 0;
	color: var( --wp--preset--color--contrast-2 );
}

/* Liens « précédent » / « suivant » en boutons contour. */
.cab-dolce-shop__main .wp-block-query-pagination-previous,
.cab-dolce-shop__main .wp-block-query-pagination-next,
.cab-dolce-results .wp-block-query-pagination-previous,
.cab-dolce-results .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	/* La bordure est comptée dans la hauteur, sinon ces boutons font 42 px
	   contre 40 px pour les pastilles de numéros, qui n'en ont pas. */
	box-sizing: border-box;
	height: 40px;
	padding: 0 1.05rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 999px;
	color: var( --wp--preset--color--contrast );
	font-size: 0.92rem;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cab-dolce-shop__main .wp-block-query-pagination-previous:hover,
.cab-dolce-shop__main .wp-block-query-pagination-previous:focus-visible,
.cab-dolce-shop__main .wp-block-query-pagination-next:hover,
.cab-dolce-shop__main .wp-block-query-pagination-next:focus-visible,
.cab-dolce-results .wp-block-query-pagination-previous:hover,
.cab-dolce-results .wp-block-query-pagination-previous:focus-visible,
.cab-dolce-results .wp-block-query-pagination-next:hover,
.cab-dolce-results .wp-block-query-pagination-next:focus-visible {
	background-color: var( --wp--preset--color--primary );
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
}

/* Flèches décoratives. */
.cab-dolce-shop__main .wp-block-query-pagination-previous::before,
.cab-dolce-results .wp-block-query-pagination-previous::before {
	content: "\2190";
}

.cab-dolce-shop__main .wp-block-query-pagination-next::after,
.cab-dolce-results .wp-block-query-pagination-next::after {
	content: "\2192";
}

/* Mobile : pagination centrée et resserrée. */
@media screen and ( max-width: 600px ) {
	.cab-dolce-shop__main .wp-block-query-pagination,
	.cab-dolce-results .wp-block-query-pagination {
		justify-content: center;
	}

	.cab-dolce-shop__main .wp-block-query-pagination-previous,
	.cab-dolce-shop__main .wp-block-query-pagination-next,
	.cab-dolce-results .wp-block-query-pagination-previous,
	.cab-dolce-results .wp-block-query-pagination-next {
		padding: 0 0.8rem;
		font-size: 0.85rem;
	}
}

/* -------------------------------------------------------------------------
 * Fiche produit — bandeau d'en-tête (même traitement que la boutique)
 * Fil d'Ariane, titre du produit et description courte sur le dégradé.
 * ---------------------------------------------------------------------- */

/* Le bandeau colle à l'en-tête. Sur la fiche produit, WooCommerce insère un
   conteneur « .wp-block-group.woocommerce » AUTOUR du <main> : c'est lui qui
   porte l'espacement entre blocs, il faut donc le viser aussi. */
main:has( .cab-dolce-product-banner ),
.wp-site-blocks > .wp-block-group.woocommerce:has( .cab-dolce-product-banner ) {
	margin-top: 0 !important;
}

.cab-dolce-product-banner {
	max-width: none;
	/* Marge latérale du site compensée : bord à bord.
	   « !important » : la mise en page contrainte impose « margin: auto ». */
	margin-top: 0 !important;
	margin-right: calc( var( --wp--style--root--padding-right ) * -1 ) !important;
	margin-bottom: var( --wp--preset--spacing--60 ) !important;
	margin-left: calc( var( --wp--style--root--padding-left ) * -1 ) !important;
	/* Le fil d'Ariane étant ici DANS le bandeau (et non superposé comme sur
	   la boutique), c'est lui qui reçoit le retrait haut : 1,5 rem, comme là-bas. */
	padding-top: 1.5rem;
	/* Retrait latéral indispensable : voir le bandeau de la boutique. */
	padding-right: var( --wp--style--root--padding-right );
	padding-bottom: 3.5rem;
	padding-left: var( --wp--style--root--padding-left );
	background-image: var( --wp--preset--gradient--confiture );
}

/* Fil d'Ariane clair sur le dégradé. */
.cab-dolce-product-banner .wp-block-woocommerce-breadcrumbs,
.cab-dolce-product-banner .woocommerce-breadcrumb,
.cab-dolce-product-banner nav {
	font-family: var( --wp--preset--font-family--body );
	letter-spacing: 0.02em;
	color: var( --wp--preset--color--base );
}

.cab-dolce-product-banner a {
	color: var( --wp--preset--color--base );
	text-decoration: none;
	border-bottom: 1px solid rgba( 251, 247, 242, 0.45 );
	transition: border-color 0.18s ease, opacity 0.18s ease;
}

.cab-dolce-product-banner a:hover,
.cab-dolce-product-banner a:focus {
	border-bottom-color: var( --wp--preset--color--base );
	opacity: 0.85;
}

/* Titre du produit : même traitement que le hero. */
.cab-dolce-product-banner .wp-block-post-title {
	color: var( --wp--preset--color--base ) !important;
	font-family: var( --wp--preset--font-family--heading );
	/* Aligne le titre sur la même hauteur que celui de la boutique. */
	margin-top: 1.15rem;
	margin-bottom: var( --wp--preset--spacing--20 );
}

/* Description courte : plus grande, plus claire. */
.cab-dolce-product-banner .wp-block-post-excerpt,
.cab-dolce-product-banner .wp-block-post-excerpt p {
	color: var( --wp--preset--color--base ) !important;
	font-size: var( --wp--preset--font-size--large ) !important;
	font-weight: 400;
	opacity: 0.9;
	margin-bottom: 0;
}

/* Mobile : bandeau plus compact. */
@media screen and ( max-width: 781px ) {
	.cab-dolce-product-banner {
		padding-bottom: 2.5rem;
	}

	.cab-dolce-product-banner .wp-block-post-title {
		margin-top: 0.1rem;
	}
}

/* -------------------------------------------------------------------------
 * Fiche produit — section « produits similaires »
 * Bandeau rosé pleine largeur + effets de survol de la boutique.
 * ---------------------------------------------------------------------- */

/* La section rejoint le pied de page, sans bande claire intermédiaire. */
main:has( .cab-dolce-related ) {
	margin-bottom: 0 !important;
}

.cab-dolce-related > :first-child {
	margin-top: 0;
}

/* Titre de section à la même échelle que les autres titres du site.
   « !important » : les classes de taille de police de WordPress en usent. */
.cab-dolce-related h2 {
	text-align: center;
	margin-bottom: var( --wp--preset--spacing--50 );
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--x-large ) !important;
	line-height: 1.2;
}

/* Vignette : zoom + assombrissement au survol (comme la boutique). */
.cab-dolce-related .wc-block-product-template .wc-block-product:hover {
	transform: none;
}

.cab-dolce-related .wc-block-components-product-image {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
}

.cab-dolce-related .wc-block-components-product-image img {
	display: block;
	width: 100%;
	border-radius: 0;
	box-shadow: none;
	transition: transform 0.5s ease;
}

.cab-dolce-related .wc-block-product:hover .wc-block-components-product-image img,
.cab-dolce-related .wc-block-product:focus-within .wc-block-components-product-image img {
	transform: scale( 1.06 );
}

.cab-dolce-related .wc-block-components-product-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-color: rgba( 28, 26, 25, 0.35 );
	opacity: 0;
	transition: opacity 0.4s ease;
}

.cab-dolce-related .wc-block-product:hover .wc-block-components-product-image::after,
.cab-dolce-related .wc-block-product:focus-within .wc-block-components-product-image::after {
	opacity: 1;
}

.cab-dolce-related .wp-block-woocommerce-product-sale-badge {
	z-index: 3;
}

/* La révélation au survol de la pastille de note est regroupée avec celle de
   la boutique et de la grille d'accueil, dans la section « pastille de note ». */

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-related .wc-block-components-product-image img,
	.cab-dolce-related .wc-block-components-product-image::after,
	.cab-dolce-related .cab-dolce-rating-badge {
		transition: none;
	}

	.cab-dolce-related .wc-block-product:hover .wc-block-components-product-image img,
	.cab-dolce-related .wc-block-product:focus-within .wc-block-components-product-image img,
	.cab-dolce-related .cab-dolce-rating-badge {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Fiche produit — onglets (Description, Informations, Avis)
 * ---------------------------------------------------------------------- */
.wp-block-woocommerce-product-details ul.wc-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp( 0.6rem, 2vw, 2rem );
	margin: 0 0 var( --wp--preset--spacing--50 );
	padding: 0 0 0.1rem;
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
	list-style: none;
}

/* Réinitialise les décorations par défaut de WooCommerce. */
.wp-block-woocommerce-product-details ul.wc-tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.wp-block-woocommerce-product-details ul.wc-tabs li::before,
.wp-block-woocommerce-product-details ul.wc-tabs li::after {
	display: none;
}

.wp-block-woocommerce-product-details ul.wc-tabs li a {
	display: block;
	padding: 0.7rem 0.2rem;
	border-bottom: 2px solid transparent;
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.98rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.wp-block-woocommerce-product-details ul.wc-tabs li a:hover,
.wp-block-woocommerce-product-details ul.wc-tabs li a:focus-visible {
	color: var( --wp--preset--color--primary );
}

/* Onglet actif : soulignement terracotta. */
.wp-block-woocommerce-product-details ul.wc-tabs li.active a {
	color: var( --wp--preset--color--contrast );
	border-bottom-color: var( --wp--preset--color--primary );
	font-weight: 600;
}

/* Panneaux. */
.wp-block-woocommerce-product-details .woocommerce-Tabs-panel {
	padding-top: var( --wp--preset--spacing--20 );
}

/* Chaque panneau répète le libellé de son onglet (« Description »,
   « Informations complémentaires », « Avis »). L'onglet actif, souligné,
   joue déjà ce rôle : on masque ces titres visuellement, tout en les
   conservant pour les lecteurs d'écran et la structure du document. */
.wp-block-woocommerce-product-details .woocommerce-Tabs-panel > h2:first-child,
.wp-block-woocommerce-product-details .woocommerce-Reviews-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* Tableau « Informations complémentaires ». */
.wp-block-woocommerce-product-details .shop_attributes {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-woocommerce-product-details .shop_attributes th,
.wp-block-woocommerce-product-details .shop_attributes td {
	padding: 0.65rem 0.8rem;
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
	text-align: left;
	vertical-align: top;
}

.wp-block-woocommerce-product-details .shop_attributes th {
	width: 32%;
	font-weight: 600;
	color: var( --wp--preset--color--contrast-2 );
}

.wp-block-woocommerce-product-details .shop_attributes p {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Avis clients
 * ---------------------------------------------------------------------- */
.woocommerce-Reviews .commentlist {
	margin: 0 0 var( --wp--preset--spacing--50 );
	padding: 0;
	list-style: none;
}

.woocommerce-Reviews .commentlist li {
	margin-bottom: var( --wp--preset--spacing--40 );
	padding: var( --wp--preset--spacing--40 );
	border-radius: 12px;
	background-color: var( --wp--preset--color--base-2 );
}

.woocommerce-Reviews .comment-text .star-rating {
	color: var( --wp--preset--color--primary );
	margin-bottom: 0.4rem;
}

.woocommerce-Reviews .woocommerce-review__author {
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.05rem;
}

.woocommerce-Reviews .woocommerce-review__published-date {
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.85rem;
}

/* Formulaire d'avis, au style des autres champs du site. */
.woocommerce-Reviews #respond input[type="text"],
.woocommerce-Reviews #respond input[type="email"],
.woocommerce-Reviews #respond textarea {
	width: 100%;
	padding: 0.7rem 1rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 12px;
	background-color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--body );
}

.woocommerce-Reviews #respond input:focus,
.woocommerce-Reviews #respond textarea:focus {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 1px;
}

.woocommerce-Reviews #respond .stars a {
	color: var( --wp--preset--color--primary );
}

.woocommerce-Reviews #respond .form-submit input[type="submit"] {
	padding: 0.75rem 1.6rem;
	border: 0;
	border-radius: 999px;
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.woocommerce-Reviews #respond .form-submit input[type="submit"]:hover,
.woocommerce-Reviews #respond .form-submit input[type="submit"]:focus-visible {
	background-color: var( --wp--preset--color--secondary );
	color: var( --wp--preset--color--base );
}

/* Onglets défilables plutôt que tassés sur petit écran.
   Le préfixe « html body » et « !important » sont indispensables : les
   sélecteurs de WooCommerce (product-details.css) en usent aussi, et sans eux
   « overflow-x » restait à « visible ». Les onglets débordaient alors de leur
   conteneur et poussaient TOUTE la page en largeur — 533 px de contenu pour
   375 px d'écran, d'où le décalage horizontal signalé sur la fiche produit. */
@media screen and ( max-width: 600px ) {
	html body .wp-block-woocommerce-product-details ul.tabs.wc-tabs {
		justify-content: center !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		/* Resserré pour que les trois onglets tiennent : avec le libellé
		   raccourci en « Informations » (voir functions.php), il faut 323 px
		   pour 343 disponibles en 375 px de large, et 328 en 360 px. En deçà
		   d'environ 340 px de fenêtre, le défilement ci-dessus prend le relais. */
		gap: 0.5rem !important;
		scrollbar-width: thin;
	}

	html body .wp-block-woocommerce-product-details ul.tabs.wc-tabs li a {
		font-size: 0.85rem !important;
		white-space: nowrap !important;
	}
}

/* WooCommerce impose « border: none » et « color: inherit » sur le lien des
   onglets (product-details.css, sélecteurs préfixés « html body »). Plutôt que
   de lutter contre, on porte couleur et soulignement sur le <li> : le lien,
   lui, hérite — ce qui utilise la règle de WooCommerce au lieu de la combattre. */
.wp-block-woocommerce-product-details ul.tabs.wc-tabs {
	border-bottom: 1px solid var( --wp--preset--color--base-2 ) !important;
}

.wp-block-woocommerce-product-details ul.tabs.wc-tabs li {
	border-bottom: 2px solid transparent !important;
	/* WooCommerce pose un liseré foncé de 2 px à gauche de chaque onglet, qui
	   apparaissait comme un trait vertical parasite devant « Description ».
	   La réinitialisation plus haut ne suffit pas : il faut « !important ». */
	border-top: 0 !important;
	border-right: 0 !important;
	border-left: 0 !important;
	margin-bottom: -1px;
	color: var( --wp--preset--color--contrast-2 ) !important;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.wp-block-woocommerce-product-details ul.tabs.wc-tabs li:hover,
.wp-block-woocommerce-product-details ul.tabs.wc-tabs li:focus-within {
	color: var( --wp--preset--color--primary ) !important;
}

/* Onglet actif : texte foncé et soulignement terracotta.
   Préfixe « html body » pour égaler la spécificité de WooCommerce. */
html body .wp-block-woocommerce-product-details.wp-block-woocommerce-product-details ul.tabs.wc-tabs.wc-tabs li.active.active {
	border-bottom-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
}

/* Le lien hérite de la couleur du <li> et ne porte plus de bordure. */
.wp-block-woocommerce-product-details ul.tabs.wc-tabs li a {
	color: inherit !important;
	border: 0 !important;
	text-decoration: none !important;
	font-weight: 500 !important;
}

html body .wp-block-woocommerce-product-details.wp-block-woocommerce-product-details ul.tabs.wc-tabs.wc-tabs li.active.active a {
	color: var( --wp--preset--color--contrast ) !important;
	font-weight: 600 !important;
}

/* Le « border-bottom » du <li> actif est verrouillé par une règle de
   WooCommerce que la spécificité seule ne surpasse pas. On dessine donc le
   soulignement avec un pseudo-élément, hors de portée de ce conflit. */
.wp-block-woocommerce-product-details ul.tabs.wc-tabs li {
	position: relative;
}

html body .wp-block-woocommerce-product-details ul.tabs.wc-tabs li.active::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	border: 0;
	background-color: var( --wp--preset--color--primary ) !important;
}

/* -------------------------------------------------------------------------
 * Bloc de partage — fiche produit et pied d'article
 * Traitement typographique et non « pastilles » : une rangée de boutons
 * pleins rivalisait avec « Ajouter au panier » et donnait au bloc l'allure
 * d'un widget d'extension, étranger au reste du site.
 * ---------------------------------------------------------------------- */
 /* Classe doublée à dessein : WordPress impose « margin-block-end: 0 » au
   dernier enfant d'une mise en page en flux, et le bloc de partage l'est
   toujours. Sa marge basse tombait donc à zéro, et sur « Les fruits de
   Corse » les liens venaient toucher le pied de page. Ni « main .classe » ni
   la classe seule ne suffisent : vérifié, seule la spécificité doublée passe. */
.cab-dolce-share.cab-dolce-share {
	margin: var( --wp--preset--spacing--50 ) 0 var( --wp--preset--spacing--60 );
	padding-top: var( --wp--preset--spacing--40 );
	border-top: 1px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-share__label {
	margin: 0 0 0.55rem;
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.cab-dolce-share__list {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	/* L'espacement vient de la grille ; le point de séparation ne doit pas y
	   ajouter la sienne, sous peine de doubler l'écart entre deux entrées. */
	gap: 0.3rem 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La puce des listes du contenu ne doit pas revenir ici. */
.cab-dolce-share__list li::before {
	content: none;
}

/* Point médian de séparation, dans la veine du reste du site. Il n'apparaît
   qu'entre deux entrées visibles : les boutons masqués n'en laissent pas. */
.cab-dolce-share__list li:not( [hidden] ) ~ li:not( [hidden] )::before {
	content: "·";
	content: "·" / "";
	margin-right: 0.55rem;
	color: var( --wp--preset--color--base-2 );
}

.cab-dolce-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0;
	border: 0;
	background: none;
	color: var( --wp--preset--color--caramel, var( --wp--preset--color--secondary ) );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	border-bottom: 1px solid transparent;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.cab-dolce-share__btn svg {
	width: 0.95em;
	height: 0.95em;
	fill: currentColor;
	flex: none;
	opacity: 0.75;
}

.cab-dolce-share__btn:hover,
.cab-dolce-share__btn:focus-visible {
	color: var( --wp--preset--color--primary );
	border-bottom-color: var( --wp--preset--color--primary );
}

.cab-dolce-share__btn:focus-visible {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 3px;
	border-radius: 2px;
}

/* Confirmation de copie : la couleur olive, jamais utilisée pour un lien,
   signale sans ambiguïté qu'il s'agit d'un retour et non d'une action. */
.cab-dolce-share__copy.is-copied {
	color: var( --wp--preset--color--accent );
	border-bottom-color: transparent;
}

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-share__btn {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Onglet « Informations » — valeur d'attribut retenue mise en évidence
 * Les autres valeurs restent lisibles : le client voit la gamme proposée
 * et ce qu'il a choisi. Voir assets/js/variation-info.js.
 * ---------------------------------------------------------------------- */
/* WooCommerce donne 8 px de remplissage à l'en-tête de ligne et rien à la
   cellule de valeur : celle-ci se retrouvait 8 px plus haut que son intitulé.
   On aligne les deux sur la même ligne de base, avec un remplissage identique.
   « !important » est nécessaire : la règle de WooCommerce l'emporte sur la
   spécificité, comme pour les onglets plus haut. */
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
	vertical-align: baseline !important;
}

.cab-dolce-attr-value {
	color: var( --wp--preset--color--contrast-2 );
	transition: color 0.18s ease;
}

.cab-dolce-attr-value--active {
	color: var( --wp--preset--color--contrast );
	font-weight: 600;
	/* Le soulignement double la couleur et la graisse : la distinction ne
	   repose pas sur la seule teinte. Le script ajoute en outre une mention
	   « (sélectionné) » réservée aux lecteurs d'écran. */
	border-bottom: 2px solid var( --wp--preset--color--primary );
	padding-bottom: 0.1em;
}

.cab-dolce-attr-sep {
	color: var( --wp--preset--color--contrast-2 );
}

/* Le bloc conteneur est lui aussi bridé (512 px par défaut). */
.wp-block-woocommerce-product-image-gallery {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
}

/* -------------------------------------------------------------------------
 * Fiche produit — galerie à vignettes verticales
 * Vignettes en colonne à gauche, grande image à droite.
 * Le ratio carré est imposé en CSS (object-fit) : aucune régénération
 * d'images nécessaire, et la colonne ne saute plus d'une photo à l'autre.
 * ---------------------------------------------------------------------- */
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	/* WooCommerce fige une largeur sur la galerie : on la laisse occuper
	   toute la colonne, sinon la grande image reste inutilement petite. */
	width: 100% !important;
	max-width: none !important;
}

/* Grande image à droite. */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	order: 2;
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 12px;
	overflow: hidden;
}

/* Ratio carré, sans toucher au calque de zoom. */
.woocommerce-product-gallery__image > a > img,
.woocommerce-product-gallery__image > img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Colonne de vignettes à gauche. */
.woocommerce-product-gallery .flex-control-thumbs {
	order: 1;
	flex: 0 0 78px;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	width: 100% !important;
	margin: 0 !important;
	padding: 0;
	float: none !important;
	list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	/* Bordure réservée dès le repos : la vignette ne change pas de taille
	   quand elle devient active, et le cerclage reste dans le cadre
	   (contrairement à box-shadow, qui déborde et se fait rogner). */
	box-sizing: border-box;
	border: 2px solid transparent;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.18s ease, box-shadow 0.18s ease;
}

.woocommerce-product-gallery .flex-control-thumbs img:hover {
	opacity: 1;
}

/* Vignette active : cerclée de terracotta. */
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	opacity: 1 !important;
	border-color: var( --wp--preset--color--primary ) !important;
	box-shadow: none !important;
}

/* Loupe de la visionneuse, dans le coin de la grande image. */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	z-index: 5;
	top: 0.8rem;
	right: 0.8rem;
}

/* Mobile : vignettes en bande horizontale sous la photo. */
@media screen and ( max-width: 600px ) {
	.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery {
		flex-direction: column;
	}

	.woocommerce-product-gallery .flex-control-thumbs {
		order: 2;
		flex: 0 0 auto;
		flex-direction: row;
		width: 100%;
		overflow-x: auto;
	}

	.woocommerce-product-gallery .flex-control-thumbs li {
		flex: 0 0 68px;
	}
}

/* -------------------------------------------------------------------------
 * Fiche produit — prix, choix de variation, quantité et ajout au panier
 * ---------------------------------------------------------------------- */

/* Prix principal de la fiche produit, mis en valeur.
   « > » volontaire : cible le prix placé directement dans la colonne d'achat,
   pas ceux des grilles (produits similaires, boutique), qui gardent leur taille. */
.single-product .wp-block-column > .wp-block-woocommerce-product-price {
	font-size: 1.8rem !important;
	font-weight: 700;
	line-height: 1.2;
	color: var( --wp--preset--color--contrast-2 );
}

.single-product .wp-block-column > .wp-block-woocommerce-product-price del {
	opacity: 0.55;
	font-weight: 400;
	font-size: 0.75em;
}

/* --- Choix de la variation : le tableau devient une mise en page verticale --- */
.single-product form.cart table.variations {
	width: 100%;
	margin: 0 0 var( --wp--preset--spacing--40 );
	border: 0;
	background: none;
}

.single-product form.cart table.variations tbody,
.single-product form.cart table.variations tr,
.single-product form.cart table.variations th,
.single-product form.cart table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
}

.single-product form.cart table.variations th.label label {
	display: block;
	margin-bottom: 0.45rem;
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.single-product form.cart table.variations td.value select {
	width: 100%;
	max-width: 320px;
	padding: 0.72rem 2.4rem 0.72rem 1.1rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 999px;
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 1rem;
	cursor: pointer;
}

.single-product form.cart table.variations td.value select:focus {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 1px;
}

.single-product form.cart a.reset_variations {
	display: inline-block;
	margin-top: 0.55rem;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.85rem;
}

/* Prix de la variation choisie. */
.single-product .woocommerce-variation-price .price {
	display: block;
	margin-bottom: var( --wp--preset--spacing--30 );
	color: var( --wp--preset--color--contrast-2 );
	font-size: 1.45rem;
	font-weight: 700;
}

.single-product .woocommerce-variation-availability p {
	margin: 0 0 var( --wp--preset--spacing--30 );
	font-size: 0.9rem;
	color: var( --wp--preset--color--contrast-2 );
}

/* --- Quantité + bouton sur une même ligne --- */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7rem;
}

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

/* Sélecteur « − 1 + » : un groupe arrondi à la hauteur du bouton (48 px).
   Les boutons sont injectés par assets/js/quantity.js. */
.single-product form.cart .quantity.cab-dolce-qty {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 48px;
	padding: 0 0.25rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 999px;
	background-color: var( --wp--preset--color--base );
}

.single-product form.cart .cab-dolce-qty__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.single-product form.cart .cab-dolce-qty__btn:hover,
.single-product form.cart .cab-dolce-qty__btn:focus-visible {
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--primary );
}

/* Champ central : hauteur et remplissage forcés (WooCommerce les impose). */
.single-product form.cart .quantity input.qty {
	width: 44px !important;
	height: 100% !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-family: var( --wp--preset--font-family--body );
	font-size: 1rem !important;
	font-weight: 600;
	text-align: center;
	color: var( --wp--preset--color--contrast );
}

.single-product form.cart .quantity input.qty:focus {
	outline: 0;
}

.single-product form.cart .quantity.cab-dolce-qty:focus-within {
	border-color: var( --wp--preset--color--primary );
}

/* Flèches natives masquées : les boutons « − / + » les remplacent. */
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.single-product form.cart .quantity input.qty {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Bouton d'ajout au panier : pastille terracotta, texte foncé (charte).
   « !important » : WooCommerce impose sa propre couleur de bouton. */
.single-product form.cart button.single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 210px;
	padding: 0.9rem 1.7rem !important;
	border: 0 !important;
	border-radius: 999px !important;
	background-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--body );
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.single-product form.cart button.single_add_to_cart_button:hover,
.single-product form.cart button.single_add_to_cart_button:focus-visible {
	background-color: var( --wp--preset--color--secondary ) !important;
	color: var( --wp--preset--color--base ) !important;
}

/* Bouton inactif tant qu'aucune variation n'est choisie. */
.single-product form.cart button.single_add_to_cart_button.disabled,
.single-product form.cart button.single_add_to_cart_button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Message « Ce produit est déjà dans votre panier » et alertes de stock. */
.single-product .stock {
	font-size: 0.9rem;
	color: var( --wp--preset--color--leaf );
}

.single-product .stock.out-of-stock {
	color: var( --wp--preset--color--secondary );
}

/* -------------------------------------------------------------------------
 * Fiche produit — respiration de la colonne d'achat
 * ---------------------------------------------------------------------- */
.single-product .wp-block-woocommerce-product-rating {
	margin-bottom: var( --wp--preset--spacing--30 );
}

.single-product .wp-block-column > .wp-block-woocommerce-product-price {
	margin-bottom: var( --wp--preset--spacing--50 );
}

.single-product form.cart table.variations {
	margin-bottom: var( --wp--preset--spacing--50 ) !important;
}

.single-product .woocommerce-variation-add-to-cart {
	margin-top: var( --wp--preset--spacing--40 );
}

.single-product .wp-block-woocommerce-product-meta {
	margin-top: var( --wp--preset--spacing--50 );
	padding-top: var( --wp--preset--spacing--40 );
	border-top: 1px solid var( --wp--preset--color--base-2 );
	font-size: 0.9rem;
}

.single-product .wp-block-woocommerce-product-meta .wp-block-group {
	gap: 1.2rem;
	flex-wrap: wrap;
}

/* Encart « retrait sur place » un peu plus aéré. */
.single-product .wp-block-add-to-cart-form + .wp-block-group {
	margin-top: var( --wp--preset--spacing--50 ) !important;
}

/* -------------------------------------------------------------------------
 * « Vous aimerez peut-être aussi… » (ventes incitatives) et ventes croisées
 * Sections « classiques » de WooCommerce : même traitement visuel que les
 * produits similaires (bandeau rosé pleine largeur + effets de survol).
 * ---------------------------------------------------------------------- */
main section.upsells,
main section.cross-sells {
	max-width: none !important;
	/* Bord à bord : on compense la marge latérale du site. */
	margin-right: calc( var( --wp--style--root--padding-right ) * -1 ) !important;
	margin-left: calc( var( --wp--style--root--padding-left ) * -1 ) !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: var( --wp--preset--spacing--70 ) var( --wp--style--root--padding-left );
	background-color: var( --wp--preset--color--base-2 );
}

/* Contenu recentré sur la largeur du site. */
main section.upsells > h2,
main section.upsells > ul.products,
main section.cross-sells > h2,
main section.cross-sells > ul.products {
	max-width: var( --wp--style--global--wide-size );
	margin-right: auto;
	margin-left: auto;
}

main section.upsells > h2,
main section.cross-sells > h2 {
	margin-top: 0;
	margin-bottom: var( --wp--preset--spacing--50 );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--x-large ) !important;
	line-height: 1.2;
	text-align: center;
}

/* Grille de produits. */
main section.upsells ul.products,
main section.cross-sells ul.products {
	/* Flex plutôt que grille : les tuiles restent centrées quel que soit
	   leur nombre, sans piste vide résiduelle. */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22.5px;
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}

main section.upsells li.product,
main section.cross-sells li.product {
	flex: 0 1 222px;
	max-width: 222px;
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	float: none !important;
	text-align: center;
	list-style: none;
}

main section.upsells li.product::before,
main section.cross-sells li.product::before {
	display: none;
}

/* Vignette (conteneur ajouté par assets/js/loop-thumb.js). */
main section.upsells .cab-dolce-thumb,
main section.cross-sells .cab-dolce-thumb {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	margin-bottom: 0.8rem;
}

main section.upsells .cab-dolce-thumb img,
main section.cross-sells .cab-dolce-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 !important;
	border-radius: 0;
	box-shadow: none;
	transition: transform 0.5s ease;
}

/* Zoom + voile sombre au survol, comme les produits similaires. */
main section.upsells li.product:hover .cab-dolce-thumb img,
main section.upsells li.product:focus-within .cab-dolce-thumb img,
main section.cross-sells li.product:hover .cab-dolce-thumb img,
main section.cross-sells li.product:focus-within .cab-dolce-thumb img {
	transform: scale( 1.06 );
}

main section.upsells .cab-dolce-thumb::after,
main section.cross-sells .cab-dolce-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-color: rgba( 28, 26, 25, 0.35 );
	opacity: 0;
	transition: opacity 0.4s ease;
}

main section.upsells li.product:hover .cab-dolce-thumb::after,
main section.upsells li.product:focus-within .cab-dolce-thumb::after,
main section.cross-sells li.product:hover .cab-dolce-thumb::after,
main section.cross-sells li.product:focus-within .cab-dolce-thumb::after {
	opacity: 1;
}

/* Titre et prix. */
main section.upsells .woocommerce-loop-product__title,
main section.cross-sells .woocommerce-loop-product__title {
	margin: 0 0 0.35rem;
	padding: 0 !important;
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 18px !important;
	line-height: 1.3;
}

/* Le prix reprend le brun « contrast-2 » des grilles en blocs — boutique,
   catégories, produits similaires. Il était seul en noir sur tout le site.
   Mesuré à 5,60:1 sur le fond rosé de la section, au-dessus du seuil de 4,5. */
main section.upsells li.product .price,
main section.cross-sells li.product .price {
	display: block;
	margin-bottom: 0.9rem;
	color: var( --wp--preset--color--contrast-2 ) !important;
	font-size: 14.4px !important;
	font-weight: 700 !important;
}

/* Le montant lui-même hérite (WooCommerce le style séparément). */
main section.upsells li.product .price .woocommerce-Price-amount,
main section.cross-sells li.product .price .woocommerce-Price-amount {
	font-size: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
}

/* Prix barré des boucles classiques, aligné sur le reste du site.
 *
 * Les deux premiers sélecteurs ne suffisaient pas : WooCommerce pose
 * `.woocommerce ul.products li.product .price del { opacity: .7 }`, plus
 * spécifique, et l'emportait. On repasse donc par sa propre forme, enrichie de
 * la section — mesuré à 0,7 avant, 0,55 après. */
main section.upsells li.product .price del,
main section.cross-sells li.product .price del,
.woocommerce section.upsells ul.products li.product .price del,
.woocommerce section.cross-sells ul.products li.product .price del,
.woocommerce section.related ul.products li.product .price del {
	opacity: 0.55;
	font-weight: 400;
	font-size: 0.85em;
}

main section.upsells li.product a,
main section.cross-sells li.product a {
	text-decoration: none;
}

/* Bouton, au style du site. */
main section.upsells li.product a.button,
main section.cross-sells li.product a.button {
	display: inline-block;
	padding: 12px 24px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-size: 14.4px !important;
	font-weight: 600 !important;
	transition: background-color 0.18s ease, color 0.18s ease;
}

main section.upsells li.product a.button:hover,
main section.cross-sells li.product a.button:hover {
	background-color: var( --wp--preset--color--secondary ) !important;
	color: var( --wp--preset--color--base ) !important;
}

/* Badge promo éventuel. */
main section.upsells li.product .onsale,
main section.cross-sells li.product .onsale {
	z-index: 3;
}

@media ( prefers-reduced-motion: reduce ) {
	main section.upsells .cab-dolce-thumb img,
	main section.cross-sells .cab-dolce-thumb img,
	main section.upsells .cab-dolce-thumb::after,
	main section.cross-sells .cab-dolce-thumb::after {
		transition: none;
	}

	main section.upsells li.product:hover .cab-dolce-thumb img,
	main section.cross-sells li.product:hover .cab-dolce-thumb img {
		transform: none;
	}
}

/* Section « produits similaires » masquée quand WooCommerce n'en propose
   aucun : sans cela, il ne resterait qu'un bandeau rosé vide. */
.cab-dolce-related:not( :has( .wc-block-product ) ) {
	display: none;
}

/* Idem pour les ventes incitatives et croisées sans produit. */
main section.upsells:not( :has( li.product ) ),
main section.cross-sells:not( :has( li.product ) ) {
	display: none;
}

/* Grille des produits similaires centrée, comme les ventes incitatives. */
.cab-dolce-related .wc-block-product-template {
	justify-content: center;
}

/* -------------------------------------------------------------------------
 * Fiche produit — badge « Promo ! » de la galerie
 * Par défaut : cercle vert olive placé à cheval sur la première vignette.
 * On le transforme en capsule terracotta, en haut à droite de la grande image.
 * ---------------------------------------------------------------------- */
.wp-block-woocommerce-product-image-gallery {
	position: relative;
}

.wp-block-woocommerce-product-image-gallery span.onsale {
	position: absolute !important;
	top: 0.9rem !important;
	right: 0.9rem !important;
	bottom: auto !important;
	left: auto !important;
	z-index: 6;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0.38rem 0.9rem !important;
	/* Contour, graisse et absence d'ombre alignés sur la pastille de la
	   boutique et du panier. Le contour manquait ici parce que la galerie
	   utilise l'ancien balisage « span.onsale » et non le bloc, qui porte
	   ces styles d'origine. */
	border: 1px solid rgb( 67, 69, 75 ) !important;
	border-radius: 999px !important;
	background-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--body ) !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: none !important;
}

/* La loupe passe en bas à droite pour ne pas croiser le badge. */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	top: auto !important;
	bottom: 0.9rem !important;
	right: 0.9rem !important;
}

/* Mobile : les vignettes passent dessous, le badge reste sur la photo. */
@media screen and ( max-width: 600px ) {
	.wp-block-woocommerce-product-image-gallery span.onsale {
		top: 0.7rem !important;
		right: 0.7rem !important;
	}
}

/* -------------------------------------------------------------------------
 * Panier (bloc WooCommerce)
 * ---------------------------------------------------------------------- */

/* Titre de la page. */
.woocommerce-cart .wp-block-post-title {
	text-align: center;
	font-family: var( --wp--preset--font-family--heading );
}

/* --- Colonne des articles --- */
.wc-block-cart-items {
	border: 0;
}

.wc-block-cart-items__header {
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wc-block-cart-items__row {
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
}

.wc-block-cart-items__row td {
	padding-top: var( --wp--preset--spacing--40 );
	padding-bottom: var( --wp--preset--spacing--40 );
}

/* Vignette produit. */
td.wc-block-cart-item__image {
	width: 96px !important;
}

.wc-block-cart-item__image img {
	width: 96px !important;
	max-width: none !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
}

/* Nom du produit. */
.wc-block-components-product-name {
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--heading ) !important;
	font-size: 1.15rem !important;
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.18s ease;
}

.wc-block-components-product-name:hover,
.wc-block-components-product-name:focus {
	color: var( --wp--preset--color--primary ) !important;
}

/* Détails de variation (contenance…). */
.wc-block-components-product-details {
	margin: 0.35rem 0 0;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.88rem;
}

.wc-block-components-product-details__name {
	font-weight: 600;
}

/* Prix unitaire et total de ligne. */
.wc-block-cart-item__prices .wc-block-components-product-price,
.wc-block-cart-item__total .wc-block-components-product-price {
	color: var( --wp--preset--color--contrast-2 );
	font-weight: 700;
}

.wc-block-cart-item__total .wc-block-components-product-price {
	font-size: 1.05rem;
}

/* Sélecteur de quantité, au style du site. */
.wc-block-components-quantity-selector {
	display: inline-flex !important;
	align-items: center;
	box-sizing: border-box;
	width: auto !important;
	min-width: 0;
	height: 42px;
	margin-top: 0.6rem;
	padding: 0 0.2rem;
	border: 1px solid var( --wp--preset--color--base-2 ) !important;
	border-radius: 999px !important;
	background-color: var( --wp--preset--color--base );
}

.wc-block-components-quantity-selector::after {
	display: none !important;
}

.wc-block-components-quantity-selector__input {
	width: 40px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 1rem !important;
	font-weight: 600;
	text-align: center;
}

.wc-block-components-quantity-selector__button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var( --wp--preset--color--contrast-2 ) !important;
	font-size: 1.1rem;
	opacity: 1 !important;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.wc-block-components-quantity-selector__button:hover:not( :disabled ),
.wc-block-components-quantity-selector__button:focus-visible {
	background-color: var( --wp--preset--color--base-2 ) !important;
	color: var( --wp--preset--color--primary ) !important;
}

.wc-block-components-quantity-selector__button:disabled {
	opacity: 0.35 !important;
	cursor: not-allowed;
}

/* Lien « Supprimer ». */
.wc-block-cart-item__remove-link {
	margin-top: 0.6rem;
	color: var( --wp--preset--color--contrast-2 ) !important;
	font-size: 0.82rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.18s ease;
}

.wc-block-cart-item__remove-link:hover,
.wc-block-cart-item__remove-link:focus {
	color: var( --wp--preset--color--secondary ) !important;
}

/* --- Colonne des totaux --- */
.wc-block-cart__sidebar .wc-block-components-sidebar-layout,
.wc-block-cart__sidebar > * {
	border-radius: 16px;
}

.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
	padding: var( --wp--preset--spacing--50 );
	border: 0;
	border-radius: 16px;
	background-color: var( --wp--preset--color--base-2 );
}

.wc-block-cart__totals-title {
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--heading ) !important;
	font-size: 1.25rem !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.wc-block-components-totals-item {
	color: var( --wp--preset--color--contrast );
}

.wc-block-components-totals-item__label {
	color: var( --wp--preset--color--contrast-2 );
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.5rem;
}

/* Code promo. */
.wc-block-components-totals-coupon__input input,
.wc-block-components-text-input input {
	border: 1px solid var( --wp--preset--color--base-2 ) !important;
	border-radius: 999px !important;
	background-color: var( --wp--preset--color--base ) !important;
	font-family: var( --wp--preset--font-family--body );
}

.wc-block-components-totals-coupon__button {
	border-radius: 999px !important;
	background-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-weight: 600 !important;
}

.wc-block-components-totals-coupon__button:hover {
	background-color: var( --wp--preset--color--secondary ) !important;
	color: var( --wp--preset--color--base ) !important;
}

/* Bouton « Valider la commande ». */
.wc-block-cart__submit-button {
	width: 100%;
	padding: 0.95rem 1.6rem !important;
	border: 0 !important;
	border-radius: 999px !important;
	background-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--body ) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus-visible {
	background-color: var( --wp--preset--color--secondary ) !important;
	color: var( --wp--preset--color--base ) !important;
}

/* Mobile : la colonne des totaux passe sous les articles. */
@media screen and ( max-width: 700px ) {
	.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
		padding: var( --wp--preset--spacing--40 );
	}

	.wc-block-cart-item__image img {
		width: 72px !important;
	}
}

/* -------------------------------------------------------------------------
 * Panier / Commande / Mon compte — bandeau dégradé en tête
 * Ces pages utilisent le modèle de page standard : c'est le titre lui-même
 * qui devient le bandeau, pleine largeur, comme sur la boutique.
 * ---------------------------------------------------------------------- */
.woocommerce-cart main,
.woocommerce-checkout main,
.woocommerce-account main {
	margin-top: 0 !important;
}

.woocommerce-cart main > .wp-block-post-title,
.woocommerce-checkout main > .wp-block-post-title,
.woocommerce-account main > .wp-block-post-title {
	max-width: none;
	/* Bord à bord : on compense la marge latérale du site.
	   « !important » : la mise en page contrainte impose « margin: auto ». */
	margin-top: 0 !important;
	margin-right: calc( var( --wp--style--root--padding-right ) * -1 ) !important;
	margin-bottom: var( --wp--preset--spacing--60 ) !important;
	margin-left: calc( var( --wp--style--root--padding-left ) * -1 ) !important;
	padding: 4.5rem var( --wp--style--root--padding-left ) 3.5rem;
	background-image: var( --wp--preset--gradient--confiture );
	color: var( --wp--preset--color--base ) !important;
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--xx-large ) !important;
	text-align: center;
}

/* Les notifications de la boutique restent au-dessus du bandeau. */
.woocommerce-cart main > .wc-block-store-notices:empty,
.woocommerce-checkout main > .wc-block-store-notices:empty {
	margin: 0;
}

@media screen and ( max-width: 781px ) {
	.woocommerce-cart main > .wp-block-post-title,
	.woocommerce-checkout main > .wp-block-post-title,
	.woocommerce-account main > .wp-block-post-title {
		padding-top: 3.5rem;
		padding-bottom: 2.5rem;
	}
}

/* -------------------------------------------------------------------------
 * Panier vide — « Nouveau dans la boutique »
 * Même bandeau rosé que « Produits similaires » / « Vous aimerez… ».
 * Le titre et la grille sont deux frères : le fond étant uni, on le pose
 * sur les deux sans couture visible.
 * ---------------------------------------------------------------------- */

/* Panier vide : on libère les conteneurs de leur largeur maximale, afin que
   le bandeau puisse aller bord à bord avec la technique habituelle du thème
   (marges négatives sur la marge du site) plutôt qu'avec « 100vw », qui
   inclut la barre de défilement et provoque un débordement. */
body.woocommerce-cart:has( .wp-block-woocommerce-empty-cart-block ) .entry-content,
body.woocommerce-cart:has( .wp-block-woocommerce-empty-cart-block ) .wp-block-woocommerce-cart {
	max-width: none !important;
}

/* Le message et le trait restent, eux, à la largeur du site. */
.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block > .wp-block-separator {
	max-width: var( --wp--style--global--wide-size );
	margin-left: auto;
	margin-right: auto;
}

/* Message « panier vide », au-dessus du bandeau. */
.wc-block-cart__empty-cart__title {
	font-family: var( --wp--preset--font-family--heading );
	color: var( --wp--preset--color--contrast );
}

.wp-block-woocommerce-empty-cart-block > .wp-block-separator {
	margin-block: var( --wp--preset--spacing--50 );
	color: var( --wp--preset--color--base-2 );
}

/* --- Le bandeau : titre + grille --- */
.wp-block-woocommerce-empty-cart-block > h2:not( .wc-block-cart__empty-cart__title ),
.wp-block-woocommerce-empty-cart-block > .wc-block-product-new {
	max-width: none;
	margin-left: calc( var( --wp--style--root--padding-left ) * -1 ) !important;
	margin-right: calc( var( --wp--style--root--padding-right ) * -1 ) !important;
	background-color: var( --wp--preset--color--base-2 );
}

.wp-block-woocommerce-empty-cart-block > h2:not( .wc-block-cart__empty-cart__title ) {
	margin-top: var( --wp--preset--spacing--60 ) !important;
	margin-bottom: 0 !important;
	padding: var( --wp--preset--spacing--70 ) 1rem var( --wp--preset--spacing--50 );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--x-large ) !important;
	line-height: 1.2;
	text-align: center;
}

.wp-block-woocommerce-empty-cart-block > .wc-block-product-new {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: 0 1rem var( --wp--preset--spacing--70 );
}

/* Grille : tuiles centrées, mêmes dimensions que les autres sections. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22.5px;
	max-width: var( --wp--style--global--wide-size );
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
	flex: 0 1 222px !important;
	max-width: 222px !important;
	min-width: 0 !important;
	width: 222px !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center;
}

/* Vignette : le conteneur d'image sert à rogner le zoom. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0 0 0.8rem;
	border-radius: 12px;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	transition: transform 0.5s ease;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover .wc-block-grid__product-image img,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:focus-within .wc-block-grid__product-image img {
	transform: scale( 1.06 );
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-color: rgba( 28, 26, 25, 0.35 );
	opacity: 0;
	transition: opacity 0.4s ease;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover .wc-block-grid__product-image::after,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:focus-within .wc-block-grid__product-image::after {
	opacity: 1;
}

/* Titre et prix, mêmes valeurs que les autres sections. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
	margin: 0 0 0.35rem;
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 18px !important;
	line-height: 1.3;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
	display: block;
	margin-bottom: 0.9rem;
	color: var( --wp--preset--color--contrast ) !important;
	font-size: 14.4px !important;
	font-weight: 700 !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
	text-decoration: none;
}

/* Bouton, identique aux autres sections. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart a.button,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: inline-block;
	padding: 12px 24px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-size: 14.4px !important;
	font-weight: 600 !important;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart a.button:hover,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--secondary ) !important;
	color: var( --wp--preset--color--base ) !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img,
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image::after {
		transition: none;
	}

	.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover .wc-block-grid__product-image img {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Badge « Promo » des grilles héritées (panier vide)
 * Aligné sur le badge de la boutique : capsule terracotta, texte foncé.
 * ---------------------------------------------------------------------- */
.wc-block-grid__product {
	position: relative;
}

.wc-block-grid__product-onsale {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	z-index: 3;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0.25rem 0.75rem !important;
	/* Même contour fin que le badge de la boutique. */
	border: 1px solid rgb( 67, 69, 75 ) !important;
	border-radius: 999px !important;
	background-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--body ) !important;
	font-size: 15.75px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	text-transform: uppercase;
	box-shadow: none !important;
}

/* -------------------------------------------------------------------------
 * Commande (bloc Checkout)
 * ---------------------------------------------------------------------- */

/* Titres d'étape (Coordonnées, Adresse, Paiement). */
.wc-block-components-checkout-step__title {
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--heading ) !important;
	font-size: 1.25rem !important;
	font-weight: 400 !important;
}

.wc-block-components-checkout-step__description {
	color: var( --wp--preset--color--contrast-2 );
}

.wc-block-components-checkout-step {
	border-color: var( --wp--preset--color--base-2 );
}

/* Champs de formulaire, au style du reste du site. */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-combobox input,
.wc-block-components-select__container select {
	border: 1px solid var( --wp--preset--color--base-2 ) !important;
	border-radius: 12px !important;
	background-color: var( --wp--preset--color--base ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--body ) !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-select__container select:focus {
	outline: 2px solid var( --wp--preset--color--primary ) !important;
	outline-offset: 1px;
	box-shadow: none !important;
}

.wc-block-components-text-input label,
.wc-block-components-select__label {
	color: var( --wp--preset--color--contrast-2 ) !important;
}

/* Cases à cocher et boutons radio aux couleurs de la marque. */
.wc-block-components-checkbox__input,
.wc-block-components-radio-control__input,
.wc-block-components-checkout input[type="checkbox"],
.wc-block-components-checkout input[type="radio"] {
	accent-color: var( --wp--preset--color--primary );
}

.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border-color: var( --wp--preset--color--base-2 ) !important;
}

.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option:has( input:checked ) {
	border-color: var( --wp--preset--color--primary ) !important;
	background-color: color-mix( in srgb, var( --wp--preset--color--base-2 ) 55%, transparent );
}

/* --- Récapitulatif (colonne latérale) --- */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	padding: var( --wp--preset--spacing--50 );
	border: 0;
	border-radius: 16px;
	background-color: var( --wp--preset--color--base-2 );
}

.wc-block-components-checkout-order-summary__title,
.wc-block-components-panel__button {
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--heading ) !important;
	font-weight: 400 !important;
}

.wc-block-components-order-summary-item__image img {
	border-radius: 10px;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-size: 1rem !important;
}

.wc-block-components-order-summary-item__quantity {
	background-color: var( --wp--preset--color--primary ) !important;
	border-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-weight: 600;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.5rem;
	color: var( --wp--preset--color--contrast );
}

/* Bouton « Commander ». */
.wc-block-components-checkout-place-order-button {
	width: 100%;
	padding: 0.95rem 1.6rem !important;
	border: 0 !important;
	border-radius: 999px !important;
	background-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--body ) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus-visible {
	background-color: var( --wp--preset--color--secondary ) !important;
	color: var( --wp--preset--color--base ) !important;
}

/* Lien « Retour au panier ». */
.wc-block-components-checkout-return-to-cart-button {
	color: var( --wp--preset--color--contrast-2 ) !important;
	transition: color 0.18s ease;
}

.wc-block-components-checkout-return-to-cart-button:hover {
	color: var( --wp--preset--color--primary ) !important;
}

/* Notices et messages d'erreur. */
.wc-block-components-validation-error {
	color: var( --wp--preset--color--secondary );
}

/* -------------------------------------------------------------------------
 * En-tête de la page de commande
 * Tunnel volontairement sans navigation ni pied de page (choix WooCommerce
 * pour limiter les abandons), mais aux couleurs et au logo de la marque.
 * ---------------------------------------------------------------------- */
.cab-dolce-checkout-header {
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-checkout-header .cab-dolce-header__bar,
.cab-dolce-checkout-header__bar {
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
	gap: 1rem;
}

.cab-dolce-checkout-header .cab-dolce-logo img {
	display: block;
	height: auto;
}

.cab-dolce-checkout-header__note {
	margin: 0;
}

/* Sans pied de page, on aère le bas de la page de commande. */
.cab-dolce-checkout {
	padding-bottom: var( --wp--preset--spacing--70 );
}

@media screen and ( max-width: 600px ) {
	.cab-dolce-checkout-header__bar {
		justify-content: center;
		text-align: center;
	}
}

/* -------------------------------------------------------------------------
 * Confirmation de commande (« Commande reçue »)
 * ---------------------------------------------------------------------- */
.woocommerce-order-received main {
	margin-top: 0 !important;
}

/* Le message de statut devient le bandeau d'en-tête. */
.woocommerce-order-received main > .wc-block-order-confirmation-status {
	max-width: none;
	margin-top: 0 !important;
	margin-right: calc( var( --wp--style--root--padding-right ) * -1 ) !important;
	margin-bottom: var( --wp--preset--spacing--60 ) !important;
	margin-left: calc( var( --wp--style--root--padding-left ) * -1 ) !important;
	padding: 4.5rem var( --wp--style--root--padding-left ) 3.5rem;
	background-image: var( --wp--preset--gradient--confiture );
	text-align: center;
}

.woocommerce-order-received main > .wc-block-order-confirmation-status,
.woocommerce-order-received main > .wc-block-order-confirmation-status * {
	color: var( --wp--preset--color--base ) !important;
}

/* Titre : même traitement que celui de la boutique (Roxborough, xx-large). */
.woocommerce-order-received main > .wc-block-order-confirmation-status h1,
.woocommerce-order-received main > .wc-block-order-confirmation-status h2 {
	margin: 0;
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--xx-large ) !important;
	line-height: 1.15;
}

/* Phrase de confirmation : accroche en Montserrat, comme sur la boutique. */
.woocommerce-order-received main > .wc-block-order-confirmation-status p {
	margin: var( --wp--preset--spacing--20 ) 0 0;
	font-family: var( --wp--preset--font-family--body ) !important;
	font-size: var( --wp--preset--font-size--large ) !important;
	font-weight: 400 !important;
	line-height: 1.5;
	opacity: 0.9;
}

/* Texte d'explication sous le bandeau. */
.wc-block-order-confirmation-status-description {
	margin-bottom: var( --wp--preset--spacing--60 );
	color: var( --wp--preset--color--contrast-2 );
	text-align: center;
}

.wc-block-order-confirmation-status-description a {
	color: var( --wp--preset--color--primary );
}

/* Adresses de facturation / livraison en cartes rosées. */
.wc-block-order-confirmation-address-wrapper .wp-block-column {
	padding: var( --wp--preset--spacing--50 );
	border-radius: 16px;
	background-color: var( --wp--preset--color--base-2 );
}

.wc-block-order-confirmation-address-wrapper h2,
.wc-block-order-confirmation-address-wrapper h3 {
	margin-top: 0;
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.15rem !important;
	font-weight: 400 !important;
}

/* Récapitulatif (n° de commande, date, total, moyen de paiement). */
.wc-block-order-confirmation-summary {
	padding: var( --wp--preset--spacing--50 );
	border: 0;
	border-radius: 16px;
	background-color: var( --wp--preset--color--base-2 );
}

.wc-block-order-confirmation-summary-list-item__key {
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wc-block-order-confirmation-summary-list-item__value {
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.1rem;
}

/* Tableau des articles commandés. */
.wc-block-order-confirmation-totals table {
	width: 100%;
	border-collapse: collapse;
}

.wc-block-order-confirmation-totals th,
.wc-block-order-confirmation-totals td {
	padding: 0.8rem 0.6rem;
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
	text-align: left;
}

.wc-block-order-confirmation-totals th {
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wc-block-order-confirmation-totals tfoot td,
.wc-block-order-confirmation-totals tfoot th {
	font-weight: 700;
}

.wc-block-order-confirmation-totals__product-name {
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.05rem;
}

/* Titres de section (Détails de la commande, etc.). */
.woocommerce-order-received main h2 {
	font-family: var( --wp--preset--font-family--heading );
}

@media screen and ( max-width: 781px ) {
	.woocommerce-order-received main > .wc-block-order-confirmation-status {
		padding-top: 3.5rem;
		padding-bottom: 2.5rem;
	}
}

/* Espace sous les adresses, pour détacher le contenu du pied de page. */
.woocommerce-order-received main {
	padding-bottom: var( --wp--preset--spacing--70 );
}

.woocommerce-order-received main > .wc-block-order-confirmation-address-wrapper {
	margin-bottom: var( --wp--preset--spacing--60 );
}

/* -------------------------------------------------------------------------
 * Mon compte (markup classique WooCommerce)
 * ---------------------------------------------------------------------- */

/* Menu et contenu côte à côte (par défaut ils s'empilent). */
.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var( --wp--preset--spacing--60 );
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 0 0 250px;
	width: auto !important;
	max-width: 100%;
	float: none !important;
	margin: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 320px;
	width: auto !important;
	max-width: 100%;
	float: none !important;
	margin: 0 !important;
}

/* --- Menu latéral --- */
.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation li {
	margin: 0 0 0.3rem;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.65rem 1rem;
	border-radius: 10px;
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.95rem;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li a:focus-visible {
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--primary );
}

/* Onglet courant : pastille terracotta, texte foncé (charte). */
.woocommerce-MyAccount-navigation li.is-active a {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
	font-weight: 600;
}

/* Déconnexion, détachée du reste. */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 0.8rem;
	padding-top: 0.8rem;
	border-top: 1px solid var( --wp--preset--color--base-2 );
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var( --wp--preset--color--contrast-2 );
}

/* --- Contenu --- */
.woocommerce-MyAccount-content > p:first-child {
	color: var( --wp--preset--color--contrast-2 );
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 400;
}

/* Tableau des commandes. */
.woocommerce-orders-table,
.woocommerce-table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
}

.woocommerce-orders-table th,
.woocommerce-table th {
	padding: 0.7rem 0.6rem;
	border: 0;
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-align: left;
}

.woocommerce-orders-table td,
.woocommerce-table td {
	padding: 0.9rem 0.6rem;
	border: 0;
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
}

/* Adresses en cartes rosées. */
.woocommerce-Addresses .woocommerce-Address,
.woocommerce-Address address {
	border-radius: 14px;
}

.woocommerce-Addresses .woocommerce-Address {
	padding: var( --wp--preset--spacing--50 );
	background-color: var( --wp--preset--color--base-2 );
}

.woocommerce-Address address {
	font-style: normal;
	line-height: 1.7;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin-top: 0;
	font-size: 1.15rem !important;
}

/* -------------------------------------------------------------------------
 * Photo de profil — Gravatar ou image envoyée par le client
 * Champs posés par inc/avatar.php, sur « Détails du compte » et sur la page
 * de profil de l'administration.
 * ---------------------------------------------------------------------- */
/* Les deux blocs du formulaire — « Photo de profil » et « Changement de mot de
   passe » — partagent le même cadre et le même style de titre. WooCommerce ne
   pose rien sur le second : sans cette règle, ils n'avaient ni le même contour
   ni la même police. */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
	/* La marge haute détache le premier cadre du champ « Adresse e-mail », qui
	   sinon lui collait. Entre deux cadres, les marges se fusionnent : l'écart
	   reste le même partout. */
	margin: var( --wp--preset--spacing--50 ) 0;
	padding: var( --wp--preset--spacing--40 );
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 14px;
	background-color: var( --wp--preset--color--base );
}

.woocommerce-account .woocommerce-EditAccountForm legend {
	padding: 0 0.5rem;
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--medium );
}

/* Aperçu à gauche, choix en vis-à-vis. Sur mobile, la colonne reprend le
   dessus : les libellés sont trop longs pour tenir à côté de la vignette. */
.cab-dolce-avatar__tete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --wp--preset--spacing--40 );
	margin-bottom: var( --wp--preset--spacing--30 );
}

.cab-dolce-avatar__apercu img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-avatar__choix {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

/* Les libellés du compte portent une marge basse qui s'ajoutait à l'espacement
   de la colonne : 38 px séparaient deux options, pour des lignes de 24 px.
   Le préfixe « .woocommerce-account main » est nécessaire pour dépasser la
   règle générique des libellés de formulaire, plutôt qu'un « !important ». */
.woocommerce-account main .cab-dolce-avatar__choix label,
.cab-dolce-avatar__choix label {
	margin: 0;
}

.cab-dolce-avatar__choix label,
.cab-dolce-avatar__retrait label {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	cursor: pointer;
}

/* Les champs texte du compte passent en pleine largeur ; le champ fichier et
   les cases à cocher doivent y échapper, sinon ils s'étirent inutilement. */
.cab-dolce-avatar input[type="file"],
.cab-dolce-avatar input[type="radio"],
.cab-dolce-avatar input[type="checkbox"] {
	width: auto;
	padding: 0;
}

.cab-dolce-avatar__aide {
	display: block;
	margin-top: 0.35rem;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.85rem;
}

/* Champs de formulaire (connexion, adresses, détails du compte). */
.woocommerce-account main input[type="text"],
.woocommerce-account main input[type="email"],
.woocommerce-account main input[type="tel"],
.woocommerce-account main input[type="password"],
.woocommerce-account main textarea,
.woocommerce-account main select {
	width: 100%;
	padding: 0.72rem 1rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 12px;
	background-color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--body );
	font-size: 1rem;
}

.woocommerce-account main input:focus,
.woocommerce-account main textarea:focus,
.woocommerce-account main select:focus {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 1px;
}

.woocommerce-account label {
	display: block;
	margin-bottom: 0.35rem;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.9rem;
}

/* Boutons. */
.woocommerce-account .button,
.woocommerce-account button[type="submit"],
.woocommerce-account main input[type="submit"] {
	display: inline-block;
	width: auto;
	padding: 0.75rem 1.6rem !important;
	border: 0 !important;
	border-radius: 999px !important;
	background-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--body ) !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.woocommerce-account .button:hover,
.woocommerce-account button[type="submit"]:hover,
.woocommerce-account main input[type="submit"]:hover {
	background-color: var( --wp--preset--color--secondary ) !important;
	color: var( --wp--preset--color--base ) !important;
}

/* Formulaire de connexion, centré et encadré. */
.woocommerce-account:not( .logged-in ) .woocommerce-form-login {
	max-width: 460px;
	margin-inline: auto;
	padding: var( --wp--preset--spacing--60 );
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 16px;
	background-color: var( --wp--preset--color--base );
}

/* Sur mobile, le menu repasse au-dessus du contenu. */
@media screen and ( max-width: 781px ) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		flex: 1 1 100%;
	}
}

/* -------------------------------------------------------------------------
 * Mon compte — corrections de mise en page
 * ---------------------------------------------------------------------- */

/* Liens du menu : l'interligne du thème gonflait leur hauteur. */
.woocommerce-MyAccount-navigation li a {
	padding: 0.55rem 1rem;
	line-height: 1.4;
}

.woocommerce-MyAccount-navigation li {
	margin-bottom: 0.15rem;
	/* WooCommerce impose un remplissage bas de 18 px : d'où « !important ». */
	padding: 0 !important;
	line-height: 0;
}

/* Adresses : grille plutôt que flottants.
   Les blocs faisaient 356 px chacun dans une colonne de 642 px — le
   remplissage s'ajoutant à leur largeur, ils se chevauchaient et le second
   basculait vers le bas. La grille répartit l'espace réellement disponible. */
.woocommerce-Addresses,
.woocommerce-account .u-columns.col2-set {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var( --wp--preset--spacing--50 );
}

.woocommerce-Addresses .woocommerce-Address,
.woocommerce-account .u-columns.col2-set > div {
	box-sizing: border-box;
	flex: 1 1 240px;
	width: auto !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
}

/* Titre et lien de modification, alignés proprement. */
.woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.6rem;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin: 0;
}

.woocommerce-Address-title a {
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.88rem;
}

.woocommerce-Address-title a:hover,
.woocommerce-Address-title a:focus {
	color: var( --wp--preset--color--primary );
}

/* -------------------------------------------------------------------------
 * Mon compte — tableau de bord et commandes
 * ---------------------------------------------------------------------- */

/* Message d'accueil. */
.woocommerce-MyAccount-content > p:first-of-type {
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.2rem;
	color: var( --wp--preset--color--contrast );
}

/* Raccourcis du tableau de bord. */
.cab-dolce-account-cards {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: var( --wp--preset--spacing--40 );
	margin-top: var( --wp--preset--spacing--50 );
}

.cab-dolce-account-card {
	display: block;
	padding: var( --wp--preset--spacing--50 );
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 14px;
	background-color: var( --wp--preset--color--base );
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.cab-dolce-account-card:hover,
.cab-dolce-account-card:focus-visible {
	border-color: var( --wp--preset--color--primary );
	background-color: var( --wp--preset--color--base-2 );
	transform: translateY( -2px );
}

.cab-dolce-account-card__icon {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 1.5rem;
	line-height: 1;
}

.cab-dolce-account-card__title {
	display: block;
	margin-bottom: 0.25rem;
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.1rem;
}

.cab-dolce-account-card__text {
	display: block;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.88rem;
	line-height: 1.45;
}

/* Pastilles d'état des commandes. */
.cab-dolce-status {
	display: inline-block;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

/* En attente / en cours : terracotta. */
.cab-dolce-status--pending,
.cab-dolce-status--on-hold {
	background-color: color-mix( in srgb, var( --wp--preset--color--primary ) 35%, transparent );
	color: var( --wp--preset--color--contrast );
}

.cab-dolce-status--processing {
	background-color: color-mix( in srgb, var( --wp--preset--color--primary ) 60%, transparent );
	color: var( --wp--preset--color--contrast );
}

/* Terminée : olive. */
.cab-dolce-status--completed {
	background-color: color-mix( in srgb, var( --wp--preset--color--leaf ) 25%, transparent );
	color: var( --wp--preset--color--leaf );
}

/* Annulée, remboursée, échouée : prune atténué. */
.cab-dolce-status--cancelled,
.cab-dolce-status--refunded,
.cab-dolce-status--failed {
	background-color: color-mix( in srgb, var( --wp--preset--color--secondary ) 18%, transparent );
	color: var( --wp--preset--color--secondary );
}

/* Boutons du tableau des commandes, un peu plus compacts. */
.woocommerce-orders-table .button {
	padding: 0.5rem 1.1rem !important;
	font-size: 0.88rem !important;
}

/* Tableau des commandes sur mobile : lignes empilées et lisibles. */
@media screen and ( max-width: 600px ) {
	.woocommerce-orders-table thead {
		display: none;
	}

	.woocommerce-orders-table,
	.woocommerce-orders-table tbody,
	.woocommerce-orders-table tr,
	.woocommerce-orders-table td {
		display: block;
		width: 100%;
	}

	.woocommerce-orders-table tr {
		margin-bottom: var( --wp--preset--spacing--40 );
		padding: var( --wp--preset--spacing--40 );
		border: 1px solid var( --wp--preset--color--base-2 );
		border-radius: 14px;
	}

	.woocommerce-orders-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.4rem 0;
		border: 0;
		text-align: right;
	}

	.woocommerce-orders-table td::before {
		content: attr( data-title );
		color: var( --wp--preset--color--contrast-2 );
		font-size: 0.78rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}
}

/* -------------------------------------------------------------------------
 * « Voir la commande » — bandeau avec récapitulatif en sous-titre
 * ---------------------------------------------------------------------- */

/* Le bandeau passe du titre seul au conteneur titre + phrase. */
.woocommerce-view-order main > .cab-dolce-order-banner {
	max-width: none;
	margin-top: 0 !important;
	margin-right: calc( var( --wp--style--root--padding-right ) * -1 ) !important;
	margin-bottom: var( --wp--preset--spacing--60 ) !important;
	margin-left: calc( var( --wp--style--root--padding-left ) * -1 ) !important;
	padding: 4.5rem var( --wp--style--root--padding-left ) 3.5rem;
	background-image: var( --wp--preset--gradient--confiture );
	text-align: center;
}

/* Le titre n'a plus besoin de porter le bandeau lui-même. */
.woocommerce-view-order main .cab-dolce-order-banner > .wp-block-post-title {
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
	background-image: none !important;
	color: var( --wp--preset--color--base ) !important;
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--xx-large ) !important;
	line-height: 1.15;
}

/* Récapitulatif, au même traitement que les accroches des autres bandeaux.
 * Ancré sur « .cab-dolce-banner » pour passer devant la règle générique
 * « .cab-dolce-banner p », qui remet les marges latérales à zéro : la phrase
 * se calait alors à gauche de son bloc au lieu d'être centrée. Invisible tant
 * que la fenêtre reste sous la largeur de contenu, flagrant au-delà. */
.cab-dolce-banner .cab-dolce-order-banner__intro {
	max-width: 44rem;
	margin: var( --wp--preset--spacing--20 ) auto 0;
	color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--large );
	font-weight: 400;
	line-height: 1.5;
	opacity: 0.9;
}

/* Accroche du bandeau des pages, alimentée par l'extrait de la page.
 * Ancrée sur « .cab-dolce-banner » pour passer devant la règle générique
 * « .cab-dolce-banner p », qui remettrait les marges latérales à zéro et
 * décalerait la phrase à gauche sur les grands écrans. */
/* La boutique a son propre bandeau, sans la classe « .cab-dolce-banner » :
   son accroche doit être bridée à la même largeur de lecture, faute de quoi
   elle s'étalerait sur toute la largeur du bandeau. */
main:has( .cab-dolce-shop ) > .wp-block-group > .cab-dolce-banner__intro,
.cab-dolce-banner .cab-dolce-banner__intro {
	max-width: 44rem;
	margin: var( --wp--preset--spacing--20 ) auto 0;
	color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--large );
	font-weight: 400;
	line-height: 1.5;
	opacity: 0.9;
}

/* Le lien « Lire la suite » n'a aucun sens ici : on est déjà sur la page. */
.cab-dolce-banner .cab-dolce-banner__intro .wp-block-post-excerpt__more-text {
	display: none;
}

/* La phrase d'origine de WooCommerce fait doublon. */
.woocommerce-view-order .woocommerce-MyAccount-content > p:first-of-type {
	display: none;
}

@media screen and ( max-width: 781px ) {
	.woocommerce-view-order main > .cab-dolce-order-banner {
		padding-top: 3.5rem;
		padding-bottom: 2.5rem;
	}
}

/* Le premier titre du contenu s'aligne sur la première entrée du menu.
   Le conteneur de notifications, vide, précède toujours le contenu réel :
   on cible donc l'élément qui le suit, et son premier enfant. */
.woocommerce-MyAccount-content > section:first-of-type,
.woocommerce-MyAccount-content > section:first-of-type > :first-child,
.woocommerce-MyAccount-content > p:first-of-type,
.woocommerce-MyAccount-content > h2:first-of-type,
.woocommerce-MyAccount-content > form:first-of-type {
	margin-top: 0 !important;
}

/* -------------------------------------------------------------------------
 * Détails client d'une commande — même carte rosée que la page Adresses
 * ---------------------------------------------------------------------- */

/* Une seule adresse : la section entière devient la carte.
   Deux adresses (facturation + livraison) : chaque colonne devient une carte. */
.woocommerce-customer-details:not( :has( .woocommerce-column ) ),
.woocommerce-customer-details .woocommerce-column {
	box-sizing: border-box;
	padding: var( --wp--preset--spacing--50 );
	border-radius: 14px;
	background-color: var( --wp--preset--color--base-2 );
}

/* Deux colonnes côte à côte, comme sur la page Adresses. */
.woocommerce-customer-details .woocommerce-columns--addresses {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var( --wp--preset--spacing--50 );
}

.woocommerce-customer-details .woocommerce-column {
	flex: 1 1 240px;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

/* Titre dans la carte. */
.woocommerce-customer-details .woocommerce-column__title {
	margin-top: 0 !important;
	margin-bottom: 0.6rem;
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.15rem !important;
	font-weight: 400 !important;
}

/* L'encadré par défaut de WooCommerce n'a plus lieu d'être. */
.woocommerce-customer-details address {
	/* WooCommerce impose son encadré : « !important » nécessaire. */
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	font-style: normal;
	line-height: 1.7;
}

/* Téléphone et e-mail, intégrés à la carte. */
.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email {
	margin: 0.5rem 0 0;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.92rem;
}

.woocommerce-customer-details address br + br {
	display: none;
}

/* -------------------------------------------------------------------------
 * Bandeau générique — pages, articles, archives et blog
 * Reprend le traitement de la boutique et de la fiche produit.
 * ---------------------------------------------------------------------- */
main.cab-dolce-has-banner {
	margin-top: 0 !important;
}

/* Un bandeau qui héberge le fil d'Ariane doit lui faire de la place. Celui-ci
   est hors du flux : il ne pousse rien, il faut donc creuser au-dessus du
   titre. Sur un article, le fil reprend le titre en entier et passe volontiers
   sur deux lignes — d'où une réserve plus généreuse que sur la boutique. */
main.cab-dolce-has-banner:has( > .wp-block-woocommerce-breadcrumbs ) .cab-dolce-banner {
	padding-top: 6.5rem;
}

.cab-dolce-banner {
	max-width: none;
	margin-top: 0 !important;
	margin-right: calc( var( --wp--style--root--padding-right ) * -1 ) !important;
	margin-bottom: var( --wp--preset--spacing--60 ) !important;
	margin-left: calc( var( --wp--style--root--padding-left ) * -1 ) !important;
	padding: 4.5rem var( --wp--style--root--padding-left ) 3.5rem;
	background-image: var( --wp--preset--gradient--confiture );
	text-align: center;
}

.cab-dolce-banner .wp-block-post-title,
.cab-dolce-banner .wp-block-query-title {
	/* « auto » sur les côtés : sur le panier et le tunnel, le titre vient de
	   WooCommerce avec sa propre largeur maximale — 1000 px — mais sans les
	   marges que la mise en page contrainte lui aurait données. Le texte se
	   centrait dans cette boîte calée à gauche, et non dans le bandeau.
	   Ailleurs, le titre occupe déjà toute la largeur : sans effet. */
	margin: 0 auto;
	color: var( --wp--preset--color--base ) !important;
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--xx-large ) !important;
	line-height: 1.15;
}

/* Date, catégorie ou description : accroche en Montserrat. */
.cab-dolce-banner .wp-block-post-date,
.cab-dolce-banner .wp-block-term-description,
.cab-dolce-banner p {
	margin: var( --wp--preset--spacing--20 ) 0 0;
	color: var( --wp--preset--color--base ) !important;
	font-family: var( --wp--preset--font-family--body ) !important;
	font-size: var( --wp--preset--font-size--large ) !important;
	font-weight: 400;
	opacity: 0.9;
}

/* Date d'un article : signature discrète sous l'accroche, et non une seconde
   ligne du même poids que celle-ci. L'italique et la petite taille la mettent
   au second plan sans l'effacer.
   « !important » sur la taille parce que la règle ci-dessus l'impose déjà à
   toutes les dates du bandeau. */
.cab-dolce-banner .cab-dolce-banner__date {
	margin-top: var( --wp--preset--spacing--30 );
	font-size: var( --wp--preset--font-size--small ) !important;
	font-style: italic;
	letter-spacing: 0.04em;
	opacity: 0.75;
}

.cab-dolce-banner a {
	color: var( --wp--preset--color--base ) !important;
}

/* Image mise en avant des pages et articles : médaillon à cheval sur le bas
 * du bandeau. Compact (environ 200 px contre une bannière pleine largeur) et
 * décoratif, avec la même grammaire de survol que le reste du site.
 * Le débordement se calcule ainsi : le médaillon dépasse du bandeau de
 * « marge basse négative - padding bas », soit 112 - 32 = 80 px. La marge
 * basse du bandeau (8rem) laisse donc 48 px d'air sous le médaillon. */
.cab-dolce-banner:has( .cab-dolce-featured-image ) {
	margin-bottom: 8rem !important;
	padding-bottom: 2rem;
}

/* Sur grand écran le médaillon est calé à droite. Le bandeau est pleine
 * largeur : sans correction, le médaillon irait jusqu'au bord de l'écran.
 * La marge droite rattrape donc la demi-gouttière qui sépare le bandeau de
 * la colonne de contenu, pour un alignement net sur le texte en dessous. */
.cab-dolce-featured-image {
	width: 190px;
	margin: var( --wp--preset--spacing--40 ) max( 0px, calc( ( 100% - var( --wp--style--global--content-size ) ) / 2 ) ) -7rem auto !important;
}

.cab-dolce-featured-image img {
	display: block;
	width: 190px;
	height: 190px;
	border: 6px solid var( --wp--preset--color--base );
	border-radius: 28px;
	box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.18 );
	object-fit: cover;
	transform: rotate( -3deg );
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.cab-dolce-featured-image:hover img {
	box-shadow: 0 18px 36px rgba( 0, 0, 0, 0.26 );
	transform: rotate( 0deg ) scale( 1.06 );
}

/* Le vide entre la fin de l'accroche et le bas du bandeau, c'est le médaillon :
 * empilé sous le texte, il ajoute sa hauteur au bandeau alors que la place
 * reste libre à sa gauche. On le remonte donc à hauteur de la phrase.
 *
 * Trois garde-fous, car les deux blocs se frôlent alors :
 * — l'accroche doit exister. Sans elle, le médaillon remonterait dans le
 *   titre, qui occupe toute la largeur.
 * — la règle ne vaut qu'à partir de 1200 px. En dessous, l'accroche est
 *   centrée sur toute la largeur du bandeau tandis que le médaillon reste calé
 *   sur le bord de la colonne de contenu : ils se rejoignent, et il n'y a plus
 *   de place pour les mettre côte à côte.
 * — l'accroche passe de 44 à 40 rem. Étant centrée, son bord droit ne recule
 *   que de la moitié de ce qu'on lui retire, soit 32 px ; le médaillon, lui,
 *   ne bouge pas. Ces 32 px absorbent aussi la rotation de 3° de l'image, qui
 *   la fait déborder de sa boîte d'environ 5 px. */
@media screen and ( min-width: 1200px ) {
	.cab-dolce-banner:has( .cab-dolce-featured-image ) .cab-dolce-banner__intro,
	main:has( .cab-dolce-shop ) > .wp-block-group:has( .cab-dolce-featured-image ) > .cab-dolce-banner__intro {
		max-width: 40rem;
	}

	.cab-dolce-banner:has( .cab-dolce-banner__intro ) .cab-dolce-featured-image,
	main:has( .cab-dolce-shop ) > .wp-block-group:has( .cab-dolce-banner__intro ) .cab-dolce-featured-image {
		margin-top: -3rem !important;
	}
}

/* Pied d'article : catégories et commentaires. */
.cab-dolce-post-footer {
	margin-top: var( --wp--preset--spacing--70 );
	padding-top: var( --wp--preset--spacing--50 );
	border-top: 1px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-post-footer .wp-block-post-terms a {
	display: inline-block;
	margin-right: 0.4rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.85rem;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.cab-dolce-post-footer .wp-block-post-terms a:hover {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
}

@media screen and ( max-width: 781px ) {
	.cab-dolce-banner {
		padding-top: 3.5rem;
		padding-bottom: 2.5rem;
	}

	/* En petite largeur, le fil d'Ariane d'un article tient rarement sur une
	   ligne : la réserve au-dessus du titre est encore augmentée. */
	main.cab-dolce-has-banner:has( > .wp-block-woocommerce-breadcrumbs ) .cab-dolce-banner {
		padding-top: 6rem;
	}

	/* Médaillon réduit : débordement de 88 - 32 = 56 px, 48 px d'air dessous. */
	.cab-dolce-banner:has( .cab-dolce-featured-image ) {
		margin-bottom: 6.5rem !important;
	}

	/* En petite largeur, le médaillon revient au centre sous le titre. */
	.cab-dolce-featured-image {
		width: 150px;
		margin-right: auto !important;
		margin-bottom: -5.5rem !important;
		margin-left: auto !important;
	}


	.cab-dolce-featured-image img {
		width: 150px;
		height: 150px;
		border-radius: 22px;
	}
}

/* -------------------------------------------------------------------------
 * Commentaires
 * Chaque commentaire est une bulle avec une pointe dirigée vers l'avatar,
 * posé à l'extérieur à gauche. Les réponses sont repliées derrière un bouton
 * (assets/js/comments.js) et rattachées par un rail vertical.
 * ---------------------------------------------------------------------- */
.cab-dolce-comments {
	margin-top: var( --wp--preset--spacing--60 );
}

.cab-dolce-comments .wp-block-comments-title {
	display: inline-block;
	/* Le soulignement colle au texte : il faut de l'air sous le filet pour
	   qu'il se lise comme un titre de section et non comme une étiquette. */
	margin: 0 0 var( --wp--preset--spacing--60 );
	padding-bottom: 0.4em;
	border-bottom: 3px solid var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--x-large );
	line-height: 1.2;
}

/* Listes : ni puces ni retrait natif, le décalage est géré plus bas. */
.cab-dolce-comments .wp-block-comment-template,
.cab-dolce-comments .wp-block-comment-template ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cab-dolce-comments .wp-block-comment-template > li + li {
	margin-top: var( --wp--preset--spacing--40 );
}

/* Un commentaire : avatar à gauche, bulle à droite. */
.cab-dolce-comment {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
}

.cab-dolce-comment__avatar {
	flex-shrink: 0;
	line-height: 0;
}

.cab-dolce-comment__avatar img {
	display: block;
	width: 56px;
	height: 56px;
	border: 2px solid var( --wp--preset--color--base-2 );
	border-radius: 50%;
}

.cab-dolce-comment__bubble {
	position: relative;
	flex: 1;
	min-width: 0;
	padding: 1rem 1.25rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 14px;
	background-color: var( --wp--preset--color--base );
}

/* Pointe de la bulle : deux triangles superposés pour garder le liseré. */
.cab-dolce-comment__bubble::before,
.cab-dolce-comment__bubble::after {
	content: "";
	position: absolute;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}

.cab-dolce-comment__bubble::before {
	top: 18px;
	left: -9px;
	border-right: 9px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-comment__bubble::after {
	top: 19px;
	left: -7px;
	border-top-width: 7px;
	border-bottom-width: 7px;
	border-right: 8px solid var( --wp--preset--color--base );
}

/* En-tête de bulle : auteur, date, modification, réponse. */
.cab-dolce-comment__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.9rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-comment__head .wp-block-comment-author-name {
	color: var( --wp--preset--color--secondary );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
}

.cab-dolce-comment__head .wp-block-comment-author-name a {
	color: inherit;
	text-decoration: none;
}

.cab-dolce-comment__head .wp-block-comment-author-name a:hover {
	text-decoration: underline;
}

/* La date pousse les actions à droite. */
.cab-dolce-comment__head .wp-block-comment-date {
	flex: 1;
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.82rem;
	opacity: 0.75;
}

.cab-dolce-comment__head .wp-block-comment-date a,
.cab-dolce-comment__head .wp-block-comment-edit-link a {
	color: inherit;
	text-decoration: none;
}

.cab-dolce-comment__head .wp-block-comment-edit-link {
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78rem;
}

.cab-dolce-comment__head .wp-block-comment-edit-link a:hover {
	text-decoration: underline;
}

/* Bouton « Répondre » et bouton de repli : même pastille contournée. */
.cab-dolce-comment__head .wp-block-comment-reply-link a,
.cab-dolce-toggle-replies {
	display: inline-block;
	padding: 0.55rem 1.4rem;
	border: 2px solid var( --wp--preset--color--primary );
	border-radius: 999px;
	background-color: transparent;
	color: var( --wp--preset--color--secondary );
	cursor: pointer;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cab-dolce-comment__head .wp-block-comment-reply-link a:hover,
.cab-dolce-toggle-replies:hover {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

.cab-dolce-comment .wp-block-comment-content {
	margin: 0;
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.95rem;
	line-height: 1.75;
}

.cab-dolce-comment .wp-block-comment-content p:last-child {
	margin-bottom: 0;
}

/* Commentaire en attente de modération.
 * WordPress n'ajoute aucune classe sur le <li> dans ce cas : le seul repère
 * disponible est la note que le bloc « Contenu du commentaire » insère en
 * tête de contenu. On remonte donc jusqu'à la bulle avec :has(). */
.cab-dolce-comment .wp-block-comment-content p:has( > .comment-awaiting-moderation ) {
	margin: 0 0 0.85rem;
}

.cab-dolce-comment .comment-awaiting-moderation {
	display: block;
	padding: 0.55rem 0.85rem;
	border-radius: 8px;
	background-color: var( --wp--preset--color--secondary );
	color: var( --wp--preset--color--base );
	font-size: 0.78rem;
	font-style: normal;
	line-height: 1.5;
}

.cab-dolce-comment .comment-awaiting-moderation::before {
	content: "⏳ ";
}

/* Bulle en pointillés et voile brun tant que la validation n'est pas faite. */
.cab-dolce-comment__bubble:has( .comment-awaiting-moderation ) {
	border-color: var( --wp--preset--color--secondary );
	border-style: dashed;
	background-color: rgba( 176, 106, 74, 0.07 );
}

/* La pointe suit : liseré brun à l'extérieur, voile identique à l'intérieur
   — le triangle se superpose au fond de page, la teinte reste juste. */
.cab-dolce-comment__bubble:has( .comment-awaiting-moderation )::before {
	border-right-color: var( --wp--preset--color--secondary );
}

.cab-dolce-comment__bubble:has( .comment-awaiting-moderation )::after {
	border-right-color: rgba( 176, 106, 74, 0.07 );
}

/* Bouton de repli : aligné sur le bord gauche des bulles de réponse. */
.cab-dolce-toggle-replies {
	margin: 0.75rem 0 0 4.75rem;
}

.cab-dolce-toggle-replies::before {
	content: "▾";
	margin-right: 0.5em;
}

.cab-dolce-toggle-replies[aria-expanded="true"]::before {
	content: "▴";
}

/* Réponses : rail vertical et bulle rosée pour les distinguer. */
.cab-dolce-comments .wp-block-comment-template ol {
	margin: 0.75rem 0 0 4.75rem;
	padding-left: 1.5rem;
	border-left: 3px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-comments .wp-block-comment-template ol > li + li {
	margin-top: var( --wp--preset--spacing--30 );
}

.cab-dolce-comments .wp-block-comment-template ol .cab-dolce-comment__bubble {
	background-color: var( --wp--preset--color--base-2 );
}

.cab-dolce-comments .wp-block-comment-template ol .cab-dolce-comment__bubble::after {
	border-right-color: var( --wp--preset--color--base-2 );
}

/* Pagination des commentaires : mêmes pastilles que celle de la boutique,
 * pour n'avoir qu'un seul vocabulaire de pagination sur tout le site. Les
 * classes diffèrent (« comments-pagination » et non « query-pagination »),
 * d'où la reprise des règles plutôt qu'un simple ajout de sélecteur. */
.cab-dolce-comments .wp-block-comments-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin-top: var( --wp--preset--spacing--50 );
	padding-top: var( --wp--preset--spacing--40 );
	border-top: 1px solid var( --wp--preset--color--base-2 );
	font-family: var( --wp--preset--font-family--body );
}

.cab-dolce-comments .wp-block-comments-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

/* Numéros de page en pastilles. */
.cab-dolce-comments .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.65rem;
	border-radius: 999px;
	color: var( --wp--preset--color--contrast );
	font-size: 0.95rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.cab-dolce-comments a.page-numbers:hover,
.cab-dolce-comments a.page-numbers:focus-visible {
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--secondary );
}

.cab-dolce-comments .page-numbers.current {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
	font-weight: 600;
}

.cab-dolce-comments .page-numbers.dots {
	min-width: 1.5rem;
	padding: 0;
	color: var( --wp--preset--color--contrast-2 );
}

/* Liens « précédents » / « suivants » en boutons contour. */
.cab-dolce-comments .wp-block-comments-pagination-previous,
.cab-dolce-comments .wp-block-comments-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	/* Bordure comprise dans les 40 px, comme sur la boutique. */
	box-sizing: border-box;
	height: 40px;
	padding: 0 1.05rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 999px;
	color: var( --wp--preset--color--contrast );
	font-size: 0.92rem;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cab-dolce-comments .wp-block-comments-pagination-previous:hover,
.cab-dolce-comments .wp-block-comments-pagination-previous:focus-visible,
.cab-dolce-comments .wp-block-comments-pagination-next:hover,
.cab-dolce-comments .wp-block-comments-pagination-next:focus-visible {
	background-color: var( --wp--preset--color--primary );
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
}

/* Flèches décoratives. Le « suivant » est poussé à droite du conteneur. */
.cab-dolce-comments .wp-block-comments-pagination-previous::before {
	content: "\2190";
}

.cab-dolce-comments .wp-block-comments-pagination-next::after {
	content: "\2192";
}

.cab-dolce-comments .wp-block-comments-pagination-next {
	margin-left: auto;
}

/* Discussion close : le formulaire disparaît côté WordPress, cette mention
 * prend sa place pour que le fil ne s'interrompe pas sans explication. Le
 * contour en pointillés reprend celui des commentaires en attente : dans les
 * deux cas, rien de neuf ne peut arriver ici. */
.cab-dolce-comments-closed {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin: var( --wp--preset--spacing--60 ) 0 0;
	padding: var( --wp--preset--spacing--40 );
	border: 1px dashed var( --wp--preset--color--primary );
	border-radius: 16px;
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.9rem;
	text-align: center;
}

.cab-dolce-comments-closed::before {
	content: "🔒";
	flex-shrink: 0;
}

/* Formulaire de réponse : carte rosée détachée du fil. */
.cab-dolce-comments .comment-respond {
	margin-top: var( --wp--preset--spacing--60 );
	padding: var( --wp--preset--spacing--50 );
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 16px;
	background-color: var( --wp--preset--color--base-2 );
}

.cab-dolce-comments .comment-reply-title {
	display: block;
	margin: 0 0 var( --wp--preset--spacing--40 );
	color: var( --wp--preset--color--secondary );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.5rem;
	line-height: 1.2;
}

.cab-dolce-comments .comment-reply-title small {
	margin-left: 1rem;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78rem;
	font-weight: 400;
}

.cab-dolce-comments .comment-reply-title small a {
	color: var( --wp--preset--color--contrast-2 );
}

/* « Annuler la réponse » : pastille discrète accolée au titre. Le lien n'est
 * visible que lorsque le formulaire a été déplacé sous un commentaire. */
.cab-dolce-comments #cancel-comment-reply-link {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border: 1px solid var( --wp--preset--color--secondary );
	border-radius: 999px;
	color: var( --wp--preset--color--secondary );
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.cab-dolce-comments #cancel-comment-reply-link::before {
	content: "✕";
	margin-right: 0.45em;
}

.cab-dolce-comments #cancel-comment-reply-link:hover {
	background-color: var( --wp--preset--color--secondary );
	color: var( --wp--preset--color--base );
}

/* Formulaire déplacé sous un commentaire après un clic sur « Répondre ».
 * WordPress l'insère comme frère du <li> visé, à pleine largeur : on le
 * décale au même retrait que les réponses et on le rattache par un rail
 * terracotta, plus soutenu que celui des réponses pour signaler l'action
 * en cours. Le titre reprend la mise en page de l'en-tête des bulles. */
.cab-dolce-comments .wp-block-comment-template .comment-respond {
	margin: 0.75rem 0 0 4.75rem;
	padding: var( --wp--preset--spacing--40 );
	border-left: 3px solid var( --wp--preset--color--primary );
	border-radius: 0 16px 16px 0;
}

.cab-dolce-comments .wp-block-comment-template .comment-reply-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	font-size: 1.25rem;
}

.cab-dolce-comments .wp-block-comment-template .comment-reply-title small {
	margin-left: 0;
}

/* Au-delà du premier niveau, la liste parente fournit déjà le retrait. */
.cab-dolce-comments .wp-block-comment-template ol .comment-respond {
	margin-left: 0;
}

/* Connecté : ligne d'identité au-dessus de la zone de commentaire, séparée
 * par un filet terracotta. Elle reste un paragraphe en flux — les nœuds de
 * texte et les liens y alternent, une mise en page en flex disloquerait la
 * ponctuation qui les sépare. */
.cab-dolce-comments .logged-in-as {
	padding-bottom: 0.8rem;
	border-bottom: 1px solid var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.85rem;
	line-height: 1.7;
}

.cab-dolce-logged-in-avatar {
	width: 32px;
	height: 32px;
	margin-right: 0.55rem;
	border: 2px solid var( --wp--preset--color--base-2 );
	border-radius: 50%;
	vertical-align: middle;
}

.cab-dolce-comments .logged-in-as a {
	color: var( --wp--preset--color--secondary );
	font-weight: 600;
	text-decoration: none;
}

.cab-dolce-comments .logged-in-as a:hover {
	text-decoration: underline;
}

/* La mention des champs obligatoires passe à la ligne, en retrait discret. */
.cab-dolce-comments .logged-in-as .required-field-message {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.78rem;
	font-style: italic;
	opacity: 0.75;
}

.cab-dolce-comments .required {
	color: var( --wp--preset--color--secondary );
}

.cab-dolce-comments .comment-form label {
	display: block;
	margin-bottom: 0.35rem;
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.cab-dolce-comments .comment-form input[type="text"],
.cab-dolce-comments .comment-form input[type="email"],
.cab-dolce-comments .comment-form input[type="url"],
.cab-dolce-comments .comment-form textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var( --wp--preset--color--primary );
	border-radius: 10px;
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.95rem;
}

.cab-dolce-comments .comment-form input:focus,
.cab-dolce-comments .comment-form textarea:focus {
	border-color: var( --wp--preset--color--secondary );
	box-shadow: 0 0 0 3px rgba( 226, 150, 124, 0.3 );
	outline: none;
}

.cab-dolce-comments .comment-form textarea {
	min-height: 9rem;
	resize: vertical;
}

/* Grille du formulaire : trois colonnes pour caser nom, e-mail et site sur
 * une seule ligne. Le reste occupe toute la largeur. On passe par une grille
 * et non des blocs en ligne, dont les espaces du HTML faisaient déborder la
 * troisième colonne. La propriété « order » remonte les trois champs
 * au-dessus de la zone de commentaire, que WordPress place en premier. */
.cab-dolce-comments .comment-form {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --wp--preset--spacing--30 ) 1rem;
}

.cab-dolce-comments .comment-form > * {
	grid-column: 1 / -1;
	margin: 0;
}

.cab-dolce-comments .comment-form .comment-notes {
	order: -2;
}

.cab-dolce-comments .comment-form-author,
.cab-dolce-comments .comment-form-email,
.cab-dolce-comments .comment-form-url {
	order: -1;
}

.cab-dolce-comments .comment-form-author {
	grid-column: 1;
}

.cab-dolce-comments .comment-form-email {
	grid-column: 2;
}

.cab-dolce-comments .comment-form-url {
	grid-column: 3;
}

.cab-dolce-comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.cab-dolce-comments .comment-form-cookies-consent label {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.cab-dolce-comments .comment-form .form-submit {
	margin-bottom: 0;
}

/* Le bouton d'envoi n'est pas ciblé ici : dans un thème de blocs, WordPress
 * lui donne les classes « wp-block-button__link wp-element-button » et il
 * hérite donc du style de bouton global défini dans theme.json, comme le
 * reste du site. */

@media screen and ( max-width: 781px ) {
	.cab-dolce-comment {
		gap: 0.9rem;
	}

	.cab-dolce-comment__avatar img {
		width: 42px;
		height: 42px;
	}

	.cab-dolce-comments .wp-block-comment-template ol,
	.cab-dolce-comments .wp-block-comment-template .comment-respond,
	.cab-dolce-toggle-replies {
		margin-left: 2rem;
	}

	.cab-dolce-comments .wp-block-comment-template ol {
		padding-left: 0.9rem;
	}

	/* Une seule colonne : les trois champs s'empilent, toujours au-dessus
	   de la zone de commentaire grâce à « order ». */
	.cab-dolce-comments .comment-form {
		grid-template-columns: 1fr;
	}

	.cab-dolce-comments .comment-form-author,
	.cab-dolce-comments .comment-form-email,
	.cab-dolce-comments .comment-form-url {
		grid-column: 1 / -1;
	}

	/* Pagination resserrée et centrée. */
	.cab-dolce-comments .wp-block-comments-pagination {
		justify-content: center;
	}

	.cab-dolce-comments .wp-block-comments-pagination-next {
		margin-left: 0;
	}

	.cab-dolce-comments .wp-block-comments-pagination-previous,
	.cab-dolce-comments .wp-block-comments-pagination-next {
		padding: 0 0.8rem;
		font-size: 0.85rem;
	}
}

/* -------------------------------------------------------------------------
 * Pagination du bloc de démonstration (cab-demo-pagination)
 * Ce bloc suppose Bootstrap, qui n'est pas chargé ici : sans style, la liste
 * s'affiche en puces verticales. On reprend les valeurs de la pagination
 * de la boutique pour rester cohérent.
 * ---------------------------------------------------------------------- */
.wp-block-cab-demo-pagination ul.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-cab-demo-pagination ul.pagination li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-cab-demo-pagination ul.pagination li::marker {
	content: "";
}

/* Numéros de page en pastilles. */
.wp-block-cab-demo-pagination .page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.65rem;
	border-radius: 999px;
	color: var( --wp--preset--color--contrast );
	font-size: 0.95rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

a.page:hover,
a.page:focus-visible {
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--secondary );
}

/* Page courante : pastille terracotta, texte foncé (charte). */
.wp-block-cab-demo-pagination .page.active {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
	font-weight: 600;
}

/* « Prev » et « Next » en boutons contour. */
.wp-block-cab-demo-pagination .button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	height: 40px;
	padding: 0 1.05rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 999px;
	color: var( --wp--preset--color--contrast );
	font-size: 0.92rem;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

a.button:hover,
a.button:focus-visible {
	background-color: var( --wp--preset--color--primary );
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
}

/* Bouton inactif en début ou fin de liste. */
.wp-block-cab-demo-pagination .button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Points de suspension entre les numéros. */
.wp-block-cab-demo-pagination .dots,
.wp-block-cab-demo-pagination li > span:not( .button ) {
	padding: 0 0.2rem;
	color: var( --wp--preset--color--contrast-2 );
}

/* -------------------------------------------------------------------------
 * Formulaire du bloc de démonstration (cab-demo-form)
 * Comme la pagination, ce bloc s'appuie sur une grille externe non chargée
 * (« row », « col-6 »…). On la reconstitue et on habille les champs.
 * ---------------------------------------------------------------------- */
.wp-block-cab-demo-form .row {
	display: grid;
	grid-template-columns: repeat( 12, 1fr );
	gap: var( --wp--preset--spacing--40 );
}

.wp-block-cab-demo-form .col-12 {
	grid-column: span 12;
}

.wp-block-cab-demo-form .col-6 {
	grid-column: span 6;
}

.wp-block-cab-demo-form .col-4 {
	grid-column: span 4;
}

.wp-block-cab-demo-form .col-3 {
	grid-column: span 3;
}

/* Champs de saisie, au style des autres formulaires du site. */
.wp-block-cab-demo-form input[type="text"],
.wp-block-cab-demo-form input[type="email"],
.wp-block-cab-demo-form input[type="tel"],
.wp-block-cab-demo-form input[type="number"],
.wp-block-cab-demo-form input[type="password"],
.wp-block-cab-demo-form select,
.wp-block-cab-demo-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.72rem 1rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 12px;
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 1rem;
}

.wp-block-cab-demo-form textarea {
	min-height: 9rem;
	resize: vertical;
}

.wp-block-cab-demo-form input:focus,
.wp-block-cab-demo-form select:focus,
.wp-block-cab-demo-form textarea:focus {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 1px;
}

.wp-block-cab-demo-form label {
	display: block;
	margin-bottom: 0.35rem;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.9rem;
}

/* Cases à cocher et boutons radio. */
.wp-block-cab-demo-form input[type="checkbox"],
.wp-block-cab-demo-form input[type="radio"] {
	accent-color: var( --wp--preset--color--primary );
	margin-right: 0.4rem;
}

/* Zone des boutons. */
.wp-block-cab-demo-form .actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-cab-demo-form .actions li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-cab-demo-form button,
.wp-block-cab-demo-form input[type="submit"],
.wp-block-cab-demo-form input[type="reset"],
.wp-block-cab-demo-form input[type="button"] {
	padding: 0.75rem 1.6rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 999px;
	background-color: transparent;
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* Bouton principal en terracotta plein. */
.wp-block-cab-demo-form .primary,
.wp-block-cab-demo-form input[type="submit"] {
	border-color: var( --wp--preset--color--primary );
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
}

.wp-block-cab-demo-form .primary:hover,
.wp-block-cab-demo-form input[type="submit"]:hover,
.wp-block-cab-demo-form button:hover,
.wp-block-cab-demo-form input[type="reset"]:hover {
	background-color: var( --wp--preset--color--secondary );
	border-color: var( --wp--preset--color--secondary );
	color: var( --wp--preset--color--base );
}

/* Une seule colonne sur petit écran. */
@media screen and ( max-width: 600px ) {
	.wp-block-cab-demo-form .col-6,
	.wp-block-cab-demo-form .col-4,
	.wp-block-cab-demo-form .col-3,
	.wp-block-cab-demo-form [class*="col-12-small"] {
		grid-column: span 12;
	}
}

/* -------------------------------------------------------------------------
 * Blocs natifs — finitions à la charte
 * ---------------------------------------------------------------------- */

/* Tableaux : en-têtes distingués, comme ailleurs sur le site. */
.wp-block-table th {
	/* La couleur de bordure est neutralisée en amont : « !important » requis. */
	border-bottom: 1px solid var( --wp--preset--color--base-2 ) !important;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-align: left;
}

.wp-block-table td {
	border-bottom: 1px solid var( --wp--preset--color--base-2 ) !important;
}

/* Citation : le texte respire à droite du filet terracotta. */
.wp-block-quote {
	padding-left: var( --wp--preset--spacing--40 );
	/* Le navigateur applique « margin: 1em 40px » à toute balise blockquote.
	   Selon le conteneur, cette marge latérale survit et décale la citation
	   par rapport au reste du contenu : on la neutralise. */
	margin-inline: 0;
}

.wp-block-quote cite {
	display: block;
	margin-top: 0.6rem;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.9rem;
	font-style: normal;
}

/* -------------------------------------------------------------------------
 * Formulaire de démonstration — ordre des champs et cases à cocher
 * ---------------------------------------------------------------------- */

/* Le message remonte juste sous les nom et prénom.
   La grille permet de réordonner sans toucher au contenu de la page. */
.wp-block-cab-demo-form .row > :has( input[type="text"] ),
.wp-block-cab-demo-form .row > :has( input[type="email"] ) {
	order: 1;
}

.wp-block-cab-demo-form .row > :has( textarea ) {
	order: 2;
}

.wp-block-cab-demo-form .row > :has( input[type="radio"] ) {
	order: 3;
}

.wp-block-cab-demo-form .row > :has( input[type="checkbox"] ) {
	order: 4;
}

.wp-block-cab-demo-form .row > :has( input[type="submit"] ),
.wp-block-cab-demo-form .row > .actions {
	order: 5;
}

/* Libellé des choix : sur la même ligne que sa puce.
   La règle générique les passait en bloc, ce qui les empilait. */
.wp-block-cab-demo-form input[type="radio"] + label,
.wp-block-cab-demo-form input[type="checkbox"] + label {
	display: inline;
	margin: 0 1.4rem 0 0.45rem;
	color: var( --wp--preset--color--contrast );
	font-size: 1rem;
	cursor: pointer;
	vertical-align: middle;
}

.wp-block-cab-demo-form input[type="radio"],
.wp-block-cab-demo-form input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	vertical-align: middle;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Code — encart blanc détaché du fond crème du site
 * ---------------------------------------------------------------------- */
.wp-block-code,
.wp-block-preformatted {
	padding: var( --wp--preset--spacing--40 );
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 12px;
	background-color: #ffffff;
	color: var( --wp--preset--color--contrast );
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 0.88rem;
	line-height: 1.6;
	/* Les lignes longues défilent dans l'encart au lieu d'élargir la page. */
	overflow-x: auto;
	tab-size: 2;
}

.wp-block-code code {
	display: block;
	background: none;
	padding: 0;
	border: 0;
	font-family: inherit;
	font-size: inherit;
	white-space: pre;
}

/* Code en ligne dans un paragraphe : pastille rosée discrète. */
:where( p, li, td, dd ) > code {
	padding: 0.12em 0.4em;
	border-radius: 6px;
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--contrast-2 );
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 0.9em;
}


/* -------------------------------------------------------------------------
 * Formulaire de contact
 * Champs et messages calqués sur le formulaire de commentaire : le site n'a
 * ainsi qu'un seul vocabulaire de saisie.
 * ---------------------------------------------------------------------- */
.cab-dolce-contact__form {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: var( --wp--preset--spacing--40 ) 1rem;
	margin: 0;
}

.cab-dolce-contact__champ,
.cab-dolce-contact__mention,
.cab-dolce-contact__envoi,
.cab-dolce-contact__piege {
	grid-column: 1 / -1;
	margin: 0;
}

/* Nom et e-mail se partagent la première ligne. */
.cab-dolce-contact__champ--nom {
	grid-column: 1;
}

.cab-dolce-contact__champ--email {
	grid-column: 2;
}

.cab-dolce-contact label {
	display: block;
	margin-bottom: 0.35rem;
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.cab-dolce-contact__requis {
	color: var( --wp--preset--color--secondary );
}

.cab-dolce-contact input[type="text"],
.cab-dolce-contact input[type="email"],
.cab-dolce-contact textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var( --wp--preset--color--primary );
	border-radius: 10px;
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.95rem;
}

.cab-dolce-contact input:focus,
.cab-dolce-contact textarea:focus {
	border-color: var( --wp--preset--color--secondary );
	box-shadow: 0 0 0 3px rgba( 226, 150, 124, 0.3 );
	outline: none;
}

.cab-dolce-contact textarea {
	min-height: 9rem;
	resize: vertical;
}

/* Champ en erreur : le liseré seul ne suffirait pas, le message l'accompagne. */
.cab-dolce-contact__champ.is-erreur input,
.cab-dolce-contact__champ.is-erreur textarea {
	border-color: var( --wp--preset--color--secondary );
	border-width: 2px;
}

.cab-dolce-contact__erreur {
	display: block;
	margin-top: 0.35rem;
	color: var( --wp--preset--color--secondary );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.82rem;
	font-weight: 600;
}

/* Accusé de réception après envoi. */
.cab-dolce-contact__succes,
.cab-dolce-contact__alerte {
	margin: 0 0 var( --wp--preset--spacing--40 );
	padding: 0.85rem 1.1rem;
	border-left: 4px solid var( --wp--preset--color--leaf );
	border-radius: 0 12px 12px 0;
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.92rem;
}

.cab-dolce-contact__alerte {
	border-left-color: var( --wp--preset--color--secondary );
}

.cab-dolce-contact__mention {
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78rem;
	font-style: italic;
	opacity: 0.85;
}

/* Pot de miel : sorti du cadre plutôt que masqué en « display: none », que
   certains robots savent repérer. Retiré du parcours clavier par tabindex. */
.cab-dolce-contact__piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Coordonnées, à droite du formulaire. */
.cab-dolce-contact-infos {
	padding: var( --wp--preset--spacing--50 );
	border-radius: 16px;
	background-color: var( --wp--preset--color--base-2 );
}

.cab-dolce-contact-infos h3 {
	margin: 0 0 0.4rem;
	color: var( --wp--preset--color--secondary );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.1rem;
	line-height: 1.2;
}

.cab-dolce-contact-infos p {
	margin: 0 0 var( --wp--preset--spacing--40 );
	font-size: 0.92rem;
	line-height: 1.7;
}

.cab-dolce-contact-infos p:last-child {
	margin-bottom: 0;
}

.cab-dolce-contact-infos a {
	color: var( --wp--preset--color--secondary );
	font-weight: 600;
}

@media screen and ( max-width: 781px ) {
	.cab-dolce-contact__form {
		grid-template-columns: 1fr;
	}

	.cab-dolce-contact__champ--nom,
	.cab-dolce-contact__champ--email {
		grid-column: 1 / -1;
	}
}

/* Les champs de saisie du thème comptent bordure et espacement intérieur dans
 * leur largeur. Sans cela, un « width: 100% » déborde de sa colonne dès que le
 * champ est placé dans une grille : sur la page de contact, « nom » et
 * « e-mail » se chevauchaient de 14 px. Le formulaire de commentaire, dont les
 * trois champs du visiteur déconnecté sont eux aussi en grille, avait le même
 * défaut — invisible tant qu'on navigue connecté. */
.cab-dolce-contact input[type="text"],
.cab-dolce-contact input[type="email"],
.cab-dolce-contact textarea,
.cab-dolce-comments .comment-form input[type="text"],
.cab-dolce-comments .comment-form input[type="email"],
.cab-dolce-comments .comment-form input[type="url"],
.cab-dolce-comments .comment-form textarea {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Champs de la zone « Mon compte »
 *
 * WooCommerce leur applique son propre style — bordure sombre, angles à 4 px —
 * ce qui en faisait le seul îlot du site à ne pas suivre la charte. On reprend
 * ici le vocabulaire de saisie du contact et des commentaires. Portée par
 * « .woocommerce-account » : connexion, inscription, mot de passe oublié,
 * modification du compte et adresses.
 *
 * « !important » est nécessaire : la règle de WooCommerce est plus spécifique
 * (de l'ordre de « .woocommerce form .form-row input.input-text »), vérifié en
 * mesurant qu'une règle de spécificité égale, placée après, ne l'emporte pas.
 * Reproduire sa chaîne de sélecteurs fonctionnerait aussi, mais tomberait en
 * silence le jour où WooCommerce la modifie.
 * ---------------------------------------------------------------------- */
/* Portée limitée à « main » : « .woocommerce-account » désigne le body, si
   bien que ces règles atteignaient aussi la barre d'administration de
   WordPress. Son champ de recherche s'y affichait en médaillon vide bordé de
   terracotta — visible des seules personnes connectées, mais disgracieux. */
.woocommerce-account main input[type="text"],
.woocommerce-account main input[type="email"],
.woocommerce-account main input[type="tel"],
.woocommerce-account main input[type="url"],
.woocommerce-account main input[type="password"],
.woocommerce-account main textarea,
.woocommerce-account main select {
	box-sizing: border-box !important;
	width: 100%;
	padding: 0.7rem 0.9rem !important;
	border: 1px solid var( --wp--preset--color--primary ) !important;
	border-radius: 10px !important;
	background-color: var( --wp--preset--color--base ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--body ) !important;
	font-size: 0.95rem !important;
}

.woocommerce-account main input:focus,
.woocommerce-account main textarea:focus,
.woocommerce-account main select:focus {
	border-color: var( --wp--preset--color--secondary ) !important;
	box-shadow: 0 0 0 3px rgba( 226, 150, 124, 0.3 );
	outline: none;
}

/* Listes déroulantes des adresses : WooCommerce remplace le <select> par
   select2, qui construit son propre encadré. On l'aligne sur la hauteur des
   autres champs, faute de quoi pays et région trancheraient avec le reste. */
.woocommerce-account .select2-container--default .select2-selection--single {
	box-sizing: border-box;
	/* Hauteur relevée sur les champs voisins, pour un alignement exact. */
	height: 43px;
	padding: 0 0.9rem;
	border: 1px solid var( --wp--preset--color--primary );
	border-radius: 10px;
	background-color: var( --wp--preset--color--base );
}

.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
	/* Même priorité que pour les champs : WooCommerce impose ici son propre
	   espacement intérieur, qui faisait déborder le texte hors du cadre. */
	padding: 0 !important;
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.95rem !important;
	line-height: 41px !important;
}

.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 0.6rem;
	transform: translateY( -50% );
}

.woocommerce-account .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var( --wp--preset--color--secondary );
	box-shadow: 0 0 0 3px rgba( 226, 150, 124, 0.3 );
}

/* Le bouton natif de WooCommerce qui dévoile le mot de passe se cale dans le
   nouvel arrondi. */
.woocommerce-account .woocommerce-password-input .show-password-input {
	top: 50%;
	right: 0.9rem;
	transform: translateY( -50% );
}

/* Cartes « Se connecter » et « S'inscrire », hors connexion.
 *
 * WooCommerce leur applique un filet gris-mauve à angles de 5 px, sans fond :
 * les deux cartes sont cohérentes entre elles, mais étrangères à la charte du
 * site. On reprend le traitement de la carte du formulaire de commentaire —
 * fond rosé, filet assorti, angles à 16 px — les champs crème s'y détachant
 * comme ailleurs. */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	box-sizing: border-box;
	/* La carte occupe toute la hauteur de sa colonne : « height: 100% » ne
	   servirait à rien, la colonne n'ayant pas de hauteur propre. */
	flex: 1;
	/* WooCommerce pose une marge latérale sur la seule carte de connexion, qui
	   la rentrait de 36 px dans sa colonne alors que son titre restait au bord.
	   On l'annule des deux côtés : chaque carte occupe toute sa colonne. */
	margin-right: 0 !important;
	margin-left: 0 !important;
	/* Une largeur maximale s'applique elle aussi à la seule carte de connexion,
	   qui restait 4 px plus étroite que sa voisine. Constaté en production
	   uniquement : la version de WooCommerce y diffère de celle du poste. */
	max-width: none !important;
	padding: var( --wp--preset--spacing--50 ) !important;
	border: 1px solid var( --wp--preset--color--base-2 ) !important;
	border-radius: 16px !important;
	/* Priorité ici aussi : sans elle, le fond de la carte de connexion se fait
	   écraser et les deux colonnes n'ont plus la même couleur. */
	background-color: var( --wp--preset--color--base-2 ) !important;
}

/* La disposition en colonnes est déjà posée plus haut, pour
 * « .u-columns.col2-set », règle partagée avec la liste des adresses. On ne
 * complète ici que ce qui distingue cette page : les deux cartes doivent avoir
 * la même hauteur. D'où la portée sur l'identifiant du conteneur de connexion,
 * qui laisse les adresses intactes — leurs cartes, elles, gardent une hauteur
 * libre puisqu'elles n'ont pas à se répondre. */
#customer_login {
	align-items: stretch !important;
}

#customer_login > div {
	display: flex;
	flex-direction: column;
}

#customer_login > div > h2 {
	margin-top: 0;
}

/* Le bloc de contenu des pages est passé en « align:full » (templates/page.html).
 * Sans cela, WordPress le plafonnait à la largeur de contenu — 1080 px — et
 * les sections « pleine largeur » des compositions ne pouvaient pas dépasser
 * leur parent : elles s'arrêtaient à 1112 px sur un grand écran.
 *
 * Une fois le conteneur en « alignfull », WordPress s'occupe seul du reste :
 * il lui conserve son rembourrage latéral, contraint les textes courants à la
 * largeur de lecture, et rend leurs marges négatives aux sections. Aucune
 * règle maison n'est donc nécessaire ici.
 * ---------------------------------------------------------------------- */