/* ----------------------------------------
   Animations apparition par le bas
---------------------------------------- */
.banner-subhead,
.banner-title,
.banner-description-container,
.debosseleur-presentation__name,
.debosseleur-presentation__bio,
.debosseleur-presentation__ctas,
.debosseleur-presentation__photo,
.debosseleur-prestations__header,
.debosseleur-prestations__card,
.debosseleur-dsp__title,
.debosseleur-dsp__description,
.debosseleur-dsp__zones-label,
.debosseleur-dsp__zone,
.debosseleur-faq__title-block,
.debosseleur-faq__item {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.anim--visible {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

.content-debosseleur-container {
	font-family: var(--font-primary);
}

/*
--------------------------------------
Banner – débosseleur
--------------------------------------
*/

.content-debosseleur-container .banner-container .banner-text-container {
	top: 60%;
}

.content-debosseleur-container .banner-subhead {
	font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1920 - 320))) !important;
}

.banner-container .banner-title .banner-title__accent {
	color: var(--color-secondary);
}

.banner-container .banner-description-container .banner-description {
	font-size: calc(12px + (16 - 12) * ((100vw - 320px) / (1920 - 320)));
	color: var(--color-text);
	max-width: 100%;
}

.banner-container .banner-description-container .banner-description p:first-of-type {
	margin-bottom: calc(0px + (25 - 0) * ((100vw - 320px) / (1920 - 320)));
}

.banner-halo {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(229, 107, 32, 0.35) 0%, rgba(229, 107, 32, 0.12) 40%, transparent 70%);
	pointer-events: none;
	z-index: 0;
	filter: blur(30px);
}

.banner-halo--left {
	left: -100px;
	top: 70%;
}

.banner-halo--right {
	right: -300px;
	width: 620px;
	height: 620px;
}

/*
--------------------------------------
Section présentation débosseleur
--------------------------------------
*/

.debosseleur-presentation {
	background-color: #1c1c1c;
	padding: 80px 40px;
}

.debosseleur-presentation__inner {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 60px;
	max-width: 1280px;
	margin: 0 auto;
}

/*
--------------------------------------
Contenu texte
--------------------------------------
*/

.debosseleur-presentation__name {
	font-family: var(--e-global-typography-primary-font-family);
	font-size: calc(32px + (52 - 32) * ((100vw - 320px) / (1920 - 320)));
	font-weight: 700;
	color: #fff;
	line-height: 1.15;
	margin-bottom: 30px;
}

.debosseleur-presentation__name--accent {
	color: var(--color-secondary);
}

.debosseleur-presentation__bio {
	font-family: var(--e-global-typography-primary-font-family);
	color: var(--color-text);
	font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
	line-height: 1.7;
	margin-bottom: 40px;
}

/*
--------------------------------------
Boutons CTA
--------------------------------------
*/

