:root{
	--spide-blue:#0000FF;
	--spide-grey:#767676;
	--spide-black:#2D2D2D;
	--spide-white:#F1F1F1;
}

.spide-besoin *,
.spide-besoin *::before,
.spide-besoin *::after{ box-sizing:border-box; }

.spide-besoin{
	font-family:"Montserrat",sans-serif;
	color:var(--spide-black);
	background:#fff;
}

/* Garde-fou mobile : aucun débordement horizontal. Empêche le scroll latéral
   (et le « blanc » à droite / la possibilité de scroller au-delà du footer)
   créé par d'éventuels éléments décoratifs en débord. overflow-x:clip ne crée
   pas de conteneur de défilement (donc ne casse pas position:sticky). */
@media (max-width:768px){
	.spide-besoin{ overflow-x:clip; }
}

/* ============================================================
 * HERO — 2 colonnes
 *   gauche : texte (avec padding)
 *   droite : 3 étapes empilées, image collée tout en haut
 * ============================================================ */
.spide-besoin-hero{
	position:relative;
	background:#fff;
	overflow:hidden;
}
/* Léger pattern de pointillés */
.spide-besoin-hero::before{
	content:"";
	position:absolute;
	inset:0;
	background-image:radial-gradient(rgba(0,0,0,.07) 1px,transparent 1px);
	background-size:20px 20px;
	pointer-events:none;
	z-index:0;
}

.spide-besoin-hero__inner{
	position:relative;
	z-index:1;
	max-width:1600px;
	margin-inline:auto;
	/* PAS de padding-top : l'image de droite doit être collée au header */
	padding:0 clamp(24px,4vw,72px) clamp(40px,5vw,80px);
	display:grid;
	grid-template-columns:minmax(0,5fr) minmax(0,7fr);
	gap:clamp(32px,4vw,72px);
	align-items:flex-start;
}

/* ============ Colonne gauche — sticky-like (padding-top propre) ============ */
.spide-besoin-hero__left{
	min-width:0;
	padding-top:clamp(40px,5vw,90px);
}

.spide-besoin-hero__overline{
	display:block;
	font-size:14px;
	font-weight:600;
	color:var(--spide-grey);
	margin-bottom:24px;
}
.spide-besoin-hero__overline .plus{ color:var(--spide-blue); margin-right:4px; }

.spide-besoin-hero__title{
	font-size:clamp(26px,2.6vw,40px);
	line-height:1.15;
	font-weight:700;
	color:var(--spide-black);
	text-transform:uppercase;
	margin:0 0 24px;
	max-width:560px;
}

.spide-besoin-hero__desc{
	font-size:16px;
	font-weight:500;
	line-height:1.4;
	color:var(--spide-grey);
	margin:0 0 36px;
	max-width:490px;
}

.spide-besoin-hero__cta{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:18px 33px;
	background:var(--spide-black);
	color:var(--spide-white)!important;
	font-size:14px;
	font-weight:600;
	letter-spacing:.02em;
	text-decoration:none;
	border:0;
	transition:background .2s ease, transform .2s ease;
}


/* ============ Colonne droite — carrousel d'étapes (1 slot) ============ */
.spide-besoin-hero__right{
	position:relative;
	min-width:0;
	min-height:clamp(380px,42vw,640px);
	padding-top:0;
}

.spide-besoin-step{
	position:absolute;
	inset:0;
	opacity:0;
	visibility:hidden;
	transition:opacity .6s ease, visibility 0s linear .6s;
	pointer-events:none;
}
.spide-besoin-step.is-active{
	opacity:1;
	visibility:visible;
	transition:opacity .6s ease, visibility 0s;
	pointer-events:auto;
}

