/*
 * Variante « dynamique » de l'accueil (Claude Design, 30.09.2026).
 * À charger après hub.css. Aucun balisage modifié : photo et formes EPSN
 * (fleur, feuille, tache or) sont posées en pseudo-éléments.
 * JS facultatif : assets/js/variante.js (décalage des formes à la souris).
 */
header.hero_bg { --px: 0; --py: 0; }

@media (min-width: 900px) {
	header.hero_bg { min-height: 330px; }
	/* Surtitre en pilule, titre sur la colonne gauche. */
	header.hero_bg .hero .container > .row { flex-direction: column; align-items: flex-start; }
	header .epsn-detail.home {
		flex: none; max-width: none; width: auto; margin: 36px 0 18px 15px; padding: 8px 18px 8px 34px;
		position: relative; border-radius: 60px; background: var(--apmt-bleu-pastel);
		color: var(--apmt-bleu-fonce); font-family: 'Suisse intl Medium', sans-serif; font-size: 14px; line-height: 20px;
	}
	header .epsn-detail.home::before {
		content: ""; display: block !important; position: absolute; left: 14px; top: 13px;
		width: 10px; height: 10px; border-radius: 50%; background: var(--apmt-bleu);
	}
	header .epsn-detail.home span { display: inline; }
	header .epsn-detail.home span + span::before { content: " "; }
	header.hero_bg .hero .col-md-8 { flex: none; max-width: 56%; }
	header.hero_bg .main-title { margin-top: 0; font-size: 62px; line-height: 64px; }

	/* Photo du Biopôle en forme organique, à droite du haut de page et de l'accroche. */
	header.hero_bg::before {
		right: 5%; top: 30px; width: 36%; max-width: 500px; height: 540px;
		background: url("../img/ecole.jpg") center / cover no-repeat;
		border: 6px solid #fff; box-shadow: 0 0 20px rgba(0, 0, 0, .15);
		border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%;
		transform: translate(calc(var(--px) * -10px), calc(var(--py) * -10px));
		transition: transform .3s ease-in-out;
	}
	/* Tache pastel et cadre pointillé derrière la photo, formes EPSN autour. */
	header.hero_bg::after {
		left: auto; right: 2%; top: 60px; bottom: auto; width: 42%; max-width: 580px; height: 560px;
		aspect-ratio: auto; opacity: 1; border-radius: 0; z-index: -2;
		background:
			url("../img/deco-fleur.svg") 30% 0 / 64px no-repeat,
			url("../img/deco-feuille.svg") 2% 58% / 70px no-repeat,
			url("../img/deco-jaune.svg") 96% 100% / 90px no-repeat,
			radial-gradient(closest-side, var(--apmt-bleu-pastel) 98%, transparent 100%) 60% 60% / 88% 88% no-repeat;
		transform: translate(calc(var(--px) * 24px), calc(var(--py) * 24px));
		transition: transform .3s ease-in-out;
	}
	/* Logo OrTra et pastille : posés au bord de la photo. */
	header .ortra-tc-icon { right: calc(5% - 20px); top: 430px; z-index: 2; }
	header .ortra-tc-icon p { display: none; }
	header .ortra-tc-icon img { width: 160px; }
	header .reasons_pastille { right: auto; left: calc(59% - 40px); top: 440px; bottom: auto; height: 150px; z-index: 2; }

	/* Accroche : colonne gauche, alignée à gauche, la photo occupe la droite. */
	.accroche { text-align: left; padding-top: 10px; }
	.accroche .container > :not(.reperes) { max-width: 56%; margin-left: 0; margin-right: 0; }
	.accroche__phrase { font-size: 24px; line-height: 34px; }
	.actions--centre { justify-content: flex-start; }
	.accroche__suite a::after { content: " \2192"; }
	.reperes { margin-top: 150px; }
}

/* Repères : chiffre des heures en très grand, case or à coin organique. */
.reperes__el--heures dd { font-size: 44px; line-height: 48px; }
@media (min-width: 992px) {
	.reperes__el--heures dd { font-size: 52px; line-height: 56px; }
}
.reperes__el--heures:hover { box-shadow: var(--ombre-survol); transform: translateY(-4px); }
.reperes__el--rentree { border-radius: 0 80px 0 0; }
.reperes__el--rentree:hover { border-radius: 0; }
.reperes__el--rentree dd { font-size: 34px; line-height: 40px; }
.reperes__el--prix:hover { box-shadow: var(--ombre-survol); }
/* Petites formes EPSN qui débordent du bandeau. */
.reperes { isolation: isolate; }
.reperes__el--accreditation { position: relative; }
.reperes__el--accreditation::before {
	content: ""; position: absolute; left: -26px; top: -56px; width: 64px; height: 64px;
	background: url("../img/deco-fleur.svg") center / contain no-repeat; pointer-events: none;
}

/* « Ce que vous obtenez » : tache crème et éclaboussure derrière le titre. */
#formation-titre { position: relative; z-index: 0; }
#formation-titre::before {
	content: ""; position: absolute; z-index: -1; left: -36px; top: 40px;
	width: 280px; height: 72px; background: var(--apmt-creme); border-radius: var(--blob-a);
}
#formation-titre::after {
	content: ""; position: absolute; z-index: -1; left: 250px; top: 18px;
	width: 90px; height: 90px; background: url("../img/deco-splash.svg") center / contain no-repeat;
}
/* Six modules : feuille en marge. */
#modules { position: relative; }
#modules::after {
	content: ""; position: absolute; right: 0; top: 50px; width: 70px; height: 70px;
	background: url("../img/deco-feuille.svg") center / contain no-repeat;
}
/* Parcours : tache or derrière le titre. */
#parcours-titre { position: relative; z-index: 0; }
#parcours-titre::after {
	content: ""; position: absolute; z-index: -1; right: -30px; top: 20px;
	width: 90px; height: 90px; border-radius: var(--blob-b); background: var(--apmt-or);
}
@media (max-width: 767px) {
	#formation-titre::after, #modules::after, #parcours-titre::after { display: none; }
}