/*==============================================================
	PAGE D'ACCUEIL

	Base : cartes et sections à fonds alternés.
	Deux sections conservent le traitement éditorial (filets,
	numérotation, bandeau défilant) : « Mes partis pris » et
	« Références clés ».

	Tokens (app-common.css) :
	  --brand #E756C8 · --brand-ink #B8329D · --brand-tint #FBF1F7
	  --rule · --muted · --prose
	Primitives partagées : .fbtn, .reveal / .fstagger, .ed-head.
==============================================================*/

.home {
	color: var(--black-color);
}

html {
	scroll-behavior: smooth;
	/* La navbar fixe fait 5rem : on décale les ancres pour ne rien masquer. */
	scroll-padding-top: calc(var(--navbar-height) + 1.5rem);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}


/*--------------------------------------------------------------
	RYTHME DES SECTIONS

	NE PAS renommer .page-section en .home-section : c'est la classe du
	hero plein écran du thème titan, dont le JS (libs/titan/js/main.js,
	buildHomeSection) impose height = 85% de la fenêtre en style inline à
	tout élément qui la porte, et la réapplique à chaque redimensionnement.
--------------------------------------------------------------*/
/* Respiration fluide : 48px sous 1070px, 80px au-delà de 1780px. */
.page-section {
	padding: clamp(3rem, 4.5vw, 5rem) 0;
}

.page-section--tint {
	background-color: var(--brand-tint);
}

/*
	En-tête à gauche, contenu à droite.
	Réservé aux sections dont le contenu est court : empilé, leur en-tête
	représentait plus de la moitié de la hauteur et le bloc se lisait comme
	une bande vide.
*/
.page-section--aside .container {
	display: grid;
	grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	gap: 3.5rem;
	align-items: start;
}

/* .section-head et sa famille vivent dans app-common.css : le bloc contact
   les emploie aussi, sur les quatre pages formation. */
.page-section--aside .section-head {
	max-width: none;
	margin-bottom: 0;
}


/*--------------------------------------------------------------
	HERO
--------------------------------------------------------------*/
.home-hero {
	position: relative;
	padding: 3.5rem 0 4.5rem;
	overflow: hidden;
	background:
		radial-gradient(58rem 30rem at 78% -10%, rgba(231, 86, 200, .20) 0%, rgba(231, 86, 200, 0) 62%),
		radial-gradient(44rem 24rem at 6% 4%, rgba(231, 86, 200, .10) 0%, rgba(231, 86, 200, 0) 58%),
		linear-gradient(180deg, var(--brand-tint) 0%, #ffffff 72%);
}

/*
	Colonne portrait fixée en rem plutôt qu'en fraction : au-delà de 1400px
	la photo cessait de grandir avec la fenêtre et dictait à elle seule la
	hauteur du hero (près de 800px pour ~340px de discours).
*/
.home-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
	gap: 3.5rem;
	align-items: center;
}

.home-hero h1 {
	font-size: 3rem;
	line-height: 1.15;
	color: var(--brand-ink);
	margin-bottom: 1.5rem;
}

.home-hero-intro {
	max-width: 46ch;
	font-size: 1.15rem;
	font-weight: 300;
	line-height: 1.65;
	color: var(--prose);
	margin-bottom: 2rem;
}

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

/* Portrait : plus de hauteur en dur, on contraint par le ratio */
.hero-portrait {
	position: relative;
	margin: 0;
}

.hero-portrait img {
	display: block;
	width: 80%;
	aspect-ratio: 3 / 6;
	object-fit: cover;
	object-position: center top;
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(184, 50, 157, .18);
}

.hero-portrait figcaption {
	margin-top: 1rem;
}

.hero-portrait-name {
	display: block;
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--brand-ink);
}

.hero-portrait-role {
	display: block;
	font-size: .95rem;
	color: var(--muted);
}


/*--------------------------------------------------------------
	CHIFFRES CLÉS
--------------------------------------------------------------*/
.stats-band {
	background-color: var(--brand-tint);
	padding: 3rem 0;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	text-align: center;
}