.spide-besoin-step__media{
	position:absolute;
	inset:0;
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
}
.spide-besoin-step__media--empty{ background:#e7e7e7; }

/* Carton bleu décalé : déborde HORS de l'image vers la gauche (dans la zone blanche) */
.spide-besoin-step__card{
	position:absolute;
	left:clamp(-140px,-8vw,-60px); /* débord négatif côté gauche */
	bottom:clamp(28px,5vw,72px);
	background:var(--spide-blue);
	color:var(--spide-white);
	padding:clamp(28px,3.6vw,53px) clamp(28px,4vw,40px) clamp(28px,3.6vw,40px) clamp(40px,6vw,104px);
	min-width:clamp(220px,22vw,320px);
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap:14px;
	text-align:right;
	z-index:2;
}

.spide-besoin-step__label{
	font-size:clamp(18px,1.6vw,22px);
	font-weight:700;
	letter-spacing:.02em;
}

.spide-besoin-step__count .num{
	font-size:clamp(18px,1.6vw,22px);
	font-weight:700;
}
.spide-besoin-step__count .total{
	font-size:clamp(14px,1.3vw,18px);
	font-weight:600;
	text-transform:uppercase;
}


/* ============================================================
 * CONTENU SOUS LE HERO
 * ============================================================ */
.spide-besoin-content__inner{
	max-width:960px;
	margin-inline:auto;
	padding:clamp(40px,5vw,80px) clamp(24px,4vw,72px);
	font-size:16px;
	line-height:1.6;
	color:var(--spide-black);
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */
@media (max-width:1200px){
	.spide-besoin-hero__inner{ gap:32px; }
	.spide-besoin-hero__right{ min-height:clamp(380px,42vw,640px); }
	.spide-besoin-step__card{ left:clamp(-80px,-5vw,-40px); padding-left:clamp(32px,6vw,80px); }
}

@media (max-width:900px){
	.spide-besoin-hero__inner{
		grid-template-columns:1fr;
		gap:32px;
	}
	.spide-besoin-hero__left{
		padding-top:clamp(32px,6vw,60px);
	}
	.spide-besoin-step{
		min-height:clamp(320px,70vw,520px);
	}
	.spide-besoin-step__card{
		left:0;                /* plus de débord en mobile, pas de zone blanche à gauche */
		bottom:24px;
		min-width:200px;
		padding:24px 28px 24px 40px;
	}
}

@media (max-width:600px){
	.spide-besoin-hero__inner{
		padding:0 20px 32px;
	}
	.spide-besoin-hero__left{
		padding-top:28px;
	}
	.spide-besoin-hero__title{ font-size:24px; }
	.spide-besoin-hero__desc{ font-size:15px; }
	.spide-besoin-hero__cta{ padding:14px 22px; font-size:13px; }
	.spide-besoin-hero__right{ min-height:clamp(280px,90vw,440px); }
	.spide-besoin-step__card{
		left:0;
		bottom:16px;
		padding:18px 22px 18px 28px;
		gap:8px;
		min-width:160px;
	}
	.spide-besoin-step__label{ font-size:16px; }
	.spide-besoin-step__count .num{ font-size:16px; }
	.spide-besoin-step__count .total{ font-size:13px; }
}

@media (min-width:1800px){
	.spide-besoin-hero__inner{
		max-width:1760px;
		padding:0 clamp(72px,6vw,140px) 110px;
	}
	.spide-besoin-hero__left{ padding-top:110px; }
	.spide-besoin-hero__right{ min-height:680px; }
}

/* ============================================================
 * SECTION ENJEUX — « Maîtriser les enjeux »
 * ============================================================ */
.spide-enjeux{
	position:relative;
	background:var(--spide-white);   /* #F1F1F1 */
	font-family:"Montserrat",sans-serif;
	overflow:hidden;
}

.spide-enjeux__inner{
	position:relative;
	max-width:1280px;
	margin-inline:auto;
	padding:clamp(56px,7vw,110px) clamp(24px,5vw,80px) 0;
}

/* ---- En-tête ---- */
.spide-enjeux__header{
	text-align:center;
	margin-bottom:clamp(48px,5vw,80px);
}
.spide-enjeux__overline{
	font-size:14px;
	font-weight:600;
	color:var(--spide-grey);
	margin:0 0 14px;
}
.spide-enjeux__overline .plus{ color:var(--spide-blue); margin-right:4px; }

.spide-enjeux__title{
	font-size:clamp(22px,2.4vw,30px);
	line-height:1.2;
	font-weight:700;
	color:var(--spide-black);
	text-transform:uppercase;
	max-width:760px;
	margin:0 auto;
}

/* ---- Grille 3 × 2 ---- */
.spide-enjeux__grid{
	list-style:none;
	padding:0;
	margin:0;
	display:grid;
	grid-template-columns:repeat(3, minmax(0,1fr));
	gap:clamp(36px,5vw,96px) clamp(36px,6vw,120px);
}

.spide-enjeux__item{
	position:relative;
	padding-top:20px;
}

/* Trait au-dessus */
.spide-enjeux__rule{
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:1px;
	background:var(--spide-grey);
	opacity:.36;
	transition:height .35s ease, width .35s ease, background-color .35s ease, opacity .35s ease;
}
.spide-enjeux__item.is-active .spide-enjeux__rule{
	height:5px;
	width:60%;
	right:auto;
	background:var(--spide-blue);
	opacity:1;
}

.spide-enjeux__item-title{
	display:flex;
	align-items:flex-start;
	gap:6px;
	font-size:clamp(18px,1.6vw,22px);
	line-height:1.2;
	font-weight:700;
	color:var(--spide-black);
	text-transform:uppercase;
	margin:0 0 16px;
}
.spide-enjeux__item-title .plus{
	color:var(--spide-blue);
	font-size:18px;
	font-weight:600;
	line-height:1;
	flex-shrink:0;
}

.spide-enjeux__item-desc{
	font-size:16px;
	font-weight:500;
	line-height:1.4;
	color:var(--spide-grey);
	margin:0;
}

/* ---- Images de bas de section (débordent vers la bande bleue suivante) ---- */
.spide-enjeux{ overflow:visible; }
/* IMPORTANT : pas de z-index sur .spide-enjeux pour ne pas créer de stacking-context :
   les enfants doivent pouvoir se positionner librement vis-à-vis de .spide-mission. */
.spide-enjeux__media{
	position:relative;
	width:100%;
	height:clamp(280px,32vw,460px);
	margin-top:clamp(88px,10vw,150px);   /* un peu plus de décalage avec le texte au-dessus (image plans) */
	margin-bottom:clamp(-260px,-18vw,-160px);
}
/* Image gauche (plans) — TRÈS grande, semi-transparente, PASSE DERRIÈRE la bande bleue */
.spide-enjeux__media-left{
	position:absolute;
	left:clamp(120px,14vw,300px);
	bottom:clamp(40px,5vw,120px);     /* image remontée — sa base se trouve au-dessus du bleu */
	width:clamp(480px,46vw,780px);
	height:auto;
	display:block;
	object-fit:contain;
	opacity:.55;
	z-index:0;
}
/* Image droite (device) — grise, PASSE AU-DESSUS de la bande bleue,
   remontée pour que seule une PETITE partie déborde dans le bleu */
.spide-enjeux__media-right{
	position:absolute;
	right:clamp(220px,24vw,500px);    /* encore plus vers l'intérieur */
	bottom:clamp(80px,9vw,180px);
	width:clamp(260px,26vw,420px);
	height:auto;
	display:block;
	object-fit:contain;
	filter:grayscale(1) brightness(.95) contrast(1.05);
	z-index:2;
}

/* ---- Responsive ---- */
@media (max-width:1024px){
	.spide-enjeux__grid{
		grid-template-columns:repeat(2, minmax(0,1fr));
		gap:36px 48px;
	}
}
@media (max-width:600px){
	.spide-enjeux__grid{
		grid-template-columns:1fr;
		gap:32px;
	}
	.spide-enjeux__title{ font-size:22px; }
	.spide-enjeux__media{
		display:flex;
		flex-direction:column;
		align-items:center;
		gap:24px;
		height:auto;
		margin-bottom:-40px;
	}
	.spide-enjeux__media-left,
	.spide-enjeux__media-right{
		position:static;   /* sort du flux absolu → ne déborde plus à droite */
		inset:auto;
		width:auto;
		max-width:80%;
		margin:0;
	}
}

/* ============================================================
 * SECTION MISSION — bande bleue avec 5 missions sur grille 3×2
 * ============================================================ */
.spide-mission{
	position:relative;
	z-index:1; /* couvre l'image gauche débordante, laisse passer l'image droite (z:2) */
	background:var(--spide-blue);
	color:#fff;
	font-family:"Montserrat",sans-serif;
	overflow:hidden;
	/* Compense le débord d'images de la section précédente */
	padding-top:clamp(160px,16vw,260px);
}
.spide-mission::before{
	content:"";
	position:absolute;
	inset:0;
	background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);
	background-size:22px 22px;
	pointer-events:none;
	z-index:0;
}

.spide-mission__inner{
	position:relative;
	z-index:1;
	max-width:1440px;
	margin-inline:auto;
	padding:0 clamp(24px,5vw,80px) clamp(64px,8vw,120px);
}

.spide-mission__overline{
	font-size:14px;
	font-weight:600;
	color:#fff;
	margin:0 0 24px;
}

.spide-mission__title{
	font-size:clamp(22px,2.4vw,30px);
	line-height:1.25;
	font-weight:700;
	color:#fff;
	text-transform:uppercase;
	margin:0 0 clamp(56px,7vw,110px);
	max-width:900px;
}
.spide-mission__arrow{
	display:inline-block;
	margin-left:14px;
	font-weight:400;
}

/* Grille 3 × 2 avec séparateurs blancs */
.spide-mission__grid{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(3, minmax(0,1fr));
	border-top:1px solid rgba(255,255,255,.5);
}
.spide-mission__item{
	position:relative;
	padding:clamp(36px,4vw,56px) clamp(24px,3vw,48px) clamp(36px,4vw,72px) 0;
	min-height:clamp(180px,18vw,230px);
}
/* trait droit (sauf dernière colonne de chaque rangée) */
.spide-mission__item:not(:nth-child(3n))::after{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	right:clamp(12px,1.5vw,24px);
	width:1px;
	background:rgba(255,255,255,.5);
}
/* trait du bas pour la 1ère ligne (3 premières) */
.spide-mission__item:nth-child(-n+3){
	border-bottom:1px solid rgba(255,255,255,.5);
}

.spide-mission__num{
	display:block;
	font-size:16px;
	font-weight:600;
	color:#fff;
	margin-bottom:24px;
	letter-spacing:.02em;
}
.spide-mission__item-title{
	font-size:clamp(18px,1.6vw,22px);
	line-height:1.2;
	font-weight:700;
	color:#fff;
	text-transform:uppercase;
	margin:0;
}

@media (max-width:1024px){
	.spide-mission__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
	.spide-mission__item:not(:nth-child(3n))::after{ display:none; }
	.spide-mission__item:not(:nth-child(2n))::after{
		content:"";
		position:absolute;
		top:0; bottom:0; right:12px;
		width:1px;
		background:rgba(255,255,255,.5);
	}
	.spide-mission__item:nth-child(-n+3){ border-bottom:0; }
	.spide-mission__item:not(:last-child){ border-bottom:1px solid rgba(255,255,255,.5); }
}
@media (max-width:600px){
	.spide-mission__grid{ grid-template-columns:1fr; }
	.spide-mission__item:not(:nth-child(2n))::after{ display:none; }
	.spide-mission__item{ padding-right:0; }
}

/* ============================================================
 * SECTION APPROCHE PROJET — timeline + image sticky + items en quinconce
 * ============================================================ */
.spide-approche{
	position:relative;
	background:#fff;
	font-family:"Montserrat",sans-serif;
	color:var(--spide-black);
	padding-top:clamp(56px,7vw,110px);
	padding-bottom:0;   /* aucune marge entre la timeline et la section suivante */
	overflow:visible;   /* indispensable pour que position:sticky de l'image fonctionne */
}
.spide-approche__inner{
	max-width:1280px;
	margin-inline:auto;
	padding-inline:clamp(24px,5vw,80px);
}

.spide-approche__header{
	text-align:center;
	margin-bottom:clamp(48px,6vw,100px);
}
.spide-approche__overline{
	font-size:14px;
	font-weight:600;
	color:var(--spide-grey);
	margin:0 0 14px;
}
.spide-approche__overline .plus{ color:var(--spide-blue); margin-right:4px; }
.spide-approche__title{
	font-size:clamp(22px,2.4vw,30px);
	line-height:1.2;
	font-weight:700;
	color:var(--spide-black);
	text-transform:uppercase;
	max-width:780px;
	margin:0 auto;
}

/* ---- Timeline ---- */
.spide-approche__timeline{
	position:relative;
	max-width:1100px;
	margin-inline:auto;
}

/* Ligne verticale au centre */
.spide-approche__line{
	position:absolute;
	top:0;
	bottom:0;
	left:50%;
	width:1px;
	background:rgba(45,45,45,.35);
	transform:translateX(-.5px);
	z-index:1;
}

/* Image centrale qui suit le scroll */
.spide-approche__sticky-wrap{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	pointer-events:none;
	z-index:2;
}
.spide-approche__image{
	position:sticky;
	top:30vh;
	display:block;
	margin:0 auto;
	width:clamp(180px,18vw,280px);
	height:auto;
	filter:grayscale(1) brightness(.95) contrast(1.05);
	z-index:4; /* au-dessus des items pour ne pas être masqué */
}

/* Liste des étapes */
.spide-approche__items{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:clamp(110px,15vh,200px);
	padding-bottom:clamp(180px,35vh,360px); /* scroll-room pour que le dernier item entre dans la zone active */
	position:relative;
	z-index:3;
}

.spide-approche__item{
	max-width:clamp(240px,32%,380px);  /* limité pour ne pas chevaucher l'image centrale */
	transition:opacity .35s ease;
	opacity:.35; /* inactif par défaut, grisé */
}
.spide-approche__item.is-active{
	opacity:1;
}

.spide-approche__item--left{
	align-self:flex-start;
	text-align:right;
	margin-right:auto;     /* contre le bord gauche */
	padding-right:clamp(30px,4vw,80px); /* espace avant la ligne centrale */
}
.spide-approche__item--right{
	align-self:flex-end;
	text-align:left;
	margin-left:auto;      /* contre le bord droit */
	padding-left:clamp(30px,4vw,80px);
}

.spide-approche__item-title{
	display:flex;
	align-items:flex-start;
	gap:8px;
	font-size:clamp(18px,1.6vw,22px);
	line-height:1.2;
	font-weight:700;
	color:var(--spide-black);
	text-transform:uppercase;
	margin:0;
}
.spide-approche__item--left .spide-approche__item-title{
	flex-direction:row-reverse; /* le + à droite quand le texte est aligné à droite */
}
.spide-approche__item-title .plus{
	color:var(--spide-blue);
	font-size:18px;
	font-weight:600;
	line-height:1;
	flex-shrink:0;
}

/* ---- Responsive ---- */
@media (max-width:768px){
	.spide-approche__timeline{ max-width:none; }
	.spide-approche__line{ left:24px; transform:none; }
	.spide-approche__image{ display:none; } /* l'image sticky est masquée sur mobile */
	.spide-approche__sticky-wrap{ display:none; }
	.spide-approche__items{ gap:48px; }
	.spide-approche__item,
	.spide-approche__item--left,
	.spide-approche__item--right{
		width:auto;
		align-self:stretch;
		text-align:left;
		padding-left:48px;
		padding-right:0;
	}
	.spide-approche__item--left .spide-approche__item-title{ flex-direction:row; }
}

/* ============================================================
 * BANDE CTA — bouton "Nous contacter" centré sur fond blanc
 * ============================================================ */
.spide-cta-band{
	background:#fff;
	padding:clamp(56px,7vw,110px) clamp(24px,5vw,80px);
	display:flex;
	justify-content:center;
}
/* Variante du dernier CTA — 144 px de marge en bas avant le futur footer */
.spide-cta-band--end{
	padding-top:clamp(40px,5vw,80px);
	padding-bottom:144px;
}
.spide-cta-band__btn{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:18px 38px;
	border:1.6px solid var(--spide-blue);
	background:transparent;
	color:var(--spide-blue)!important;
	font-family:"Montserrat",sans-serif;
	font-size:14px;
	font-weight:600;
	letter-spacing:.04em;
	text-transform:uppercase;
	text-decoration:none;
	transition:background .2s ease, color .2s ease, transform .2s ease;
}
.spide-cta-band__btn:hover,
.spide-cta-band__btn:focus{
	background:var(--spide-blue);
	color:#fff!important;
	transform:translateY(-1px);
}
.spide-cta-band__btn svg{ flex-shrink:0; }

/* ============================================================
 * SECTION BÉNÉFICES — bande bleue, 3 colonnes avec séparateurs
 * ============================================================ */
.spide-benefices{
	position:relative;
	background:var(--spide-blue);
	color:#fff;
	font-family:"Montserrat",sans-serif;
	overflow:hidden;
}
.spide-benefices::before{
	content:"";
	position:absolute;
	inset:0;
	background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);
	background-size:22px 22px;
	pointer-events:none;
	z-index:0;
}
.spide-benefices__inner{
	position:relative;
	z-index:1;
	max-width:1440px;
	margin-inline:auto;
	padding:clamp(48px,5vw,80px) clamp(24px,5vw,80px) clamp(64px,7vw,110px);
}

