/**
 * Home page sections.
 *
 * Built from type, space and two colours: the navy and the gold of the logo.
 * No stock illustration, no imported brand banner, no grey wash. What used to
 * be an image is now drawn, so it stays sharp at any size and weighs nothing.
 */

/* --------------------------------------------------------------------------
   Bandeau d'accueil
   -------------------------------------------------------------------------- */

.af .af-body .af-bloc.af-accueil-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: 0 0 var(--af-gap-xl);
	padding: 76px 60px 72px !important;
	border-radius: 26px;
	background: linear-gradient(152deg, #0b1324 0%, #101c36 46%, #16264a 100%) !important;
	color: var(--af-on-dark);
}

/* Un halo doré, et une trame très fine : de la matière, pas une image. */
.af .af-body .af-accueil-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: -180px;
	top: -220px;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(249, 195, 0, 0.26), rgba(249, 195, 0, 0) 64%);
}

.af .af-body .af-accueil-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(120% 90% at 20% 0%, #000 0%, transparent 72%);
	-webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000 0%, transparent 72%);
}

.af .af-body .af-accueil-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 22px !important;
	padding: 7px 15px;
	border: 1px solid rgba(249, 195, 0, 0.42);
	border-radius: var(--af-r-pill);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--af-accent) !important;
}

.af .af-body .af-accueil-hero__eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--af-accent);
}

.af .af-body .af-accueil-hero h2 {
	margin: 0 0 18px !important;
	max-width: 17ch;
	font-size: clamp(34px, 4.6vw, 58px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: #ffffff !important;
}

.af .af-body .af-accueil-hero h2 em {
	font-style: normal;
	color: var(--af-accent) !important;
}

.af .af-body .af-accueil-hero__sub {
	margin: 0 0 36px !important;
	max-width: 54ch;
	font-size: 19px;
	line-height: 1.55;
	color: var(--af-on-dark) !important;
}

.af .af-body .af-accueil-hero__points {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 38px;
	padding: 0;
	list-style: none;
}

.af .af-body .af-accueil-hero__points li {
	position: relative;
	margin: 0;
	padding: 16px 18px 16px 46px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.04);
	font-size: 15px;
	line-height: 1.45;
	color: #ffffff;
}

.af .af-body .af-accueil-hero__points li::marker { content: ""; }

.af .af-body .af-accueil-hero__points li::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 19px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--af-accent);
	box-shadow: inset 0 0 0 4px #0b1324;
}

.af .af-body a.af-cta,
.af .af-body a.af-cta:link,
.af .af-body a.af-cta:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 16px 30px;
	border-radius: var(--af-r-pill);
	background: var(--af-accent);
	font-size: 17px;
	font-weight: 700;
	text-decoration: none !important;
	color: var(--af-navy) !important;
	box-shadow: 0 18px 38px -18px rgba(249, 195, 0, 0.9);
	transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.af .af-body a.af-cta:hover {
	transform: translateY(-2px);
	background: var(--af-accent-fonce);
	box-shadow: 0 24px 46px -18px rgba(249, 195, 0, 1);
}

.af .af-body a.af-cta::after { content: "\2192"; font-size: 18px; }

@media (max-width: 991px) {
	.af .af-body .af-accueil-hero__points { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	.af .af-body .af-bloc.af-accueil-hero { padding: 44px 24px 40px !important; border-radius: 20px; }
}

/* --------------------------------------------------------------------------
   Titre de section
   -------------------------------------------------------------------------- */

.af .af-body .af-bloc.af-sectitre { margin: var(--af-gap-xl) 0 var(--af-gap-lg); }

.af .af-body .af-sectitre__eyebrow {
	margin: 0 0 12px !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--af-orange) !important;
}

.af .af-body .af-sectitre h2 {
	margin: 0 !important;
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.12;
	letter-spacing: -0.025em;
}

.af .af-body .af-sectitre p:not(.af-sectitre__eyebrow) {
	margin: 14px 0 0 !important;
	max-width: 62ch;
	font-size: 17px;
	line-height: 1.6;
	color: var(--af-text-soft);
}

/* --------------------------------------------------------------------------
   Les formations passées en revue
   -------------------------------------------------------------------------- */

.af .af-body .af-bloc.af-formations {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 var(--af-gap-xl);
}

