/* ============================================================
 * SPIDE — Page « À propos » (gabarit tpl-a-propos.php)
 * Chargé uniquement sur cette page. Reprend la grammaire des
 * pages Secteur : bande grise pointillée, sur-titre « + », listes
 * à filets #DCDCDC, bande bleue à colonnes séparées.
 * ============================================================ */
:root{
	--spide-blue:#0000FF;
	--spide-anthracite:#767676;
	--spide-black:#2D2D2D;
	--spide-white:#F1F1F1;
}

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

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

/* Sur-titre commun (fond clair) */
.spide-ap-overline{
	display:block;
	margin-bottom:24px;
	font-size:14px;
	font-weight:600;
	color:var(--spide-anthracite);
}
.spide-ap-overline .plus{ color:var(--spide-blue); font-weight:600; }

/* ============ 1. EN-TÊTE ============ */
.spide-ap-hero{ background:#fff; }
.spide-ap-hero__inner{
	max-width:1600px;
	margin-inline:auto;
	padding-inline:clamp(24px,4vw,72px);
	display:grid;
	grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
	gap:clamp(32px,5vw,80px);
	align-items:center;
	background:
		radial-gradient(rgba(45,45,45,.13) 1.1px, transparent 1.4px) 0 0 / 22px 22px,
		#F3F3F3;
	background-clip:content-box;
}
.spide-ap-hero__inner--noimg{ grid-template-columns:minmax(0,1fr); }

.spide-ap-hero__text{
	padding:clamp(40px,5vw,90px) clamp(24px,2.5vw,48px) clamp(44px,5vw,84px) clamp(24px,3vw,56px);
	max-width:820px;
}
.spide-ap-hero__overline{
	display:block;
	margin-bottom:24px;
	font-size:14px;
	font-weight:600;
	color:var(--spide-anthracite);
}
.spide-ap-hero__overline .plus{ color:var(--spide-blue); font-weight:600; }
.spide-ap-hero__title{
	margin:0;
	font-size:clamp(26px,3vw,36px);
	font-weight:700;
	line-height:1.22;
	text-transform:uppercase;
	color:var(--spide-black);
}
.spide-ap-hero__chapo{
	margin-top:clamp(20px,2vw,28px);
	color:var(--spide-anthracite);
	font-size:clamp(15px,1.05vw,17px);
	line-height:1.75;
}
.spide-ap-hero__chapo p{ margin:0 0 14px; }
.spide-ap-hero__chapo p:last-child{ margin-bottom:0; }
.spide-ap-hero__chapo strong{ color:var(--spide-black); font-weight:600; }

.spide-ap-hero__media{
	position:relative;
	height:clamp(320px,32vw,480px);
	margin-block:clamp(24px,3vw,48px);
	overflow:hidden;
}
.spide-ap-hero__img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============ 2. L'ORIGINE ============ */
.spide-ap-origine{ background:#fff; }
.spide-ap-origine__inner{
	max-width:1600px;
	margin-inline:auto;
	padding:clamp(56px,7vw,110px) clamp(24px,4vw,72px);
	display:grid;
	grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
	gap:clamp(32px,5vw,90px);
	align-items:start;
}
.spide-ap-origine__title{
	margin:0;
	font-size:clamp(22px,2.4vw,30px);
	font-weight:700;
	line-height:1.25;
	text-transform:uppercase;
	color:var(--spide-black);
	max-width:520px;
}
.spide-ap-origine__texte{
	color:var(--spide-anthracite);
	font-size:clamp(15px,1.05vw,17px);
	line-height:1.8;
}
.spide-ap-origine__texte p{ margin:0 0 18px; }
.spide-ap-origine__texte p:last-child{ margin-bottom:0; }
.spide-ap-origine__texte strong{ color:var(--spide-black); font-weight:600; }

/* ============ 3. LE PARCOURS (frise) ============ */
.spide-ap-parcours{ background:var(--spide-white); }
.spide-ap-parcours__inner{
	max-width:1600px;
	margin-inline:auto;
	padding:clamp(56px,7vw,110px) clamp(24px,4vw,72px);
}
.spide-ap-parcours__head{ margin-bottom:clamp(32px,4vw,56px); max-width:860px; }
.spide-ap-parcours__title{
	margin:0;
	font-size:clamp(22px,2.4vw,30px);
	font-weight:700;
	line-height:1.25;
	text-transform:uppercase;
	color:var(--spide-black);
}

.spide-ap-frise{ list-style:none; margin:0; padding:0; border-top:1px solid #DCDCDC; }
.spide-ap-frise__item{
	display:grid;
	grid-template-columns:180px minmax(0,1fr);
	gap:clamp(20px,3vw,56px);
	padding:clamp(26px,3vw,40px) 0;
	border-bottom:1px solid #DCDCDC;
}
.spide-ap-frise__annee{
	position:relative;
	padding-left:22px;
	font-size:clamp(18px,1.6vw,22px);
	font-weight:700;
	color:var(--spide-blue);
	line-height:1.3;
}
.spide-ap-frise__annee::before{
	content:"+";
	position:absolute;
	left:0; top:0;
	color:var(--spide-blue);
	font-weight:600;
}
.spide-ap-frise__titre{
	margin:0 0 10px;
	font-size:clamp(15px,1.2vw,18px);
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.01em;
	color:var(--spide-black);
}
.spide-ap-frise__texte{
	color:var(--spide-anthracite);
	font-size:clamp(14px,1vw,16px);
	line-height:1.75;
	max-width:820px;
}
.spide-ap-frise__texte p{ margin:0 0 12px; }
.spide-ap-frise__texte p:last-child{ margin-bottom:0; }
.spide-ap-frise__texte strong{ color:var(--spide-black); font-weight:600; }

/* ============ 4. CE QUE ÇA CHANGE POUR VOUS (bande bleue) ============ */
.spide-ap-atouts{
	position:relative;
	background:var(--spide-blue);
	color:#fff;
	overflow:hidden;
}
.spide-ap-atouts__inner{
	position:relative;
	z-index:1;
	max-width:1600px;
	margin-inline:auto;
	padding:clamp(48px,5vw,80px) clamp(24px,4vw,72px) 0;
}
.spide-ap-atouts__head{
	margin-bottom:clamp(40px,4.5vw,70px);
	max-width:900px;
}
.spide-ap-atouts__overline{
	display:block;
	margin:0 0 24px;
	font-size:14px;
	font-weight:600;
	color:#fff;
}
.spide-ap-atouts__overline .plus{ color:#fff; }
.spide-ap-atouts__title{
	margin:0;
	font-size:clamp(22px,2.4vw,30px);
	line-height:1.25;
	font-weight:700;
	color:#fff;
	text-transform:uppercase;
}
.spide-ap-atouts__grid{
	list-style:none; margin:0; padding:0;
	display:grid;
	grid-template-columns:repeat(3, minmax(0,1fr));
	position:relative;
}
.spide-ap-atouts__grid::before,
.spide-ap-atouts__grid::after{
	content:""; position:absolute; left:50%; transform:translateX(-50vw);
	width:100vw; height:1px; background:rgba(255,255,255,.5); pointer-events:none;
}
.spide-ap-atouts__grid::before{ top:0; }
.spide-ap-atouts__grid::after{ bottom:0; }
.spide-ap-atouts__item{
	padding:clamp(28px,3vw,44px) clamp(20px,2.4vw,40px);
	border-left:1px solid rgba(255,255,255,.5);
}
.spide-ap-atouts__item:first-child{ border-left:0; padding-left:0; }
.spide-ap-atouts__num{
	display:block;
	margin-bottom:16px;
	font-size:14px;
	font-weight:700;
	color:rgba(255,255,255,.7);
}
.spide-ap-atouts__item-title{
	margin:0 0 12px;
	font-size:clamp(15px,1.2vw,18px);
	font-weight:700;
	line-height:1.35;
	color:#fff;
	text-transform:uppercase;
}
.spide-ap-atouts__text{
	font-size:clamp(14px,1vw,16px);
	line-height:1.75;
	color:rgba(255,255,255,.88);
}
.spide-ap-atouts__text p{ margin:0 0 12px; }
.spide-ap-atouts__text p:last-child{ margin-bottom:0; }
.spide-ap-atouts__text strong{ color:#fff; font-weight:600; }

/* ============ 5. REPÈRES ============ */
.spide-ap-reperes{ background:#fff; }
.spide-ap-reperes__inner{
	max-width:1600px;
	margin-inline:auto;
	padding:clamp(56px,7vw,110px) clamp(24px,4vw,72px);
}
.spide-ap-reperes__title{
	margin:0 0 clamp(28px,3vw,44px);
	font-size:clamp(20px,2vw,26px);
	font-weight:700;
	text-transform:uppercase;
	color:var(--spide-black);
}
.spide-ap-reperes__list{
	margin:0;
	display:grid;
	grid-template-columns:repeat(2, minmax(0,1fr));
	gap:0 clamp(32px,5vw,80px);
	border-top:1px solid #DCDCDC;
}
.spide-ap-reperes__row{
	display:grid;
	grid-template-columns:170px minmax(0,1fr);
	gap:clamp(14px,2vw,32px);
	padding:20px 0;
	border-bottom:1px solid #DCDCDC;
}
.spide-ap-reperes__row dt{
	font-size:14px;
	font-weight:700;
	text-transform:uppercase;
	color:var(--spide-black);
}
.spide-ap-reperes__row dd{
	margin:0;
	font-size:clamp(14px,1vw,16px);
	line-height:1.7;
	color:var(--spide-anthracite);
}

/* ============ 6. APPEL À L'ACTION ============ */
.spide-ap-cta{ background:#fff; }
.spide-ap-cta__inner{
	max-width:900px;
	margin-inline:auto;
	padding:clamp(48px,7vw,100px) clamp(24px,4vw,72px) clamp(64px,8vw,120px);
	text-align:center;
}
.spide-ap-cta__title{
	margin:0 0 18px;
	font-size:clamp(22px,2.4vw,30px);
	font-weight:700;
	text-transform:uppercase;
	color:var(--spide-black);
}
.spide-ap-cta__text{
	margin:0 auto clamp(28px,3vw,40px);
	max-width:680px;
	color:var(--spide-anthracite);
	font-size:clamp(15px,1.05vw,17px);
	line-height:1.75;
}
.spide-ap-cta__text p{ margin:0 0 12px; }
.spide-ap-cta__text p:last-child{ margin-bottom:0; }
.spide-ap-cta__btn{ width:auto; justify-content:center; }

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
	.spide-ap-frise__item{ grid-template-columns:130px minmax(0,1fr); }
	.spide-ap-reperes__list{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:900px){
	.spide-ap-hero__inner{ grid-template-columns:minmax(0,1fr); }
	.spide-ap-hero__media{ height:clamp(240px,55vw,360px); margin-top:0; }
	.spide-ap-origine__inner{ grid-template-columns:minmax(0,1fr); }
	.spide-ap-atouts__grid{ grid-template-columns:minmax(0,1fr); }
	.spide-ap-atouts__item{
		border-left:0;
		border-top:1px solid rgba(255,255,255,.5);
		padding-left:0; padding-right:0;
	}
	.spide-ap-atouts__item:first-child{ border-top:0; }
}
@media (max-width:640px){
	.spide-ap-frise__item{ grid-template-columns:minmax(0,1fr); gap:12px; }
	.spide-ap-reperes__row{ grid-template-columns:minmax(0,1fr); gap:6px; }
	.spide-ap-hero__text{ padding-inline:clamp(20px,5vw,28px); }
}