.spide-benefices__header{
	margin-bottom:clamp(48px,5vw,80px);
	padding-bottom:clamp(28px,3vw,40px);
	border-bottom:1px solid rgba(255,255,255,.5);
}
.spide-benefices__overline{
	font-size:14px;
	font-weight:600;
	color:#fff;
	margin:0 0 24px;
}
.spide-benefices__title{
	font-size:clamp(22px,2.4vw,30px);
	line-height:1.25;
	font-weight:700;
	color:#fff;
	text-transform:uppercase;
	max-width:900px;
	margin:0;
}
.spide-benefices__arrow{
	display:inline-block;
	margin-left:12px;
	font-weight:400;
}

/* Grille 3 colonnes */
.spide-benefices__grid{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(3, minmax(0,1fr));
}
.spide-benefices__item{
	position:relative;
	padding:0 clamp(24px,3vw,48px);
}
/* Séparateurs verticaux entre colonnes */
.spide-benefices__item:not(:last-child)::after{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	width:1px;
	background:rgba(255,255,255,.5);
}
.spide-benefices__item:first-child{ padding-left:0; }
.spide-benefices__item:last-child { padding-right:0; }

/* Icône cercle */
.spide-benefices__icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:50px;
	height:50px;
	border:1px solid #fff;
	border-radius:50%;
	color:#fff;
	margin-bottom:24px;
}
.spide-benefices__icon svg{ display:block; }

