/* ============================================================
 * SPIDE — Page unique « Secteur d'activité »
 * Chargé uniquement sur is_singular('secteur').
 * ============================================================ */
:root{
	--spide-blue:#0000FF;
	--spide-anthracite:#767676;
	--spide-black:#2D2D2D;
	--spide-white:#F1F1F1;
}

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

.spide-secteur-single{
	font-family:"Montserrat",sans-serif;
	background:#fff;
}

/* ============ HERO ============ */
.spide-sec-hero{
	position:relative;
	overflow:visible;            /* l'image peut déborder vers le bas */
	background:#fff;             /* zone sous le hero (où l'image déborde) */
}
.spide-sec-hero__inner{
	max-width:1600px;              /* même largeur que le header */
	margin-inline:auto;
	padding-inline:clamp(24px,4vw,72px); /* mêmes marges gauche/droite que le header */
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:clamp(32px,5vw,80px);
	align-items:start;
	/* bande gris clair à pointillés, bornée à la zone de contenu (entre les marges) ;
	   l'image déborde en dessous, sur le blanc */
	background:
		radial-gradient(rgba(45,45,45,.13) 1.1px, transparent 1.4px) 0 0 / 22px 22px,
		#F3F3F3;
	background-clip:content-box;
}

/* --- Colonne texte (gauche) --- */
.spide-sec-hero__text{
	padding:clamp(40px,5vw,90px) clamp(24px,2.5vw,48px) clamp(48px,6vw,96px) clamp(24px,3vw,56px);
	max-width:680px;
}
.spide-sec-hero__overline{
	display:block;
	margin-bottom:24px;
	font-size:14px;
	font-weight:600;
	color:var(--spide-anthracite);
}
.spide-sec-hero__overline .plus{ color:var(--spide-blue); font-weight:600; }
.spide-sec-hero__title{
	margin:0;
	font-size:clamp(26px,3vw,36px);
	font-weight:700;
	line-height:1.15;
	text-transform:uppercase;
	color:var(--spide-black);
}
.spide-sec-hero__desc{
	margin-top:24px;
	font-size:16px;
	line-height:1.4;
	color:var(--spide-anthracite);
}
.spide-sec-hero__desc p{ margin:0 0 12px; font-weight:500; }
.spide-sec-hero__desc p:last-child{ margin-bottom:0; }
.spide-sec-hero__desc strong{ font-weight:600; }

/* Bouton (variante btn-secondary — hover géré dans buttons.css) */
.spide-sec-hero__cta{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:auto;              /* annule le width:100% de .spide-btn-dark (hero.css) */
	gap:8px;
	margin-top:36px;
	padding:18px 33px;
	font-size:14px;
	font-weight:600;
	text-decoration:none;
	line-height:1;
}
.spide-sec-hero__cta svg{ display:block; }

/* --- Colonne image (droite) — plus haute, déborde vers le bas --- */
.spide-sec-hero__media{
	position:relative;
	align-self:start;
	height:clamp(380px,40vw,560px);            /* un peu plus haute que la bande grise gauche */
	margin-bottom:clamp(-150px,-10vw,-80px);   /* déborde moins → plus d'espace pour la section d'en dessous */
}
.spide-sec-hero__media img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

/* ============ SECTION « NOS SOLUTIONS » ============ */
.spide-sol{
	background:#fff;
	padding:clamp(40px,6vw,90px) 0 clamp(48px,7vw,100px);
}
.spide-sol__inner{
	max-width:1600px;
	margin-inline:auto;
	padding-inline:clamp(24px,4vw,72px);   /* aligné sur le header */
}

/* En-tête 2 colonnes : titre à gauche, intro à droite */
.spide-sol__head{
	position:relative;
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:clamp(28px,5vw,80px);
	align-items:end;
	margin-bottom:clamp(36px,4vw,56px);
}
/* Séparateur vertical entre la colonne gauche et droite :
   remonte jusqu'au bas de l'image du hero, descend jusqu'au trait du haut de la liste */
