/*
 * Gabarit « Catégorie DUP » — mise en page propre à cette page.
 * Couleurs, titres, boutons, tableau technique et fil d'Ariane viennent de
 * dup-design-system.css. Traduit de la planche « 2a » de la maquette
 * (Cabines de sablage — écran de référence catégorie).
 */

.dup-category-hero {
	padding: var(--dup-section-y) var(--dup-gutter);
	display: flex;
	flex-direction: column;
	gap: 16px;
	border-bottom: 1px solid var(--dup-grey-400);
}

.dup-category-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.dup-category-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dup-category-hero__badges .dup-badge--dark {
	background: var(--dup-black);
}

.dup-category-hero__badges .dup-badge:nth-child(n+2) {
	background: none;
	border: 1px solid var(--dup-grey-400);
	color: var(--dup-grey-600);
	clip-path: none;
}

.dup-category-hero__intro {
	max-width: 620px;
	color: var(--dup-grey-600);
}

.dup-category-hero__visuals {
	display: grid;
	gap: 16px;
}

.dup-category-hero__media,
.dup-category-hero__aside {
	aspect-ratio: 16 / 10;
	width: 100%;
	object-fit: cover;
}

/* Carrousel des gammes (assets/js/dup-slider.js) : fondu enchaîné, une diapositive à la fois.
 * Sans le script, la première (déjà .is-active dans le HTML) reste affichée. */
.dup-slider {
	position: relative;
	overflow: hidden;
	background: var(--dup-grey-100);
}

.dup-slider__slide {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	transition: opacity 0.8s ease;
}

.dup-slider__slide.is-active {
	opacity: 1;
}

.dup-slider__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dup-slider__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 40px 16px 14px;
	font: 600 18px/1.2 var(--dup-font-title);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--dup-white);
	background: linear-gradient(to top, rgba(17, 17, 20, 0.88), rgba(17, 17, 20, 0));
}

.dup-slider__dots {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
}

.dup-slider__dot {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
}

.dup-slider__dot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(17, 17, 20, 0.6);
}

.dup-slider__dot.is-active::after {
	background: var(--dup-red);
	border-color: var(--dup-white);
}

@media (min-width: 1024px) {
	/* Planche 2a : titre + pastilles à gauche, chapô à droite (même ligne), puis les photos dessous. */
	.dup-category-hero {
		display: grid;
		grid-template-columns: 1fr 520px;
		gap: 24px 56px;
		align-items: start;
	}

	.dup-category-hero__copy {
		grid-column: 1;
		grid-row: 1;
	}

	.dup-category-hero__intro {
		grid-column: 2;
		grid-row: 1;
		max-width: none;
	}

	.dup-category-hero__visuals {
		grid-column: 1 / -1;
		grid-row: 2;
		grid-template-columns: 1fr 520px;
		gap: 56px;
		align-items: start;
	}

	/* Les deux visuels ont la même hauteur, bornée : le titre, le chapô et l'essentiel des visuels
	 * tiennent sous la ligne de flottaison d'un écran de 900 px de haut. */
	.dup-category-hero__media,
	.dup-category-hero__aside {
		aspect-ratio: auto;
		height: clamp(320px, 34vw, 480px);
	}

	.dup-category-hero__aside {
		object-position: center 35%;
	}
}

/* -------------------------------------------------------------------------
 * Texte de fond (« Comprendre… ») — va-et-vient : chaque section <h2> place son
 * texte et ses images côte à côte, en alternant les côtés d'une section à l'autre.
 * ---------------------------------------------------------------------- */

.dup-zz {
	display: grid;
	gap: 24px;
}

.dup-zz + .dup-zz {
	border-top: 1px solid var(--dup-grey-400);
	padding-top: 28px;
}

/* Toutes les images d'une section ont la même taille (cadre 4/3, image entière visible). */
.dup-zz__media {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-content: start;
}

.dup-zz__media figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 100%;
}

.dup-zz__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: contain;
	border: 1px solid var(--dup-grey-400);
	background: var(--dup-white);
}

.dup-zz__media figcaption {
	font-size: 0.8125rem;
	color: var(--dup-grey-600);
}

@media (min-width: 1024px) {
	/* Colonne d'images étroite : les visuels accompagnent le texte sans l'écraser. */
	.dup-zz--media {
		grid-template-columns: 1fr minmax(0, 340px);
		gap: 56px;
		align-items: start;
	}

	.dup-zz--media.dup-zz--reverse {
		grid-template-columns: minmax(0, 340px) 1fr;
	}

	.dup-zz--reverse .dup-zz__media {
		order: -1;
	}
}

/* Sections suivantes : images plus petites, sur deux colonnes, toutes de même taille. */
.dup-zz--tiles .dup-zz__media {
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* -------------------------------------------------------------------------
 * Cases repliables du texte de fond (même principe que la FAQ) : texte, puis images dessous,
 * toutes de même taille — plus grandes quand elles sont moins nombreuses.
 * ---------------------------------------------------------------------- */

/* Toute la largeur de la page, comme le titre et la FAQ : plus de colonne coupée à droite. */
.dup-acc-list,
.dup-category-article .dup-prose {
	max-width: none;
	width: 100%;
}

.dup-acc__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-bottom: 28px;
}

/* Les intertitres internes (h3 dans l'article) sont des h4 sous le titre de la case : même aspect qu'avant. */
.dup-acc__body .dup-prose h4 {
	margin: 4px 0 0;
	font: 600 clamp(1.125rem, 2vw, 1.375rem) / 1.2 var(--dup-font-title);
	letter-spacing: 0.03em;
	color: var(--dup-black);
}