.spide-benefices__item-title{
	font-size:clamp(18px,1.6vw,22px);
	line-height:1.2;
	font-weight:700;
	color:#fff;
	text-transform:uppercase;
	margin:0 0 20px;
}

.spide-benefices__item-desc{
	font-size:16px;
	font-weight:500;
	line-height:1.4;
	color:#fff;
	margin:0;
}
.spide-benefices__item-desc strong{ font-weight:600; }

/* Responsive */
@media (max-width:1024px){
	.spide-benefices__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:48px 24px; }
	.spide-benefices__item:not(:last-child)::after{ display:none; }
	.spide-benefices__item:not(:nth-child(2n))::after{
		content:"";
		position:absolute;
		top:0; bottom:0; right:-12px;
		width:1px;
		background:rgba(255,255,255,.5);
	}
}
@media (max-width:600px){
	.spide-benefices__grid{ grid-template-columns:1fr; gap:40px; }
	.spide-benefices__item{ padding:0; }
	.spide-benefices__item::after{ display:none!important; }
}

/* ============================================================
 * SECTION ENGAGEMENTS — 2 colonnes (gauche : liste, droite : photo)
 * ============================================================ */
.spide-engagements{
	position:relative;
	background:var(--spide-white);   /* #F1F1F1 — gris clair de la charte */
	font-family:"Montserrat",sans-serif;
	color:var(--spide-black);
	overflow:hidden;
	padding-block:0;                 /* aucune marge → l'image touche le haut et le bas de la section */
}
.spide-engagements__inner{
	position:relative;
	max-width:1440px;
	margin-inline:auto;
	padding:0 clamp(24px,5vw,80px);
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:clamp(24px,3vw,48px);
	align-items:center;
	min-height:clamp(420px,44vw,620px); /* la section = hauteur de l'image */
}

