/* Jour Deux — blocs métier. Les couleurs reprennent les variables du thème
   avec une valeur de secours, pour rester lisibles si le thème change. */
.jd-products,
.jd-offer,
.jd-section {
	--jd-c-forest: var(--wp--preset--color--foret, #17211d);
	--jd-c-chalk: var(--wp--preset--color--craie, #f4f2ea);
	--jd-c-citron: var(--wp--preset--color--citron, #d7f34a);
	--jd-c-mineral: var(--wp--preset--color--mineral, #dce5df);
	--jd-c-line: color-mix(in srgb, var(--jd-c-forest) 18%, transparent);
}

/* Fil d'Ariane */
.jd-breadcrumb ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
}
.jd-breadcrumb li + li::before {
	content: "›";
	margin-right: 0.5rem;
	opacity: 0.6;
}

/* Ligne de méthode : information secondaire, sous l'offre */
.jd-status-wrap { margin-top: 0.75rem; }
.jd-status {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--jd-c-muted, #46524a);
}
.jd-status a { color: inherit; }
.jd-flag {
	display: inline-block;
	margin: 0 0 0.5rem;
	padding: 0.2rem 0.6rem;
	border: 1px solid currentColor;
	border-radius: 0;
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.09em;
}
.jd-flag--test {
	background: #fff4d6;
	color: #5a3b00;
	border-color: #c28a00;
}

/* Offre */
.jd-offer {
	padding: 1.25rem 0 0;
	border-top: 3px solid var(--jd-c-forest, #17211d);
}
.jd-offer p {
	margin: 0 0 0.5rem;
}
.jd-offer__price strong {
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
}
.jd-offer__date,
.jd-offer__availability,
.jd-offer__mention {
	font-size: 0.9375rem;
}
.jd-offer__seller {
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
}
.jd-offer__cta {
	margin: 1rem 0 0.75rem;
}
.jd-offer__cta .wp-block-button__link {
	box-sizing: border-box;
	width: 100%;
	background: var(--jd-c-citron);
	color: var(--jd-c-forest);
	border: 2px solid var(--jd-c-forest);
	border-radius: 0;
	font-weight: 800;
	padding: 0.9rem 1.25rem;
	text-decoration: none;
}
.jd-offer__cta .wp-block-button__link:hover {
	text-decoration: underline;
}
.jd-offer--withdrawn,
.jd-offer--none,
.jd-offer--incomplete {
	background: var(--jd-c-mineral);
}

.jd-admin-note {
	margin-top: 0.75rem;
	padding: 0.75rem 1rem;
	background: #fff4d6;
	color: #3d2800;
	border-left: 4px solid #c28a00;
	font-size: 0.875rem;
}
.jd-admin-note ul {
	margin: 0.25rem 0 0 1.25rem;
}

/* Sections de fiche */
.jd-section {
	margin-block: 2.5rem 0;
}
.jd-section h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0 0 1rem;
}
.jd-table-wrap {
	overflow-x: auto;
}
.jd-specs {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	min-width: 28rem;
}
.jd-specs th,
.jd-specs td {
	text-align: left;
	padding: 0.65rem 0.75rem;
	border-bottom: 1px solid var(--jd-c-line);
	vertical-align: top;
}
.jd-specs thead th {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.jd-unknown {
	font-style: italic;
	opacity: 0.85;
}
.jd-conditions {
	margin: 0;
	display: grid;
	gap: 0;
}
.jd-conditions > div {
	display: grid;
	grid-template-columns: minmax(9rem, 14rem) 1fr;
	gap: 1rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--jd-c-line);
}
.jd-conditions dt {
	font-weight: 700;
}
.jd-conditions dd {
	margin: 0;
}
@media (max-width: 480px) {
	.jd-conditions > div {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}
}
.jd-sources ul {
	padding-left: 1.25rem;
}

/* Cartes produit */
.jd-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 21rem));
	justify-content: start;
	gap: clamp(1.25rem, 2.5vw, 2rem);
}
.jd-card-product {
	position: relative;
	display: flex;
	flex-direction: column;
}
.jd-card-product:focus-within {
	outline: 3px solid var(--jd-c-forest);
	outline-offset: 3px;
}

