/**
 * Fiche publique d'une formation — la mise en page de l'organisme.
 *
 * Reprise de la page que l'organisme avait dessinée à la main sur son site
 * vitrine : bandeau sombre animé, cadre vitré flottant, encadré latéral
 * collant, cartes qui apparaissent au défilement, programme en accordéon,
 * appel final, barre de progression de lecture.
 *
 * <b>Les couleurs ne sont pas celles de la maquette.</b> Celle-ci était écrite
 * en bleu marine et cyan, les couleurs d'un organisme précis. Ici, tout part
 * des deux couleurs réglées dans « Apparence » : un organisme qui pose du
 * bordeaux et de l'or obtient la même page en bordeaux et or. Les valeurs
 * écrites en dur ne sont que des replis, pour le cas où les variables ne
 * seraient pas posées.
 *
 * <b>Les mesures, elles, sont celles de la maquette</b>, au pixel : rayons,
 * espacements, tailles de texte, durées d'animation. C'est ce qui fait qu'on
 * reconnaît la page.
 *
 * @package Catalogue_Formation
 */

/* ==========================================================
   JETONS
   ========================================================== */

.cfor-f {
	--f-fonce: #062d59;
	--f-fonce: var(--cfor-principale, #062d59);

	--f-clair: #27aae8;
	--f-clair: var(--cfor-secondaire, #27aae8);

	/* Replis plats d'abord : un navigateur sans color-mix garde du lisible. */
	--f-nuit: #031c39;
	--f-nuit: color-mix(in srgb, var(--f-fonce) 78%, #000000);

	--f-mi: #075187;
	--f-mi: color-mix(in srgb, var(--f-fonce) 55%, var(--f-clair));

	--f-pale: #75d3f7;
	--f-pale: color-mix(in srgb, var(--f-clair) 62%, #ffffff);

	--f-ciel: #dff5ff;
	--f-ciel: color-mix(in srgb, var(--f-clair) 16%, #ffffff);

	--f-glace: #f4fbff;
	--f-glace: color-mix(in srgb, var(--f-clair) 7%, #ffffff);

	--f-encre: #092c4e;
	--f-encre: var(--cfor-texte, #092c4e);

	--f-texte: #4b667d;
	--f-texte: var(--cfor-texte-doux, #4b667d);

	--f-ligne: #d9eaf4;
	--f-ligne: color-mix(in srgb, var(--f-clair) 18%, #ffffff);

	font-family: var(--cfor-police-vitrine, Inter, Poppins, system-ui, Arial, sans-serif);
	color: var(--f-encre);
	background: var(--f-glace);

	position: relative;
	overflow: hidden;
}

.cfor-f *,
.cfor-f *::before,
.cfor-f *::after {
	box-sizing: border-box;
}

.cfor-f a {
	text-decoration: none;
}

.cfor-f button {
	font-family: inherit;
}

/* ==========================================================
   BARRE DE PROGRESSION DE LECTURE
   ========================================================== */

.cfor-f-progres {
	position: fixed;
	top: 0;
	left: 0;

	width: 0;
	height: 4px;

	z-index: 99999;

	background: linear-gradient(90deg, var(--f-mi), var(--f-clair), var(--f-pale));

	box-shadow: 0 0 14px rgba(45, 180, 235, .75);

	transition: width .08s linear;
}

/* ==========================================================
   BANDEAU
   ========================================================== */

.cfor-f-haut {
	position: relative;
	overflow: hidden;

	color: #fff;

	padding: 65px 26px 105px;

	background:
		radial-gradient(circle at 88% 16%, rgba(106, 214, 255, .42), transparent 27%),
		radial-gradient(circle at 12% 80%, rgba(41, 170, 229, .19), transparent 28%),
		linear-gradient(125deg, var(--f-nuit) 0%, var(--f-fonce) 44%, var(--f-mi) 73%, var(--f-clair) 100%);
}

.cfor-f-trame {
	position: absolute;
	inset: 0;

	opacity: .05;

	background-image:
		linear-gradient(rgba(255, 255, 255, .8) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .8) 1px, transparent 1px);

	background-size: 45px 45px;

	animation: cforFTrame 18s linear infinite;
}

@keyframes cforFTrame {
	from { transform: translateY(0); }
	to   { transform: translateY(45px); }
}

/* Halos */

.cfor-f-halo {
	position: absolute;

	border-radius: 50%;

	pointer-events: none;

	filter: blur(1px);
}

.cfor-f-halo--un {
	width: 240px;
	height: 240px;

	right: 6%;
	top: 40px;

	background: rgba(144, 224, 255, .13);

	animation: cforFHaloUn 8s ease-in-out infinite;
}

.cfor-f-halo--deux {
	width: 150px;
	height: 150px;

	left: 8%;
	bottom: -25px;

	border: 28px solid rgba(255, 255, 255, .06);

	animation: cforFHaloDeux 10s ease-in-out infinite;
}

.cfor-f-halo--trois {
	width: 65px;
	height: 65px;

	right: 43%;
	top: 80px;

	border: 2px solid rgba(255, 255, 255, .14);

	animation: cforFHaloTrois 7s ease-in-out infinite;
}

@keyframes cforFHaloUn {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(-25px, 22px); }
}

@keyframes cforFHaloDeux {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(24px, -22px); }
}

@keyframes cforFHaloTrois {
	0%, 100% { transform: translateY(0) rotate(0); }
	50%      { transform: translateY(24px) rotate(180deg); }
}

.cfor-f-haut__grille {
	position: relative;
	z-index: 5;

	max-width: 1240px;
	margin: auto;

	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(330px, .7fr);
	gap: 55px;

	align-items: center;
}

.cfor-f-fil {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;

	margin-bottom: 25px;

	color: #d5efff;

	font-size: 12px;

	animation: cforFTombe .7s ease both;
}

.cfor-f-fil a {
	color: #d5efff;
}

.cfor-f-fil a:hover {
	text-decoration: underline;
}

.cfor-f-pastille {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	padding: 9px 15px;

	border-radius: 100px;

	border: 1px solid rgba(255, 255, 255, .28);

	color: #fff;

	background: rgba(255, 255, 255, .12);

	backdrop-filter: blur(10px);

	text-transform: uppercase;
	letter-spacing: .7px;

	font-size: 12px;
	font-weight: 900;

	animation: cforFVientGauche .8s .12s ease both;
}

.cfor-f-pastille__point {
	width: 8px;
	height: 8px;

	border-radius: 50%;

	background: var(--f-pale);

	box-shadow: 0 0 0 rgba(127, 220, 255, .6);

	animation: cforFBat 2s infinite;
}

@keyframes cforFBat {
	0%   { box-shadow: 0 0 0 0 rgba(127, 220, 255, .55); }
	70%  { box-shadow: 0 0 0 10px rgba(127, 220, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(127, 220, 255, 0); }
}

.cfor-f-titre {
	max-width: 850px;

	margin: 18px 0;

	color: #fff;

	font-size: clamp(39px, 5.2vw, 68px);
	line-height: 1.01;
	letter-spacing: -2.2px;

	animation: cforFTitre .9s .15s ease both;
}

.cfor-f-titre__accent {
	display: inline-block;

	color: var(--f-pale);

	animation: cforFLueur 3s ease-in-out infinite;
}

@keyframes cforFLueur {
	0%, 100% { text-shadow: 0 0 0 rgba(117, 211, 247, 0); }
	50%      { text-shadow: 0 0 25px rgba(117, 211, 247, .42); }
}

.cfor-f-chapeau {
	max-width: 770px;

	margin: 0;

	color: #e5f7ff;

	font-size: 17px;
	line-height: 1.75;

	animation: cforFMonte .8s .3s ease both;
}

.cfor-f-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;

	margin-top: 28px;
}

.cfor-f-badge {
	position: relative;
	overflow: hidden;

	display: inline-flex;
	align-items: center;
	gap: 7px;

	padding: 10px 14px;

	border-radius: 13px;

	border: 1px solid rgba(255, 255, 255, .19);

	background: rgba(0, 26, 54, .28);

	backdrop-filter: blur(7px);

	color: #fff;

	font-size: 13px;
	font-weight: 800;

	animation: cforFBadge .6s ease both;

	transition: background .3s, transform .3s;
}

.cfor-f-badge:nth-child(1) { animation-delay: .42s; }
.cfor-f-badge:nth-child(2) { animation-delay: .51s; }
.cfor-f-badge:nth-child(3) { animation-delay: .60s; }
.cfor-f-badge:nth-child(4) { animation-delay: .69s; }

.cfor-f-badge:hover {
	background: rgba(255, 255, 255, .16);
	transform: translateY(-3px);
}

/*
 * Une donnée manquante reste à sa place, en retrait. Elle se lit, elle ne se
 * devine pas : l'organisme voit sur son propre site ce qu'il lui reste à
 * remplir, et le visiteur ne prend pas une case vide pour une promesse.
 */
.cfor-f-badge--vide {
	border-style: dashed;
	color: #c7ddee;
	font-weight: 700;
}

@keyframes cforFBadge {
	from { opacity: 0; transform: scale(.88) translateY(10px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ==========================================================
   CADRE VITRÉ DU BANDEAU
   ========================================================== */

.cfor-f-cadre {
	position: relative;

	min-height: 355px;

	padding: 20px;

	border-radius: 32px;

	border: 1px solid rgba(255, 255, 255, .3);

	background: rgba(255, 255, 255, .12);

	backdrop-filter: blur(13px);

	box-shadow:
		0 35px 80px rgba(0, 18, 41, .31),
		inset 0 1px 0 rgba(255, 255, 255, .38);

	animation:
		cforFCadreEntre .9s .2s ease both,
		cforFCadreFlotte 6s 1.2s ease-in-out infinite;
}

.cfor-f-cadre::before {
	content: "";

	position: absolute;
	inset: -1px;

	border-radius: 32px;

	padding: 1px;

	background: linear-gradient(135deg, rgba(255, 255, 255, .65), transparent 40%, rgba(115, 211, 247, .45));

	pointer-events: none;
}

.cfor-f-scene {
	position: absolute;
	inset: 20px;

	overflow: hidden;

	border-radius: 22px;

	background: linear-gradient(160deg, var(--f-ciel), var(--f-glace));
}

/* La photo de la formation, quand elle existe. */

.cfor-f-scene__photo {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	display: block;

	object-fit: cover;
	object-position: center;

	transition: transform .7s ease;
}

.cfor-f-cadre:hover .cfor-f-scene__photo {
	transform: scale(1.04);
}

/* Le reflet qui balaye : il passe sur la photo comme sur le décor. */

.cfor-f-scene::after {
	content: "";

	position: absolute;

	left: -40%;
	top: 0;

	z-index: 18;

	width: 28%;
	height: 100%;

	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);

	transform: skewX(-18deg);

	animation: cforFReflet 5s 1.5s infinite;

	pointer-events: none;
}

@keyframes cforFReflet {
	0%, 55% { left: -40%; }
	100%    { left: 140%; }
}

.cfor-f-scene__nom {
	position: absolute;

	top: 15px;
	right: 15px;

	z-index: 25;

	max-width: calc(100% - 30px);

	padding: 8px 12px;

	border-radius: 10px;

	color: #fff;

	background: rgba(5, 49, 87, .93);
	background: color-mix(in srgb, var(--f-fonce) 92%, #000000);

	box-shadow: 0 7px 18px rgba(0, 32, 60, .16);

	font-size: 10px;
	font-weight: 900;
	letter-spacing: .8px;
	text-transform: uppercase;
}

/* ==========================================================
   DÉCOR ANIMÉ — quand la formation n'a pas de photo
   ==========================================================
 * La maquette d'origine dessinait ici un entrepôt : racks, chariot élévateur,
 * préparateur avec une douchette. C'est juste pour une formation en logistique
 * et faux pour toutes les autres. Ce décor-ci ne représente aucun métier : des
 * anneaux, des cartes et une onde, aux couleurs de l'organisme. Il est animé
 * autant que l'entrepôt l'était, et il ne ment sur rien.
   ========================================================== */

.cfor-f-decor {
	position: absolute;
	inset: 0;

	overflow: hidden;
}

.cfor-f-decor__anneau {
	position: absolute;

	border-radius: 50%;

	border: 2px dashed rgba(39, 170, 232, .35);
	border-color: color-mix(in srgb, var(--f-clair) 42%, transparent);
}

.cfor-f-decor__anneau--grand {
	width: 62%;
	aspect-ratio: 1;

	left: 19%;
	top: 12%;

	animation: cforFTourne 26s linear infinite;
}

.cfor-f-decor__anneau--petit {
	width: 38%;
	aspect-ratio: 1;

	left: 31%;
	top: 30%;

	border-style: solid;
	border-width: 10px;
	border-color: rgba(255, 255, 255, .55);

	animation: cforFTourneInverse 18s linear infinite;
}

.cfor-f-decor__noyau {
	position: absolute;

	left: 50%;
	top: 50%;

	width: 23%;
	aspect-ratio: 1;

	transform: translate(-50%, -50%);

	border-radius: 50%;

	background: linear-gradient(140deg, var(--f-fonce), var(--f-clair));

	box-shadow: 0 16px 34px rgba(0, 40, 70, .25);

	animation: cforFRespire 4.5s ease-in-out infinite;
}

.cfor-f-decor__carte {
	position: absolute;

	width: 86px;
	height: 56px;

	border-radius: 12px;

	background: rgba(255, 255, 255, .92);

	box-shadow: 0 10px 24px rgba(0, 36, 64, .14);
}

.cfor-f-decor__carte::before,
.cfor-f-decor__carte::after {
	content: "";

	position: absolute;

	left: 12px;

	height: 6px;

	border-radius: 4px;

	background: var(--f-ciel);
}

.cfor-f-decor__carte::before {
	top: 14px;
	width: 46px;
	background: var(--f-clair);
	opacity: .55;
}

.cfor-f-decor__carte::after {
	top: 28px;
	width: 62px;
}

.cfor-f-decor__carte--un {
	left: 7%;
	top: 16%;

	animation: cforFFlotte 5s ease-in-out infinite;
}

.cfor-f-decor__carte--deux {
	right: 6%;
	bottom: 14%;

	animation: cforFFlotte 5s ease-in-out infinite;
	animation-delay: -2.2s;
}

.cfor-f-decor__onde {
	position: absolute;

	left: 0;
	right: 0;
	bottom: 0;

	height: 34%;

	background:
		radial-gradient(120% 100% at 50% 100%, rgba(39, 170, 232, .22), transparent 70%);

	animation: cforFOnde 7s ease-in-out infinite;
}

@keyframes cforFTourne {
	from { transform: rotate(0); }
	to   { transform: rotate(360deg); }
}

@keyframes cforFTourneInverse {
	from { transform: rotate(360deg); }
	to   { transform: rotate(0); }
}

@keyframes cforFRespire {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50%      { transform: translate(-50%, -50%) scale(1.09); }
}

@keyframes cforFFlotte {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50%      { transform: translateY(-13px) rotate(3deg); }
}

@keyframes cforFOnde {
	0%, 100% { opacity: .55; transform: translateY(6px); }
	50%      { opacity: 1;   transform: translateY(0); }
}

/* Étiquettes flottantes */

.cfor-f-etiquette {
	position: absolute;

	z-index: 30;

	max-width: 190px;

	padding: 9px 13px;

	border-radius: 12px;

	background: rgba(255, 255, 255, .92);

	color: var(--f-mi);

	font-size: 11px;
	font-weight: 900;

	box-shadow: 0 10px 25px rgba(0, 36, 64, .2);

	animation: cforFEtiquette 4s ease-in-out infinite;
}

.cfor-f-etiquette--un {
	left: -18px;
	top: 52px;
}

.cfor-f-etiquette--deux {
	right: -13px;
	bottom: 58px;

	animation-delay: -1.5s;
}

@keyframes cforFEtiquette {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-9px); }
}

/* ==========================================================
   CORPS
   ========================================================== */

.cfor-f-corps {
	position: relative;
	z-index: 15;

	max-width: 1240px;

	margin: -50px auto 0;

	padding: 0 24px 90px;

	display: grid;
	grid-template-columns: 350px minmax(0, 1fr);
	gap: 30px;

	align-items: start;
}

/* ==========================================================
   ENCADRÉ LATÉRAL
   ========================================================== */

.cfor-f-cote {
	position: sticky;
	top: 20px;

	padding: 22px;

	border: 1px solid var(--f-ligne);
	border-radius: 28px;

	background: #fff;

	box-shadow: 0 22px 65px rgba(7, 62, 101, .13);

	animation: cforFCoteEntre .9s ease both;

	transition: transform .35s, box-shadow .35s;
}

.cfor-f-cote:hover {
	transform: translateY(-4px);

	box-shadow: 0 28px 75px rgba(7, 62, 101, .17);
}

.cfor-f-cote__image {
	position: relative;

	height: 185px;

	overflow: hidden;

	margin-bottom: 21px;

	border-radius: 21px;

	background: var(--f-fonce);
}

.cfor-f-cote__image img {
	width: 100%;
	height: 100%;

	display: block;

	object-fit: cover;
	object-position: center;

	transition: transform .6s ease;
}

.cfor-f-cote__image:hover img {
	transform: scale(1.045);
}

.cfor-f-cote__titre {
	margin: 0 0 10px;

	color: var(--f-encre);

	font-size: 21px;
	line-height: 1.3;
}

.cfor-f-cote__texte {
	margin: 0;

	color: var(--f-texte);

	font-size: 13px;
	line-height: 1.65;
}

.cfor-f-faits {
	display: grid;
	gap: 12px;

	margin-top: 19px;

	padding-top: 18px;

	border-top: 1px solid var(--f-ligne);
}

.cfor-f-fait {
	display: grid;
	grid-template-columns: 43px 1fr;
	gap: 11px;

	align-items: center;
}

.cfor-f-fait__icone {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 43px;
	height: 43px;

	border-radius: 13px;

	background: var(--f-ciel);

	font-size: 19px;

	transition: transform .3s, background .3s;
}

.cfor-f-fait:hover .cfor-f-fait__icone {
	transform: rotate(-6deg) scale(1.08);

	background: color-mix(in srgb, var(--f-clair) 24%, #ffffff);
}

.cfor-f-fait strong {
	display: block;

	color: var(--f-encre);

	font-size: 13px;
}

.cfor-f-fait span {
	display: block;

	margin-top: 2px;

	color: var(--f-texte);

	font-size: 12px;
}

.cfor-f-prix {
	margin: 23px 0 14px;

	color: var(--f-mi);

	font-size: 25px;
	font-weight: 900;
}

/* ==========================================================
   BOUTONS
   ========================================================== */

.cfor-f-bouton {
	position: relative;

	overflow: hidden;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	width: 100%;
	min-height: 52px;

	padding: 12px 18px;

	border-radius: 15px;

	font-size: 15px;
	font-weight: 900;

	transition: transform .3s, box-shadow .3s, background .3s;
}

.cfor-f-bouton::before {
	content: "";

	position: absolute;

	top: 0;
	left: -120%;

	width: 60%;
	height: 100%;

	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);

	transform: skewX(-20deg);

	transition: left .7s;
}

.cfor-f-bouton:hover::before {
	left: 140%;
}

.cfor-f-bouton--plein {
	color: #fff;

	background: linear-gradient(100deg, var(--f-fonce), var(--f-clair));

	box-shadow: 0 10px 25px rgba(30, 137, 198, .25);
}

.cfor-f-bouton--plein:hover {
	transform: translateY(-3px);

	box-shadow: 0 16px 32px rgba(30, 137, 198, .34);
}

.cfor-f-bouton--creux {
	margin-top: 10px;

	color: var(--f-mi);

	background: var(--f-glace);

	border: 1px solid var(--f-ligne);
}

.cfor-f-bouton--creux:hover {
	transform: translateY(-2px);

	background: var(--f-ciel);
}

/*
 * Ni page de formulaire, ni courriel déclaré : on le dit, au lieu de poser un
 * bouton qui n'ouvre rien. Un bouton mort coûte plus cher qu'une phrase.
 */
.cfor-f-sans-action {
	margin: 14px 0 0;

	padding: 13px 15px;

	border: 1px dashed var(--f-ligne);
	border-radius: 15px;

	color: var(--f-texte);

	background: var(--f-glace);

	font-size: 13px;
	line-height: 1.55;
}

/* ==========================================================
   COLONNE DE CONTENU
   ========================================================== */

.cfor-f-contenu {
	position: relative;

	display: grid;
	gap: 22px;
}

.cfor-f-contenu::before {
	content: "";

	position: absolute;

	left: -16px;
	top: 22px;
	bottom: 22px;

	width: 3px;

	border-radius: 10px;

	background: linear-gradient(to bottom, var(--f-clair), var(--f-ciel));

	opacity: .55;
}

/* ==========================================================
   CARTES
   ========================================================== */

.cfor-f-carte {
	position: relative;

	overflow: hidden;

	padding: 29px;

	border-radius: 26px;

	border: 1px solid var(--f-ligne);

	background: #fff;

	box-shadow: 0 10px 37px rgba(9, 62, 96, .07);

	opacity: 0;

	transform: translateY(32px);

	transition:
		opacity .7s ease,
		transform .7s ease,
		box-shadow .35s ease,
		border-color .35s ease;
}

.cfor-f-carte.est-vue {
	opacity: 1;
	transform: translateY(0);
}

.cfor-f-carte:hover {
	transform: translateY(-5px);

	border-color: color-mix(in srgb, var(--f-clair) 34%, #ffffff);

	box-shadow: 0 20px 50px rgba(9, 62, 96, .12);
}

.cfor-f-carte::before {
	content: "";

	position: absolute;

	top: 0;
	left: 0;

	width: 0;
	height: 4px;

	border-radius: 0 20px 20px 0;

	background: linear-gradient(90deg, var(--f-fonce), var(--f-clair), var(--f-pale));

	transition: width .65s ease;
}

.cfor-f-carte.est-vue::before {
	width: 100%;
}

/*
 * Sans JavaScript, aucune carte ne recevrait « est-vue » et la page
 * resterait blanche. La règle ci-dessous les montre toutes ; le script
 * commence par retirer cette classe du conteneur pour reprendre la main.
 */
.cfor-f-contenu:not([data-cfor-anime]) .cfor-f-carte {
	opacity: 1;
	transform: none;
}

.cfor-f-contenu:not([data-cfor-anime]) .cfor-f-carte::before {
	width: 100%;
}

/* ==========================================================
   TITRES DE CARTE
   ========================================================== */

.cfor-f-carte__titre {
	display: flex;
	align-items: center;
	gap: 13px;

	margin: 0 0 19px;

	color: var(--f-encre);

	font-size: 23px;
	line-height: 1.2;
}

.cfor-f-carte__icone {
	flex: 0 0 45px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 45px;
	height: 45px;

	border-radius: 14px;

	background: linear-gradient(145deg, var(--f-glace), var(--f-ciel));

	box-shadow: inset 0 0 0 1px rgba(24, 139, 195, .1);

	font-size: 21px;

	transition: transform .35s;
}

.cfor-f-carte:hover .cfor-f-carte__icone {
	transform: rotate(-5deg) scale(1.08);
}

.cfor-f-prose {
	color: var(--f-texte);

	font-size: 15px;
	line-height: 1.8;
}

.cfor-f-prose > *:first-child {
	margin-top: 0;
}

.cfor-f-prose > *:last-child {
	margin-bottom: 0;
}

/* ==========================================================
   OBJECTIFS
   ========================================================== */

.cfor-f-objectifs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;

	margin: 0;
	padding: 0;

	list-style: none;
}

.cfor-f-objectif {
	display: flex;
	gap: 12px;
	align-items: flex-start;

	padding: 14px;

	border: 1px solid var(--f-ligne);

	border-radius: 15px;

	background: var(--f-glace);

	color: var(--f-texte);

	font-size: 14px;
	line-height: 1.5;

	transition: transform .3s, background .3s, border-color .3s;
}

.cfor-f-objectif:hover {
	transform: translateX(4px);

	background: var(--f-ciel);

	border-color: color-mix(in srgb, var(--f-clair) 34%, #ffffff);
}

.cfor-f-objectif__coche {
	flex: 0 0 25px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 25px;
	height: 25px;

	border-radius: 50%;

	color: var(--f-mi);
	background: var(--f-ciel);

	font-weight: 900;

	transition: transform .3s;
}

.cfor-f-objectif:hover .cfor-f-objectif__coche {
	transform: scale(1.12);
}

/* ==========================================================
   PROFILS
   ========================================================== */

.cfor-f-profils {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 17px;
}

.cfor-f-profil {
	padding: 21px;

	border-radius: 19px;

	border: 1px solid var(--f-ligne);

	background: var(--f-glace);

	transition: transform .35s, background .35s, box-shadow .35s;
}

.cfor-f-profil:hover {
	transform: translateY(-4px);

	background: #fff;

	box-shadow: 0 14px 30px rgba(6, 73, 112, .08);
}

.cfor-f-profil h3 {
	margin: 0 0 11px;

	color: var(--f-encre);

	font-size: 17px;
}

.cfor-f-profil p,
.cfor-f-profil ul {
	margin: 0;

	color: var(--f-texte);

	font-size: 14px;
	line-height: 1.72;
}

.cfor-f-profil ul {
	padding-left: 20px;
}

/* ==========================================================
   PROGRAMME EN ACCORDÉON
   ========================================================== */

.cfor-f-modules {
	position: relative;

	display: grid;
	gap: 13px;
}

.cfor-f-module {
	position: relative;

	overflow: hidden;

	border-radius: 17px;

	border: 1px solid var(--f-ligne);

	background: #fff;

	transition: border-color .35s, box-shadow .35s;
}

.cfor-f-module:hover {
	border-color: color-mix(in srgb, var(--f-clair) 40%, #ffffff);
}

.cfor-f-module.est-ouvert {
	border-color: color-mix(in srgb, var(--f-clair) 55%, #ffffff);

	box-shadow: 0 12px 27px rgba(8, 99, 150, .1);
}

.cfor-f-module__bouton {
	width: 100%;
	min-height: 64px;

	padding: 16px 19px;

	border: 0;

	background: transparent;

	color: var(--f-encre);

	cursor: pointer;

	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;

	text-align: left;

	font-size: 14px;
	font-weight: 900;
}

.cfor-f-module.est-ouvert .cfor-f-module__bouton {
	color: var(--f-mi);

	background: var(--f-glace);
}

.cfor-f-module__numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 34px;
	height: 34px;

	margin-right: 9px;

	border-radius: 10px;

	color: #fff;

	background: linear-gradient(140deg, var(--f-fonce), var(--f-clair));

	font-size: 12px;
}

/*
 * La durée du module, quand elle est déclarée. Elle ne s'invente pas : le
 * champ « heures » du découpage est celui que le contrôle des heures compare
 * à la durée annoncée. Un visiteur qui lit « 02 Réception — 35 h » sait ce
 * qu'il achète ; un module sans durée n'affiche rien plutôt qu'un zéro.
 *
 * « margin-left: auto » plutôt qu'une place dans la répartition : sans lui, le
 * titre, la durée et la flèche se partageaient la largeur à trois, et la
 * flèche quittait le bord droit dès qu'un module portait une durée.
 */
.cfor-f-module__heures {
	margin-left: auto;

	flex: 0 0 auto;

	padding: 4px 10px;

	border-radius: 999px;

	background: var(--f-ciel);

	color: var(--f-mi);

	font-size: 11.5px;
	font-weight: 800;
	white-space: nowrap;
}

.cfor-f-module__fleche {
	flex: 0 0 32px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 32px;
	height: 32px;

	border-radius: 50%;

	background: var(--f-ciel);

	transition: transform .35s, background .35s;
}

.cfor-f-module.est-ouvert .cfor-f-module__fleche {
	transform: rotate(180deg);

	background: color-mix(in srgb, var(--f-clair) 26%, #ffffff);
}

.cfor-f-module__corps {
	max-height: 0;

	overflow: hidden;

	padding: 0 21px;

	color: var(--f-texte);

	font-size: 14px;
	line-height: 1.72;

	transition: max-height .5s ease, padding .5s ease;
}

.cfor-f-module.est-ouvert .cfor-f-module__corps {
	max-height: 900px;

	padding: 0 21px 20px;
}

.cfor-f-module__corps ul {
	margin: 0;
	padding-left: 20px;
}

/*
 * Un module sans point détaillé n'a rien à déplier. Son bouton reste un
 * titre : pas de flèche, pas de curseur qui promet une ouverture.
 */
/*
 * Un module sans point est rendu par un paragraphe, pas par un bouton : rien
 * ne doit promettre une ouverture. Mais un paragraphe porte les marges que le
 * navigateur lui donne, et le bouton n'en a aucune : mesuré, 96 pixels de haut
 * contre 68 — un module plat au milieu d'une liste de modules dépliables
 * paraissait séparé des autres, comme s'il n'appartenait pas au programme.
 */
.cfor-f-module--plat .cfor-f-module__bouton {
	cursor: default;

	margin: 0;
}

/* ==========================================================
   MÉTHODES
   ========================================================== */

.cfor-f-methodes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.cfor-f-methode {
	position: relative;

	overflow: hidden;

	padding: 23px 19px;

	border: 1px solid var(--f-ligne);

	border-radius: 20px;

	background: linear-gradient(160deg, #fff, var(--f-glace));

	transition: transform .35s, box-shadow .35s;
}

.cfor-f-methode::before {
	content: "";

	position: absolute;

	width: 90px;
	height: 90px;

	border-radius: 50%;

	right: -45px;
	top: -45px;

	background: var(--f-ciel);

	transition: transform .35s;
}

.cfor-f-methode:hover {
	transform: translateY(-6px);

	box-shadow: 0 16px 32px rgba(7, 79, 119, .1);
}

.cfor-f-methode:hover::before {
	transform: scale(1.5);
}

.cfor-f-methode__icone {
	position: relative;
	z-index: 3;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	margin-bottom: 14px;

	border-radius: 50%;

	background: var(--f-ciel);

	font-size: 21px;
}

.cfor-f-methode h3 {
	position: relative;
	z-index: 3;

	margin: 0 0 9px;

	color: var(--f-encre);

	font-size: 16px;
}

.cfor-f-methode p,
.cfor-f-methode li {
	position: relative;
	z-index: 3;

	color: var(--f-texte);

	font-size: 13px;
	line-height: 1.62;
}

.cfor-f-methode p {
	margin: 0;
}

.cfor-f-methode ul {
	margin: 0;

	padding-left: 18px;
}

/* ==========================================================
   INFORMATIONS PRATIQUES
   ========================================================== */

.cfor-f-infos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 13px;
}

.cfor-f-info {
	position: relative;

	overflow: hidden;

	padding: 19px;

	border-radius: 18px;

	border: 1px solid var(--f-ligne);

	background: var(--f-glace);

	transition: transform .35s, background .35s;
}

.cfor-f-info:hover {
	transform: translateY(-5px);

	background: var(--f-ciel);
}

.cfor-f-info strong {
	display: block;

	margin-bottom: 7px;

	color: var(--f-encre);

	font-size: 14px;
}

.cfor-f-info span {
	display: block;

	color: var(--f-texte);

	font-size: 13px;
	line-height: 1.55;
}

/* ==========================================================
   SESSIONS
   ========================================================== */

.cfor-f-sessions {
	display: grid;
	gap: 11px;

	margin: 0;
	padding: 0;

	list-style: none;
}

.cfor-f-session {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
	gap: 14px;

	align-items: center;

	padding: 15px 18px;

	border: 1px solid var(--f-ligne);
	border-radius: 17px;

	background: var(--f-glace);

	transition: transform .3s, background .3s, border-color .3s;
}

.cfor-f-session:hover {
	transform: translateX(4px);

	background: #fff;

	border-color: color-mix(in srgb, var(--f-clair) 34%, #ffffff);
}

.cfor-f-session__dates strong {
	display: block;

	color: var(--f-encre);

	font-size: 14px;
}

.cfor-f-session__horaires,
.cfor-f-session__lieu {
	color: var(--f-texte);

	font-size: 13px;
}

.cfor-f-session__etat {
	display: inline-flex;
	align-items: center;
	gap: 7px;

	color: var(--f-texte);

	font-size: 13px;
	font-weight: 800;

	white-space: nowrap;
}

/*
 * La couleur ne porte jamais le sens seule : chaque pastille est doublée d'un
 * signe et d'un mot. Un daltonien lit la même chose que les autres.
 */
.cfor-f-session__point {
	width: 10px;
	height: 10px;

	border-radius: 50%;

	background: var(--cfor-disponible, #1d7a4f);
}

.cfor-f-session--complet .cfor-f-session__point {
	background: var(--cfor-complet, #9a3412);
}

.cfor-f-session--annule .cfor-f-session__point {
	background: var(--cfor-annule, #b42318);
}

.cfor-f-session__action .cfor-f-bouton {
	width: auto;
	min-height: 42px;

	padding: 9px 16px;

	font-size: 13px;
}

.cfor-f-vide {
	margin: 0;

	padding: 17px 19px;

	border: 1px dashed var(--f-ligne);
	border-radius: 17px;

	color: var(--f-texte);

	background: var(--f-glace);

	font-size: 14px;
	line-height: 1.6;
}

/* ==========================================================
   INDICATEURS
   ========================================================== */

.cfor-f-indicateurs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 13px;

	margin: 0 0 16px;
	padding: 0;

	list-style: none;
}

.cfor-f-indicateur {
	padding: 19px;

	border: 1px solid var(--f-ligne);
	border-radius: 18px;

	background: var(--f-glace);

	text-align: center;
}

.cfor-f-indicateur__valeur {
	display: block;

	color: var(--f-mi);

	font-size: 29px;
	font-weight: 900;
	line-height: 1.1;
}

.cfor-f-indicateur__libelle {
	display: block;

	margin-top: 6px;

	color: var(--f-texte);

	font-size: 13px;
}

.cfor-f-note {
	margin: 10px 0 0;

	color: var(--f-texte);

	font-size: 13px;
	line-height: 1.6;
}

/* ==========================================================
   ÉTIQUETTES (financements, blocs)
   ========================================================== */

.cfor-f-jetons {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;

	margin: 0 0 12px;
	padding: 0;

	list-style: none;
}

.cfor-f-jeton {
	padding: 9px 14px;

	border-radius: 100px;

	border: 1px solid var(--f-ligne);

	color: var(--f-mi);

	background: var(--f-glace);

	font-size: 13px;
	font-weight: 800;
}

/* ==========================================================
   ACCESSIBILITÉ
   ========================================================== */

.cfor-f-carte--acces {
	border-color: color-mix(in srgb, var(--f-clair) 40%, #ffffff);

	background:
		radial-gradient(circle at 100% 0%, rgba(87, 198, 239, .15), transparent 31%),
		linear-gradient(135deg, var(--f-glace), #ffffff);
}

.cfor-f-acces {
	position: relative;

	overflow: hidden;

	padding: 24px;

	border-radius: 20px;

	background: linear-gradient(120deg, var(--f-ciel), var(--f-glace));

	border: 1px solid var(--f-ligne);
}

.cfor-f-acces::before {
	content: "♿";

	position: absolute;

	right: 18px;
	top: 8px;

	color: rgba(8, 110, 165, .07);

	font-size: 110px;
	font-weight: 900;

	animation: cforFAccesFlotte 6s ease-in-out infinite;
}

@keyframes cforFAccesFlotte {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(9px); }
}

.cfor-f-acces__etiquette {
	position: relative;
	z-index: 2;

	display: inline-flex;
	align-items: center;
	gap: 9px;

	margin-bottom: 13px;

	padding: 9px 13px;

	border-radius: 100px;

	background: var(--f-ciel);

	color: var(--f-mi);

	font-size: 13px;
	font-weight: 900;
}

.cfor-f-acces__texte {
	position: relative;
	z-index: 2;

	margin: 0;

	color: var(--f-texte);

	font-size: 14px;
	line-height: 1.8;
}

.cfor-f-acces__lien {
	position: relative;
	z-index: 2;

	display: inline-flex;
	align-items: center;
	gap: 8px;

	margin-top: 15px;

	padding: 11px 15px;

	border-radius: 12px;

	color: #fff;

	background: linear-gradient(100deg, var(--f-fonce), var(--f-clair));

	font-size: 13px;
	font-weight: 900;

	box-shadow: 0 8px 22px rgba(14, 129, 187, .18);

	transition: transform .3s, box-shadow .3s;
}

.cfor-f-acces__lien:hover {
	transform: translateY(-2px);

	box-shadow: 0 13px 27px rgba(14, 129, 187, .27);
}

/* ==========================================================
   APPEL FINAL
   ========================================================== */

.cfor-f-final {
	max-width: 1240px;

	margin: 0 auto 80px;

	padding: 0 24px;
}

.cfor-f-final__dedans {
	position: relative;

	overflow: hidden;

	padding: 45px;

	border-radius: 31px;

	display: grid;
	grid-template-columns: 1fr auto;
	gap: 30px;

	align-items: center;

	color: #fff;

	background:
		radial-gradient(circle at 85% 0%, rgba(117, 217, 255, .37), transparent 34%),
		linear-gradient(120deg, var(--f-nuit), var(--f-mi), var(--f-clair));

	box-shadow: 0 23px 62px rgba(8, 69, 111, .22);
}

.cfor-f-final__dedans::before {
	content: "";

	position: absolute;

	width: 220px;
	height: 220px;

	right: -100px;
	bottom: -110px;

	border: 40px solid rgba(255, 255, 255, .07);

	border-radius: 50%;

	animation: cforFCercle 8s linear infinite;
}

@keyframes cforFCercle {
	from { transform: rotate(0); }
	to   { transform: rotate(360deg); }
}

.cfor-f-final h2 {
	position: relative;
	z-index: 2;

	margin: 0 0 10px;

	color: #fff;

	font-size: 31px;
}

.cfor-f-final p {
	position: relative;
	z-index: 2;

	margin: 0;

	max-width: 700px;

	color: #e7f7ff;

	line-height: 1.65;
}

.cfor-f-final__bouton {
	position: relative;
	z-index: 3;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 55px;

	padding: 14px 27px;

	border-radius: 15px;

	background: #fff;

	color: var(--f-mi);

	font-weight: 900;

	white-space: nowrap;

	transition: transform .3s;

	box-shadow: 0 12px 25px rgba(0, 32, 59, .17);
}

.cfor-f-final__bouton:hover {
	transform: translateY(-4px) scale(1.02);
}

/* ==========================================================
   ANIMATIONS D'ENTRÉE
   ========================================================== */

@keyframes cforFTitre {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes cforFMonte {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes cforFTombe {
	from { opacity: 0; transform: translateY(-14px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes cforFVientGauche {
	from { opacity: 0; transform: translateX(-25px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes cforFCadreEntre {
	from { opacity: 0; transform: translateX(35px) scale(.94); }
	to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes cforFCadreFlotte {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

@keyframes cforFCoteEntre {
	from { opacity: 0; transform: translateY(28px) scale(.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width: 1050px) {

	.cfor-f-haut__grille {
		grid-template-columns: 1fr;
	}

	.cfor-f-cadre {
		max-width: 670px;
		width: 100%;
	}

}

/* ==========================================================
   MOBILE LARGE
   ========================================================== */

@media (max-width: 850px) {

	.cfor-f-corps {
		grid-template-columns: 1fr;
	}

	.cfor-f-cote {
		position: relative;
		top: auto;
	}

	.cfor-f-contenu::before {
		display: none;
	}

	.cfor-f-objectifs,
	.cfor-f-profils,
	.cfor-f-methodes,
	.cfor-f-infos,
	.cfor-f-indicateurs {
		grid-template-columns: 1fr 1fr;
	}

	.cfor-f-session {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.cfor-f-final__dedans {
		grid-template-columns: 1fr;
	}

}

/* ==========================================================
   TÉLÉPHONE
   ========================================================== */

@media (max-width: 580px) {

	.cfor-f-haut {
		padding: 37px 18px 78px;
	}

	.cfor-f-titre {
		font-size: 38px;

		letter-spacing: -1.3px;
	}

	.cfor-f-chapeau {
		font-size: 15px;
	}

	.cfor-f-cadre {
		min-height: 280px;
	}

	.cfor-f-etiquette {
		display: none;
	}

	.cfor-f-corps {
		margin-top: -36px;

		padding-left: 13px;
		padding-right: 13px;
	}

	.cfor-f-carte {
		padding: 20px;

		border-radius: 21px;
	}

	.cfor-f-carte__titre {
		font-size: 20px;
	}

	.cfor-f-objectifs,
	.cfor-f-profils,
	.cfor-f-methodes,
	.cfor-f-infos,
	.cfor-f-indicateurs {
		grid-template-columns: 1fr;
	}

	.cfor-f-module__numero {
		display: none;
	}

	/*
	 * <b>Le titre rétrécit, il ne pousse pas.</b> Mesuré sur un téléphone de
	 * 390 pixels : la pastille de durée et la flèche prennent une centaine de
	 * pixels, et le titre n'avait plus que cent dix pixels parce que les trois
	 * se partageaient la largeur à parts égales. « Gestion informatisée des
	 * stocks et préparation de commandes » tombait sur cinq lignes.
	 *
	 * « flex: 1 1 0 » avec « min-width: 0 » donne au titre tout ce qui reste
	 * une fois la pastille et la flèche posées — cent cinquante-sept pixels au
	 * lieu de cent dix — et le laisse se replier sur lui-même. Avec « auto »,
	 * il réclamait la largeur de son mot le plus long et renvoyait la flèche à
	 * la ligne suivante.
	 *
	 * L'ordre des trois n'est pas touché : la flèche reste au bord droit, là
	 * où elle est sur grand écran et là où on la cherche.
	 */
	.cfor-f-module__bouton {
		gap: 12px;
	}

	.cfor-f-module__bouton > span:first-child {
		flex: 1 1 0;

		min-width: 0;
	}

	.cfor-f-final {
		padding: 0 13px;
	}

	.cfor-f-final__dedans {
		padding: 30px 23px;
	}

	.cfor-f-final h2 {
		font-size: 25px;
	}

}

/* ==========================================================
   MOUVEMENT RÉDUIT
   ==========================================================
 * Un visiteur qui a demandé moins de mouvement dans son système en obtient
 * moins ici : plus rien ne bouge, et tout reste visible. Les cartes, qui
 * n'apparaissent qu'une fois vues, sont montrées d'emblée — sans cette ligne,
 * couper l'animation les laisserait transparentes.
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

	.cfor-f *,
	.cfor-f *::before,
	.cfor-f *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;

		transition-duration: .01ms !important;
	}

	.cfor-f-carte {
		opacity: 1;
		transform: none;
	}

	.cfor-f-carte::before {
		width: 100%;
	}

}

/* ==========================================================
   LES DESSINS
   ==========================================================
 * Les pictogrammes sont des SVG au trait, à « 1em », posés là où un caractère
 * typographique dépendait de la police installée. Les tailles ci-dessous les
 * accordent à leur voisinage : un dessin à la taille du texte se perd dans une
 * pastille, et écrase un libellé de badge.
   ========================================================== */

.cfor-f svg {
	flex: 0 0 auto;
	display: block;
}

.cfor-f-badge svg {
	width: 16px;
	height: 16px;
}

.cfor-f-carte__icone svg {
	width: 23px;
	height: 23px;
	color: var(--f-mi);
}

.cfor-f-fait__icone svg {
	width: 21px;
	height: 21px;
	color: var(--f-mi);
}

.cfor-f-methode__icone svg {
	width: 23px;
	height: 23px;
	color: var(--f-mi);
}

.cfor-f-acces__etiquette svg,
.cfor-f-acces__lien svg {
	width: 16px;
	height: 16px;
}

/*
 * Le filigrane de la carte Accessibilité : la maquette y posait un grand
 * caractère ♿ en très pâle. Le même dessin, à la même place, sans dépendre
 * d'une police.
 */
.cfor-f-acces::before {
	content: "";

	width: 118px;
	height: 118px;

	background-color: rgba(8, 110, 165, .07);

	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.2' cy='4.6' r='1.9'/%3E%3Cpath d='M11 8.2v4h4.3l2.6 5'/%3E%3Cpath d='M14.9 13.8a5.3 5.3 0 1 1-5.6-2.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.2' cy='4.6' r='1.9'/%3E%3Cpath d='M11 8.2v4h4.3l2.6 5'/%3E%3Cpath d='M14.9 13.8a5.3 5.3 0 1 1-5.6-2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}