/* ---- Colonne gauche : carte BLANCHE en encart sur fond gris ---- */
.spide-engagements__left{
	position:relative;
	z-index:2;
	background:#fff;
	padding:clamp(28px,3vw,44px) clamp(24px,3vw,40px);
	min-width:0;
	align-self:end; /* l'encart est collé en bas de la section */
}
.spide-engagements__header{
	margin-bottom:clamp(40px,5vw,64px);
}
.spide-engagements__overline{
	font-size:14px;
	font-weight:600;
	color:var(--spide-grey);
	margin:0 0 24px;
}
.spide-engagements__overline .plus{ color:var(--spide-blue); margin-right:2px; }
.spide-engagements__title{
	font-size:clamp(22px,2.4vw,30px);
	line-height:1.2;
	font-weight:700;
	color:var(--spide-black);
	text-transform:uppercase;
	margin:0;
	max-width:520px;
}

/* ---- Liste ---- */
.spide-engagements__list{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
}
.spide-engagements__item{
	display:flex;
	align-items:center;
	gap:14px;
	padding:14px 0;
	border-bottom:1px solid #DCDCDC;
}
.spide-engagements__item:last-child{ border-bottom:0; }
.spide-engagements__icon{
	flex:0 0 44px;
	width:44px;
	height:44px;
	border-radius:50%;
	background:var(--spide-blue);
	display:inline-flex;
	align-items:center;
	justify-content:center;
}
.spide-engagements__icon img{
	width:22px;
	height:22px;
	display:block;
	object-fit:contain;
	filter:brightness(0) invert(1); /* force le logo en blanc, qu'il soit noir ou en couleur */
}
.spide-engagements__text{
	font-size:14px;
	font-weight:600;
	line-height:1.4;
	color:var(--spide-black);
}

/* ---- Colonne droite : photo, pleine hauteur de section ---- */
.spide-engagements__right{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	width:55%;
	min-width:0;
	z-index:1;
}
.spide-engagements__right img{
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
	object-position:center center;
}

/* Responsive */
@media (max-width:900px){
	.spide-engagements__inner{
		grid-template-columns:1fr;
		gap:0;
		min-height:0;
	}
	.spide-engagements__right{
		position:relative;
		width:100%;
		height:clamp(280px,60vw,420px);
		order:-1; /* photo au-dessus en mobile */
	}
	.spide-engagements__right::before{ display:none; }
	.spide-engagements__left{
		padding:32px clamp(20px,5vw,28px);
	}
}
@media (max-width:600px){
	.spide-engagements__title{ font-size:22px; }
}

/* Neutralise le rose #c36 du reset Hello Elementor */
.spide-besoin a:hover,
.spide-besoin a:focus{ color:inherit; }
.spide-besoin a.spide-besoin-hero__cta{ color:var(--spide-white)!important; }