/**
 * Widgets de contenu DIX — styles front.
 * Réutilise les variables du thème (:root) avec fallbacks, compatible dark mode
 * via [data-theme] puisque les variables sont redéfinies par le thème.
 */

.dix-widget-error {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-error, #ef4444);
	border-radius: var(--radius-md, 0.375rem);
	background: color-mix(in srgb, var(--color-error, #ef4444) 8%, transparent);
	color: var(--color-error, #ef4444);
	font-size: 0.9em;
}

/* ------------------------------------------------------------------ */
/* Encadré éditorial (callout)                                         */
/* ------------------------------------------------------------------ */

.dix-callout {
	display: flex;
	gap: var(--spacing-4, 1rem);
	margin: var(--spacing-6, 1.5rem) 0;
	padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
	border-radius: var(--radius-lg, 0.5rem);
	border-left: 4px solid var(--color-info, #3b82f6);
	background: var(--color-bg-secondary, #f9fafb);
	color: var(--color-text, inherit);
}
.dix-callout__icon {
	flex: 0 0 auto;
	font-size: 22px;
	width: 22px;
	height: 22px;
	color: var(--color-info, #3b82f6);
}
.dix-callout__body {
	min-width: 0;
}
.dix-callout__title {
	margin: 0 0 0.25rem;
	font-weight: var(--font-weight-bold, 700);
}
.dix-callout__content > :first-child { margin-top: 0; }
.dix-callout__content > :last-child { margin-bottom: 0; }

.dix-callout--tip {
	border-left-color: var(--color-secondary, #10b981);
}
.dix-callout--tip .dix-callout__icon { color: var(--color-secondary, #10b981); }

.dix-callout--warning {
	border-left-color: var(--color-warning, #f59e0b);
}
.dix-callout--warning .dix-callout__icon { color: var(--color-warning, #f59e0b); }

.dix-callout--key {
	border-left-color: var(--color-accent, #f59e0b);
}
.dix-callout--key .dix-callout__icon { color: var(--color-accent, #f59e0b); }

.dix-callout--quote {
	border-left-color: var(--color-text-muted, #71717a);
	font-style: italic;
}
.dix-callout--quote .dix-callout__icon { color: var(--color-text-muted, #71717a); }

/* ------------------------------------------------------------------ */
/* Fiche produit / CTA                                                 */
/* ------------------------------------------------------------------ */

.dix-product-grid {
	display: grid;
	gap: var(--spacing-6, 1.5rem);
	margin: var(--spacing-6, 1.5rem) 0;
}
/* Encarts horizontaux : on les empile (une fiche par ligne), même à plusieurs. */
.dix-product-grid--multi {
	grid-template-columns: 1fr;
}

/* Encart horizontal : image à gauche, contenu à droite (plus large que haut). */
.dix-product {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-lg, 0.5rem);
	overflow: hidden;
	background: var(--color-bg, #fff);
	transition: box-shadow var(--transition-base, 200ms ease);
}
.dix-product:hover {
	box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
}

/* Image à gauche, taille bornée pour rester compacte. */
.dix-product__media {
	flex: 0 0 clamp(110px, 26%, 180px);
	display: block;
}
.dix-product__media img,
.dix-product__img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.dix-product__info {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2, 0.5rem);
	padding: var(--spacing-4, 1rem);
	flex: 1 1 auto;
	min-width: 0;
}
.dix-product__name {
	margin: 0;
	font-size: var(--font-size-lg, 1.125rem);
}
.dix-product__name a {
	color: inherit;
	text-decoration: none;
}
.dix-product__excerpt {
	margin: 0;
	font-size: 0.9em;
	color: var(--color-text-secondary, #6b7280);
}
.dix-product__price {
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-primary, #1e3a8a);
}
.dix-product__action {
	margin-top: auto;
}
/* Bouton aligné à gauche, dimensionné au contenu (style .btn du thème). */
.dix-product__btn {
	align-self: flex-start;
}

/* Bannière : variante encore plus compacte (image plus petite). */
.dix-product--banner .dix-product__media {
	flex: 0 0 clamp(84px, 20%, 120px);
}

/* Mobile : repasse en vertical, image en bandeau. */
@media (max-width: 480px) {
	.dix-product {
		flex-direction: column;
	}
	.dix-product__media {
		flex-basis: auto;
	}
	.dix-product__media img,
	.dix-product__img {
		aspect-ratio: 16 / 10;
	}
}

/* ------------------------------------------------------------------ */
/* Comparatif                                                          */
/* ------------------------------------------------------------------ */

.dix-compare {
	margin: var(--spacing-6, 1.5rem) 0;
	overflow-x: auto;
}
.dix-compare__table {
	width: 100%;
	border-collapse: collapse;
}
.dix-compare__table th,
.dix-compare__table td {
	padding: var(--spacing-4, 1rem);
	text-align: center;
	border: 1px solid var(--color-border, #e5e7eb);
	vertical-align: middle;
}
.dix-compare__table thead th {
	background: var(--color-bg-secondary, #f9fafb);
}
.dix-compare__media img {
	max-width: 90px;
	height: auto;
	margin: 0 auto 0.5rem;
	display: block;
}
.dix-compare__name {
	display: block;
	font-weight: var(--font-weight-bold, 700);
}
.dix-compare__rating strong { color: var(--color-accent, #f59e0b); }
.dix-compare__muted { color: var(--color-text-muted, #71717a); font-size: 0.85em; }
.dix-compare__btn { display: inline-block; }

.dix-stock--in { color: var(--color-stock-in, #28a745); font-weight: 600; }
.dix-stock--out { color: var(--color-stock-out, #c82333); font-weight: 600; }

/* Comparatif responsive : passage en cartes empilées */
@media (max-width: 640px) {
	.dix-compare__table,
	.dix-compare__table thead,
	.dix-compare__table tbody,
	.dix-compare__table tr,
	.dix-compare__table th,
	.dix-compare__table td {
		display: block;
		width: 100%;
	}
	.dix-compare__table td {
		text-align: left;
		position: relative;
		padding-left: 45%;
	}
	.dix-compare__table td[data-label]::before {
		content: attr(data-label);
		position: absolute;
		left: var(--spacing-4, 1rem);
		font-weight: 600;
		color: var(--color-text-secondary, #6b7280);
	}
}

/* ------------------------------------------------------------------ */
/* FAQ accordéon                                                       */
/* ------------------------------------------------------------------ */

.dix-faq {
	margin: var(--spacing-6, 1.5rem) 0;
}
.dix-faq__title {
	font-size: var(--font-size-xl, 1.25rem);
	font-weight: var(--font-weight-bold, 700);
	margin: 0 0 var(--spacing-4, 1rem);
}
.dix-faq__item {
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-md, 0.375rem);
	margin-bottom: var(--spacing-2, 0.5rem);
	overflow: hidden;
}
.dix-faq__question {
	cursor: pointer;
	padding: var(--spacing-4, 1rem);
	font-weight: 600;
	list-style: none;
	position: relative;
	padding-right: 2.5rem;
}
.dix-faq__question::-webkit-details-marker { display: none; }
.dix-faq__question::after {
	content: '+';
	position: absolute;
	right: var(--spacing-4, 1rem);
	font-size: 1.2em;
	color: var(--color-primary, #1e3a8a);
}
.dix-faq__item[open] .dix-faq__question::after { content: '−'; }
.dix-faq__item[open] .dix-faq__question {
	background: var(--color-bg-secondary, #f9fafb);
}
.dix-faq__answer {
	padding: 0 var(--spacing-4, 1rem) var(--spacing-4, 1rem);
}
.dix-faq__answer > :first-child { margin-top: var(--spacing-4, 1rem); }

/* ------------------------------------------------------------------ */
/* Galerie                                                             */
/* ------------------------------------------------------------------ */

.dix-gallery {
	margin: var(--spacing-6, 1.5rem) 0;
}
.dix-gallery--grid {
	display: grid;
	gap: var(--spacing-2, 0.5rem);
}
.dix-gallery--cols-2 { grid-template-columns: repeat(2, 1fr); }
.dix-gallery--cols-3 { grid-template-columns: repeat(3, 1fr); }
.dix-gallery--cols-4 { grid-template-columns: repeat(4, 1fr); }

.dix-gallery--grid .dix-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-md, 0.375rem);
}

/* Mosaïque (masonry via colonnes CSS) */
.dix-gallery--masonry {
	column-gap: var(--spacing-2, 0.5rem);
}
.dix-gallery--masonry.dix-gallery--cols-2 { column-count: 2; }
.dix-gallery--masonry.dix-gallery--cols-3 { column-count: 3; }
.dix-gallery--masonry.dix-gallery--cols-4 { column-count: 4; }
.dix-gallery--masonry .dix-gallery__item {
	display: block;
	margin-bottom: var(--spacing-2, 0.5rem);
	break-inside: avoid;
}
.dix-gallery--masonry .dix-gallery__item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-md, 0.375rem);
}

.dix-gallery__item {
	cursor: zoom-in;
	overflow: hidden;
}

@media (max-width: 600px) {
	.dix-gallery--cols-3,
	.dix-gallery--cols-4 { grid-template-columns: repeat(2, 1fr); }
	.dix-gallery--masonry.dix-gallery--cols-3,
	.dix-gallery--masonry.dix-gallery--cols-4 { column-count: 2; }
}

/* Lightbox */
.dix-lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal, 500);
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.9);
	cursor: zoom-out;
}
.dix-lightbox img {
	max-width: 92vw;
	max-height: 86vh;
	border-radius: var(--radius-md, 0.375rem);
}
.dix-lightbox__caption {
	position: absolute;
	bottom: 5vh;
	left: 0;
	right: 0;
	text-align: center;
	color: #fff;
	font-size: 0.9em;
	padding: 0 1rem;
}
.dix-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 0;
	color: #fff;
	font-size: 2.5rem;
	cursor: pointer;
	padding: 0 1rem;
	opacity: 0.8;
}
.dix-lightbox__nav:hover { opacity: 1; }
.dix-lightbox__prev { left: 0; }
.dix-lightbox__next { right: 0; }