/* ==========================================================================
   Entreprise — XD « Formation SIG - Entreprise » (1920 x 5534)
   Raison d'être (gris) · blocs de certifications (blanc / gris alternés) · Modalité pédagogique (gris)
   ========================================================================== */

/* ---------- Raison d'être : texte 30px/40px à gauche, slider d'images 802 x 534 à droite ---------- */
.raison { padding-block: clamp(48px, 4.84vw, 93px) clamp(48px, 3.6vw, 70px); }
.raison__grid {
	display: grid;
	grid-template-columns: minmax(0, 795fr) minmax(0, 802fr);
	/* Retour client du 03/11/2026 : image et bloc titre + texte centrés verticalement l'un par rapport à l'autre.
	   L'image occupe toute la hauteur ; les rangées vides en 1fr, en haut et en bas, centrent le titre et le texte
	   quand l'image est plus haute (et l'image est centrée quand c'est le texte qui est plus haut). */
	grid-template-rows: 1fr auto auto 1fr;
	grid-template-areas:
		".     media"
		"head  media"
		"text  media"
		".     media";
	column-gap: clamp(40px, 6.56vw, 126px);
	align-items: start;
}
.raison__head { grid-area: head; }
.raison .section-head { margin-bottom: clamp(28px, 3.5vw, 67px); }
.raison__text {
	grid-area: text;
	font-size: var(--fs-22); /* retour client du 03/11/2026 : 22px au lieu de 30px */
	line-height: 1.45;
}
/* Liens du texte (arx iT) : au survol, texte vert et petit trait vert qui s'allonge dessous, comme le menu du haut (header.css), retour client du 10/11/2026 */
.raison__text a { position: relative; transition: color .2s; }
.raison__text a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -2px;
	width: 5px;
	height: 3px;
	background: var(--c-green);
	opacity: 0;
	transform: translateX(-50%);
	transition: opacity .2s, width .25s var(--ease);
}
.raison__text a:hover { color: var(--c-green); }
.raison__text a:hover::after { opacity: 1; width: 22px; }

/* Carrousel : une image à la fois, flèches à cheval sur les bords de l'image */
.raison__media { grid-area: media; align-self: center; }
.raison__slide { aspect-ratio: 802 / 534; background: var(--c-border); }
.raison__media .slider__arrow--prev { left: calc(clamp(44px, 4.5vw, 86px) / -2); }
.raison__media .slider__arrow--next { right: calc(clamp(44px, 4.5vw, 86px) / -2); }

/* ---------- Certifications : logos N&B, couleur + agrandissement au survol (état XD) ---------- */
.certifications {
	/* Retour client du 20/10/2026 : logos à la même hauteur que ceux de la section clients
	   (125px à 1920px ; la case fait 144px car le logo n'en occupe que 87 % pour le zoom).
	   Retour client du 28/10/2026 : logos rapprochés, la case suit la largeur du logo (plus de 5 cases réparties
	   sur toute la largeur, qui laissaient ~200px entre deux badges carrés) ; --logos-gap = l'espace réel entre deux logos. */
	--logos-gap: clamp(40px, 3.6vw, 70px); /* retour client du 28/10/2026 : un peu plus d'air entre les logos */
	--logo-h: clamp(92px, 7.5vw, 144px);
	/* Bas de section réduit (retour client du 28/10/2026, avant clamp(64px, 10.4vw, 200px)) : même marge qu'en haut */
	padding-block: clamp(56px, 6.25vw, 120px);
}

/* Retour client du 20/10/2026 : même espace titre → logos que la section clients (marge de .section-head) ;
   on retire la marge laissée par le logo dans sa case (87 % de la hauteur) */
.certifications .section-head { margin-bottom: calc(clamp(32px, 4.1vw, 78px) - var(--logo-h) * .065); }

