/*==============================================================
	FORMATION PAGE — UI premium (scopé sous .formation-page)

	Tokens (définis dans app-common.css) :
	  --brand      #E756C8  aplats, icônes, décor
	  --brand-ink  #B8329D  rose porteur de texte + fonds de CTA
	  --brand-tint #FBF1F7  fonds pâles
	Typo : Montserrat 300.
==============================================================*/

.formation-page {
	--fsubnav-height: 3.5rem;
	/* --grey-color (#808080) plafonne a 3,95:1 sur blanc : insuffisant pour
	   du petit texte. #6B6B6B monte a 5,33:1 sans changer le ton. */
	--muted: #6B6B6B;
	color: var(--black-color);
}

/* Ancrage doux sous la navbar fixe (5rem) + la sous-navigation collante */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--navbar-height) + 3.5rem + 1rem);
}


/*--------------------------------------------------------------
	HERO
--------------------------------------------------------------*/
/*
	Fond : plutôt qu'une bande dégradée plate (qui lit comme un aplat beige
	et « bande » sur les écrans 8 bits), on pose deux halos radiaux de marque
	sur un fond clair. Le haut reste plein pour raccorder avec la navbar,
	la lumière vient d'en haut à droite, derrière la fiche pratique.
*/
.formation-hero {
	position: relative;
	padding: 2.75rem 0 3.5rem;
	background:
		radial-gradient(60rem 32rem at 82% -12%, rgba(231, 86, 200, .20) 0%, rgba(231, 86, 200, 0) 62%),
		radial-gradient(46rem 26rem at 8% 0%, rgba(231, 86, 200, .10) 0%, rgba(231, 86, 200, 0) 58%),
		linear-gradient(180deg, var(--brand-tint) 0%, #ffffff 78%);
	overflow: hidden;
}

.formation-breadcrumb {
	font-size: .85rem;
	letter-spacing: .4px;
	margin-bottom: 1.75rem;
}

.formation-breadcrumb a {
	color: var(--muted);
	text-decoration: none;
	transition: color .25s ease;
}

.formation-breadcrumb a:hover {
	color: var(--brand-ink);
}

.formation-breadcrumb .sep {
	color: var(--brand-ink);
	margin: 0 .5rem;
}

.formation-breadcrumb .current {
	color: var(--second-color);
}

/* Hero en 2 colonnes : discours à gauche, fiche pratique à droite */
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: 3rem;
	align-items: start;
}

.formation-hero .eyebrow {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-weight: 500;
	font-size: .78rem;
	color: var(--brand-ink);
	margin-bottom: 1rem;
}

/* Le rose de marque ne fait que 2,9:1 sur le fond teinte, sous le seuil
   de 3:1 des grands textes. L'encre de marque monte a 4,78:1. */
.formation-hero h1 {
	color: var(--brand-ink);
	margin-bottom: 1.25rem;
	letter-spacing: 1px;
}

.formation-hero .hero-intro {
	max-width: 660px;
	font-size: 1.12rem;
	font-weight: 300;
	color: #3f3f3f;
	margin-bottom: 1.75rem;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}


/*--------------------------------------------------------------
	FICHE PRATIQUE (colonne droite du hero)
	Source unique des infos clés : plus de doublon avec le hero.
--------------------------------------------------------------*/
.hero-facts {
	background: #fff;
	border: 1px solid var(--fourth-color);
	border-radius: 18px;
	padding: 1.75rem;
	box-shadow: 0 16px 38px rgba(231, 86, 200, .10);
}

.hero-facts-title {
	font-size: .78rem !important;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--brand-ink);
	margin: 0 0 1.35rem;
}

.fact-list {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

.fact {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	padding: .85rem 0;
}

.fact + .fact {
	border-top: 1px solid var(--fourth-color);
}

.fact:first-child {
	padding-top: 0;
}

.fact:last-child {
	padding-bottom: 0;
}

.fact-ico {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--fourth-color);
	color: var(--third-color);
	font-size: 1.05rem;
}

.fact-body {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

.fact-label {
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--muted);
}

.fact-value {
	font-weight: 500;
	line-height: 1.45;
	color: var(--second-color);
}