.stat-value {
	display: block;
	font-size: 3rem;
	font-weight: 300;
	line-height: 1.1;
	color: var(--brand-ink);
	/* Évite le saut de largeur pendant le comptage */
	font-variant-numeric: tabular-nums;
}

.stat-label {
	display: block;
	margin-top: .5rem;
	font-size: .95rem;
	line-height: 1.4;
	color: var(--prose);
}

.stat + .stat {
	border-left: 1px solid var(--rule);
}


/*--------------------------------------------------------------
	À PROPOS
--------------------------------------------------------------*/
.about-prose p {
	font-size: 1.08rem;
	line-height: 1.7;
	color: var(--prose);
	margin-bottom: 1.25rem;
	/* Longueur de ligne confortable */
	max-width: 62ch;
}

.about-quote {
	margin: 1.75rem 0 0;
	padding: 1.5rem 2rem;
	border-left: 4px solid var(--brand);
	border-radius: 12px;
	background: linear-gradient(135deg, var(--brand-tint) 0%, #fff 90%);
	/* La citation prend toute la colonne : elle donne son assise au bloc,
	   alors que le texte courant reste à une longueur de ligne lisible. */
}

.about-quote p {
	margin-bottom: .75rem;
	font-size: 1.15rem;
	font-style: italic;
	font-weight: 500;
	line-height: 1.6;
	color: var(--second-color);
}

.about-quote footer {
	font-size: .9rem;
	color: var(--muted);
}


/*--------------------------------------------------------------
	CARTES FORMATION
--------------------------------------------------------------*/
.card-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.75rem;
}

.formation-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--white-color);
	border: 1px solid var(--brand-tint);
	border-radius: 18px;
	overflow: hidden;
	text-decoration: none;
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.formation-card:hover,
.formation-card:focus-visible {
	transform: translateY(-6px);
	border-color: var(--brand);
	box-shadow: 0 20px 40px rgba(184, 50, 157, .16);
}

.formation-card-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.formation-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .55s ease;
}

.formation-card:hover .formation-card-media img {
	transform: scale(1.06);
}

.formation-card-duration {
	position: absolute;
	left: .9rem;
	bottom: .9rem;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .32rem .8rem;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 600;
	color: var(--brand-ink);
	background-color: rgba(255, 255, 255, .94);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.formation-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.4rem 1.35rem 1.5rem;
}

.formation-card-title {
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--second-color);
	margin-bottom: .6rem;
}

.formation-card-teaser {
	flex: 1;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--prose);
	margin-bottom: 1.1rem;
}

.formation-card-more {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 500;
	color: var(--brand-ink);
}

.formation-card-more i {
	transition: transform .3s ease;
}

.formation-card:hover .formation-card-more i {
	transform: translateX(4px);
}


/*--------------------------------------------------------------
	MODULES COMPLÉMENTAIRES (DISC / IEQ)
--------------------------------------------------------------*/
.module-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.75rem;
}

.module-card {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	padding: 1.75rem;
	background-color: var(--white-color);
	border: 1px solid var(--brand-tint);
	border-radius: 18px;
}

.module-card-logo {
	flex: 0 0 auto;
	width: 96px;
}

.module-card-logo img {
	width: 100%;
	height: auto;
}

.module-card-title {
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--second-color);
	margin-bottom: .5rem;
}

.module-card p {
	font-size: .98rem;
	line-height: 1.6;
	color: var(--prose);
	margin-bottom: .6rem;
}

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

.module-card-format {
	font-size: .88rem;
	color: var(--muted);
}