.debosseleur-presentation__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.debosseleur-presentation__ctas .btn--outline {
	display: inline-block;
	padding: 12px 24px;
	border: 2px solid #fff;
	color: #fff;
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.debosseleur-presentation__ctas .btn--outline:hover,
.debosseleur-presentation__ctas .btn--outline:focus {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
	color: #fff;
}

/*
--------------------------------------
Photo
--------------------------------------
*/

.debosseleur-presentation__photo {
	display: flex;
	justify-content: flex-end;
}

.debosseleur-presentation__photo img {
	width: 100%;
	max-width: 480px;
	height: auto;
	display: block;
	filter: grayscale(100%);
	object-fit: cover;
}

/*
--------------------------------------
Section 2 – Prestations
--------------------------------------
*/

.debosseleur-prestations {
	background-color: #161616;
	padding: 80px 40px;
}

.debosseleur-prestations__inner {
	max-width: 1280px;
	margin: 0 auto;
}

/* Header titre + description */

.debosseleur-prestations__header {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 60px;
	margin-bottom: 60px;
}

.debosseleur-prestations__title {
	font-family: var(--e-global-typography-primary-font-family);
	font-size: calc(28px + (44 - 28) * ((100vw - 320px) / (1920 - 320)));
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
	margin: 0;
}

.debosseleur-prestations__title span {
	color: var(--color-secondary);
}

.debosseleur-prestations__description {
	font-family: var(--e-global-typography-primary-font-family);
	color: var(--color-text);
	font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
	line-height: 1.7;
	margin: 0;
}

/* Grille USP */

.debosseleur-prestations__grid {
	display: grid;
	grid-template-columns: 1fr;
	border-top: 1px solid #333;
	border-left: 1px solid #333;
}

.debosseleur-prestations__card {
	padding: 40px 30px;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
}

.debosseleur-prestations__card-icon {
	margin-bottom: 20px;
	color: var(--color-secondary);
}

.debosseleur-prestations__card-icon svg {
	width: 48px;
	height: 48px;
	fill: none;
	stroke: var(--color-secondary);
}

.debosseleur-prestations__card-title {
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 30px;
	font-weight: 700;
	color: #fff;
	line-height: 1.3;
	margin: 0 0 15px;
}

.debosseleur-prestations__card-separator {
	display: block;
	width: 40px;
	height: 3px;
	background-color: var(--color-secondary);
	margin-bottom: 20px;
}

.debosseleur-prestations__card-description {
	font-family: var(--e-global-typography-primary-font-family);
	color: #999;
	font-size: calc(13px + (15 - 13) * ((100vw - 320px) / (1920 - 320)));
	line-height: 1.6;
	margin: 0;
}

/*
--------------------------------------
Section 3 – DSP / Zones d'intervention
--------------------------------------
*/

.debosseleur-dsp {
	background-color: #1c1c1c;
	padding: 80px 40px;
}

.debosseleur-dsp__inner {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: 80px;
	max-width: 1280px;
	margin: 0 auto;
}

/* Colonne gauche */

.debosseleur-dsp__title {
	font-family: var(--e-global-typography-primary-font-family);
	font-size: calc(26px + (40 - 26) * ((100vw - 320px) / (1920 - 320)));
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
	margin: 0 0 30px;
}

.debosseleur-dsp__title span {
	color: var(--color-secondary);
}

.debosseleur-dsp__description {
	font-family: var(--e-global-typography-primary-font-family);
	color: var(--color-text);
	font-size: calc(13px + (15 - 13) * ((100vw - 320px) / (1920 - 320)));
	line-height: 1.8;
}

/* Colonne droite – zones */

.debosseleur-dsp__zones-label {
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 20px;
}

.debosseleur-dsp__zones-label span {
	color: var(--color-secondary);
}

.debosseleur-dsp__zones-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.debosseleur-dsp__zone {
	display: flex;
	align-items: center;
	gap: 10px;
	background-color: #2a2a2a;
	padding: 12px 16px;
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}

.debosseleur-dsp__zone svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/*
--------------------------------------
Section 4 – FAQ
--------------------------------------
*/

.debosseleur-faq {
	background-color: #161616;
	padding: 80px 40px;
}

.debosseleur-faq__inner {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 80px;
	max-width: 1280px;
	margin: 0 auto;
}

/* Titre droite */

.debosseleur-faq__title {
	font-family: var(--e-global-typography-primary-font-family);
	font-size: calc(32px + (48 - 32) * ((100vw - 320px) / (1920 - 320)));
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
	margin: 0;
}

.debosseleur-faq__title span {
	color: var(--color-secondary);
}

/* Accordéon */

.debosseleur-faq__item {
	border-bottom: 1px solid #333;
	margin-bottom: 10px;
}

.debosseleur-faq__item:first-child {
	border-top: 1px solid #333;
}

.debosseleur-faq__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	width: 100%;
	padding: 22px 20px;
	background: #2a2a2a;
	border: none;
	cursor: pointer;
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 20px;
	font-weight: 500;
	color: #fff;
	text-align: left;
	transition: background-color 0.2s ease;
	line-height: 150%;
}

.debosseleur-faq__question:hover {
	background-color: #333;
}

.debosseleur-faq__question[aria-expanded="true"] {
	background-color: #2a2a2a;
}

.debosseleur-faq__icon {
	flex-shrink: 0;
	font-size: 22px;
	font-weight: 300;
	color: var(--color-secondary);
	line-height: 1;
	transition: transform 0.2s ease;
}

.debosseleur-faq__question[aria-expanded="true"] .debosseleur-faq__icon {
	transform: rotate(45deg);
}

.debosseleur-faq__answer {
	padding: 20px;
	font-family: var(--e-global-typography-primary-font-family);
	font-size: calc(13px + (15 - 13) * ((100vw - 320px) / (1920 - 320)));
	color: var(--color-text);
	line-height: 1.7;
	background-color: #222;
}

.debosseleur-faq__answer[hidden] {
	display: none;
}


@media (max-width: 991px) {

	.content-debosseleur-container .banner-container {
		height: 100vh;
	}

	.content-debosseleur-container .debosseleur-faq__title-block {
		grid-row: 1;
	}

}

@media (min-width: 992px) {

	.debosseleur-presentation__inner,
	.debosseleur-prestations__header,
	.debosseleur-dsp__inner,
	.debosseleur-faq__inner {
		grid-template-columns: repeat(2, 1fr);
	}

	.debosseleur-prestations__grid {
		grid-template-columns: repeat(3, 1fr);
	}

}