/* Les prérequis renvoient parfois vers les modules amont du parcours */
.fact-value a {
	color: var(--brand-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fact-value a:hover {
	color: var(--brand-ink);
	text-decoration: none;
}


/*--------------------------------------------------------------
	SOUS-NAVIGATION COLLANTE
--------------------------------------------------------------*/
.fsubnav {
	position: sticky;
	top: var(--navbar-height);
	z-index: 1020;
	min-height: var(--fsubnav-height);
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--fourth-color);
	border-bottom: 1px solid var(--fourth-color);
}

.fsubnav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--fsubnav-height);
}

.fsubnav-list {
	display: flex;
	align-items: center;
	gap: .2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	/* Défilement horizontal sur petits écrans plutôt qu'un retour à la ligne */
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.fsubnav-list::-webkit-scrollbar {
	display: none;
}

.fsubnav-list a {
	display: block;
	padding: .45rem .85rem;
	border-radius: 999px;
	font-size: .92rem;
	font-weight: 500;
	white-space: nowrap;
	color: var(--muted);
	text-decoration: none;
	transition: color .25s ease, background-color .25s ease;
}

.fsubnav-list a:hover {
	color: var(--brand-ink);
}

.fsubnav-list a.is-current {
	color: var(--brand-ink);
	background: var(--fourth-color);
}

.fsubnav-cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1.15rem;
	border-radius: 999px;
	font-size: .92rem;
	font-weight: 500;
	white-space: nowrap;
	color: #fff;
	background: var(--brand-ink);
	text-decoration: none;
	transition: box-shadow .3s ease, transform .3s ease;
}

.fsubnav-cta:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(231, 86, 200, .32);
}

/* Sous la barre : le bouton flottant prend le relais */
@media (max-width: 991.98px) {
	.fsubnav-cta {
		display: none;
	}
}


/* Les boutons .fbtn sont désormais dans app-common.css (l'accueil s'en sert aussi). */

/*--------------------------------------------------------------
	SECTIONS + TITRES
--------------------------------------------------------------*/
.fsection {
	margin-top: 3.5rem;
}

/* La première section suit déjà la marge du conteneur */
.fsection-first {
	margin-top: 0;
}

.fsection-title {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 1.6rem;
	font-weight: 300;
	color: var(--second-color);
	margin-bottom: 1.5rem;
}

.fsection-ico {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fourth-color);
	color: var(--third-color);
	font-size: 1.45rem;
}

/* Séparateur doux qui remplace les <hr> en ligne répétés */
.fdivider {
	height: 1px;
	border: 0;
	margin: 0;
	background: var(--fourth-color);
	opacity: 1;
}

/*
	Harmonise les blocs INCLUS et partagés (handicap, tarifs) avec les
	nouveaux titres de section, sans modifier les fichiers d'include.
	On reformate leur <h3 class="fs-2"><i>…</i>Titre</h3>.
*/
.formation-page .fsec-legacy .fs-2 {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 1.6rem !important;
	font-weight: 300;
}

.formation-page .fsec-legacy .fs-2 > i.fa-thin {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	margin: 0 !important;
	border-radius: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--fourth-color);
	font-size: 1.45rem !important;
}

/* Les includes portent leurs propres marges (mt-5 mb-5) : on les neutralise
   pour que le rythme vertical reste celui de .fsection. */