.spide-sol__head::after{
	content:"";
	position:absolute;
	left:50%;
	top:calc(-1 * clamp(40px,6vw,90px));        /* = padding-top de .spide-sol → atteint le bas de l'image */
	bottom:calc(-1 * clamp(36px,4vw,56px));     /* = margin-bottom → atteint le trait du haut de la liste */
	width:1px;
	background:#DCDCDC;
	transform:translateX(-0.5px);
}
.spide-sol__overline{
	display:block;
	margin-bottom:24px;
	font-size:14px;
	font-weight:600;
	color:var(--spide-anthracite);
}
.spide-sol__overline .plus{ color:var(--spide-blue); }
.spide-sol__title{
	margin:0;
	font-size:clamp(24px,2.4vw,30px);
	font-weight:700;
	line-height:1.2;
	text-transform:uppercase;
	color:var(--spide-black);
}
.spide-sol__intro{
	font-size:16px;
	line-height:1.4;
	color:var(--spide-anthracite);
}
.spide-sol__intro p{ margin:0 0 12px; font-weight:500; }
.spide-sol__intro p:last-child{ margin-bottom:0; }
.spide-sol__intro strong{ font-weight:600; }

/* Liste des lignes « étape » */
.spide-sol__list{
	list-style:none;
	margin:0;
	padding:0;
	border-top:1px solid #DCDCDC;       /* trait du haut */
}
.spide-sol__row{
	display:grid;
	grid-template-columns:minmax(180px,232px) minmax(0,1fr) minmax(0,413px);
	align-items:center;
	gap:clamp(24px,6vw,132px);
	padding:clamp(20px,2.2vw,28px) 0;
	border-bottom:1px solid #DCDCDC;     /* trait entre lignes */
}
.spide-sol__row-head{
	display:flex;
	align-items:center;
	gap:6px;
}
.spide-sol__plus{
	color:var(--spide-blue);
	font-size:18px;
	font-weight:600;
	line-height:1;
}
.spide-sol__row-title{
	margin:0;
	font-size:22px;
	font-weight:700;
	line-height:1.2;
	color:var(--spide-black);
}
.spide-sol__row-desc{
	font-size:16px;
	font-weight:600;
	line-height:1.4;
	color:var(--spide-anthracite);
}
.spide-sol__row-desc p{ margin:0; }
.spide-sol__row-media{
	justify-self:end;
	width:100%;
	max-width:413px;
}
.spide-sol__row-media img{
	display:block;
	width:100%;
	height:clamp(120px,11vw,150px);
	object-fit:cover;
	border:1px solid rgba(118,118,118,.26);
}

/* ============ SECTION « EXPERTISE » — 2 colonnes texte ============ */
.spide-sec-exp{
	background:var(--spide-white);
}
.spide-sec-exp__inner{
	max-width:1600px;
	margin-inline:auto;
	padding:clamp(40px,5vw,80px) clamp(24px,4vw,72px) 0;  /* pas de marge en bas : la carte blanche touche le bas */
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:clamp(32px,5vw,80px);
	align-items:stretch;
}
.spide-sec-exp__col--left{
	background:#fff;
	padding:clamp(28px,3.5vw,56px);
}
.spide-sec-exp__col--right{
	align-self:center;
	padding-block:clamp(8px,2vw,32px);
}
.spide-sec-exp__overline{
	display:block;
	margin-bottom:24px;
	font-size:14px;
	font-weight:600;
	color:var(--spide-anthracite);
}
.spide-sec-exp__overline .plus{ color:var(--spide-blue); }
.spide-sec-exp__title{
	margin:0 0 24px;
	font-size:clamp(22px,2.4vw,30px);
	font-weight:700;
	line-height:1.2;
	color:var(--spide-black);
}
.spide-sec-exp__text{
	font-size:16px;
	line-height:1.4;
	color:var(--spide-anthracite);
}
.spide-sec-exp__text p{ margin:0 0 12px; font-weight:500; }
.spide-sec-exp__text p:last-child{ margin-bottom:0; }
.spide-sec-exp__text strong{ font-weight:600; }
@media (max-width:900px){
	.spide-sec-exp__inner{ grid-template-columns:1fr; gap:24px; padding-bottom:clamp(40px,8vw,56px); }
	.spide-sec-exp__col--right{ align-self:start; padding-block:0; }
}

/* ============ SECTION BLANCHE — bouton « Nous contacter » ============ */
.spide-sec-cta{
	background:#fff;
	padding:clamp(48px,7vw,100px) clamp(24px,4vw,72px);
	display:flex;
	justify-content:center;
}