/* Les 4 lettres du DISC gardent leur code couleur d'origine */
.disc-letters { font-weight: 700; }
.disc-d { color: #d94f4f; }
.disc-i { color: #c9a800; }
.disc-s { color: #4f9c3c; }
.disc-c { color: #3f93bd; }
.ieq-mark { font-weight: 700; color: #2d7ea6; }


/*--------------------------------------------------------------
	PARTIS PRIS — traitement éditorial conservé
	Deux colonnes séparées d'un filet, listes numérotées.
--------------------------------------------------------------*/
.ed-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3.5rem;
}

.ed-split > * + * {
	padding-left: 3.5rem;
	border-left: 1px solid var(--rule);
}

.ed-stance-title {
	font-size: 1.45rem;
	font-weight: 300;
	color: var(--second-color);
	margin: 0 0 1.5rem;
}

.ed-stance-list {
	list-style: none;
	counter-reset: stance;
	padding: 0;
	margin: 0;
	border-top: 1px solid var(--rule);
}

.ed-stance-list li {
	counter-increment: stance;
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	gap: 1rem;
	padding: .85rem 0;
	border-bottom: 1px solid var(--rule);
	line-height: 1.6;
	color: var(--prose);
}

.ed-stance-list li::before {
	content: counter(stance, decimal-leading-zero);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--brand);
	padding-top: .25rem;
}


/*--------------------------------------------------------------
	PARCOURS — timeline verticale
--------------------------------------------------------------*/
.journey {
	position: relative;
	max-width: 46rem;
	margin: 0 auto;
	padding-left: 2.75rem;
}

.journey::before {
	content: '';
	position: absolute;
	left: 11px;
	top: .6rem;
	bottom: .6rem;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--brand) 0%, rgba(231, 86, 200, .25) 100%);
}

.journey-step {
	position: relative;
}

.journey-step + .journey-step {
	margin-top: 2rem;
}

.journey-step::before {
	content: '';
	position: absolute;
	left: -2.75rem;
	top: .35rem;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: var(--white-color);
	border: 2px solid var(--brand);
	box-shadow: 0 0 0 5px var(--brand-tint);
}

.journey-period {
	display: inline-block;
	margin-bottom: .5rem;
	padding: .28rem .8rem;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .5px;
	color: var(--white-color);
	background-color: var(--brand-ink);
}

.journey-title {
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--second-color);
	margin-bottom: .6rem;
}

.journey-step ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

.journey-step li {
	position: relative;
	padding-left: 1.1rem;
	margin-bottom: .45rem;
	line-height: 1.6;
	color: var(--prose);
}

.journey-step li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .65rem;
	width: 5px;
	height: 5px;
	background-color: var(--brand);
}


/*--------------------------------------------------------------
	CERTIFICATIONS
--------------------------------------------------------------*/
.cert-panel {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 2.5rem;
	align-items: center;
	max-width: 56rem;
	margin: 2.5rem auto 0;
	padding: 2rem;
	background-color: var(--white-color);
	border: 1px solid var(--brand-tint);
	border-radius: 18px;
}

.cert-title {
	font-size: 1.45rem;
	font-weight: 300;
	color: var(--second-color);
	margin-bottom: 1.25rem;
}

.cert-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cert-chips li {
	padding: .4rem .9rem;
	border-radius: 999px;
	font-size: .9rem;
	font-weight: 500;
	color: var(--brand-ink);
	background-color: var(--brand-tint);
}

.cert-aside {
	text-align: center;
}

.cert-aside img {
	height: 110px;
	width: auto;
	margin-bottom: 1rem;
}


/*--------------------------------------------------------------
	RÉFÉRENCES — bandeau défilant infini (traitement conservé)
	Deux rangées en sens opposés, fondu sur les bords, pause au survol.
	La piste contient deux fois la liste : la translation de -50 %
	reboucle donc sans saut visible.
--------------------------------------------------------------*/
.ed-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.ed-marquee + .ed-marquee {
	margin-top: 1rem;
}

.ed-marquee-track {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	width: max-content;
	animation: edMarquee 46s linear infinite;
}

.ed-marquee--reverse .ed-marquee-track {
	animation-duration: 58s;
	animation-direction: reverse;
}

.ed-marquee:hover .ed-marquee-track,
.ed-marquee:focus-within .ed-marquee-track {
	animation-play-state: paused;
}

@keyframes edMarquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.ed-ref {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 180px;
	height: 86px;
	padding: 1rem;
	background-color: var(--white-color);
	border: 1px solid var(--rule);
	border-radius: 14px;
}

.ed-ref img {
	max-width: 100%;
	max-height: 52px;
	width: auto;
	height: auto;
	/* Logos en couleur : c'est la preuve sociale, elle se lit mieux ainsi.
	   Le survol les décolore — il met en avant la tuile pointée en
	   retirant l'accent aux autres, pendant que le bandeau se fige. */
	filter: grayscale(0);
	opacity: 1;
	transition: filter .35s ease, opacity .35s ease;
}