.formation-page .fsec-legacy > div {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.formation-page .fsec-legacy p {
	color: #3f3f3f;
	line-height: 1.55;
}

.formation-page .fsec-legacy p:last-child {
	margin-bottom: 0;
}


/*--------------------------------------------------------------
	CALLOUT (objectifs, évaluation, prépa accompagnement…)
--------------------------------------------------------------*/
.fcallout {
	background: linear-gradient(135deg, var(--fourth-color) 0%, #fff 90%);
	border: 1px solid var(--fourth-color);
	border-left: 4px solid var(--third-color);
	border-radius: 12px;
	padding: 1.5rem 1.75rem;
}

.fcallout ul,
.fcallout p:last-child {
	margin-bottom: 0;
}


/*--------------------------------------------------------------
	PROGRAMME — cartes jour / demi-journée + badges pédago
--------------------------------------------------------------*/
/*
	Pas d'overflow:hidden ici : les infobulles des badges pédago doivent
	pouvoir déborder de la carte. On arrondit donc l'en-tête lui-même.
*/
.prog-day {
	background: #fff;
	border: 1px solid var(--fourth-color);
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
}

.prog-day + .prog-day {
	margin-top: 2rem;
}

.prog-day-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.5rem;
	background: linear-gradient(135deg, var(--fourth-color) 0%, #fff 100%);
	border-bottom: 1px solid var(--fourth-color);
	border-radius: 17px 17px 0 0;
}

.prog-day-num {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 600;
	color: #fff;
	background: var(--brand-ink);
	padding: .35rem .9rem;
	border-radius: 999px;
	font-size: .85rem;
	letter-spacing: .5px;
	white-space: nowrap;
}

/* h3 : on annule les marges de titre pour rester aligné dans l'en-tête flex */
.prog-day-label {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 300;
	color: var(--second-color);
}

.prog-halfday {
	padding: 1.5rem;
}

.prog-halfday + .prog-halfday {
	border-top: 1px dashed var(--fourth-color);
}

/* h4 : le sélecteur d'élément global impose une couleur/graisse, on reprend la main */
.prog-halfday-head {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: .85rem;
	color: var(--brand-ink);
	margin: 0 0 1.25rem;
}

.prog-module {
	position: relative;
	padding: 0;
	margin-bottom: 1.5rem;
}

.prog-module:last-child {
	margin-bottom: 0;
}

/* h5 : on neutralise la taille par défaut de Bootstrap (1.25rem) */
.prog-module-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--second-color);
	margin: 0 0 .65rem;
}

.prog-steps {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

.prog-steps li {
	position: relative;
	padding-left: 0;
	margin-bottom: .55rem;
	color: #3f3f3f;
	line-height: 1.55;
}

.prog-steps li:last-child {
	margin-bottom: 0;
}

/*
	Certains modules regroupent plusieurs séquences sous un même thème
	(ex. « Costume du manager » dans Manager de managers).
*/
.prog-sublabel {
	margin: 1.1rem 0 .5rem;
	font-weight: 500;
	color: var(--second-color);
}

.prog-module > .prog-sublabel:first-of-type {
	margin-top: 0;
}

/* Étapes numérotées à l'intérieur d'une séquence */
.prog-substeps {
	list-style: none;
	counter-reset: substep;
	padding-left: 0;
	margin: .5rem 0 0;
}

.prog-substeps li {
	counter-increment: substep;
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: .4rem;
	color: #3f3f3f;
	line-height: 1.55;
}

.prog-substeps li:last-child {
	margin-bottom: 0;
}

.prog-substeps li::before {
	content: counter(substep) ".";
	position: absolute;
	left: 0;
	font-weight: 600;
	color: var(--brand-ink);
}

/*--------------------------------------------------------------
	TIMELINE DU PROGRAMME
	Un rail vertical par demi-journée. Le remplissage rose suit le
	scroll (JS) et allume les pastilles de module au passage.
--------------------------------------------------------------*/
.prog-track {
	position: relative;
	padding-left: 2.25rem;
}

.prog-rail {
	position: absolute;
	left: 5px;
	top: .55rem;
	bottom: .55rem;
	width: 2px;
	border-radius: 2px;
	background: var(--fourth-color);
}

.prog-rail-fill {
	display: block;
	width: 100%;
	height: 0;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--brand) 0%, var(--brand-ink) 100%);
	transition: height .2s linear;
}

/* Pastille alignée sur l'axe du rail (centre à 6px) */
.prog-module::before {
	content: '';
	position: absolute;
	left: -2.25rem;
	top: .3rem;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--fourth-color);
	transition: border-color .35s ease, background-color .35s ease, box-shadow .35s ease;
}

.prog-module.is-lit::before {
	background: var(--brand);
	border-color: var(--brand);
	box-shadow: 0 0 0 4px rgba(231, 86, 200, .16);
}


/*--------------------------------------------------------------
	LISTES "objectifs / méthodes" — puce ronde rose
--------------------------------------------------------------*/
.formation-page .check-list {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

.formation-page .check-list li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: .7rem;
	line-height: 1.55;
}