/* ============ SECTION « BÉNÉFICES » (bande bleue 3 colonnes) ============ */
.spide-sec-benefices{
	position:relative;
	background:var(--spide-blue);
	color:#fff;
	overflow:hidden;
}
.spide-sec-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-sec-benefices__inner{
	position:relative;
	z-index:1;
	max-width:1600px;
	margin-inline:auto;
	padding:clamp(48px,5vw,80px) clamp(24px,4vw,72px) clamp(64px,7vw,110px);
}
.spide-sec-benefices__header{
	margin-bottom:clamp(48px,5vw,80px);
	padding-bottom:clamp(28px,3vw,40px);
	border-bottom:1px solid rgba(255,255,255,.5);
}
.spide-sec-benefices__overline{
	font-size:14px;
	font-weight:600;
	color:#fff;
	margin:0 0 24px;
}
.spide-sec-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-sec-benefices__arrow{
	display:inline-block;
	margin-left:12px;
	font-weight:400;
}
.spide-sec-benefices__grid{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(3, minmax(0,1fr));
}
.spide-sec-benefices__item{
	position:relative;
	padding:0 clamp(24px,3vw,48px);
}
.spide-sec-benefices__item:not(:last-child)::after{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	width:1px;
	background:rgba(255,255,255,.5);
}
.spide-sec-benefices__item:first-child{ padding-left:0; }
.spide-sec-benefices__item:last-child { padding-right:0; }
.spide-sec-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-sec-benefices__icon svg{ display:block; }
/* Variante icône image : l'image inclut déjà son cercle → pas de cercle bordé */
.spide-sec-benefices__icon--img{
	width:auto;
	height:auto;
	border:0;
	border-radius:0;
}
.spide-sec-benefices__icon--img img{
	width:50px;
	height:50px;
	object-fit:contain;
	display:block;
}
.spide-sec-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-sec-benefices__item-desc{
	font-size:16px;
	font-weight:500;
	line-height:1.4;
	color:#fff;
	margin:0;
}
.spide-sec-benefices__item-desc strong{ font-weight:600; }
@media (max-width:1024px){
	.spide-sec-benefices__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:48px 24px; }
	.spide-sec-benefices__item:not(:last-child)::after{ display:none; }
	.spide-sec-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-sec-benefices__grid{ grid-template-columns:1fr; gap:40px; }
	.spide-sec-benefices__item{ padding:0; }
	.spide-sec-benefices__item::after{ display:none!important; }
}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
	.spide-sol__row{
		grid-template-columns:minmax(150px,210px) minmax(0,1fr) minmax(0,300px);
		gap:clamp(20px,3vw,48px);
	}
}
@media (max-width:768px){
	.spide-sol__head{
		grid-template-columns:1fr;
		gap:20px;
		align-items:start;
	}
	.spide-sol__head::after{ display:none; }
	.spide-sol__row{
		grid-template-columns:1fr;
		gap:14px;
		align-items:start;
	}
	.spide-sol__row-media{
		justify-self:stretch;
		max-width:none;
	}
}
@media (max-width:900px){
	.spide-sec-hero__inner{
		grid-template-columns:1fr;
		gap:0;
		padding-inline:0;          /* pleine largeur en mobile */
		background-clip:border-box; /* le fond gris couvre toute la largeur */
	}
	.spide-sec-hero__text{
		max-width:none;
		padding-bottom:clamp(28px,5vw,40px);
	}
	.spide-sec-hero__media{
		height:clamp(240px,58vw,420px);
		margin-bottom:0;          /* empilé : plus de débord (sinon l'image recouvre la section d'en dessous) */
	}
}

/* ============ MOBILE — ajustements fins ============ */
@media (max-width:768px){
	/* garde-fou anti-scroll horizontal (clip, pas hidden → ne casse pas sticky) */
	.spide-secteur-single{ overflow-x:clip; }
}
@media (max-width:520px){
	.spide-sec-hero__text{
		padding:clamp(28px,8vw,40px) clamp(18px,5vw,24px) clamp(32px,8vw,40px);
	}
	.spide-sec-hero__title{ font-size:clamp(22px,7vw,28px); }
	.spide-sol{ padding-block:clamp(32px,9vw,48px); }
	.spide-sol__row-title{ font-size:20px; }
	.spide-sol__row-desc{ font-size:15px; }
	.spide-sol__row-media img{ height:clamp(150px,42vw,190px); }   /* image plus présente sur petit écran */
	.spide-sec-benefices__inner{ padding-block:clamp(40px,10vw,56px); }
	.spide-sec-exp__col--left{ padding:clamp(24px,6vw,32px); }
	.spide-sec-exp__title{ font-size:clamp(20px,6.5vw,26px); }
}