/*
 * Système de design DUP SARL — « précision industrielle ».
 * Traduit depuis la planche « 1a Design system » de la maquette Claude Design.
 * Feuille commune à tous les gabarits : ne rien y mettre de propre à une seule page.
 */

:root {
	/* Palette de marque. Le rouge est réservé à l'action et à l'accent. */
	--dup-red: #d0021b;
	--dup-red-dark: #a00114;
	/* Variante claircie : le rouge de marque sur fond noir ne passe pas le contraste AA. */
	--dup-red-light: #ff4757;

	--dup-black: #111114;
	--dup-graphite: #1e1e22;
	--dup-graphite-line: #2a2a30;
	--dup-grey-100: #f4f4f5;
	--dup-grey-400: #d4d4d8;
	--dup-grey-600: #6b6b72;
	--dup-white: #fff;

	--dup-font-title: "Barlow Condensed", "Arial Narrow", sans-serif;
	--dup-font-text: Inter, system-ui, -apple-system, sans-serif;
	--dup-font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;

	/* Presque tout est droit : 2 px maximum, jamais d'ombre portée. */
	--dup-radius: 2px;
	--dup-chamfer: 12px;

	--dup-gutter: 16px;
	--dup-section-y: 20px;
}

@media (min-width: 1024px) {
	:root {
		--dup-gutter: 40px;
		--dup-section-y: 56px;
	}
}

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

.dup-page,
.dup-page *,
.dup-page *::before,
.dup-page *::after {
	box-sizing: border-box;
}

.dup-page {
	background: var(--dup-white);
	color: var(--dup-black);
	font: 400 16px/1.6 var(--dup-font-text);
}

@media (min-width: 1024px) {
	.dup-page {
		font-size: 17px;
	}
}

.dup-page img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Le focus doit rester visible partout : la cible est un poste d'atelier, souvent au clavier. */
.dup-page a:focus-visible,
.dup-page button:focus-visible,
.dup-page summary:focus-visible {
	outline: 3px solid var(--dup-red);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Titres — condensés, capitales, registre technique
 * ---------------------------------------------------------------------- */

.dup-h1,
.dup-h2,
.dup-h3 {
	margin: 0;
	font-family: var(--dup-font-title);
	text-transform: uppercase;
	text-wrap: balance;
}

.dup-h1 {
	font-weight: 700;
	font-size: clamp(2.75rem, 7vw, 5rem);
	line-height: 0.95;
	letter-spacing: 0.01em;
}

.dup-h2 {
	font-weight: 700;
	font-size: clamp(1.75rem, 3.4vw, 2.25rem);
	line-height: 1.05;
	letter-spacing: 0.02em;
}

.dup-h3 {
	font-weight: 600;
	font-size: clamp(1.375rem, 2.2vw, 1.625rem);
	line-height: 1.1;
	letter-spacing: 0.04em;
}

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

.dup-lede {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.7;
	text-wrap: pretty;
}

.dup-muted {
	color: var(--dup-grey-600);
}

/* Les chiffres techniques s'alignent : jamais de chasse variable dans un tableau. */
.dup-numeric {
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
 * Actions
 * ---------------------------------------------------------------------- */

.dup-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font: 700 17px/1 var(--dup-font-title);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 17px 26px;
	border: 0;
	cursor: pointer;
	/* Zone tactile confortable : le brief impose 44 px minimum. */
	min-height: 44px;
}

.dup-btn--primary {
	background: var(--dup-red);
	color: var(--dup-white);
	/* Angle coupé : l'accent industriel du brief, sans rondeur décorative. */
	clip-path: polygon(
		var(--dup-chamfer) 0,
		100% 0,
		100% calc(100% - var(--dup-chamfer)),
		calc(100% - var(--dup-chamfer)) 100%,
		0 100%,
		0 var(--dup-chamfer)
	);
}

.dup-btn--primary:hover,
.dup-btn--primary:focus {
	background: var(--dup-red-dark);
	color: var(--dup-white);
}

.dup-btn--outline {
	border: 2px solid currentColor;
	background: none;
	color: var(--dup-black);
}

.dup-btn--dark {
	background: var(--dup-black);
	color: var(--dup-white);
	font-size: 14px;
	padding: 14px 20px;
}

.dup-btn--dark:hover {
	background: var(--dup-graphite);
	color: var(--dup-white);
}

.dup-btn--on-dark {
	color: var(--dup-white);
}

.dup-btn--on-dark:hover {
	background: var(--dup-white);
	color: var(--dup-black);
}

/* Appel téléphonique : l'action principale du site, donc traitée comme un bloc. */
.dup-phone-cta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	align-items: center;
	padding: 16px 26px;
	background: var(--dup-red);
	color: var(--dup-white);
	text-decoration: none;
	clip-path: polygon(
		var(--dup-chamfer) 0,
		100% 0,
		100% calc(100% - var(--dup-chamfer)),
		calc(100% - var(--dup-chamfer)) 100%,
		0 100%,
		0 var(--dup-chamfer)
	);
}

.dup-phone-cta:hover {
	background: var(--dup-red-dark);
	color: var(--dup-white);
}

.dup-phone-cta__label {
	font: 600 10px/1 var(--dup-font-text);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
}

.dup-phone-cta__number {
	font: 700 28px/1 var(--dup-font-title);
	font-variant-numeric: tabular-nums;
}

.dup-link {
	font: 600 15px/1.4 var(--dup-font-text);
	color: var(--dup-red);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.dup-link:hover {
	color: var(--dup-red-dark);
}

/* -------------------------------------------------------------------------
 * Structure de section — on sépare par des filets, pas par des ombres
 * ---------------------------------------------------------------------- */

.dup-section {
	padding: var(--dup-section-y) var(--dup-gutter);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

@media (min-width: 1024px) {
	.dup-section {
		gap: 28px;
	}
}

.dup-section--grey {
	background: var(--dup-grey-100);
	border-top: 1px solid var(--dup-grey-400);
	border-bottom: 1px solid var(--dup-grey-400);
}

.dup-section--dark {
	background: var(--dup-black);
	color: var(--dup-white);
}

.dup-section--ruled {
	border-bottom: 1px solid var(--dup-grey-400);
}

.dup-section__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

@media (min-width: 1024px) {
	.dup-section__head {
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
	}
}

/* -------------------------------------------------------------------------
 * Emplacements d'image
 *
 * La maquette ne contient aucune photo : elle indique par une trame où elles
 * iront. On conserve ce repère, visible, pour que les emplacements vides ne
 * passent pas pour un défaut d'affichage.
 * ---------------------------------------------------------------------- */

.dup-placeholder {
	background: repeating-linear-gradient(45deg, #e4e4e7 0 8px, #ededf0 8px 16px);
	border: 1px solid var(--dup-grey-400);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px;
	font: 400 11px/1.5 var(--dup-font-mono);
	color: var(--dup-grey-600);
}

.dup-placeholder--dark {
	background: repeating-linear-gradient(45deg, #2a2a30 0 10px, #232329 10px 20px);
	border-color: var(--dup-graphite-line);
}

.dup-card {
	border: 1px solid var(--dup-grey-400);
	background: var(--dup-white);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.dup-card:hover {
	border-color: var(--dup-black);
}