.formation-page .check-list li:last-child {
	margin-bottom: 0;
}

.formation-page .check-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .55rem;
	width: 8px;
	height: 8px;
	background-color: var(--third-color);
	border-radius: 50%;
}


/*--------------------------------------------------------------
	BANNIÈRE CTA "devis"
--------------------------------------------------------------*/
.fcta-banner {
	background: linear-gradient(135deg, var(--fourth-color) 0%, #fff 100%);
	border: 1px solid var(--fourth-color);
	border-radius: 18px;
	padding: 2.25rem;
	text-align: center;
}

.fcta-banner h3 {
	margin-bottom: .5rem;
}

.fcta-banner p {
	color: #444;
	margin-bottom: 1.5rem;
}


/*--------------------------------------------------------------
	BOUTON FLOTTANT "Demander un devis" (toujours accessible)
--------------------------------------------------------------*/
.floating-cta {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 998;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .75rem 1.3rem;
	border-radius: 999px;
	background: var(--brand-ink);
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	box-shadow: 0 10px 26px rgba(231, 86, 200, .4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: opacity .35s ease, transform .35s ease, visibility .35s ease;
}

.floating-cta.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.floating-cta:hover {
	color: #fff;
	transform: translateY(-3px);
}

/* Sur grand écran, le CTA de la sous-navigation suffit : un seul CTA persistant. */
@media (min-width: 992px) {
	.floating-cta {
		display: none;
	}
}

@media (max-width: 575.98px) {
	.floating-cta {
		left: 16px;
		bottom: 16px;
		padding: .7rem .95rem;
	}
	.floating-cta .floating-cta-label {
		display: none;
	}
}


/*--------------------------------------------------------------
	ENTRÉE DU HERO (au chargement, en CSS pur : rien à attendre du JS)
--------------------------------------------------------------*/
@keyframes heroIn {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

.formation-hero .eyebrow,
.formation-hero h1,
.formation-hero .hero-intro,
.formation-hero .hero-actions,
.formation-hero .hero-facts {
	animation: heroIn .75s cubic-bezier(.22, .68, .3, 1) both;
}

.formation-hero .eyebrow      { animation-delay: .05s; }
.formation-hero h1            { animation-delay: .14s; }
.formation-hero .hero-intro   { animation-delay: .23s; }
.formation-hero .hero-actions { animation-delay: .32s; }
.formation-hero .hero-facts   { animation-delay: .28s; }

/* Les lignes de la fiche pratique s'égrènent après la carte */
.formation-hero .fact {
	animation: heroIn .6s cubic-bezier(.22, .68, .3, 1) both;
}

.formation-hero .fact:nth-child(1) { animation-delay: .42s; }
.formation-hero .fact:nth-child(2) { animation-delay: .50s; }
.formation-hero .fact:nth-child(3) { animation-delay: .58s; }
.formation-hero .fact:nth-child(4) { animation-delay: .66s; }


/*--------------------------------------------------------------
	MOUVEMENT RÉDUIT
	(.reveal / .fstagger sont désormais dans app-common.css :
	 la page d'accueil s'en sert aussi.)
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.formation-hero .eyebrow,
	.formation-hero h1,
	.formation-hero .hero-intro,
	.formation-hero .hero-actions,
	.formation-hero .hero-facts,
	.formation-hero .fact {
		animation: none;
	}
	.prog-rail-fill,
	.prog-module::before {
		transition: none;
	}
}


/*--------------------------------------------------------------
	RESPONSIVE
--------------------------------------------------------------*/
/* Le hero repasse sur une colonne : la fiche pratique passe sous le discours */
@media (max-width: 991.98px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}
}

@media (max-width: 767.98px) {
	.formation-hero {
		padding: 1.75rem 0 2.25rem;
	}
	.fbtn {
		width: 100%;
	}
	.fsection-title {
		font-size: 1.35rem;
	}
	.prog-day-head {
		flex-wrap: wrap;
		gap: .65rem;
	}
	.hero-facts {
		padding: 1.35rem;
	}
	.fsubnav-list a {
		font-size: .88rem;
		padding: .45rem .7rem;
	}
}