/* ==========================================================================
   Approche pédagogique — XD « Formation SIG - approche-pedagogique » (1920 x 4787)
   Sections et bloc Certifications sur fonds gris / blanc alternés (comme Entreprise)
   ========================================================================== */

/* ---------- Sections : titre, introduction 26px/37px, liste 22px/28px à puces / étapes vertes ---------- */
.approche__inner { padding-block: clamp(48px, 5.6vw, 107px); }
.approche__section:first-child .approche__inner { padding-top: clamp(48px, 6.25vw, 120px); }
/* Plus de filet entre les sections (retour client du 28/10/2026) : fonds gris / blanc alternés, comme la page Entreprise */

.approche .section-head { margin-bottom: clamp(16px, 1.2vw, 22px); }
.approche__intro {
	max-width: 1283px;
	margin-bottom: clamp(20px, 1.3vw, 25px);
	font-size: clamp(17px, 1.35vw, 26px);
	line-height: 1.42; /* 26px / 37px */
}

.approche__list {
	display: grid;
	gap: clamp(12px, 1.2vw, 23px);
	max-width: 1270px;
}
.approche__item {
	position: relative;
	padding-left: clamp(32px, 2.66vw, 51px);
	font-size: var(--fs-22);
	line-height: 1.27; /* 22px / 28px */
}
/* Puce : triangle vert pointé à droite (XD 13 x 25) */
.approche__item:not(.approche__item--step)::before {
	content: "";
	position: absolute;
	left: clamp(4px, .68vw, 13px);
	top: .1em;
	width: clamp(9px, .7vw, 13.5px);
	height: clamp(16px, 1.3vw, 25px);
	background: var(--c-green);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* Étape : numéro Bold vert, compté par le gabarit */
.approche__step {
	position: absolute;
	left: clamp(4px, .68vw, 13px);
	top: 0;
	font-weight: 700;
	color: var(--c-green);
}
.approche__text p { margin: 0; }
.approche__text p + p { margin-top: .5em; }
.approche__text strong { font-weight: 700; }
/* Liens : trait vert de 27 x 3px centré sous le lien, vert au survol */
.approche__text a {
	padding-bottom: 5px;
	background: linear-gradient(var(--c-green), var(--c-green)) no-repeat 50% 100% / clamp(18px, 1.4vw, 27px) 3px; /* centré sous le lien (retour client du 28/10/2026) */
	color: inherit;
	transition: color .3s ease-out;
}
.approche__text a:hover { color: var(--c-green); }

/* ---------- Certifications : texte et badges à gauche, image 779 x 493 à droite ---------- */
.approche-certif { padding-block: clamp(48px, 4vw, 77px) clamp(48px, 5vw, 96px); }
.approche-certif__grid {
	display: grid;
	grid-template-columns: minmax(0, 884fr) minmax(0, 779fr);
	gap: 40px clamp(32px, 1.8vw, 35px);
	align-items: start;
}
.approche-certif__body { padding-top: clamp(0px, 2.2vw, 43px); }
/* Même taille que les titres du site (--fs-h2, retour client) au lieu des 48px du XD */
.approche-certif__title {
	margin-bottom: clamp(16px, 1.5vw, 29px);
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.035;
	color: var(--c-text);
}
.approche-certif__text { max-width: 686px; font-size: var(--fs-22); line-height: 1.27; }
.approche-certif__logos { display: flex; flex-wrap: wrap; gap: clamp(16px, 1.6vw, 30px); margin-top: clamp(24px, 2.2vw, 42px); }
.approche-certif__logos img { width: clamp(110px, 9.53vw, 183px); height: clamp(110px, 9.53vw, 183px); object-fit: contain; }
.approche-certif__media img { width: 100%; aspect-ratio: 779 / 493; object-fit: cover; }

/* ---------- Tablette ---------- */
@media (max-width: 1140px) {
	.approche-certif__grid { grid-template-columns: minmax(0, 1fr); }
	.approche-certif__body { padding-top: 0; }
	.approche-certif__media { max-width: 779px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
	.approche__intro { line-height: 1.4; }
	.approche__item { line-height: 1.4; }
}