.af .af-body a.af-fiche,
.af .af-body a.af-fiche:link,
.af .af-body a.af-fiche:visited {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 26px 24px 24px;
	border: 1px solid var(--af-border);
	border-radius: 18px;
	background: var(--af-surface);
	text-decoration: none !important;
	color: var(--af-navy) !important;
	overflow: hidden;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Le filet doré se déploie au survol, de la gauche vers la droite. */
.af .af-body a.af-fiche::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 3px;
	background: var(--af-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.af .af-body a.af-fiche:hover {
	border-color: var(--af-navy);
	transform: translateY(-3px);
	box-shadow: var(--af-shadow-card);
}

.af .af-body a.af-fiche:hover::before { transform: scaleX(1); }

/* Le logo de la formation, à hauteur commune d'une carte à l'autre. Certains
   portent leur propre fond, noir ou orange : ils gardent leur bloc, c'est
   leur identité, et la hauteur partagée suffit à aligner la rangée. */
.af .af-body .af-fiche__logo {
	display: flex;
	align-items: center;
	height: 46px;
	margin-bottom: 18px;
}

.af .af-body .af-fiche__logo img {
	max-height: 46px;
	max-width: 170px;
	width: auto;
	height: auto;
	margin: 0;
	object-fit: contain;
	border-radius: 4px;
}

.af .af-body .af-fiche__nom {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.af .af-body .af-fiche__qui {
	font-size: 14px;
	color: var(--af-muted);
}

.af .af-body .af-fiche__lire {
	margin-top: 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--af-navy);
}

.af .af-body .af-fiche__lire::after {
	content: "\2192";
	display: inline-block;
	margin-left: 6px;
	transition: transform 0.2s ease;
}

.af .af-body a.af-fiche:hover .af-fiche__lire::after { transform: translateX(4px); }

@media (max-width: 991px) { .af .af-body .af-bloc.af-formations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .af .af-body .af-bloc.af-formations { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Les trois portes d'entrée vers les outils
   -------------------------------------------------------------------------- */

.af .af-body .af-bloc.af-portes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 var(--af-gap-xl);
}

.af .af-body a.af-porte,
.af .af-body a.af-porte:link,
.af .af-body a.af-porte:visited {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 230px;
	padding: 28px 26px;
	border-radius: 20px;
	background: linear-gradient(160deg, #101c36 0%, #16264a 100%);
	text-decoration: none !important;
	color: #ffffff !important;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.af .af-body a.af-porte::after {
	content: "";
	position: absolute;
	right: -70px;
	bottom: -90px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(249, 195, 0, 0.22), rgba(249, 195, 0, 0) 66%);
	transition: transform 0.35s ease;
}

.af .af-body a.af-porte:hover { transform: translateY(-4px); box-shadow: 0 26px 54px -30px rgba(11, 19, 36, 0.95); }
.af .af-body a.af-porte:hover::after { transform: scale(1.22); }

.af .af-body .af-porte__num {
	font-family: var(--af-titre);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--af-accent);
}

.af .af-body .af-porte__nom {
	margin-top: 14px;
	font-family: var(--af-titre);
	font-size: 23px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.af .af-body .af-porte__txt {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--af-on-dark);
}

.af .af-body .af-porte__fleche {
	margin-top: auto;
	padding-top: 20px;
	font-size: 14px;
	font-weight: 700;
	color: var(--af-accent);
}

.af .af-body .af-porte__fleche::after {
	content: "\2192";
	display: inline-block;
	margin-left: 7px;
	transition: transform 0.2s ease;
}

.af .af-body a.af-porte:hover .af-porte__fleche::after { transform: translateX(5px); }

@media (max-width: 991px) { .af .af-body .af-bloc.af-portes { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Le panneau partenaire
   -------------------------------------------------------------------------- */

.af .af-body .af-bloc.af-partenaire {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	align-items: center;
	gap: 40px;
	margin: 0 0 var(--af-gap-xl);
	padding: 44px;
	border: 1px solid var(--af-border);
	border-radius: 22px;
	background: var(--af-surface);
	box-shadow: var(--af-shadow-card);
}

.af .af-body .af-partenaire h2 {
	margin: 12px 0 16px !important;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.18;
	letter-spacing: -0.02em;
}

.af .af-body .af-partenaire p { margin: 0 0 28px; font-size: 16px; line-height: 1.62; }

.af .af-body .af-partenaire .af-sectitre__eyebrow { margin-bottom: 0 !important; }

/* Le bouton ferme la colonne : pas de marge résiduelle sous lui. */
.af .af-body .af-partenaire .af-cta,
.af .af-body .af-bloc.af-accueil-hero .af-cta { margin: 0; }

.af .af-body .af-partenaire__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
	border: 1px solid var(--af-border-soft);
	border-radius: 18px;
	background: #fbfcfe;
}

.af .af-body .af-partenaire__logo img { max-width: 230px; height: auto; margin: 0; }

@media (max-width: 991px) {
	.af .af-body .af-bloc.af-partenaire { grid-template-columns: 1fr; padding: 30px 24px; gap: 26px; }

	/* Le cadre du logo additionnait sa marge intérieure à celle du panneau et
	   poussait la page au-delà de la fenêtre sur un téléphone. */
	.af .af-body .af-partenaire__logo { padding: 20px; }
	.af .af-body .af-partenaire__logo img { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   Prise de focus au clavier
   -------------------------------------------------------------------------- */

/* Les cartes et les boutons de cette page sont des liens : sans contour
   visible, une navigation au clavier se perd. */
.af .af-body a.af-fiche:focus-visible,
.af .af-body a.af-porte:focus-visible,
.af .af-body a.af-cta:focus-visible {
	outline: 3px solid var(--af-accent);
	outline-offset: 3px;
}

.af .af-body a.af-porte:focus-visible { outline-color: var(--af-accent); }

/* --------------------------------------------------------------------------
   Respect du réglage système « moins d'animations »
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.af .af-body a.af-fiche,
	.af .af-body a.af-porte,
	.af .af-body a.af-cta,
	.af .af-body a.af-fiche::before,
	.af .af-body a.af-porte::after { transition: none; }

	.af .af-body a.af-fiche:hover,
	.af .af-body a.af-porte:hover,
	.af .af-body a.af-cta:hover { transform: none; }
}