.dup-acc__media {
	display: grid;
	gap: 20px;
	justify-content: start;
	grid-template-columns: 1fr;
}

.dup-acc__media figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.dup-acc__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: contain;
	border: 1px solid var(--dup-grey-400);
	background: var(--dup-white);
}

.dup-acc__media figcaption {
	font-size: 0.875rem;
	color: var(--dup-grey-600);
}

@media (min-width: 768px) {
	.dup-acc__media--1 {
		grid-template-columns: minmax(0, 560px);
	}

	.dup-acc__media--2 {
		grid-template-columns: repeat(2, minmax(0, 440px));
	}

	.dup-acc__media--3 {
		grid-template-columns: repeat(3, minmax(0, 340px));
	}
}

/* -------------------------------------------------------------------------
 * Les 4 gammes
 * ---------------------------------------------------------------------- */

.dup-category-ranges__grid {
	display: grid;
	gap: 16px;
}

.dup-category-range__media {
	aspect-ratio: 3 / 4;
	width: 100%;
	object-fit: cover;
	border-bottom: 1px solid var(--dup-grey-400);
}

.dup-category-range__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.dup-category-range__ref {
	font: 600 11px/1 var(--dup-font-text);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dup-red);
}

.dup-category-range__body .dup-link {
	margin-top: auto;
}

/* Carte entièrement cliquable : le lien « Fiche technique » étend sa zone de clic à toute la carte
 * (lien étiré). Un seul lien dans le HTML, donc un seul arrêt au clavier et une seule annonce
 * pour les lecteurs d'écran ; le survol de la carte (bordure noire) vient de .dup-card. */
.dup-category-range {
	position: relative;
	cursor: pointer;
}

.dup-category-range .dup-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.dup-category-range:focus-within {
	outline: 3px solid var(--dup-red);
	outline-offset: 2px;
}

.dup-category-range .dup-link:focus-visible {
	outline: none;
}

.dup-category-range__specs {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 0.9375rem;
	color: var(--dup-grey-600);
	font-variant-numeric: tabular-nums;
}

.dup-category-range__specs li {
	padding-left: 26px;
	position: relative;
}

.dup-category-range__specs li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--dup-red);
	font-weight: 700;
}

/* Mobile / tablette : les gammes défilent au doigt (cartes de 78 %), au lieu de s'empiler sur 3000 px. */
@media (max-width: 1023px) {
	.dup-category-ranges__grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 12px;
		margin-inline: calc(var(--dup-gutter) * -1);
		padding: 0 var(--dup-gutter) 8px;
		scroll-padding-inline: var(--dup-gutter);
	}

	.dup-category-ranges__grid > * {
		flex: 0 0 min(64%, 250px);
		scroll-snap-align: start;
	}

	.dup-category-range__media {
		aspect-ratio: 4 / 5;
	}

	.dup-category-range__body {
		padding: 14px;
		gap: 6px;
	}

	.dup-category-range__body .dup-h3 {
		font-size: 1.125rem;
	}

	.dup-category-range__specs {
		font-size: 0.8125rem;
		gap: 4px;
	}

	.dup-category-range__body .dup-link {
		font-size: 0.875rem;
		padding-block: 8px;
	}
}

@media (min-width: 1024px) {
	.dup-category-ranges__grid {
		grid-template-columns: repeat(var(--dup-ranges-cols, 4), 1fr);
		gap: 24px;
	}
}

/* -------------------------------------------------------------------------
 * Comparatif — variante claire du tableau technique commun : pas de lignes
 * alternées, une colonne (CSMP) mise en avant en rouge/rose.
 * ---------------------------------------------------------------------- */

/* Mobile : colonnes de gamme assez larges pour se lire sans recouper chaque mot ; le reste défile latéralement. */
@media (max-width: 767px) {
	.dup-category-comparison .dup-tech-table th:not(:first-child),
	.dup-category-comparison .dup-tech-table td:not(:first-child) {
		min-width: 160px;
	}
}

.dup-tech-table--white tbody tr:nth-child(even) {
	background: transparent;
}

.dup-tech-table--white tbody tr:nth-child(even) td:first-child {
	background: var(--dup-white);
}

.dup-tech-table__col--highlight {
	background: var(--dup-red) !important;
}

.dup-tech-table__cell--highlight {
	background: #fff5f5;
}

/* -------------------------------------------------------------------------
 * FAQ + encart
 * ---------------------------------------------------------------------- */

.dup-category-faq {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.dup-category-faq-cta {
	background: var(--dup-grey-100);
	border-left: 3px solid var(--dup-red);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dup-category-faq-cta__phone {
	font: 700 30px/1 var(--dup-font-title);
	letter-spacing: 0.04em;
	color: var(--dup-black);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

@media (min-width: 1024px) {
	.dup-category-faq {
		display: grid;
		grid-template-columns: 1fr 420px;
		gap: 56px;
		align-items: start;
	}
}

/* -------------------------------------------------------------------------
 * Bandeau final
 * ---------------------------------------------------------------------- */

.dup-category-cta {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.dup-category-cta__title {
	color: var(--dup-white);
}

.dup-category-cta__text {
	margin: 0;
	color: var(--dup-grey-400);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.dup-category-cta__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dup-category-cta__actions .dup-btn {
	text-align: center;
}

@media (min-width: 1024px) {
	.dup-category-cta {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 40px;
	}

	.dup-category-cta__actions {
		flex-direction: row;
		flex: none;
	}
}