/* Marge verticale interne : le logo agrandi n'est pas rogné par le défilement horizontal */
.certifications__list {
	align-items: center;
	gap: var(--logos-gap);
	/* Marge latérale aussi : le premier et le dernier logo agrandis ne sont pas rognés */
	margin: -24px -16px;
	padding: 24px 16px;
	scroll-padding-inline: 16px;
}
.certifications__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--logo-h);
}
/* 87 % de la case : il reste la place pour l'agrandissement (x 1,15) */
.certifications__logo {
	width: auto;
	max-width: none;
	height: calc(var(--logo-h) * .87);
	filter: grayscale(1);
	transition: filter .3s ease-out, transform .4s var(--ease);
}
.certifications__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.certifications__item:hover .certifications__logo { filter: none; transform: scale(1.15); }

/* Mode sombre : plus de carré blanc derrière les logos (retour client du 03/11/2026) ; on affiche la « Version mode sombre » du logo si elle est saisie */

/* ---------- Modalité pédagogique : texte à gauche, image 948 x 632 jusqu'au bord droit ---------- */
.pedago { padding-block: clamp(12px, .9vw, 17px); }
.pedago__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
}
.pedago__body { padding-block: clamp(32px, 3.96vw, 76px) 32px; padding-right: 24px; }
.pedago__title {
	margin-bottom: clamp(16px, 1.5vw, 29px);
	font-size: var(--fs-h2); /* taille des titres du site (retour client), XD 48px */
	font-weight: 700;
	line-height: 1.035;
	color: var(--c-text);
}
.pedago__text { max-width: 686px; font-size: var(--fs-22); line-height: 1.27; }
/* Retour client du 11/11/2026 : puces de la liste en flèches vertes, comme les objectifs des fiches (.arrow-list, pages/formation.css).
   Bloc « Approche pédagogique » de la page Entreprise seulement (ce fichier n'est chargé que sur cette page). */
.pedago__text ul { list-style: none; padding-left: 0; display: grid; gap: clamp(10px, 1.1vw, 21px); }
.pedago__text ul li { position: relative; padding-left: clamp(26px, 1.93vw, 37px); }
.pedago__text ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .08em;
	width: clamp(10px, .78vw, 15px);
	height: clamp(18px, 1.41vw, 27px);
	background: var(--c-green);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.pedago .more-link { margin-top: clamp(20px, 1.6vw, 30px); }
.pedago__media {
	margin-right: calc(var(--gutter) * -1 + clamp(0px, .63vw, 12px));
	/* Retour client du 03/11/2026 : texte long en production, l'image reste visible tant que le texte défile à côté,
	   centrée verticalement dans la zone visible (entre le bas du header et le bas de l'écran).
	   --pedago-h = hauteur de l'image, mesurée par main.js ; si l'image est plus haute que la zone, elle se colle sous le header.
	   Annulé en tablette, où elle passe sous le texte. */
	--pedago-top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px));
	position: sticky;
	top: max(calc(var(--pedago-top) + 24px), calc((100vh + var(--pedago-top) - var(--pedago-h, 100vh)) / 2));
}
.pedago__media img { width: 100%; }

/* ---------- Tablette ---------- */
@media (max-width: 1140px) {
	.raison__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas: "head" "text" "media";
		row-gap: 40px;
	}
	/* Texte et image sur toute la largeur du conteneur */
	.raison__media { width: 100%; }
	.pedago { padding-block: var(--section-y); }
	.pedago__grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
	.pedago__body { padding: 0; }
	.pedago__media { margin-right: 0; position: static; }
	/* Image empilée sous le texte : limitée et centrée pour ne pas écraser la section */
	.pedago__media img { max-width: 500px; margin-inline: auto; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
	.raison__text { line-height: 1.5; }
	/* Flèches gardées en mobile, posées dans l'image (la marge latérale est trop étroite) */
	.raison__media .slider__arrow--prev { left: 8px; }
	.raison__media .slider__arrow--next { right: 8px; }
}

/* Pas de survol au doigt : logos directement en couleur */
@media (hover: none) {
	.certifications__logo { filter: none; }
}