.ed-ref:hover img {
	filter: grayscale(1);
	opacity: .72;
}

/* Mouvement réduit : plus de défilement, on rend la piste parcourable */
@media (prefers-reduced-motion: reduce) {
	.ed-marquee {
		overflow-x: auto;
	}
	.ed-marquee-track {
		animation: none;
	}
}


/*--------------------------------------------------------------
	RESPONSIVE
--------------------------------------------------------------*/
@media (max-width: 1199.98px) {
	.card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.home-hero h1 {
		font-size: 2.5rem;
	}
}

@media (max-width: 991.98px) {
	/* Plus assez de largeur : l'en-tête repasse au-dessus du contenu */
	.page-section--aside .container {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.home-hero {
		padding: 2.5rem 0 3rem;
	}
	/*
		Ordre mobile : accroche, signature, puis boutons.

		« Depuis 20 ans, j'accompagne… » restait sans visage jusqu'au bas
		du hero ; la signature juste après attribue la phrase à quelqu'un.
		Et les CTA closent le bloc, ce qui est leur place : plus rien à
		lire après eux.

		display: contents fait des enfants de .home-hero-main des enfants
		directs de la grille. C'est la seule façon d'intercaler la figure,
		qui est leur sœur et non leur cousine. En contrepartie le gap
		s'appliquerait entre tous : on le remet à zéro et on laisse chaque
		bloc porter sa propre marge basse.
	*/
	.home-hero-grid {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.home-hero-main {
		display: contents;
	}
	.home-hero-actions {
		order: 1;
	}
	/*
		Signature : portrait compact, légende à côté et non dessous.

		Empilé et presque pleine largeur, le portrait coûtait ~420px de
		défilement et avait l'air d'avoir atterri là faute de place. Ici
		~250px sur un écran de 390px, et le visage reste — c'est le
		premier signal de confiance d'un site de personne.

		Ratio redéfini plutôt qu'hérité, pour découpler la hauteur de la
		largeur fluide ci-dessous. En 3/5, object-position: center top
		retient les 77 % hauts de la source (1102 × 2375) : tête et
		épaules, dans le même esprit que le 3/6 du desktop, qui en
		montre 93 %.
	*/
	.hero-portrait {
		display: flex;
		align-items: center;
		gap: 1.1rem;
		max-width: none;
		/* Le gap de la grille étant neutralisé, l'écart avec les boutons
		   est porté ici. */
		margin-bottom: 2rem;
	}
	/*
		Largeur fluide plutôt que fixe : ce qui respire sur un 390px serre
		sur un 320px, où « Emmanuel Gaydon » finirait par se couper faute
		de place à côté. ~122px à 320, ~148px à 390, plafonné à 168 dès
		442px — sans ce plafond, une tablette en portrait retomberait sur
		le grand portrait empilé qu'on vient justement de supprimer.
	*/
	.hero-portrait img {
		flex: 0 0 auto;
		width: clamp(120px, 38vw, 168px);
		aspect-ratio: 3 / 5;
		border-radius: 18px;
		box-shadow: 0 12px 30px rgba(184, 50, 157, .18);
	}
	.hero-portrait figcaption {
		min-width: 0;
		margin-top: 0;
	}
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem 1rem;
	}
	/* Les séparateurs verticaux n'ont plus de sens sur 2 colonnes */
	.stat + .stat {
		border-left: 0;
	}
	.module-grid,
	.cert-panel,
	.ed-split {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.ed-split > * + * {
		padding-left: 0;
		padding-top: 2.5rem;
		border-left: 0;
		border-top: 1px solid var(--rule);
	}
}

@media (max-width: 767.98px) {
	.home-hero h1 {
		font-size: 2.1rem;
	}
	.card-grid {
		grid-template-columns: 1fr;
	}
	.stat-value {
		font-size: 2.4rem;
	}
	.fbtn {
		width: 100%;
	}
	.module-card {
		flex-direction: column;
	}
	.cert-panel {
		padding: 1.5rem;
	}
	.ed-ref {
		width: 150px;
		height: 84px;
	}
}