.jd-card-product__body {
	padding: 1.25rem 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1;
}
.jd-card-product__body p {
	margin: 0;
}
.jd-card-product__title {
	font-size: 1.2rem;
	margin: 0;
}
.jd-card-product__title a {
	text-decoration: none;
}
/* Toute la carte est cliquable via le lien du titre (un seul lien, pas de doublon au clavier) */
.jd-card-product__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.jd-card-product__title a:focus-visible {
	outline: none;
	box-shadow: none;
}
.jd-card-product__brand,
.jd-card-product__use {
	font-size: 0.9375rem;
}
.jd-card-product__specs {
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0;
	font-size: 0.9375rem;
}
.jd-card-product__specs span {
	display: block;
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--jd-c-muted, #46524a);
}
.jd-card-product__specs li { padding: 0.45rem 0; border-top: 1px solid var(--jd-c-line); }
.jd-card-product__price {
	margin-top: 0.6rem;
	font-weight: 800;
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
}
.jd-card-product__price small { display: block; font-size: 0.8rem; font-weight: 500; color: var(--jd-c-muted, #46524a); }
.jd-card-product__more {
	margin-top: auto;
	padding-top: 0.9rem;
}
.jd-card-product__more a {
	display: inline-block;
	padding: 0.55rem 1rem;
	border: 2px solid var(--jd-c-forest);
	font-weight: 800;
	font-size: 0.875rem;
	text-decoration: none;
}
.jd-card-product__more a:hover {
	background: var(--jd-c-citron);
}

/* Entrées de sélection */
.jd-chips ul {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.jd-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 1rem;
	border: 1px solid var(--jd-c-forest);
	border-radius: 0;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	background: #fff;
}
.jd-chips a[aria-current="true"] {
	background: var(--jd-c-forest);
	color: var(--jd-c-chalk);
}
.jd-chips__reset {
	background: transparent;
	border-style: dashed;
}

.jd-empty {
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 4px solid var(--jd-c-mineral, #dce5df);
}
.jd-empty p {
	margin: 0;
}
.jd-empty p + p {
	margin-top: 0.5rem;
}

/* Comparatif */
.jd-compare { min-width: 58rem; }
/* La première colonne porte la référence : elle ne se casse pas mot à mot. */
.jd-compare th[scope="row"] { min-width: 11rem; }
.jd-compare th[scope="row"] a { font-weight: 700; }
.jd-compare small { opacity: 0.8; }

/* Visuel neutre quand la fiche n'a pas de photo produit */
.jd-card-product__media--neutre {
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: center;
	background: var(--jd-c-mineral, #dce5df) url(../../../themes/jour-deux/assets/images/x-foret-320.webp) no-repeat 50% 45% / 34%;
	position: relative;
}
.jd-card-product__media--neutre span {
	position: absolute;
	left: 1rem;
	bottom: 0.8rem;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* Nos choix */
.jd-picks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
	align-items: start;
}
.jd-pick {
	display: flex;
	flex-direction: column;
}
.jd-pick__body { padding: 1.25rem 0 0; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.jd-pick__body p { margin: 0; }
.jd-pick__badge {
	align-self: flex-start;
	background: var(--wp--preset--color--citron, #d7f34a);
	border-radius: 0;
	padding: 0.25rem 0.6rem;
	font-size: 0.68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.jd-pick__title { margin: 0; font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; }
.jd-pick__title a { text-decoration: none; }
.jd-pick__specs { list-style: none; margin: 0.25rem 0 0; padding: 0; font-size: 1rem; display: grid; gap: 0.35rem; }
.jd-pick__specs li span { font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--jd-c-muted, #46524a); }
.jd-pick__price { font-weight: 800; font-size: 1.55rem; letter-spacing: -0.03em; margin-top: 0.4rem; font-variant-numeric: tabular-nums; }
.jd-pick__price small { font-weight: 500; font-size: 0.8rem; opacity: 0.75; display: block; }
.jd-pick__actions { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; padding-top: 0.5rem; }
.jd-pick__actions .wp-block-button__link { width: 100%; box-sizing: border-box; border-radius: 0; font-size: 0.9rem; font-weight: 800; padding: 0.8rem 1.1rem; min-height: 3rem; text-decoration: none; background: var(--wp--preset--color--citron, #d7f34a); color: var(--wp--preset--color--foret, #17211d); border: 2px solid var(--wp--preset--color--foret, #17211d); }
.jd-pick__more { font-weight: 800; font-size: 0.9rem; text-decoration: none; border-bottom: 2px solid var(--jd-c-citron); padding-bottom: 0.15rem; }

.jd-pick__sous { display: flex; justify-content: space-between; align-items: center; margin: 0; }


.jd-pick__specs li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--jd-c-line); padding-bottom: 0.35rem; }
.jd-credit { font-size: 0.75rem; opacity: 0.7; margin: 0.35rem 0 0; }
.jd-credit a { color: inherit; }

@media (min-width: 1000px) {
	.jd-picks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
 * Boîte média commune aux produits : un seul cadre 4/3, l'image est contenue
 * à l'intérieur. Les attributs width/height du HTML restent utiles au
 * navigateur ; c'est cette boîte qui fixe le rendu (audit du 26/09/2026).
 * ------------------------------------------------------------------------ */
.jd-pick__media,
.jd-card-product__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 2px;
	background: #fff;
}
.jd-pick__media img,
.jd-card-product__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	aspect-ratio: auto;
	object-fit: contain;
	padding: clamp(0.5rem, 1.5vw, 1rem);
	box-sizing: border-box;
	background: transparent;
}
.jd-card-product__media--neutre {
	display: grid;
	place-items: center;
	background: var(--jd-c-mineral, #dce5df) url(../../../themes/jour-deux/assets/images/x-foret-320.webp) no-repeat 50% 45% / 28%;
	aspect-ratio: 1 / 1;
}

/* Raison de choisir et information d'affiliation de la sélection (docs/14) */
.jd-pick__raison {
	font-size: 1rem;
	line-height: 1.5;
}
.jd-pick__price--sans { font-weight: 500; font-size: 1rem; }
.jd-picks__mention {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	color: var(--jd-c-muted, #46524a);
}

/* Tableau comparatif : défilement local annoncé, focus visible au clavier */
.jd-table-hint {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	color: var(--jd-c-muted, #46524a);
}
.jd-table-scroll:focus-visible {
	outline: 3px solid var(--jd-c-forest, #17211d);
	outline-offset: 3px;
}
.jd-specs caption {
	caption-side: top;
	text-align: left;
	padding: 0 0 0.75rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--jd-c-muted, #46524a);
}
.jd-specs thead th {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 800;
}
.jd-specs { font-variant-numeric: tabular-nums; }
.jd-compare__offre { white-space: nowrap; }
.jd-compare__offre small { white-space: normal; display: inline-block; }
@media (min-width: 48rem) {
	.jd-table-hint { display: none; }
}

/* Recommandation par besoin : prix, bouton, mention courte, lien fiche */
.jd-cta-offre {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--jd-c-line);
	display: grid;
	gap: 0.5rem;
}
.jd-cta-offre p { margin: 0; }
.jd-cta-offre__price strong { font-size: 1.375rem; font-weight: 800; }
.jd-cta-offre__price small { display: block; font-size: 0.8125rem; color: var(--jd-c-muted, #46524a); }
.jd-cta-offre__cta .wp-block-button__link {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 3.25rem;
	padding: 0.9rem 1.25rem;
	background: var(--jd-c-citron);
	color: var(--jd-c-forest);
	border: 2px solid var(--jd-c-forest);
	border-radius: 0;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}
.jd-cta-offre__mention,
.jd-cta-offre__fiche {
	font-size: 0.875rem;
	color: var(--jd-c-muted, #46524a);
}
.jd-cta-offre__fiche a { font-weight: 700; color: inherit; }