/*
Fiche produit — composition
===========================
Structure reprise des grandes plateformes : galerie à gauche, colonne de
décision à droite, caractéristiques sous la galerie, contenus longs en sections
dépliables. Les couleurs viennent toutes des jetons du thème — l'orange appelle
l'action (bouton, promotion, puces), le vert ne dit que la disponibilité et le
délai, le reste tient dans les deux gris et les deux bordures.
*/

.single-product {
	--dj-pdp-accent: var(--sh-button, #FC803C);
	--dj-pdp-accent-dark: color-mix(in srgb, var(--dj-pdp-accent) 85%, #000);
	/* Teinte claire de l'accent : fond du bouton secondaire d'achat. Dérivée de
	   la couleur réglée dans le client, elle suit automatiquement un changement
	   de couleur de marque. */
	--dj-pdp-ok: var(--color-success, #1f7a3d);
	/* Rouge d'erreur du site, repris littéralement dans main.css. */
	--dj-pdp-erreur: var(--color-error, #c1292e);
	--dj-pdp-ink: var(--color-text, #1a1a1a);
	--dj-pdp-muted: var(--color-text-muted, #5b6472);
	--dj-pdp-line: var(--color-border, #ededed);
	--dj-pdp-soft: var(--color-surface-2, #f4f6f9);
	/* La fiche tenait son propre rayon de 4 px pendant que le reste du site
	   est passé à l'échelle déclarée dans main.css — 6 / 10 / 16 px, dont
	   `--radius-md` à lui seul sert 116 fois. Deux systèmes de rayons sur un
	   même site se voient sans qu'on sache dire pourquoi : la fiche rejoint
	   l'échelle commune au lieu de garder son exception. */
	--dj-pdp-radius: var(--radius-md, 10px);
}

/* --- Bandes de la page --------------------------------------------------- */

.single-product .site-content {
	background: var(--color-surface-2, #f4f6f9);
}

.single-product .product-details-wrapper,
.single-product .dj-pdp-sections,
.single-product .related-wrapper {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: 1254px;
}

.single-product .product-details-wrapper {
	background: var(--color-surface, #fff);
	border: 0;
	border-radius: var(--dj-pdp-radius);
	margin-bottom: 12px;
	padding: 16px 20px 24px;
}

/* --- Colonne de décision -------------------------------------------------- */

.single-product .summary.entry-summary {
	background: var(--color-surface, #fff);
}

.single-product .summary.entry-summary .product_title {
	color: var(--dj-pdp-ink);
	/* Un cran sous le titre de page : 22 px à partir de 769 px, 20 px en
	   dessous. À 28 px le nom du produit pesait presque autant que son prix
	   (32 px) alors qu'il n'est pas ce qu'on lit pour décider — et sur une
	   colonne de 481 px il occupait deux lignes de haut. Le jeton --t-h1 n'est
	   pas touché : il sert aussi aux titres de page, du panier et du blog. */
	font-size: var(--t-h2);
	line-height: 1.28;
	padding-right: 0;
}

.single-product .dj-brand,
.single-product .dj-brand a {
	color: var(--dj-pdp-ink);
	font-size: var(--t-meta);
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.single-product .dj-brand {
	margin: 0 0 4px;
}

.single-product .pdp-sku-inline {
	color: var(--dj-pdp-muted);
	font-size: var(--t-micro);
	margin-bottom: 8px;
}

.single-product .summary .woocommerce-product-rating {
	border-bottom: 1px solid var(--dj-pdp-line);
	margin-bottom: 14px;
	padding-bottom: 12px;
}

.single-product .summary .price,
.single-product .summary .price ins {
	color: var(--dj-pdp-ink);
	font-size: var(--t-prix);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.single-product .dj-savings {
	color: var(--dj-pdp-muted);
	font-size: 13px;
	margin: 2px 0 0;
}


/* Scène de galerie à hauteur bornée : une image carrée sur 860 px de large
   faisait 860 px de haut et chassait le bouton d'achat hors de l'écran. Les
   grandes plateformes travaillent toutes avec une scène d'environ 500 px. */
@media (min-width: 993px) {
	.single-product .woocommerce-product-gallery__image img,
	.single-product .cg-main-swiper img {
		margin: 0 auto;
		max-height: 420px;
		object-fit: contain;
		width: auto;
	}
}

/* --- Ligne d'avis ---------------------------------------------------------- */

.single-product .dj-rating {
	border-bottom: 1px solid var(--dj-pdp-line);
}

.single-product .dj-rating .star-rating {
	margin: 0;
}

.single-product .dj-rating__count,
.single-product .dj-rating__first {
	color: var(--dj-pdp-ink);
	font-size: 13px;
	text-decoration: underline;
	text-decoration-thickness: 0.75px;
	text-underline-offset: 0.12em;
}

/* --- Points clés ----------------------------------------------------------- */

.single-product .summary .dj-points {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.single-product .summary .dj-points li {
	color: var(--dj-pdp-ink);
	font-size: 13px;
	line-height: 1.5;
	margin: 0 0 4px;
	padding-left: 16px;
	position: relative;
}

.single-product .summary .dj-points li::before {
	background: var(--dj-pdp-muted);
	border-radius: 50%;
	content: "";
	height: 4px;
	left: 2px;
	position: absolute;
	top: 9px;
	width: 4px;
}

/* --- Livraison & retours, collé au bouton ---------------------------------- */

/* La carte « Livraison » est déclarée une seule fois, plus bas (« Carte
   livraison »). Trois règles la décrivaient ici en double, dont deux pour des
   classes que le gabarit n'émet pas — `__titre` en 13 px/600, entièrement
   écrasé par la version 15 px/700, et `__detail`, qui n'existe nulle part. La
   `margin-bottom: 18px` qui traînait ici était l'une des trois sources d'un
   même écart : c'est le rail qui le porte désormais, et lui seul. */


/* La colonne de décision est large, mais son contenu reste lisible : une ligne
   de texte de 800 px de long ne se lit pas. On borne, et on aligne à gauche. */
@media (min-width: 993px) {
	.single-product .summary.entry-summary > * {
		max-width: 620px;
	}

	.single-product .summary.entry-summary .product_title {
		max-width: 720px;
	}
}


/* Conseil par WhatsApp : une ligne cliquable, pas un bouton de plus. L'action
   principale de cette colonne reste « Ajouter au panier ». */
.single-product .summary .woocommerce-product-details__short-description {
	margin-top: 14px;
}

/* Même géométrie que la carte « Livraison » : l'icône part du bord du contenu
   (16 px de rembourrage), le texte 24 px plus loin. Avant, les deux cartes
   faisaient la même chose avec deux mesures — icônes à 1054 et 1057, textes à
   1081 et 1083 sur un écran de 1440. Quatre axes dans un rail de 280 px. */
.single-product .dj-whatsapp {
	align-items: baseline;
	border: 1px solid var(--color-border-strong, #e2e2e2);
	border-radius: var(--dj-pdp-radius);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	padding: 14px 16px 14px 40px;
	position: relative;
	text-decoration: none;
}

.single-product .dj-whatsapp::before {
	/* À l'encre, comme les trois icônes de livraison au-dessus. Ce pictogramme
	   portait `--color-success` — le vert qui dit « ✓ En stock » 300 px plus
	   haut sur la même page. Une couleur pour deux sens. Le canal est déjà nommé
	   deux fois en toutes lettres dans la carte, la couleur n'identifiait rien
	   que le texte ne dise. */
	background-color: var(--dj-pdp-ink);
	content: "";
	height: 16px;
	left: 16px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12.04 2a9.9 9.9 0 0 0-8.5 14.95L2 22l5.2-1.5A9.9 9.9 0 1 0 12.04 2zm0 1.8a8.1 8.1 0 1 1-4.1 15.1l-.3-.17-3.1.9.9-3-.2-.3A8.1 8.1 0 0 1 12.04 3.8zm4.5 10.3c-.24-.12-1.44-.7-1.66-.78-.22-.08-.38-.12-.54.12-.16.24-.62.78-.76.94-.14.16-.28.18-.52.06-.24-.12-1.02-.37-1.94-1.2-.72-.64-1.2-1.43-1.34-1.67-.14-.24-.02-.37.1-.49.1-.1.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.3-.74-1.78-.2-.47-.4-.4-.54-.41h-.46c-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.7 2.6 4.12 3.64.58.25 1.03.4 1.38.51.58.18 1.1.16 1.52.1.46-.07 1.44-.59 1.64-1.16.2-.57.2-1.06.14-1.16-.06-.1-.22-.16-.46-.28z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12.04 2a9.9 9.9 0 0 0-8.5 14.95L2 22l5.2-1.5A9.9 9.9 0 1 0 12.04 2zm0 1.8a8.1 8.1 0 1 1-4.1 15.1l-.3-.17-3.1.9.9-3-.2-.3A8.1 8.1 0 0 1 12.04 3.8zm4.5 10.3c-.24-.12-1.44-.7-1.66-.78-.22-.08-.38-.12-.54.12-.16.24-.62.78-.76.94-.14.16-.28.18-.52.06-.24-.12-1.02-.37-1.94-1.2-.72-.64-1.2-1.43-1.34-1.67-.14-.24-.02-.37.1-.49.1-.1.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.3-.74-1.78-.2-.47-.4-.4-.54-.41h-.46c-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.7 2.6 4.12 3.64.58.25 1.03.4 1.38.51.58.18 1.1.16 1.52.1.46-.07 1.44-.59 1.64-1.16.2-.57.2-1.06.14-1.16-.06-.1-.22-.16-.46-.28z'/%3E%3C/svg%3E");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	position: absolute;
	/* Centrée sur la première ligne : 1 de trait + 14 de rembourrage + 2. */
	top: 16px;
	width: 16px;
}

.single-product .dj-whatsapp__titre {
	color: var(--dj-pdp-ink);
	font-size: var(--t-meta);
}

.single-product .dj-whatsapp__action {
	color: var(--dj-pdp-ink);
	font-size: var(--t-meta);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 0.75px;
	text-underline-offset: 0.12em;
}

.single-product .dj-whatsapp:hover .dj-whatsapp__action {
	color: var(--dj-pdp-accent);
}


/* ==========================================================================
   Trois colonnes : galerie · information · rail d'achat
   Structure relevée sur la fiche de référence. Le rail de droite réunit la
   carte d'achat et la carte livraison ; il est détaché de l'information.
   ========================================================================== */

@media (min-width: 993px) {
	/* La colonne de droite réunit le titre, la carte d'achat, la livraison et
	   le contact : c'est une seule colonne de décision, comme chez Boulanger,
	   Darty et la Fnac. Plus de sous-grille, donc plus de colonne vide. */
	.single-product .summary.entry-summary {
		border-left: 0;
		display: block;
		padding-left: 0;
	}

	.single-product .summary.entry-summary > * {
		max-width: none;
	}

}

/* L'écart entre les deux cartes est décidé ici, et nulle part ailleurs. Trois
   déclarations s'additionnaient — `gap: 12px`, 18 px de marge basse sur la
   carte livraison, 12 px de marge haute sur la carte WhatsApp — et rendaient
   42 px mesurés là où la feuille en annonçait 12.
   24 px, et non 12 : l'écart entre deux cartes doit dépasser le rembourrage
   qui les garnit (16 px), sinon elles se lisent comme un seul bloc coupé. */
.single-product .dj-rail {
	display: flex;
	flex-direction: column;
	gap: var(--espace-bloc, 24px);
}

/* La pastille du thème est réémise dans le bloc prix (voir
   shoptimizer_dj_pdp_remise) : on masque celle qui restait dans la colonne
   d'information. */
.single-product .summary.entry-summary > .price-badge-wrap {
	display: none;
}

.single-product .dj-remise {
	background: var(--dj-pdp-accent);
	border-radius: var(--dj-pdp-radius);
	/* Blanc sur orange, comme les pastilles des cartes : choix du client. */
	color: var(--color-surface, #fff);
	font-size: var(--t-micro);
	font-weight: 700;
	margin-left: 8px;
	padding: 3px 8px;
	vertical-align: 2px;
}

/* --- Colonne d'information ------------------------------------------------ */

/* La galerie n'est plus encadrée : les visuels du catalogue portent leur propre
   fond clair, qui suffit à poser le bloc. Un cadre par-dessus revenait à dire
   deux fois « ceci est une boîte ». Le rayon part avec la bordure — sans fond
   ni trait, il ne dessinait plus rien. */
@media (min-width: 993px) {
	.single-product .product-details-wrapper > .images,
	.single-product .product-details-wrapper > .woocommerce-product-gallery {
		/* Le bloc épouse son contenu : sans cela il s'étirait sur toute la
		   hauteur de la rangée et laissait un grand vide sous les vignettes.
		   Plus de marge intérieure : elle appartenait au cadre. Orpheline, elle
		   posait la photo 12 px sous le titre et la rentrait de 12 px dans sa
		   colonne — mesuré. La photo s'aligne maintenant sur le haut du titre et
		   récupère les 24 px. */
		align-self: start;
		padding: 0;
	}

	/* Photo et vignettes centrées dans la carte : les visuels du catalogue
	   plafonnent autour de 420 px, la carte en fait près de 800. Les aligner à
	   gauche creusait un vide à droite ; les centrer donne une marge égale des
	   deux côtés, comme sur les fiches de la Fnac et de Boulanger. */
	.single-product .product-details-wrapper .woocommerce-product-gallery__wrapper,
	.single-product .product-details-wrapper .flex-viewport {
		margin-left: auto;
		margin-right: auto;
		max-width: 520px;
	}

	/* Une flèche de carrousel qui ne mène nulle part est un bouton mort. On la
   rend invisible plutôt que de la retirer du flux, pour ne pas décaler les
   vignettes quand elle redevient utile. */
.single-product .images .swiper-button-disabled,
.single-product .woocommerce-product-gallery .swiper-button-disabled {
	opacity: 0;
	pointer-events: none;
}

.single-product .product-details-wrapper .flex-control-thumbs {
		justify-content: center;
	}
}

.single-product .dj-points__titre {
	color: var(--dj-pdp-ink);
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 8px;
}

/* Les puces reprennent la taille du tableau de caractéristiques : sans cela le
   texte était plus gros que son propre intertitre. */
.single-product .dj-sous-galerie .dj-points,
.single-product .dj-sous-galerie .dj-points-forts p {
	color: var(--dj-pdp-ink);
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
	padding-left: 18px;
}

.single-product .dj-sous-galerie .dj-points-forts p {
	padding-left: 0;
}

.single-product .dj-sous-galerie .dj-points li {
	margin-bottom: 4px;
}

.single-product .summary .dj-points {
	margin-top: 0;
}

.single-product .dj-points__plus {
	appearance: none;
	background: transparent;
	border: 0;
	color: var(--dj-pdp-ink);
	cursor: pointer;
	display: none;
	font-size: 13px;
	font-weight: 600;
	margin-top: 4px;
	padding: 0;
	text-decoration: underline;
	text-decoration-thickness: 0.75px;
	text-underline-offset: 0.12em;
}

/* Le plafond est posé par le script, à une valeur qui tombe entre deux puces.
   Il était ici en `calc(4 * 1.55em)` : un interligne supposé, sans rapport avec
   les 19,5 px réels des puces, qui coupait la dernière en plein milieu — 33 px
   sur 39 en version bureau, 7 px sur 39 sur téléphone. Sans script, rien n'est
   replié : le bouton « Voir plus » est lui aussi révélé par le script, et un
   plafond sans bouton masquerait du texte sans moyen de le rouvrir. */
.single-product .dj-points-forts.is-collapsible .dj-points__contenu {
	overflow: hidden;
}

.single-product .dj-points-forts.is-collapsible.is-expanded .dj-points__contenu {
	max-height: none;
}

.single-product .dj-points-forts.is-collapsible .dj-points__plus {
	display: inline-block;
}

.single-product .dj-points__plus:hover {
	color: var(--dj-pdp-accent);
}

.single-product .dj-points__plus:focus-visible {
	border-radius: var(--radius-sm, 6px);
	outline: 2px solid var(--dj-pdp-accent);
	outline-offset: 3px;
}

/* --- Bloc prix du rail ----------------------------------------------------- */

.single-product .summary .dj-buybox .price {
	align-items: baseline;
	flex-direction: row;
	flex-wrap: wrap;
	float: none;
	gap: 0;
	margin-bottom: 2px;
	width: 100%;
}

/* Prix barré au-dessus, prix réel en dessous : on force le retour à la ligne
   entre les deux avec un élément de largeur pleine. */
.single-product .summary .dj-buybox .price del {
	flex: 0 0 100%;
}

.single-product .summary .dj-buybox .price del {
	font-size: 13px;
	order: 1;
}

.single-product .summary .dj-buybox .dj-remise {
	order: 3;
}

.single-product .summary .dj-buybox .price ins,
.single-product .summary .dj-buybox .price > .woocommerce-Price-amount {
	font-size: var(--t-prix);
	line-height: 1.15;
	order: 2;
}

.single-product .dj-buybox .dj-savings {
	clear: both;
	margin: 0 0 10px;
}

.single-product .dj-buybox .stock {
	clear: both;
}

.single-product .dj-rail .cart .single_add_to_cart_button {
	clear: both;
	float: none;
	margin-left: 0;
	max-width: none;
	width: 100%;
}

/* --- Carte livraison ------------------------------------------------------ */

.single-product .dj-livraison {
	border: 1px solid var(--color-border-strong, #e2e2e2);
	border-radius: var(--dj-pdp-radius);
	/* Symétrique : les 2 px de plus en bas ne répondaient à rien. */
	padding: 14px 16px;
}

.single-product .dj-livraison__titre {
	align-items: center;
	/* Le thème pose une bordure haute sur les h2 : elle doublait le filet du
	   titre et donnait deux lignes empilées au-dessus de « Livraison ». */
	border-top: 0;
	border-bottom: 1px solid var(--dj-pdp-line);
	color: var(--dj-pdp-ink);
	cursor: pointer;
	display: flex;
	font-size: var(--t-corps);
	font-weight: 700;
	justify-content: space-between;
	list-style: none;
	margin: 0 0 12px;
	/* Cette ligne ouvre et ferme l'encadré : c'est une cible de clic, pas un
	   titre. Mesurée à 34 px de haut, sous le plancher de 44. */
	min-height: 44px;
	padding-bottom: 10px;
	/* Le thème pose `padding-right: 2rem` sur « .summary details summary » pour
	   loger le chevron. Il est repris ici à zéro sur grand écran, où le chevron
	   est masqué (voir plus bas) : 32 px y étaient réservés à rien. */
	padding-top: 0;
	text-transform: none;
}

.single-product .dj-livraison__titre::-webkit-details-marker {
	display: none;
}

/* Chevron en masque SVG : la version tracée avec deux bordures tournées sortait
   de travers dans ce conteneur flex — elle se lisait comme un coin, pas comme
   une flèche. */
.single-product .dj-livraison__titre::after {
	background-color: var(--color-text-muted, #5b6472);
	content: "";
	flex: 0 0 auto;
	height: 8px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	margin-left: 12px;
	transition: transform var(--dj-t-base, 200ms) ease;
	width: 12px;
}

.single-product .dj-livraison[open] .dj-livraison__titre::after {
	transform: rotate(180deg);
}

/* Sur grand écran, la carte reste ouverte et ne se replie pas. */
@media (min-width: 993px) {
	.single-product .dj-livraison__titre {
		cursor: default;
		padding-right: 0;
		pointer-events: none;
	}

	.single-product .dj-livraison__titre::after {
		display: none;
	}
}

/* La pastille « Livré par X » a été retirée du gabarit le 26 octobre : elle
   répétait le « Vendu et expédié par X » quelques lignes plus bas. Sa règle
   est partie avec elle. */

.single-product .dj-livraison__delais {
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-product .dj-livraison__delai {
	color: var(--dj-pdp-ink);
	font-size: var(--t-meta);
	line-height: 1.45;
	margin: 0 0 8px;
	padding-left: 24px;
	position: relative;
}

.single-product .dj-livraison__delai strong {
	color: var(--dj-pdp-ink);
	font-weight: 600;
}

.single-product .dj-livraison__delai::before {
	background-color: var(--dj-pdp-ink);
	content: "";
	height: 16px;
	left: 0;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	position: absolute;
	top: 2px;
	width: 16px;
}

.single-product .dj-livraison__delai--relais::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.5-5h15L21 9'/%3E%3Cpath d='M4 9v11h16V9'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.5-5h15L21 9'/%3E%3Cpath d='M4 9v11h16V9'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E");
}

.single-product .dj-livraison__delai--domicile::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h15v13H1z'/%3E%3Cpath d='M16 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h15v13H1z'/%3E%3Cpath d='M16 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}

.single-product .dj-livraison__delai--agence::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='13' rx='2'/%3E%3Cpath d='M4 9h16'/%3E%3Ccircle cx='8' cy='18.5' r='1.6'/%3E%3Ccircle cx='16' cy='18.5' r='1.6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='13' rx='2'/%3E%3Cpath d='M4 9h16'/%3E%3Ccircle cx='8' cy='18.5' r='1.6'/%3E%3Ccircle cx='16' cy='18.5' r='1.6'/%3E%3C/svg%3E");
}

.single-product .dj-livraison__note {
	color: var(--dj-pdp-ink);
	display: block;
	font-size: var(--t-micro);
}

/* --- Vente flash ----------------------------------------------------------
   Le bandeau ne répète ni le prix ni le pourcentage : ils sont dans « .dj-prix »
   juste au-dessus. Il porte ce que le prix ne dit pas — le temps qui reste et
   ce qu'il reste en rayon. Aucun aplat teinté, procédé écarté le 29 octobre.

   ---- La couleur, et pourquoi ce n'est plus l'orange ----------------------
   Premier jet : l'accent orange plein, par souci de reprendre le vocabulaire
   du site. Deux erreurs.

   1. **Lisibilité.** Blanc sur `#FC803C` mesure **2,53:1**, très en dessous du
      seuil de 4,5:1. L'entête était à la limite de l'illisible.

   2. **Rôle.** L'orange est l'accent, réservé à l'action principale — le bouton
      « Ajouter au panier ». Un bandeau de la même couleur, 300 px plus haut,
      lui disputait le regard.

   `--dj-flash` est donc une couleur NEUVE : le site n'avait pas de rouge de
   promotion. Elle est reprise de la référence envoyée, pas inventée, et donne
   **6,83:1** avec le blanc.

   À savoir : elle est proche de `--color-error` (#c1292e) — 1,18:1 entre les
   deux. Ce qui les sépare est leur rôle, pas leur aspect : l'une dit qu'une
   chose a échoué, l'autre qu'une offre court. Si les deux devaient se côtoyer,
   il faudrait creuser l'écart. */

:root {
	--dj-flash: #a82b3c;
	/* Deux valeurs relevées au pixel sur la capture de référence : l'éclair doré
	   et le gris de la piste. Ce gris est volontairement soutenu — avec le gris
	   très clair des surfaces du site, la portion vendue ne se détachait plus et
	   la jauge perdait son sens au premier coup d'œil. */
	--dj-flash-icone: #f5bd41;
	--dj-flash-piste: #a3a3a6;
}

.single-product .dj-flash {
	border: 1px solid var(--dj-pdp-line);
	border-radius: var(--dj-pdp-radius);
	/* 16 et non 12 : la colonne ne connaissait que deux écarts — 6 à l'intérieur
	   du groupe de tête, 16 entre deux groupes. Un 12 y aurait ajouté une
	   troisième valeur pour rien. Au-dessus, c'est la marge du prix (6 px) qui
	   joue : le bandeau qualifie le prix, il lui reste collé. */
	margin: 0 0 16px;
	overflow: hidden;
}

.single-product .dj-flash__entete {
	align-items: center;
	background: var(--dj-flash, #a82b3c);
	color: var(--color-surface, #fff);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	justify-content: space-between;
	margin: 0;
	padding: 8px 12px;
}

/* L'éclair de la référence. Masque monochrome plutôt qu'une image : il suit la
   couleur, et le thème emploie déjà ce procédé pour toutes ses icônes. */
.single-product .dj-flash__titre {
	align-items: center;
	display: inline-flex;
	font-size: var(--t-petit, 14px);
	font-weight: 700;
	gap: 7px;
	letter-spacing: 0.01em;
}

.single-product .dj-flash__titre::before {
	background-color: var(--dj-flash-icone, #f5bd41);
	content: "";
	flex: 0 0 auto;
	height: 16px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13 2 4.5 13.2h6L11 22l8.5-11.2h-6z'/%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' fill='%23000'%3E%3Cpath d='M13 2 4.5 13.2h6L11 22l8.5-11.2h-6z'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 16px;
}

.single-product .dj-flash__temps {
	align-items: baseline;
	display: flex;
	gap: 6px;
	font-size: var(--t-meta, 13px);
}

/* Le libellé accompagne, le chiffre est l'information : seule la graisse les
   sépare, la couleur restant la même — un blanc atténué sur l'orange
   descendrait sous le seuil de lisibilité. */
.single-product .dj-flash__chrono {
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* Le corps accueille désormais le prix, qui a déménagé ici depuis la colonne :
   il n'y est pas recopié, il n'existe qu'une fois dans la page. */
.single-product .dj-flash__corps {
	padding: 12px;
}

.single-product .dj-flash__corps .dj-prix {
	margin: 0 0 10px;
}

.single-product .dj-flash__stock {
	align-items: center;
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.single-product .dj-flash__reste {
	color: var(--dj-pdp-ink);
	flex: 0 0 auto;
	font-size: var(--t-meta, 13px);
	font-weight: 600;
}

.single-product .dj-flash__jauge {
	background: var(--dj-flash-piste, #a3a3a6);
	border-radius: 999px;
	flex: 1 1 auto;
	height: 8px;
	min-width: 0;
	overflow: hidden;
}

.single-product .dj-flash__part {
	/* La jauge appartient au bandeau, pas à l'action : elle prend sa couleur,
	   pas celle du bouton d'achat. */
	background: var(--dj-flash, #a82b3c);
	display: block;
	height: 100%;
}

/* --- Encadré d'achat ------------------------------------------------------ */

/* Règle de surface, posée une fois pour toutes :
   — un PANNEAU (galerie, livraison, contact) prend --color-border ;
   — un CONTRÔLE (champ, sélecteur, bouton secondaire) prend
     --color-border-strong, un cran plus marqué pour signaler qu'on peut agir.
   Avant cette règle, trois cartes côte à côte portaient deux gris différents
   selon la feuille qui les avait définies.

   Le bloc d'achat, lui, n'est plus un panneau. Son cadre rentrait son contenu
   de 17 px (1 de trait + 16 de rembourrage) alors que le titre, le prix, la
   note et la description courte partent tous du même bord — 540 px sur un
   écran de 1440. Une seule ligne de la colonne ne commençait pas où commencent
   les autres. Et ses propres éléments portent déjà un trait chacun : le
   sélecteur de quantité, le bouton, les deux icônes. Le cadre faisait une
   quatrième bordure autour de trois.
   Ce qui tient le groupe désormais, ce sont les écarts : 10 et 12 px entre ses
   lignes, 24 au-dessus — l'écart de bloc du site. */
.single-product .dj-buybox {
	margin-top: var(--espace-bloc, 24px);
}

/* Disponibilité en tête de l'encadré, comme sur les grandes plateformes :
   une ligne, puis la quantité et le bouton. */
.single-product .dj-buybox .stock {
	margin: 0 0 10px;
}

.single-product .dj-buybox form.cart {
	margin-bottom: 0;
}

/* Liste d'envies : action secondaire, donc discrète et alignée sur le texte. */
.single-product .dj-buybox .commercekit-wishlist a,
.single-product .commercekit-wishlist.full a {
	align-items: center;
	color: var(--dj-pdp-muted);
	display: inline-flex;
	font-size: 13px;
	gap: 7px;
}

.single-product .commercekit-wishlist.full a:hover {
	color: var(--dj-pdp-ink);
}

/* Le cœur est positionné en absolu par le plugin, 22 px à gauche du texte : on
   le centre verticalement sur la ligne au lieu de le laisser flotter sous elle,
   et on le met au gris du texte. */
.single-product .commercekit-wishlist.full a em.cg-wishlist:before,
.single-product .commercekit-wishlist.full a em.cg-wishlist-t:before {
	top: 50%;
	width: 15px;
	height: 15px;
	margin-top: 0;
	transform: translateY(-50%);
	background: var(--dj-pdp-muted);
}

.single-product .dj-buybox form.cart .button,
.single-product .dj-buybox .single_add_to_cart_button {
	background: var(--dj-pdp-accent);
	border-radius: var(--dj-pdp-radius);
	/* 16 px, pas 18 : à 18 px le libellé se faisait tronquer en « Ajouter au »
	   dès que la colonne d'achat descendait sous 380 px. */
	font-size: 16px;
	font-weight: 700;
	min-height: 46px;
}

.single-product .dj-buybox form.cart .button:hover,
.single-product div.product .dj-buybox .commercekit-sticky-atc-intersector .single_add_to_cart_button:hover,
.single-product div.product .dj-buybox form.cart .single_add_to_cart_button:hover {
	background: var(--dj-pdp-accent-dark);
}

/* Le bloc « Caractéristiques » (.dj-aside et ses quatre enfants) a été retiré du
   gabarit : ses sept règles ne s'appliquaient plus à rien. Supprimées le
   29 octobre 2026 après vérification — aucune occurrence dans le thème, dans
   les extensions, ni dans le HTML rendu. */

/* --- Sections dépliables -------------------------------------------------- */

/* Les sections ne forment plus un seul bloc découpé par des filets : chacune
   est une carte à part, séparée par du vide. C'est ce qui rend chaque titre
   cliquable évident — on voit quatre objets, pas quatre lignes d'une liste.
   Le conteneur ne sert plus qu'à les espacer. */
.single-product .dj-pdp-sections {
	background: transparent;
	margin: 0 auto 12px;
	padding: 0;
}

/* L'écart est porté par les cartes et non par un `gap` de conteneur flex :
   sur mobile, ces cartes passent en plein-bord par des marges latérales
   négatives, et un élément flex étiré ne s'élargit pas comme un bloc le fait.
   Mesuré : 366 px au lieu de 390, soit 12 px de gris de chaque côté là où les
   blocs voisins touchaient le bord. */
.single-product .dj-pdp-section {
	background: var(--color-surface, #fff);
	border-radius: var(--dj-pdp-radius);
	margin-bottom: 12px;
	padding: 0 20px;
}

.single-product .dj-pdp-section:last-child {
	margin-bottom: 0;
}

/* Métadonnée d'en-tête : la note, le nombre d'avis ou d'informations. On sait
   ce qu'on ouvre avant de l'ouvrir — c'est la lecture de la référence. */
.single-product .dj-acc__meta {
	color: var(--dj-pdp-muted);
	/* Un seul cran sous le titre : à 13 px contre 22, la métadonnée se lisait
	   comme une note de bas de page au lieu d'un complément du titre. */
	font-size: var(--t-corps);
	font-weight: 400;
	/* `margin-left: auto` la renvoyait à l'autre bout de la rangée : c'est ce
	   qui la séparait de son titre de 920 px. Elle suit le titre, point. */
	white-space: nowrap;
}

/* Rangée haute : l'en-tête d'une section est une cible de clic à part entière,
   pas une ligne de texte. 64 px, c'est la hauteur des grandes plateformes. */
.single-product .dj-acc > summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	/* `space-between` envoyait la métadonnée à l'autre bout de la rangée :
	   mesuré, « 7 informations » se retrouvait à 920 px de « Caractéristiques »,
	   et l'œil ne faisait plus le lien entre les deux. Elle se colle au titre ;
	   c'est le chevron, et lui seul, qui part à droite. */
	gap: 10px;
	justify-content: flex-start;
	list-style: none;
	min-height: 64px;
	padding: 16px 0;
}

.single-product .dj-acc > summary::-webkit-details-marker {
	display: none;
}

/* Un cran au-dessus des titres de bloc : ces quatre titres sont les repères de
   navigation du bas de fiche, ils doivent se lire d'un coup d'œil en faisant
   défiler. */
.single-product .dj-acc__title {
	color: var(--dj-pdp-ink);
	font-size: var(--t-h2);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* Chevron : mêmes 1.5 px et même gris que les autres chevrons du thème. */
.single-product .dj-acc > summary::after {
	border-bottom: 1.5px solid var(--color-text-muted, #5b6472);
	border-right: 1.5px solid var(--color-text-muted, #5b6472);
	content: "";
	flex: 0 0 auto;
	height: 8px;
	margin-left: auto;
	transform: translateY(-20%) rotate(45deg);
	transition: transform var(--dj-t-base, 200ms) ease;
	width: 8px;
}

.single-product .dj-acc[open] > summary::after {
	transform: translateY(20%) rotate(-135deg);
}

.single-product .dj-acc__body {
	color: var(--dj-pdp-ink);
	font-size: 14px;
	line-height: 1.65;
	padding: 4px 0 28px;
}

.single-product .dj-acc__body p {
	color: var(--dj-pdp-ink);
}

.single-product .dj-acc__body table.shop_attributes th {
	color: var(--dj-pdp-ink);
	font-size: 13px;
	font-weight: 600;
}

.single-product .dj-acc__body table.shop_attributes td {
	color: var(--dj-pdp-ink);
	font-size: 13px;
}

/* Le gabarit des avis réaffiche son propre titre : le résumé de la section le
   porte déjà, on masque le doublon. */
.single-product .dj-pdp-section .woocommerce-Reviews-title {
	display: none;
}

.single-product .dj-acc > summary:focus-visible {
	border-radius: var(--radius-md, 10px);
	outline: 2px solid var(--dj-pdp-accent);
	outline-offset: 3px;
}

/* --- Livraison & retours -------------------------------------------------- */

.single-product .dj-ship {
	margin: 0;
}

.single-product .dj-ship__row {
	border-bottom: 1px solid var(--dj-pdp-line);
	display: grid;
	gap: 4px 24px;
	grid-template-columns: 140px 1fr;
	padding: 10px 0;
}

.single-product .dj-ship__row:last-child {
	border-bottom: 0;
}

.single-product .dj-ship__row dt {
	color: var(--dj-pdp-ink);
	font-size: 13px;
	font-weight: 600;
	margin: 0;
}

.single-product .dj-ship__row dd {
	color: var(--dj-pdp-ink);
	font-size: 13px;
	margin: 0;
}

/* --- Recommandations et pied de fiche ------------------------------------- */

.single-product .related-wrapper {
	background: transparent;
	border: 0;
	margin-bottom: 0;
}

/* Les quatre sélecteurs doivent peser pareil. Écrits sans le préfixe
   `.related-wrapper >`, les deux derniers ne valaient que deux classes et
   perdaient contre `.single-product .related-wrapper > section` de main.css
   (deux classes + un élément), qui met `padding-top: 0`. Résultat : le titre
   « Récemment consultés » était collé au bord haut de sa carte, alors que ses
   deux voisines gardaient leurs 24 px. */
.single-product .related-wrapper > section.products,
.single-product .related-wrapper > .related.products,
.single-product .related-wrapper > .upsells.products,
.single-product .related-wrapper > .recently-viewed-products {
	background: var(--color-surface, #fff);
	border: 0;
	border-radius: var(--dj-pdp-radius);
	margin-bottom: 12px;
	padding: 24px 20px 26px;
}

.single-product .related-wrapper > section.products > h2,
.single-product .related-wrapper > .related.products > h2,
.single-product .related-wrapper > .upsells.products > h2,
.single-product .related-wrapper > .recently-viewed-products > h2 {
	color: var(--dj-pdp-ink);
	font-size: var(--t-h3);
	font-weight: 700;
	letter-spacing: -0.025em;
	margin: 0 0 18px;
	padding: 0;
	text-transform: none;
}

.single-product .related-wrapper ul.products li.product {
	background: var(--color-surface, #fff);
	border: 0;
	border-radius: var(--dj-pdp-radius);
	box-shadow: none;
}

.single-product .product_meta {
	background: var(--color-surface, #fff);
	border: 0;
	border-radius: var(--dj-pdp-radius);
	font-size: 12px;
	margin: 0 auto 12px;
	max-width: 1254px;
	padding: 18px 20px;
	position: static;
	text-align: left;
	width: auto;
}

.single-product .product_meta .posted_in,
.single-product .product_meta .tagged_as {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 18px 0 0;
}

.single-product .product_meta a {
	background: var(--dj-pdp-soft);
	border: 1px solid var(--dj-pdp-line);
	border-radius: var(--dj-pdp-radius);
	color: var(--dj-pdp-ink);
	padding: 4px 9px;
	text-decoration: none;
}

/* --- Recherches associées -------------------------------------------------- */

.single-product .dj-tags {
	background: var(--color-surface, #fff);
	border: 0;
	border-radius: var(--dj-pdp-radius);
	margin: 0 auto 12px;
	max-width: 1254px;
	padding: 18px 20px;
}

.single-product .dj-tags__titre {
	color: var(--dj-pdp-ink);
	font-size: var(--t-h3);
	font-weight: 700;
	letter-spacing: -0.025em;
	margin: 0 0 18px;
	text-transform: none;
}

.single-product .dj-tags__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-product .dj-tags__liste li {
	margin: 0;
}

/* Deux écarts corrigés ici : une bordure à l'encre pure — la plus marquée du
   site, pour un lien secondaire — là où la règle de surface réserve
   `--color-border-strong` aux contrôles ; et la graisse 500, seule de son
   espèce sur toute la fiche, les trois autres graisses portant le reste. */
.single-product .dj-tags__chip {
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-border-strong, #e2e2e2);
	border-radius: var(--radius-md, 10px);
	color: var(--dj-pdp-ink);
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	padding: 6px 10px;
	text-decoration: none;
}

.single-product .dj-tags__chip:hover {
	/* Le filet encre suffit à dire « survolé ». L'aplat teinté qui s'y ajoutait
	   était le même procédé que sur la pastille retenue. */
	border-color: var(--dj-pdp-ink);
	color: var(--dj-pdp-ink);
}

/* --- Barre d'achat collante ----------------------------------------------- */

.single-product .shoptimizer-sticky-add-to-cart {
	background: var(--color-surface, #fff);
	border-top: 1px solid var(--color-border-strong, #e2e2e2);
	box-shadow: none;
}

.single-product .shoptimizer-sticky-add-to-cart .col-full {
	max-width: 1254px;
}

.single-product .shoptimizer-sticky-add-to-cart__content-button .button {
	background: var(--dj-pdp-accent);
	border-radius: var(--dj-pdp-radius);
	color: var(--color-surface, #fff);
	font-weight: 700;
}

.single-product .shoptimizer-sticky-add-to-cart__content-price {
	color: var(--dj-pdp-ink);
	font-weight: 700;
}

/* --- Grille ---------------------------------------------------------------- */

@media (min-width: 993px) {
	/* Deux colonnes : à gauche la galerie et tout le descriptif, à droite la
	   décision d'achat. Proportions relevées chez Boulanger (environ 700 / 440
	   sur une largeur de contenu de 1170). */
	/* Trois colonnes : galerie, information, achat. La colonne du milieu porte
	   le bandeau de promotion, le prix, le titre et la note — elle n'est jamais
	   vide, contrairement à la version où elle ne recevait que le titre. */
	.single-product .product-details-wrapper {
		align-items: start;
		column-gap: 22px;
		display: grid;
		/* La galerie suit la largeur disponible : la valeur fixe de 480 px
		   écrasait la colonne d'information entre 993 et 1179 px.
		   34 % et non 39 % : à 39 %, la galerie prenait 473 px sur 1 214 et la
		   colonne du milieu — titre, descriptif, attributs — n'en gardait que
		   421, moins que la photo. La priorité revient au texte qu'on lit pour
		   décider. Le plancher descend avec elle, sinon il mord dès 993 px. */
		grid-template-columns: minmax(300px, 34%) minmax(0, 1fr);
		row-gap: 0;
	}

	.single-product .summary.entry-summary {
		column-gap: 18px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 280px;
	}

	.single-product .summary.entry-summary > * {
		grid-column: 1;
		min-width: 0;
	}

	.single-product .summary.entry-summary > .dj-rail {
		align-self: start;
		grid-column: 2;
		grid-row: 1 / span 40;
	}

	/* Placement explicite : sans numéro de rangée, un élément intercalé par
	   WooCommerce (la pastille de promotion) suffisait à renvoyer la colonne
	   d'information sous la galerie. */
	.single-product .product-details-wrapper > .images,
	.single-product .product-details-wrapper > .woocommerce-product-gallery {
		float: none;
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 0;
		min-width: 0;
		width: 100%;
	}

	.single-product .product-details-wrapper > .summary.entry-summary {
		float: none;
		grid-column: 2;
		grid-row: 1;
		padding-left: 0;
		width: 100%;
	}

	.single-product .dj-colonne-gauche > .images,
	.single-product .dj-colonne-gauche > .woocommerce-product-gallery {
		float: none;
		margin-bottom: 0;
		width: 100%;
	}
}

/* Entre 993 et 1200 px, le rail gardait ses 280 px fixes pendant que la colonne
   du milieu tombait à 299 px : la colonne secondaire pesait autant que celle
   qu'on lit pour décider. Le rail cède 40 px sur cette plage — la carte de
   livraison y perd 17 px de hauteur : la seule chose qui se replie est la liste
   des points relais, qui passe sur deux lignes. C'est une note secondaire ; la
   colonne qu'on lit pour décider gagne 40 px en échange. */
@media (min-width: 993px) and (max-width: 1200px) {
	.single-product .summary.entry-summary {
		grid-template-columns: minmax(0, 1fr) 240px;
	}
}

@media (max-width: 992px) {
	.single-product .content-area {
		margin-left: 0;
		width: 100%;
	}

	/* Sans la grille, c'est l'ordre du DOM qui s'applique : les caractéristiques
	   et la réassurance (placées sous la galerie pour le bureau) passaient avant
	   le titre et le prix, repoussant la décision d'achat sous un écran de
	   spécifications. On rétablit l'ordre de lecture : galerie, achat, détails. */
	.single-product .product-details-wrapper {
		display: flex;
		flex-direction: column;
	}

	.single-product .product-details-wrapper > .summary.entry-summary {
		order: 1;
	}

	/* Bouton d'achat en pleine largeur sous la quantité : à 390 px, la ligne
	   quantité + bouton ne laissait que 220 px au bouton et le libellé était
	   coupé. C'est aussi la disposition des grandes plateformes sur mobile. */
	/* Ordre de la référence sur mobile : le prix et l'achat viennent juste après
	   le titre et la note ; les points forts descendent sous la carte. */
	.single-product .summary.entry-summary {
		display: flex;
		flex-direction: column;
	}

	/* Le bloc d'achat suit la description courte ; le rail — qui ne porte plus
	   que la livraison et le contact — vient après. En colonne unique il le suit
	   immédiatement : le rembourrage du cadre retiré tenait lieu d'écart, et sans
	   lui la carte « Livraison » touchait la rangée partage/favoris. On reprend
	   l'écart du haut, le bloc est tenu des deux côtés. */
	.single-product .summary.entry-summary > .dj-buybox {
		margin-bottom: var(--espace-bloc, 24px);
		order: 2;
	}

	.single-product .summary.entry-summary > .dj-rail {
		order: 3;
	}

	.single-product .summary.entry-summary > .woocommerce-product-details__short-description,
	.single-product .summary.entry-summary > .dj-points__titre,
	.single-product .summary.entry-summary > .dj-points,
	.single-product .summary.entry-summary > .pdp-readmore {
		order: 1;
	}

	.single-product .dj-buybox .cart .single_add_to_cart_button {
		clear: both;
		float: none;
		margin-left: 0;
		margin-top: 10px;
		width: 100%;
	}

	/* La galerie mobile du plugin se cale sur la largeur de l'écran et déborde
	   de la gouttière de 3 px de chaque côté. On la ramène dans le conteneur. */
	.single-product .product-details-wrapper > .images,
	.single-product .product-details-wrapper > .woocommerce-product-gallery,
	.single-product .product-details-wrapper .swiper-slide {
		max-width: 100%;
		width: 100%;
	}

	/* L'image occupe toute la largeur de la carte : elle déborde du padding du
	   conteneur, exactement — ni 3 px de travers comme le faisait l'extension,
	   ni un double retrait. Seul le texte garde la gouttière. */
	.single-product .product-details-wrapper > .images.ckit-mobile-pdp-gallery-active,
	.single-product .product-details-wrapper > .images {
		margin-left: calc(-1 * var(--gutter-mobile, 12px)) !important;
		margin-right: calc(-1 * var(--gutter-mobile, 12px)) !important;
		/* width: auto laisse le bloc s'étendre exactement jusqu'aux marges
		   négatives ; un calc() se heurtait à la largeur imposée par l'extension. */
		max-width: none !important;
		width: auto !important;
	}

	.single-product .product-details-wrapper {
		border-radius: 0;
		padding: 16px var(--gutter-mobile, 12px) 24px;
	}

	/* La description produit sort souvent en liste longue : à 16 px avec un fort
	   interligne, dix puces prenaient deux écrans. */
	.single-product .dj-acc__body ul li,
	.single-product .dj-acc__body ol li {
		font-size: 14px;
		line-height: 1.5;
		margin-bottom: 6px;
	}

	.single-product .dj-pdp-sections {
		border-radius: 0;
		padding: 0 var(--gutter-mobile, 12px);
	}

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

/* --- Colonne de gauche : galerie puis descriptif -------------------------- */

.single-product .dj-sous-galerie {
	margin-top: 24px;
}

/* Cet écart datait de la colonne de gauche, où un bloc suivait le descriptif.
   Dans la colonne centrale il est seul dans son conteneur : sa marge basse ne
   sépare plus rien et laissait 20 px de vide au bas du bloc. L'écart qui le
   suit appartient à l'encadré d'achat. */
.single-product .dj-sous-galerie > .dj-points-forts:last-child {
	margin-bottom: 0;
}

.single-product .dj-points-forts p:last-child,
.single-product .dj-points-forts ul:last-child {
	margin-bottom: 0;
}

@media (max-width: 992px) {
	/* Sur mobile la colonne de gauche n'est qu'un conteneur : c'est l'ordre
	   d'affichage qui compte, galerie puis achat puis descriptif. */
	.single-product .product-details-wrapper > .dj-colonne-gauche {
		display: contents;
	}

	/* La description courte passe AVANT la carte d'achat : on lit ce que le
	   produit est, puis on choisit sa variante et on l'ajoute au panier.
	   Reléguée en `order: 3`, elle se retrouvait après la livraison et le
	   bloc WhatsApp — mesuré à 881 px du haut de la colonne, soit dernière de
	   toute la fiche. */
	.single-product .dj-sous-galerie {
		margin-top: 16px;
		order: 1;
	}
}

/* --- Galerie CommerceKit : deux gris hérités de l'extension --------------- */

/* Pastille de contrôle de la galerie (#111) et vignette active (#555) : les
   deux seules valeurs hors palette qui restaient sur la fiche produit. */
/* Vignette retenue : un contour, pas un aplat. Le fond sombre débordait de
   l'image — une photo qui ne remplit pas sa case laissait voir deux barres
   verticales de chaque côté. Un contour épouse la case quelle que soit la
   forme de la photo. */
.cg-thumb-swiper .swiper-wrapper .swiper-slide.swiper-slide-thumb-active {
	background: transparent;
}

.single-product .commercekit-gallery-control,
.single-product .cgkit-gallery-zoom-btn {
	background: var(--color-text, #1a1a1a);
}

/* --- Sélecteurs de variation --------------------------------------------- */

/* Le libellé d'attribut arrivait en capitales depuis l'extension : « COULEUR »
   au milieu d'une colonne entièrement en casse normale. */
.single-product table.variations th.label label,
.single-product table.variations th.label label strong,
.single-product .cgkit-chosen-attribute {
	text-transform: none;
}

.single-product .cgkit-chosen-attribute {
	color: var(--dj-pdp-ink);
	font-weight: 400;
}

/* Intitulé « More options » de l'extension : jamais traduit et sans utilité
   au-dessus d'une liste d'options déjà visible. */
.single-product .cgkit-swatch-title {
	display: none;
}

/* Produit à option unique : pas de lien « Effacer », il ne ferait que griser
   le bouton d'achat. */
.single-product form.dj-variante-unique .reset_variations {
	display: none !important;
}

/* --- Questions clients ---------------------------------------------------- */

.dj-questions__liste {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.dj-question {
	border-bottom: 1px solid var(--dj-pdp-line);
	padding: 18px 0;
}

.dj-question:first-child {
	padding-top: 0;
}

.dj-question__texte,
.dj-question__reponse {
	display: flex;
	gap: 12px;
}

.dj-question__reponse {
	margin: 12px 0 0 34px;
}

/* Repère « Q » / « R » : c'est la convention des places de marché, elle évite
   d'avoir à lire l'auteur pour savoir qui parle. */
.dj-question__marque {
	align-items: center;
	background: var(--color-surface-2, #f4f6f9);
	border-radius: var(--radius-md, 10px);
	color: var(--dj-pdp-ink);
	display: inline-flex;
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 700;
	height: 22px;
	justify-content: center;
	width: 22px;
}

.dj-question__marque--r {
	background: var(--dj-pdp-ink);
	color: var(--color-surface, #fff);
}

.dj-question p {
	color: var(--dj-pdp-ink);
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
}

.dj-question__meta {
	color: var(--dj-pdp-muted) !important;
	font-size: 12px !important;
	margin-top: 4px !important;
}

.dj-questions__vide {
	color: var(--dj-pdp-ink);
	font-size: 14px;
	margin: 0 0 24px;
}

.dj-questions__message {
	border-radius: var(--radius-md, 10px);
	font-size: 14px;
	margin: 0 0 20px;
	padding: 12px 14px;
}

.dj-questions__message--ok {
	background: #f1f7f2;
	border: 1px solid #c5ddcc;
	color: var(--color-success, #1f7a3d);
}

.dj-questions__message--erreur {
	background: #fdf2f1;
	border: 1px solid #e8c6c3;
	color: var(--color-error, #c1292e);
}

.dj-questions__form {
	border-top: 1px solid var(--dj-pdp-line);
	max-width: 620px;
	padding-top: 22px;
}

.dj-questions__form-titre {
	color: var(--dj-pdp-ink);
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 14px;
	text-transform: none;
}

.dj-questions__champ {
	margin: 0 0 14px;
}

.dj-questions__champ label {
	color: var(--dj-pdp-ink);
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}

.dj-questions__champ input,
.dj-questions__champ textarea {
	border: 1px solid var(--color-border-strong, #e2e2e2);
	border-radius: var(--radius-md, 10px);
	font-size: 14px;
	padding: 10px 12px;
	width: 100%;
}

.dj-questions__champ input:focus,
.dj-questions__champ textarea:focus {
	border-color: var(--dj-pdp-ink);
	outline: 2px solid transparent;
}

.dj-questions__ligne {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Champ leurre : invisible pour les visiteurs, rempli par les robots. */
.dj-questions__leurre {
	height: 0;
	margin: 0;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.dj-questions__bouton {
	background: var(--dj-pdp-accent);
	border: 0;
	border-radius: var(--radius-md, 10px);
	color: var(--color-surface, #fff);
	cursor: pointer;
	font-size: var(--t-corps);
	font-weight: 600;
	padding: 11px 22px;
}

.dj-questions__bouton:hover {
	background: var(--dj-pdp-accent-dark);
}

.dj-questions__note {
	color: var(--dj-pdp-muted);
	font-size: 12px;
	margin: 10px 0 0;
}

@media (max-width: 600px) {
	.dj-questions__ligne {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Complétez votre achat ------------------------------------------------ */

.dj-bundle {
	background: var(--color-surface, #fff);
	border: 1px solid var(--dj-pdp-line);
	border-radius: var(--dj-pdp-radius);
	margin: 0 0 18px;
	padding: 22px 24px;
}

.dj-bundle__titre {
	color: var(--dj-pdp-ink);
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 18px;
	text-transform: none;
}

.dj-bundle__articles {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.dj-bundle__plus {
	align-self: center;
	color: var(--dj-pdp-muted);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
}

.dj-bundle__article {
	align-items: center;
	border: 1px solid var(--dj-pdp-line);
	border-radius: var(--dj-pdp-radius);
	cursor: pointer;
	display: grid;
	gap: 2px 12px;
	grid-template-areas:
		"case vignette nom"
		"case vignette prix";
	grid-template-columns: auto 64px minmax(0, 1fr);
	max-width: 290px;
	padding: 10px 12px;
}

/* Décoché : l'article reste lisible mais sort visiblement du total. */
.dj-bundle__article:has(input:not(:checked)) {
	opacity: 0.55;
}

.dj-bundle__article input {
	grid-area: case;
	margin: 0;
}

.dj-bundle__vignette {
	grid-area: vignette;
}

.dj-bundle__vignette img {
	border-radius: var(--radius-md, 10px);
	display: block;
	height: auto;
	width: 64px;
}

.dj-bundle__nom {
	align-self: end;
	color: var(--dj-pdp-ink);
	font-size: 13px;
	font-weight: 600;
	grid-area: nom;
	line-height: 1.35;
}

.dj-bundle__courant {
	color: var(--dj-pdp-ink);
	display: block;
	font-size: var(--t-meta);
	font-weight: 400;
}

.dj-bundle__prix {
	align-self: start;
	color: var(--dj-pdp-ink);
	font-size: 13px;
	font-weight: 700;
	grid-area: prix;
}

.dj-bundle__prix del {
	color: var(--dj-pdp-muted);
	font-weight: 400;
	margin-left: 6px;
}

.dj-bundle__pied {
	align-items: center;
	border-top: 1px solid var(--dj-pdp-line);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	margin-top: 18px;
	padding-top: 16px;
}

.dj-bundle__total {
	color: var(--dj-pdp-ink);
	font-size: 15px;
	margin: 0;
}

.dj-bundle__total strong {
	font-size: var(--t-h3);
	font-weight: 700;
}

.dj-bundle__bouton {
	background: var(--dj-pdp-accent);
	border: 0;
	border-radius: var(--radius-md, 10px);
	color: var(--color-surface, #fff);
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	padding: 12px 22px;
}

.dj-bundle__bouton:hover {
	background: var(--dj-pdp-accent-dark);
}

.dj-bundle__bouton[disabled] {
	background: var(--color-surface-2, #f4f6f9);
	color: var(--dj-pdp-muted);
	cursor: default;
}

@media (max-width: 700px) {
	.dj-bundle__article {
		max-width: none;
		width: 100%;
	}

	.dj-bundle__plus {
		display: none;
	}

	.dj-bundle__pied {
		align-items: stretch;
		flex-direction: column;
	}

	.dj-bundle__bouton {
		width: 100%;
	}
}

/* --- Bloc d'avis : synthèse à gauche, liste à droite ---------------------- */

/* En-tête de la section : étoiles et note moyenne à côté du titre. */
.single-product .dj-acc__note {
	align-items: center;
	display: inline-flex;
	font-size: 14px;
	gap: 8px;
	margin-left: 12px;
}

.single-product .dj-acc__note strong {
	font-weight: 700;
}

.single-product .dj-acc__note-sur {
	color: var(--dj-pdp-muted);
	font-weight: 400;
}

.single-product .dj-acc__note .star-rating {
	font-size: 13px;
}

.single-product .dj-avis__grille {
	display: grid;
	gap: 32px;
	grid-template-columns: 320px minmax(0, 1fr);
}

.single-product .dj-avis__resume {
	align-self: start;
	border: 1px solid var(--dj-pdp-line);
	border-radius: var(--dj-pdp-radius);
	padding: 20px;
}

.single-product .dj-avis__barres {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.single-product .dj-avis__barres li + li {
	margin-top: 10px;
}

/* Une ligne : note, étoile, jauge, nombre d'avis. */
.single-product .dj-avis__barre {
	align-items: center;
	background: none;
	border: 0;
	color: var(--dj-pdp-ink);
	cursor: pointer;
	display: grid;
	gap: 10px;
	grid-template-columns: 12px 14px minmax(0, 1fr) 54px;
	padding: 0;
	width: 100%;
}

.single-product .dj-avis__barre[disabled] {
	cursor: default;
}

.single-product .dj-avis__barre-note {
	font-size: 13px;
	text-align: right;
}

/* Étoile dessinée en masque : pas d'image à charger pour cinq lignes. */
.single-product .dj-avis__barre-etoile {
	background-color: var(--dj-pdp-accent);
	display: block;
	height: 13px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	width: 13px;
}

.single-product .dj-avis__barre-piste {
	background: var(--color-surface-2, #f4f6f9);
	border-radius: var(--radius-md, 10px);
	display: block;
	height: 8px;
	overflow: hidden;
}

.single-product .dj-avis__barre-jauge {
	background: var(--dj-pdp-accent);
	display: block;
	height: 100%;
}

.single-product .dj-avis__barre-compte {
	color: var(--dj-pdp-muted);
	font-size: 13px;
	text-align: right;
	white-space: nowrap;
}

/* Bouton de dépôt : contour, pas aplat — l'action principale de la page reste
   « Ajouter au panier ». */
.single-product .dj-avis__cta {
	border: 1px solid var(--dj-pdp-accent);
	border-radius: var(--dj-pdp-radius);
	color: var(--dj-pdp-accent);
	display: block;
	font-size: 14px;
	font-weight: 600;
	padding: 11px 16px;
	text-align: center;
	text-decoration: none;
}

.single-product .dj-avis__cta:hover {
	background: var(--dj-pdp-accent);
	color: var(--color-surface, #fff);
}

.single-product .dj-avis__moderation {
	color: var(--dj-pdp-muted);
	font-size: 12px;
	line-height: 1.5;
	margin: 14px 0 0;
}

.single-product .dj-avis__message {
	background: #f1f7f2;
	border: 1px solid #c5ddcc;
	border-radius: var(--dj-pdp-radius);
	color: var(--color-success, #1f7a3d);
	font-size: 14px;
	margin: 0 0 18px;
	padding: 12px 14px;
}

/* --- Un avis -------------------------------------------------------------- */

.single-product .dj-avis__colonne .commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-product li.dj-avis-item {
	margin: 0;
	padding: 0 0 22px;
}

.single-product li.dj-avis-item + li.dj-avis-item {
	/* Filet pointillé entre deux avis, comme sur la référence. */
	border-top: 1px dashed var(--color-border-strong, #e2e2e2);
	padding-top: 22px;
}

.single-product .dj-avis-item__haut {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 10px;
}

.single-product .dj-avis-item__date {
	color: var(--dj-pdp-ink);
	font-size: 13px;
}

.single-product .dj-avis-item__verifie {
	align-items: center;
	background: var(--color-surface-2, #f4f6f9);
	border-radius: var(--dj-pdp-radius);
	color: var(--dj-pdp-ink);
	display: inline-flex;
	font-size: 13px;
	gap: 7px;
	padding: 6px 10px;
}

.single-product .dj-avis-item__verifie svg {
	color: var(--color-success, #1f7a3d);
	flex-shrink: 0;
}

.single-product .dj-avis-item__titre {
	color: var(--dj-pdp-ink);
	font-size: 16px;
	font-weight: 700;
	margin: 12px 0 4px;
	text-transform: none;
}

.single-product .dj-avis-item__auteur {
	color: var(--dj-pdp-ink);
	font-size: 14px;
	margin: 0 0 10px;
}

.single-product .dj-avis-item .comment-text {
	margin: 0;
}

.single-product .dj-avis-item .description p {
	color: var(--dj-pdp-ink);
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 8px;
}

.single-product .dj-avis-item__pied {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	margin-top: 12px;
}

.single-product .dj-avis-item__utile {
	align-items: center;
	color: var(--dj-pdp-ink);
	display: inline-flex;
	font-size: 14px;
	gap: 10px;
}

.single-product .dj-avis-item__pied .review-helpful {
	align-items: center;
	background: none;
	border: 0;
	color: var(--dj-pdp-ink);
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	gap: 6px;
	padding: 4px 6px;
}

.single-product .dj-avis-item__pied .review-helpful:hover,
.single-product .dj-avis-item__pied .review-helpful[aria-pressed="true"] {
	color: var(--dj-pdp-accent);
}

.single-product .dj-avis-item__signaler {
	appearance: none;
	background: none;
	border: 0;
	color: var(--dj-pdp-accent);
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	padding: 4px 0;
	text-decoration: none;
}

.single-product .dj-avis-item__signalement {
	margin: 0;
}

.single-product .dj-avis-item__signaler:hover {
	text-decoration: underline;
}

@media (max-width: 860px) {
	.single-product .dj-avis__grille {
		gap: 24px;
		grid-template-columns: minmax(0, 1fr);
	}

	.single-product .dj-acc__note {
		margin-left: 0;
	}
}

/* Barre de tri des avis : elle vit maintenant dans la colonne de droite.
   Le décompte tient la gauche, le tri la droite. Auparavant le tri était seul
   et calé à droite : 671 px des 862 de la rangée restaient vides, juste en face
   de la carte de répartition qui, elle, démarre aussitôt.
   Et la marge basse part : l'écart avec la liste était décidé des deux côtés à
   la fois — 18 px ici et 2 rem là-bas, soit 50 px pour un seul vide. */
.single-product .dj-avis__colonne .reviews-toolbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	margin: 0;
}

.single-product .dj-avis__colonne .reviews-toolbar__compte {
	color: var(--dj-pdp-ink);
	font-size: var(--t-petit, 14px);
	margin: 0;
}

.single-product .dj-avis__colonne .reviews-toolbar__compte strong {
	font-weight: 700;
}

/* L'écart entre la barre et la liste, décidé à un seul endroit.
   « #reviews .commentlist » (comments.css) impose 2 rem au-dessus de 993 px et
   pèse un identifiant : il faut au moins autant pour reprendre la main. */
#reviews .dj-avis__colonne .commentlist {
	margin-top: var(--espace-bloc, 24px);
}

.single-product .dj-avis__colonne .reviews-toolbar__sort {
	align-items: center;
	display: flex;
	gap: 8px;
}

.single-product .dj-avis__colonne .reviews-toolbar__sort label {
	color: var(--dj-pdp-muted);
	font-size: 13px;
	margin: 0;
	white-space: nowrap;
}

.single-product .dj-avis__colonne .reviews-sort__select {
	border: 1px solid var(--color-border-strong, #e2e2e2);
	border-radius: var(--dj-pdp-radius);
	font-size: 13px;
	height: 36px;
	padding: 0 30px 0 10px;
	width: auto;
}

.single-product .woocommerce-verification-required {
	background: var(--color-surface-2, #f4f6f9);
	border-radius: var(--dj-pdp-radius);
	color: var(--dj-pdp-ink);
	font-size: 14px;
	margin: 20px 0 0;
	padding: 14px 16px;
}

/* L'orange de marque sur blanc mesure 2,3:1 : illisible pour un lien de
   14 px. Aucune variante de notre orange n'atteint 4,5:1 sur blanc, donc un
   lien se marque ici comme partout ailleurs sur le site — à l'encre, souligné. */
.single-product .woocommerce-verification-required a {
	color: var(--dj-pdp-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* --- Colonne centrale : promotion, prix, titre, note ---------------------- */

/* Bandeau d'économie, première ligne lue sur la référence. */
.single-product .dj-promo {
	align-items: center;
	background: var(--dj-pdp-accent);
	border-radius: var(--dj-pdp-radius);
	color: var(--color-surface, #fff);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	justify-content: space-between;
	margin: 0 0 14px;
	padding: 9px 14px;
}

.single-product .dj-promo__montant {
	font-size: 15px;
	font-weight: 700;
}

.single-product .dj-promo__fin {
	font-size: 12px;
	opacity: 0.9;
}

/* Un seul bloc gouverne la rangée du prix. Il y en avait quatre, écrits à des
   moments différents et tous à la même spécificité : le dernier l'emportait,
   si bien que la marge lue (2 px / 10 px) n'était celle d'aucune intention. */
.single-product .dj-prix {
	align-items: baseline;
	column-gap: 10px;
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 6px;
	row-gap: 2px;
}

/* L'extension enveloppe le prix dans un bloc : la pastille de remise, posée
   juste après, tombait une ligne plus bas. « display: contents » rend le prix
   lui-même enfant de la rangée, et les deux s'alignent sur la même ligne. */
.single-product .dj-prix .cgkit-as-variation-price {
	display: contents;
}

.single-product .dj-prix .price {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.single-product .dj-prix .price ins,
.single-product .dj-prix .price > .amount,
.single-product .dj-prix .price bdi {
	color: var(--dj-pdp-ink);
	font-size: var(--t-prix);
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
}

.single-product .dj-prix .price del {
	color: var(--dj-pdp-muted);
	font-size: 15px;
	font-weight: 400;
}

.single-product .dj-prix .price del bdi {
	color: var(--dj-pdp-muted);
	font-size: 15px;
	font-weight: 400;
}

/* Cette surcharge transformait la pastille en simple texte orange sur blanc :
   2,5:1 mesuré, soit un pourcentage de remise qu'on devine plus qu'on ne le
   lit. La pastille de la règle de base — fond orange, texte encre, 6,9:1 —
   est aussi ce que portent les cartes produit. */

.single-product .dj-savings {
	color: var(--dj-pdp-muted);
	font-size: 13px;
	margin: 0 0 12px;
}

/* Rythme de la tête de colonne.
 *
 * Quatre éléments — titre, réf., prix, note — étaient espacés de 10 px chacun :
 * aucun n'était groupé avec un autre, et 156 px de contenu occupaient 229 px.
 * Deux groupes désormais : le titre avec son prix, puis la ligne de
 * métadonnées. L'écart intérieur vaut 6 px, celui qui sépare deux groupes
 * 16 px, et le filet sous les métadonnées marque l'entrée dans le descriptif.
 */
.single-product .summary .product_title {
	margin-bottom: 6px;
}


/* `div.product .summary .price` (main.css) pèse trois classes et un élément et
   imposait 0,4rem / 1,1rem : 24 px de vide à l'intérieur du bloc du prix, qui
   mesurait 59 px de haut pour un prix de 35. Il faut au moins autant pour
   l'emporter. */
.single-product div.product .summary .dj-prix .price {
	margin: 0;
}

.single-product .dj-rating {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 0 0 16px;
	padding-bottom: 10px;
}

/* La réf. partage la rangée des métadonnées : même gris, même rang que le
   compteur de ventes. */
.single-product .dj-rating__ref {
	color: var(--dj-pdp-muted);
	font-size: var(--t-micro);
}

.single-product .dj-rating__note {
	color: var(--dj-pdp-ink);
	font-size: 14px;
	font-weight: 700;
}

.single-product .dj-rating__ventes {
	color: var(--dj-pdp-muted);
	font-size: 13px;
}

/* --- Colonne d'achat ------------------------------------------------------ */

/* Quantité puis les deux boutons, l'un sous l'autre. Le conteneur que
   CommerceKit observe pour sa barre collante garde sa boîte : on change sa
   direction, pas sa nature. */
/* Quantité et bouton d'ajout sur une seule rangée : la quantité garde sa
   largeur, le bouton prend tout le reste. L'étiquette « Quantité » qui
   occupait la colonne de gauche n'a plus lieu d'être — elle ne servait qu'à
   remplir le vide laissé par une pilule seule sur sa ligne. */
.single-product .dj-buybox .commercekit-sticky-atc-intersector {
	align-items: stretch;
	display: flex;
	gap: 12px;
}

.single-product .dj-buybox .commercekit-sticky-atc-intersector .quantity {
	flex: 0 0 auto;
	height: 48px;
	margin: 0;
	width: 112px;
}

.single-product .dj-buybox .commercekit-sticky-atc-intersector .single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 0;
}

/* Au-delà de ~340 px un bouton cesse de ressembler à un bouton et devient une
   bannière. Le plafond ne dépend d'aucune largeur d'écran : il valait pour la
   colonne de droite seulement, si bien qu'à 992 px — où la fiche repasse en une
   colonne — le bouton s'étalait sur 783 px. Sur mobile la rangée est plus
   étroite que 340 px, la règle ne s'y applique donc pas.
   `div.product .summary form.cart .button` de product.css pèse trois classes et
   trois éléments : il faut au moins autant pour l'emporter. */
.single-product div.product .summary .dj-buybox .commercekit-sticky-atc-intersector .single_add_to_cart_button,
.single-product div.product .summary .dj-buybox form.cart .single_add_to_cart_button {
	max-width: 340px;
}

/* Deux marges adjacentes se fondent en prenant la plus grande : les 16 px du
   formulaire l'emportaient sur les 12 px de la rangée d'icônes. Un seul écart
   dans tout l'encadré, 12 px — sauf au-dessus du bouton d'achat.
   Plus de marge haute : elle s'ajoutait aux 14 px de l'encadré et posait la
   première étiquette à 25 px du bord, contre 14 partout ailleurs. */
/* `div.product .summary form.cart` de product.css pèse trois classes et deux
   éléments : il faut au moins autant pour l'emporter. */
.single-product div.product .summary .dj-buybox form.cart {
	margin: 0 0 10px;
}

/* « Effacer » de WooCommerce est posé dans la dernière cellule des variantes et
   masqué par `visibility: hidden` tant qu'aucune variante n'est choisie : il
   reste donc dans le flux et réservait 22 px de ligne que personne ne voit,
   juste au-dessus de la rangée d'achat. Mesuré. Sorti du flux, il se range au
   bout de la ligne d'étiquette, où il y a de la place — et l'écart de 16 px
   entre les pastilles et la rangée d'achat redevient celui qu'on a décidé.
   Il n'est pas supprimé : il garde sa fonction dès qu'une variante est prise,
   et le sortir du flux évite aussi le saut de mise en page qu'un
   `display: none` aurait provoqué à la sélection. */
.single-product .dj-buybox table.variations td.value {
	position: relative;
}

.single-product .dj-buybox table.variations td.value .reset_variations {
	bottom: calc(100% + 8px);
	margin: 0;
	position: absolute;
	right: 0;
}

/* La barre collante de l'extension porte les mêmes classes que le formulaire
   de la page : elle garde la disposition qu'elle avait, et l'étiquette du
   champ n'y a pas sa place. */
.single-product .dj-buybox .commercekit_sticky-atc .commercekit-sticky-atc-intersector {
	display: flex;
	flex-direction: column;
	gap: 10px;
}



/* Ajout au panier : action secondaire face à « Acheter maintenant », donc en
   teinte claire de la couleur de marque, comme sur la référence. */
/* « Ajouter au panier » est l'action principale de la fiche : elle reste
   pleine. En teinte claire, elle se lisait comme un bouton désactivé — et sur
   les fiches à variantes, où elle était seule, la page semblait inutilisable. */
/* Le thème pose `height: 52px` ET `line-height: 52px` sur ce bouton. La marge
   intérieure verticale ajoutée ici par-dessus poussait le libellé hors de sa
   boîte : mesuré 30 px au-dessus du texte et 3 px en dessous, le mot tombait
   au ras du bas. On centre par le flux — une seule hauteur, pas trois
   déclarations qui se contredisent. */
/* Aucune `color` ici : la couleur du texte des boutons principaux est un
   réglage du Personnalisateur (« Primary button text color »), émis en ligne
   dans l'en-tête. La coder en dur ici l'écrasait, et le libellé repassait en
   blanc sur l'orange — 2,5:1 — sans que le réglage n'y puisse rien. */
.single-product .dj-buybox form.cart .single_add_to_cart_button {
	align-items: center;
	background: var(--dj-pdp-accent);
	border: 1px solid var(--dj-pdp-accent);
	display: flex;
	float: none;
	font-size: var(--t-fort);
	font-weight: 600;
	height: 52px;
	justify-content: center;
	line-height: 1.2;
	margin: 0;
	padding: 0 18px;
	width: 100%;
}

.single-product .dj-buybox form.cart .single_add_to_cart_button:hover {
	background: var(--dj-pdp-accent-dark);
	border-color: var(--dj-pdp-accent-dark);
}

/* Prix de la variante : masqué, parce que le prix du haut dit déjà la même
   chose. Sur un produit variable, WooCommerce réécrit « .dj-prix » à chaque
   changement de variante — vérifié : 129 900 → 149 900 en passant de 128 à
   256 Go. Le bloc de variation répétait donc le même montant 320 px plus bas.

   Et il mentait dans un cas : après un clic sur « Effacer », le prix du haut
   revient au prix de base (129 900) tandis que ce bloc gardait la valeur de la
   variante qu'on venait d'abandonner (149 900). Deux prix différents à l'écran
   sur une page de vente.

   Il reste dans le DOM : le script de WooCommerce y écrit, et sa disparition
   casserait le formulaire. Seule sa disponibilité, elle, est conservée — c'est
   la seule ligne de stock de la fiche pour un produit variable, et elle est
   juste par variante. */
.single-product .dj-buybox .woocommerce-variation-price {
	display: none;
}

/* Prix de la barre d'achat collante.
   Le gabarit du plugin le masquait en dur ; pdp-sections.js le révèle et le
   tient à jour. Reste à lui faire une place : le conteneur du bouton était en
   « display: block », le prix se serait mis au-dessus. */
.single-product .commercekit-sticky-add-to-cart__content-button {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: flex-end;
}

.single-product .commercekit-sticky-add-to-cart__content-price {
	color: var(--dj-pdp-ink);
	font-size: var(--t-fort, 16px);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

/* Le montant recopié porte les classes de prix de WooCommerce : on neutralise
   les tailles de la colonne, qui y pousseraient un chiffre de 32 px. */
.single-product .commercekit-sticky-add-to-cart__content-price .price,
.single-product .commercekit-sticky-add-to-cart__content-price .amount,
.single-product .commercekit-sticky-add-to-cart__content-price bdi,
.single-product .commercekit-sticky-add-to-cart__content-price ins {
	font-size: inherit;
	font-weight: inherit;
	margin: 0;
	text-decoration: none;
}

.single-product .commercekit-sticky-add-to-cart__content-price del {
	display: none;
}

@media (max-width: 992px) {
	/* La barre fait toute la largeur : le prix tient la gauche, le bouton le
	   reste. Il passe de 356 à environ 240 px — large, et le montant est enfin
	   lisible au moment de décider. */
	.single-product .commercekit-sticky-add-to-cart__content-button {
		justify-content: space-between;
	}

	/* La feuille du plugin masque ce prix sous 992 px — exactement là où il est
	   le plus utile, puisque c'est la seule largeur où le montant et le bouton
	   ne tiennent jamais ensemble à l'écran. On le reprend. */
	.single-product .commercekit-sticky-add-to-cart__content-price {
		display: block;
	}

	.single-product .commercekit-sticky-add-to-cart .sticky-atc_button {
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
	}
}

.single-product .dj-limite {
	color: var(--dj-pdp-muted);
	font-size: 12px;
	margin: 8px 0 0;
}

/* Partage et favoris : actions secondaires compactes mais nommées. Une icône
   seule est ambiguë sur mobile, où il n'existe aucun survol pour révéler son
   infobulle. */
/* Partage et liste d'envies : deux actions secondaires de même rang, donc deux
   carrés identiques de 44 px — le plancher d'une cible tenable au doigt. Avec
   leur libellé, elles pesaient 106 et 96 px de large et concurrençaient
   visuellement le bouton d'ajout, qui est l'action de la page. */
.single-product .dj-partage,
.single-product .dj-buybox .commercekit-wishlist a {
	align-items: center;
	background: none;
	border: 1px solid var(--color-border-strong, #e2e2e2);
	border-radius: var(--dj-pdp-radius);
	color: var(--dj-pdp-ink);
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	height: 44px;
	justify-content: center;
	margin: 0;
	padding: 0;
	position: relative;
	text-decoration: none;
	width: 44px;
}

/* Les libellés restent dans le DOM : une icône seule n'est lisible ni par un
   lecteur d'écran, ni par qui ne reconnaît pas le pictogramme. L'infobulle et
   `aria-label` portent le sens à l'écran. */
.single-product .dj-partage .dj-partage__texte,
.single-product .dj-partage .dj-partage__etat,
.single-product .dj-buybox .commercekit-wishlist a span {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Retour de copie : le bouton n'a pas de libellé pour dire ce qui s'est passé,
   c'est donc sa bordure qui le dit — le temps du message. Réussite et échec
   portent deux couleurs distinctes : un « Copie impossible » cerclé de vert se
   contredit lui-même, et c'est l'état d'échec que l'on croit alors réussi. */
.single-product .dj-partage.est-confirme {
	border-color: var(--dj-pdp-ok, #1f7a3d);
	color: var(--dj-pdp-ok, #1f7a3d);
}

.single-product .dj-partage.est-echoue {
	border-color: var(--dj-pdp-erreur, #c1292e);
	color: var(--dj-pdp-erreur, #c1292e);
}

.single-product .dj-partage:hover,
.single-product .dj-buybox .commercekit-wishlist a:hover {
	border-color: var(--dj-pdp-ink);
}

/* `.single-product .summary .commercekit-wishlist a.commercekit-save-wishlist`
   (main.css) pèse quatre classes et un élément et imposait `border: none` :
   le cœur restait nu à côté d'un partage encadré. On reprend son sélecteur au
   même niveau au lieu d'empiler un !important. */
.single-product .summary .dj-buybox .commercekit-wishlist a.commercekit-save-wishlist {
	background: none;
	border: 1px solid var(--color-border-strong, #e2e2e2);
	border-radius: var(--dj-pdp-radius);
	height: 44px;
	padding: 0;
	width: 44px;
}

.single-product .summary .dj-buybox .commercekit-wishlist a.commercekit-save-wishlist:hover {
	border-color: var(--dj-pdp-ink);
}

/* 18 px comme le cœur : deux carrés identiques dont les glyphes ne font pas
   la même taille se voient, même sans savoir dire pourquoi. */
.single-product .dj-partage__icone {
	background-color: currentColor;
	display: inline-block;
	height: 18px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.6' y1='10.5' x2='15.4' y2='6.5'/%3E%3Cline x1='8.6' y1='13.5' x2='15.4' y2='17.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.6' y1='10.5' x2='15.4' y2='6.5'/%3E%3Cline x1='8.6' y1='13.5' x2='15.4' y2='17.5'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	width: 18px;
}

@media (max-width: 992px) {
	/* Mobile : une seule colonne. L'ordre de lecture reste galerie, promotion,
	   prix, titre, note, achat, livraison, puis le descriptif. */
	.single-product .dj-promo {
		margin-bottom: 12px;
	}

	/* Le jeton porte déjà la bascule (32 px bureau / 28 px sous 768). Ce
	   1.75rem codé en dur s'appliquait dès 992 px et y rendait le prix de la
	   même taille que le titre : à 992, les deux mesuraient 28 px et le prix
	   ne dominait plus. Reste de l'ancien système fluide, que la conversion à
	   l'échelle n'avait pas attrapé — elle ne visait que les `clamp()`. */
	.single-product .dj-prix .price ins,
	.single-product .dj-prix .price > .amount,
	.single-product .dj-prix .price bdi {
		font-size: var(--t-prix);
	}

	.single-product .dj-buybox .single_add_to_cart_button {
		height: 52px;
	}
}

/* La rangée se contente de poser les deux carrés à gauche, sous le bouton
   d'ajout. Le thème pose une grille sur ce conteneur : une rangée flex de deux
   éléments de taille fixe est plus simple et ne laisse pas de colonne vide. */
.single-product .dj-buybox #shoptimizer-modals-wrapper {
	align-items: center;
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.single-product .dj-buybox #shoptimizer-modals-wrapper .commercekit-wishlist {
	margin: 0;
}

.single-product .dj-buybox #shoptimizer-modals-wrapper .commercekit-wishlist.full {
	margin-left: 0;
}

/* Le cœur de l'extension est peint par un ::before : sa boîte mesure 0 × 0 et
   ne centre donc rien. On lui donne une taille explicite. */
.single-product .dj-buybox .commercekit-wishlist a em.cg-wishlist,
.single-product .dj-buybox .commercekit-wishlist a em.cg-wishlist-t {
	display: block;
	height: 18px;
	margin: 0;
	position: relative;
	width: 18px;
}

.single-product .dj-buybox .commercekit-wishlist a em.cg-wishlist::before,
.single-product .dj-buybox .commercekit-wishlist a em.cg-wishlist-t::before {
	height: 18px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 18px;
}

/* 44 px est le plancher d'une cible tenable au doigt : c'est la valeur par
   défaut, et elle ne bouge pas là où l'on touche l'écran. Au pointeur fin ce
   plancher n'a pas lieu d'être — une souris vise au pixel près. Deux carrés de
   44 px posés sous un bouton de 52 pesaient presque autant que lui, alors que
   ce sont des actions secondaires. 36 px les remet à leur rang.
   Le glyphe suit, pour que le rapport plein/vide reste celui d'avant : 18 dans
   44 font 41 %, 15 dans 36 en font 42. C'est aussi la taille que le cœur
   prend déjà dans sa variante en ligne. */
@media (hover: hover) and (pointer: fine) {
	.single-product .dj-partage,
	.single-product .dj-buybox .commercekit-wishlist a,
	.single-product .summary .dj-buybox .commercekit-wishlist a.commercekit-save-wishlist {
		height: 36px;
		width: 36px;
	}

	.single-product .dj-partage__icone,
	.single-product .dj-buybox .commercekit-wishlist a em.cg-wishlist,
	.single-product .dj-buybox .commercekit-wishlist a em.cg-wishlist-t,
	.single-product .dj-buybox .commercekit-wishlist a em.cg-wishlist::before,
	.single-product .dj-buybox .commercekit-wishlist a em.cg-wishlist-t::before {
		height: 15px;
		width: 15px;
	}
}

/* Le descriptif vit dans la colonne centrale, sous la note. L'écart qui l'en
   sépare appartient à la note — un seul des deux le porte, sinon les marges
   s'additionnent sans que personne n'ait décidé du total. */
.single-product .summary .dj-sous-galerie {
	margin-top: 0;
}

/* --- Pastilles de variante ------------------------------------------------ */

/* Une pastille est une case de choix, pas un pavé. L'extension peint la
   pastille retenue en noir plein (#111) avec un sélecteur à cinq classes : il
   faut au moins la même profondeur pour reprendre la main, d'où ces sélecteurs
   longs — ils suivent exactement la structure de l'extension. */
.single-product .cgkit-as-wrap .cgkit-attribute-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-product .cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch {
	margin: 0;
	padding: 0;
	width: auto;
}

.single-product .cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button button {
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-border-strong, #e2e2e2);
	border-radius: var(--dj-pdp-radius);
	color: var(--dj-pdp-ink);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	height: auto;
	line-height: 1.2;
	/* 44 px : le plancher d'une cible tenable au doigt. Le nuancier décide de
	   la variante achetée ; le rater coûte un mauvais choix. */
	min-height: 44px;
	min-width: 56px;
	padding: 8px 14px;
	width: auto;
}

.single-product .cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button button:not(.cgkit-disabled):hover {
	background: var(--color-surface, #fff);
	border-color: var(--dj-pdp-ink);
}

/* Pastille retenue : un trait, pas un aplat.
   Le fond orange pâle qui était ici est la signature d'une interface générée —
   une teinte délavée de l'accent posée derrière l'élément choisi. Le site
   marque déjà « ceci est choisi » autrement, et sans aplat : la carte de point
   relais du tunnel le fait avec une bordure orange (cart-checkout.css:1697).
   On reprend ce vocabulaire. Trois états distincts, aucun fond coloré :
     au repos  — filet gris
     au survol — filet encre
     retenue   — double filet orange (bordure + ombre intérieure) et graisse 700,
                 pour que l'état ne repose pas sur la seule couleur. */
.single-product .cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button button.cgkit-swatch-selected {
	background: var(--color-surface, #fff);
	border-color: var(--dj-pdp-accent);
	box-shadow: inset 0 0 0 1px var(--dj-pdp-accent);
	color: var(--dj-pdp-ink);
	font-weight: 700;
}

/* Variante indisponible : visible mais éteinte — on doit savoir qu'elle existe. */
.single-product .cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button button.cgkit-disabled {
	background: var(--color-surface-2, #f4f6f9);
	border-color: var(--color-border, #ededed);
	color: var(--dj-pdp-muted);
	cursor: default;
}

.single-product table.variations th.label label {
	font-size: 14px;
	margin-bottom: 8px;
}

/* --- Largeur de lecture des sections -------------------------------------- */

/* La carte garde sa pleine largeur ; seul le texte suivi est plafonné. Sur
   1 254 px, un paragraphe faisait près de 150 caractères par ligne — au-delà
   de 80, l'œil perd la ligne en revenant à la marge gauche. Les tableaux, les
   grilles d'avis et les listes de produits ne sont pas concernés : ils se
   lisent en colonnes, pas en lignes. */
.single-product .dj-acc__body > p,
.single-product .dj-acc__body > ul,
.single-product .dj-acc__body > ol,
.single-product .dj-acc__body > h2,
.single-product .dj-acc__body > h3,
.single-product .dj-acc__body > h4,
.single-product .dj-acc__body .woocommerce-product-details__short-description,
.single-product .dj-acc__body .dj-question p,
.single-product .dj-acc__body .dj-avis-item .description p {
	/* 64ch et non 72ch : l'unité `ch` vaut la largeur du chiffre « 0 », plus
	   large que la moyenne des lettres minuscules. Mesuré à 72ch : 73 à 89
	   caractères par ligne, donc au-delà du seuil que ce plafond est censé
	   tenir. Mesuré ensuite : 64ch donnait encore 81, 62ch donne 78. Un
	   plafond qui n'atteint pas son but est plus trompeur que pas de plafond
	   du tout — d'où une valeur vérifiée à la mesure et non déduite. */
	max-width: 62ch;
}

@media (max-width: 992px) {
	/* --- Cartes de pleine largeur sur mobile ------------------------------
	   Les cartes s'arrêtaient à 12 px du bord et ajoutaient 12 px de marge
	   intérieure : une bande grise courait le long des côtés et le texte
	   était rentré de 24 px. Les grandes plateformes font courir la carte
	   d'un bord à l'autre et ne gardent les 12 px qu'à l'intérieur. Le gris
	   ne se voit plus qu'entre deux cartes. */
	.single-product .product-details-wrapper,
	.single-product .dj-pdp-sections,
	.single-product .related-wrapper > section,
	.single-product .related-wrapper > section.products,
	.single-product .related-wrapper > .related.products,
	.single-product .related-wrapper > .upsells.products,
	/* À citer explicitement : depuis que la règle de bureau pèse trois
	   classes, `.related-wrapper > section` ne suffit plus à l'atteindre et
	   la section gardait 20 px de marge latérale là où les autres en ont 12. */
	.single-product .related-wrapper > .recently-viewed-products,
	.single-product .dj-tags {
		border-radius: var(--dj-pdp-radius);
		margin-left: 0;
		margin-right: 0;
		/* Une seule marge intérieure pour toutes les cartes : les
		   recommandations en avaient 20 là où les autres en ont 12. */
		padding-left: var(--gutter-mobile, 12px);
		padding-right: var(--gutter-mobile, 12px);
	}

	/* Le plein-bord appartient au CONTENEUR, la marge intérieure aux CARTES.
	   L'inverse ne marche pas : les marges négatives d'une carte ne font
	   qu'annuler la marge intérieure de son parent, la carte retombe à 366 px
	   et laisse 12 px de gris de chaque côté — mesuré, puis corrigé. */
	.single-product .dj-pdp-sections {
		padding-left: 0;
		padding-right: 0;
	}

	.single-product .dj-pdp-section {
		border-radius: 0;
		padding-left: var(--gutter-mobile, 12px);
		padding-right: var(--gutter-mobile, 12px);
	}

	/* Le relâchement du plafond de lecture qui se trouvait ici est supprimé :
	   appliqué jusqu'à 992 px, il laissait les paragraphes courir sur 953 px —
	   mesuré, 145 caractères par ligne, pour un seuil de 80. Sur une colonne
	   plus étroite que 62ch, le plafond de la règle de base ne gêne pas. */
}

/* --- Listes dans les contenus rédigés ------------------------------------- */

/* Les listes du descriptif perdaient leurs puces : le thème remet bien
   « list-style: disc », mais sans marge gauche. Avec des puces en position
   « outside », elles sont dessinées hors de la boîte, donc invisibles, et la
   liste se lit comme un bloc de texte. Il faut leur laisser la place. */
.single-product .dj-acc__body ul,
.single-product .dj-acc__body ol {
	margin: 0 0 1.1em;
	padding-left: 1.35em;
}

.single-product .dj-acc__body ul {
	list-style: disc outside;
}

.single-product .dj-acc__body ol {
	list-style: decimal outside;
}

.single-product .dj-acc__body ul ul {
	list-style: circle outside;
}

.single-product .dj-acc__body li {
	line-height: 1.55;
	margin-bottom: 0.35em;
}

.single-product .dj-acc__body li:last-child {
	margin-bottom: 0;
}

/* Une liste imbriquée respire moins que sa parente. */
.single-product .dj-acc__body li > ul,
.single-product .dj-acc__body li > ol {
	margin: 0.35em 0 0.5em;
}

/* Les listes maison (points forts, avis, questions) gardent leur mise en forme
   propre : elles ne sont pas du texte rédigé. */
.single-product .dj-acc__body .dj-points,
.single-product .dj-acc__body .dj-avis__barres,
.single-product .dj-acc__body .dj-questions__liste,
.single-product .dj-acc__body ul.products,
.single-product .dj-acc__body .commentlist {
	list-style: none;
	padding-left: 0;
}

/* --- Vocabulaire de surface et échelle typographique ---------------------- */

/* Panneaux : une seule bordure, celle des panneaux. N'y figurent plus ni la
   galerie ni le bloc d'achat, qui ne sont plus encadrés. */
.single-product .dj-livraison,
.single-product .dj-whatsapp,
.single-product section.commercekit-sticky-add-to-cart {
	border-color: var(--color-border, #ededed);
}

/* Contrôles : la bordure marquée, parce qu'on peut agir dessus. */
.single-product .dj-buybox .quantity,
.single-product .dj-partage,
.single-product .dj-buybox .commercekit-wishlist a {
	border-color: var(--color-border-strong, #e2e2e2);
}

/* Un cran de moins dans l'échelle : « Points forts : », « À propos de ce
   produit » et « En stock » étaient à 14 px, à un pixel du corps de texte (13)
   et de l'emphase (15). Trois tailles qu'aucun œil ne distingue, c'est une
   échelle qui n'en est pas une. */
.single-product .dj-points__titre,
.single-product .dj-buybox p.stock,
.single-product .sticky-atc_button {
	font-size: 15px;
}

/* Bouton de navigation de la galerie : blanc opaque sur bordure de panneau.
   Le blanc à 75 % d'opacité laissait voir la photo par transparence — un effet
   « verre » que rien ne justifie sur une fiche produit. */
/* L'extension pose ce fond via un sélecteur à identifiant : il faut reprendre
   le même identifiant pour le remplacer, sans recourir à !important. */
.single-product #commercegurus-pdp-gallery .swiper-button-next,
.single-product #commercegurus-pdp-gallery .swiper-button-prev,
.single-product .images .swiper-button-next,
.single-product .images .swiper-button-prev,
.single-product .woocommerce-product-gallery .swiper-button-next,
.single-product .woocommerce-product-gallery .swiper-button-prev {
	background-color: var(--color-surface, #fff);
	border: 1px solid var(--color-border, #ededed);
	/* Seuls rayons de la fiche restés hors de l'échelle du site. */
	border-radius: var(--radius-md, 10px);
	/* 42 px mesurés, deux pixels sous le plancher de 44. */
	height: 44px;
	width: 44px;
}


/* --- Densité de l'encadré livraison --------------------------------------
   Mesuré avant resserrage : 452 px de haut, dont 55 px pour le seul mot
   « Livraison » et 58 px pour un choix de ville passé à la ligne. Une carte
   d'information qui occupe plus de place que la carte d'achat inverse la
   hiérarchie de la colonne.
   Les deux règles qui vivaient ici ont rejoint les déclarations d'origine :
   elles répétaient un `padding-bottom` déjà posé et ramenaient l'écart entre
   lignes à 6 px, une valeur hors de l'échelle de 8. */

/* --- Alignement de la ligne de prix --------------------------------------
   Mesuré : les trois éléments reposaient bien sur la même ligne de base, mais
   les écarts étaient inégaux — 8 px entre le prix et le prix barré, 22 px
   avant la pastille de remise, parce que le texte réservé aux lecteurs
   d'écran occupait encore de la place dans le flux. */

/* Le prix, le prix barré et la pastille deviennent trois éléments d'une même
   rangée. Tant que le prix barré vivait dans un conteneur imbriqué et la
   pastille à l'extérieur, les deux écarts étaient réglés par deux contextes
   différents : 8 px d'un côté, 22 px de l'autre. */

/* Un seul écart gouverne la rangée. Les marges résiduelles qui traînaient sur
   le prix barré (4 px à droite) et sur la pastille (8 px à gauche) donnaient
   8 px d'un côté et 22 px de l'autre. */
/* « div.product .summary .price » du thème impose 8 px : il faut au moins la
   même profondeur pour reprendre la main sans !important. */
.single-product div.product .dj-prix .price {
	column-gap: 10px;
}

.single-product .dj-prix .price ins,
.single-product .dj-prix .price del,
.single-product .dj-prix .dj-remise {
	margin: 0;
}

/* L'ordre d'affichage est déjà inversé par le thème (prix soldé avant prix
   barré) : la pastille se range après les deux. */
.single-product .dj-prix .dj-remise {
	order: 3;
}

.single-product .dj-prix .screen-reader-text {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.single-product .dj-prix .price del,
.single-product .dj-prix .price del bdi {
	font-size: 15px;
}

/* Le prix suit le titre : il n'ouvre plus la colonne. */

/* --- Galerie en une colonne : hauteur maîtrisée ---------------------------
   Sous 992 px la fiche passe en une colonne et la galerie prend toute la
   largeur. L'image restant carrée, elle atteignait 885 × 885 px sur un écran
   de 900 px — presque un écran entier pour une seule photo, le reste de la
   fiche repoussé hors de vue. Sur téléphone, pleine largeur est juste ; entre
   les deux, on plafonne la photo et on la centre. */
/* Le seuil est à 481 px et non 601 : sur un écran de 600 px, une photo de
   585 px de haut reste disproportionnée. En dessous, c'est un téléphone et la
   pleine largeur est la bonne réponse. */
@media (min-width: 481px) and (max-width: 992px) {
	.single-product .product-details-wrapper .cg-main-swiper,
	.single-product .product-details-wrapper .woocommerce-product-gallery__wrapper,
	.single-product .product-details-wrapper .flex-viewport,
	.single-product .product-details-wrapper .cg-thumb-swiper {
		margin-left: auto;
		margin-right: auto;
		max-width: 460px;
	}
}

/* --- Vignettes de galerie -------------------------------------------------
   Relevé avant correction : 45 × 35 px, image déformée (`object-fit: fill`),
   opacité 0,4 pour toutes, et surtout `cursor: auto` — rien n'indiquait
   qu'elles étaient cliquables. */

.single-product .cg-thumb-swiper .swiper-slide {
	border-radius: var(--dj-pdp-radius, 4px);
	cursor: pointer;
	height: auto;
	/* Assez estompée pour que la vignette retenue se détache, assez lisible
	   pour qu'on distingue les photos. 0,4 les rendait illisibles. */
	opacity: 0.72;
	overflow: hidden;
	transition: opacity var(--dj-t-rapide, 150ms) ease;
	/* Pas de largeur ici : l'extension en pose une en ligne dans l'en-tête
	   (`.cg-thumbs-5.cg-thumb-swiper .swiper-slide { width: 20% }`), de même
	   spécificité et déclarée après — elle l'emporte. Le réglage se fait donc
	   par le nombre de vignettes (filtre PHP, 5), pas en pixels ici : à 5
	   vignettes la case fait 88 px et la photo 78 px une fois retirés les
	   10 px de marge intérieure de l'extension. */
}

/* Le cadre de sélection vit sur l'IMAGE, pas sur la case.
   Une ombre interne — comme un fond — est peinte sous le contenu : la photo
   couvrait le centre et il ne restait que deux bandes verticales sur les côtés
   de la case, plus large que la photo. Une bordure appartient à la boîte de
   l'image : elle l'encadre exactement, quelle que soit la photo. */
.single-product .cg-thumb-swiper .swiper-slide img {
	aspect-ratio: 1 / 1;
	border: 2px solid transparent;
	border-radius: var(--dj-pdp-radius, 4px);
	box-sizing: border-box;
	display: block;
	height: auto;
	/* « fill » étirait les photos à la taille de la case. */
	object-fit: cover;
	transition: border-color var(--dj-t-rapide, 150ms) ease;
	width: 100%;
}

.single-product .cg-thumb-swiper .swiper-slide:hover img {
	border-color: var(--color-border-strong, #e2e2e2);
}

.single-product .cg-thumb-swiper .swiper-slide.swiper-slide-thumb-active img {
	border-color: var(--dj-pdp-accent, #FC803C);
}

.single-product .cg-thumb-swiper .swiper-slide:hover {
	opacity: 1;
}

.single-product .cg-thumb-swiper .swiper-slide.swiper-slide-thumb-active {
	opacity: 1;
}

/* Le pointeur manquait aussi sur la photo principale et ses flèches. */
.single-product #commercegurus-pdp-gallery .swiper-button-next,
.single-product #commercegurus-pdp-gallery .swiper-button-prev,
.single-product .cg-main-swiper .swiper-slide {
	cursor: pointer;
}

/* Ville à laquelle les délais s'appliquent. Depuis le retrait du sélecteur,
   ce sont ceux de la première ville de la liste : sans cette mention, la carte
   promettait « dès demain » à un acheteur de Garoua, réglé à 3 à 5 jours. */
.single-product .dj-livraison__portee {
	color: var(--dj-pdp-muted);
	font-size: var(--t-micro);
	/* 12 et non 10 : l'écart qui sépare deux groupes dans cette carte vaut 12
	   (titre → liste), celui qui sépare deux lignes d'un même groupe vaut 8. */
	margin: 12px 0 0;
}