/**
 * Demande d'inscription — l'assistant public.
 *
 * Reprise de la maquette de l'organisme : fond clair, carte blanche centrée,
 * jauge d'avancement, choix présentés en cartes cliquables plutôt qu'en listes
 * déroulantes, récapitulatif avant envoi.
 *
 * <b>Les couleurs viennent d'« Apparence », comme partout.</b> Les valeurs
 * écrites en dur ne sont que des replis, pour un navigateur sans
 * `color-mix()`. Un organisme qui pose du bordeaux et de l'or obtient le même
 * assistant en bordeaux et or.
 *
 * <b>Le préfixe `.cfor-ins-` n'appartient qu'à cette feuille.</b> Trois
 * composants ont déjà porté le même nom dans ce logiciel, et la page s'est
 * affichée de travers sans que rien ne le signale. Aucune classe déclarée ici
 * ne doit l'être ailleurs.
 *
 * @package Catalogue_Formation
 */

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

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

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

	--i-nuit: #031c39;
	--i-nuit: color-mix(in srgb, var(--i-fonce) 78%, #000000);

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

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

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

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

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

	/* L'attente, et seulement l'attente : jamais la couleur d'un accord. */
	--i-attente: #8a5a00;
	--i-attente-fond: #fff6e3;

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

	padding: clamp(24px, 5vw, 64px) 20px clamp(48px, 7vw, 96px);
}

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

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

/* ==========================================================
   LE RÉSUMÉ DE LA FORMATION
   ========================================================== */

.cfor-ins-tete {
	max-width: 780px;
	margin: 0 auto 20px;
	padding: 26px 28px;

	background: #ffffff;
	border: 1px solid var(--i-ligne);
	border-radius: 20px;
	box-shadow: 0 18px 40px -28px rgba(9, 44, 78, 0.35);
}

.cfor-ins-tete__haut {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}

/* Sans ces deux lignes, le titre prend toute la largeur et l'encadré de durée
   retombe sous lui, aligné à gauche, où il ressemble à un champ oublié. */
.cfor-ins-tete__haut > div {
	flex: 1 1 320px;
	min-width: 0;
}

.cfor-ins-tete__haut > .cfor-ins-duree {
	flex: 0 0 auto;
}

.cfor-ins-tete__etiquettes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}

.cfor-ins-jeton {
	display: inline-block;
	padding: 5px 12px;

	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;

	color: #ffffff;
	background: var(--i-fonce);
	border-radius: 999px;
}

.cfor-ins-jeton--creux {
	color: var(--i-fonce);
	background: var(--i-ciel);
}

.cfor-ins-tete__titre {
	margin: 0;
	font-size: clamp(1.3rem, 3vw, 1.75rem);
	line-height: 1.25;
	color: var(--i-fonce);
}

.cfor-ins-tete__sous {
	margin: 8px 0 0;
	font-size: 0.92rem;
	color: var(--i-texte);
}

.cfor-ins-tete__session {
	margin: 12px 0 0;
	padding: 10px 14px;

	font-size: 0.9rem;
	color: var(--i-encre);
	background: var(--i-glace);
	border: 1px solid var(--i-ligne);
	border-radius: 12px;
}

.cfor-ins-tete__session a {
	margin-left: 10px;
	font-weight: 600;
	color: var(--i-clair);
	text-decoration: underline;
}

.cfor-ins-duree {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 12px 16px;

	text-align: right;
	background: var(--i-glace);
	border: 1px solid var(--i-ligne);
	border-radius: 14px;
}

.cfor-ins-duree small {
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--i-texte);
}

.cfor-ins-duree strong {
	font-size: 1.05rem;
	color: var(--i-fonce);
}

/* ==========================================================
   LA JAUGE D'AVANCEMENT
   ========================================================== */

.cfor-ins-jauge {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--i-ligne);
}

.cfor-ins-jauge[hidden] {
	display: none;
}

.cfor-ins-jauge__ligne {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 10px;
	font-size: 0.85rem;
}

.cfor-ins-jauge__ligne strong {
	color: var(--i-fonce);
}

.cfor-ins-jauge__ligne span {
	font-weight: 600;
	color: var(--i-texte);
}

.cfor-ins-jauge__piste {
	display: block;
	height: 7px;
	overflow: hidden;

	background: var(--i-ciel);
	border-radius: 999px;
}

.cfor-ins-jauge__part {
	display: block;
	width: 25%;
	height: 100%;

	background: linear-gradient(90deg, var(--i-fonce), var(--i-clair));
	border-radius: 999px;
	transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
	.cfor-ins-jauge__part {
		transition: none;
	}
}

/* ==========================================================
   LE FORMULAIRE
   ========================================================== */

.cfor-ins-form {
	max-width: 780px;
	margin: 0 auto;
}

/* Le piège à robots : hors de l'écran, mais pas `display:none`, que certains
   automates savent reconnaître. Il reste atteignable au clavier par personne :
   le gabarit lui pose tabindex="-1". */
.cfor-ins-piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cfor-ins-bloc {
	margin: 0 0 18px;
	padding: 28px;

	background: #ffffff;
	border: 1px solid var(--i-ligne);
	border-radius: 20px;
	box-shadow: 0 18px 40px -30px rgba(9, 44, 78, 0.32);
}

/* Masquée par le script, jamais par la feuille : sans JavaScript, les quatre
   étapes s'affichent à la suite et le formulaire part quand même. */
.cfor-ins-bloc[hidden] {
	display: none;
}

.cfor-ins-bloc__sur {
	margin: 0 0 6px;

	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--i-clair);
}

.cfor-ins-bloc h3 {
	margin: 0;
	font-size: clamp(1.15rem, 2.5vw, 1.4rem);
	color: var(--i-fonce);
}

.cfor-ins-bloc__aide {
	margin: 8px 0 0;
	font-size: 0.9rem;
	color: var(--i-texte);
}

/* ==========================================================
   LES CARTES DE CHOIX
   ========================================================== */

.cfor-ins-cartes {
	display: grid;
	gap: 12px;
	margin: 20px 0 0;
}

.cfor-ins-cartes--deux {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cfor-ins-cartes--trois {
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.cfor-ins-carte {
	display: block;
	position: relative;
	cursor: pointer;
}

/* Le bouton radio reste présent et focusable : on l'habille, on ne le
   remplace pas. Un faux bouton en <span> ne se coche pas au clavier. */
.cfor-ins-carte input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.cfor-ins-carte__dedans {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 16px 18px;

	background: #ffffff;
	border: 2px solid var(--i-ligne);
	border-radius: 14px;
	transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.cfor-ins-carte__dedans strong {
	font-size: 0.98rem;
	color: var(--i-encre);
}

.cfor-ins-carte__dedans span {
	font-size: 0.82rem;
	color: var(--i-texte);
}

.cfor-ins-carte:hover .cfor-ins-carte__dedans {
	border-color: var(--i-clair);
	transform: translateY(-2px);
}

.cfor-ins-carte input:checked + .cfor-ins-carte__dedans {
	background: var(--i-ciel);
	border-color: var(--i-fonce);
}

.cfor-ins-carte input:focus-visible + .cfor-ins-carte__dedans {
	outline: 3px solid var(--i-clair);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cfor-ins-carte__dedans {
		transition: none;
	}

	.cfor-ins-carte:hover .cfor-ins-carte__dedans {
		transform: none;
	}
}

/* ==========================================================
   LES CHAMPS
   ========================================================== */

.cfor-ins-champs {
	display: grid;
	/* Deux colonnes sur une carte de 780 px. À 220 px on en obtenait trois, et
	   le téléphone restait seul sur sa ligne comme un champ oublié. */
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
	margin: 20px 0 0;
}

.cfor-ins-champ {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	border: 0;
	padding: 0;
}

.cfor-ins-champ--large {
	grid-column: 1 / -1;
}

.cfor-ins-champ[hidden],
.cfor-ins-sup[hidden] {
	display: none;
}

.cfor-ins-champ > label,
.cfor-ins-champ > legend {
	padding: 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--i-encre);
}

.cfor-ins-facultatif {
	margin-left: 6px;
	font-weight: 400;
	color: var(--i-texte);
}

/* Les quatre familles de champ, et non trois : un « number » et un « select »
   oubliés ici gardent l'habillage du navigateur, et c'est le seul endroit de la
   page où l'on voit que ce n'est pas fini. */
.cfor-ins-champ input[type="text"],
.cfor-ins-champ input[type="email"],
.cfor-ins-champ input[type="tel"],
.cfor-ins-champ input[type="number"],
.cfor-ins-champ select,
.cfor-ins-champ textarea {
	width: 100%;
	padding: 11px 14px;

	font: inherit;
	font-size: 0.95rem;
	color: var(--i-encre);
	background: #ffffff;
	border: 1px solid var(--i-ligne);
	border-radius: 11px;
}

.cfor-ins-champ select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 38px;

	/* La flèche est dessinée dans la feuille : une image de plus serait une
	   requête de plus pour un triangle. */
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.cfor-ins-champ input:focus,
.cfor-ins-champ select:focus,
.cfor-ins-champ textarea:focus {
	outline: 3px solid var(--i-clair);
	outline-offset: 1px;
	border-color: var(--i-clair);
}

.cfor-ins-champ textarea {
	resize: vertical;
	min-height: 96px;
}

/* Les questions oui/non : deux cases côte à côte, pas une liste déroulante.
   En bloc, et non en colonne flex : sinon chaque réponse devient une ligne, et
   « Oui » puis « Non » s'empilent comme deux questions distinctes. */
.cfor-ins-ouinon {
	display: block;
}

.cfor-ins-ouinon > legend {
	display: block;
	margin-bottom: 7px;
}

.cfor-ins-ouinon label {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin-right: 16px;

	font-size: 0.92rem;
	color: var(--i-encre);
}

/* ==========================================================
   LES CHAMPS D'UN DISPOSITIF
   ========================================================== */

.cfor-ins-sup {
	margin: 18px 0 0;
	padding: 18px 20px;

	background: var(--i-glace);
	border: 1px solid var(--i-ligne);
	border-radius: 16px;
}

.cfor-ins-sup > legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding: 0 8px;

	font-size: 0.9rem;
	font-weight: 700;
	color: var(--i-fonce);
}

.cfor-ins-sup .cfor-ins-champs {
	margin-top: 12px;
}

/* Le champ qui suit un dispositif a besoin de respirer, sinon il se lit comme
   une question de plus de ce dispositif. */
.cfor-ins-sup + .cfor-ins-champ {
	margin-top: 18px;
}

/* La mention d'attente. Jamais verte, jamais une coche : ce n'est pas un
   accord, c'est une intention que personne n'a encore instruite. */
.cfor-ins-etat {
	display: inline-block;
	padding: 4px 11px;

	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.02em;

	color: var(--i-attente);
	background: var(--i-attente-fond);
	border: 1px solid currentColor;
	border-radius: 999px;
}

/* ==========================================================
   LE RÉCAPITULATIF
   ========================================================== */

.cfor-ins-recap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px;
	margin: 20px 0 0;
}

.cfor-ins-recap__case {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;

	background: var(--i-glace);
	border: 1px solid var(--i-ligne);
	border-radius: 14px;
}

.cfor-ins-recap__case--large {
	grid-column: 1 / -1;
}

.cfor-ins-recap__case small {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--i-texte);
}

.cfor-ins-recap__case strong {
	font-size: 1rem;
	color: var(--i-fonce);
}

.cfor-ins-recap__case > span:not(.cfor-ins-etat) {
	font-size: 0.85rem;
	color: var(--i-texte);
}

.cfor-ins-recap__case .cfor-ins-etat {
	align-self: flex-start;
	margin-top: 2px;
}

/* ==========================================================
   LA NOTICE DE PROTECTION DES DONNÉES
   ========================================================== */

.cfor-ins-notice {
	margin: 20px 0 0;
	padding: 18px 20px;

	background: var(--i-glace);
	border: 1px solid var(--i-ligne);
	border-radius: 16px;
}

.cfor-ins-notice__texte {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--i-texte);
}

.cfor-ins-notice__case {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 14px;

	font-size: 0.9rem;
	color: var(--i-encre);
	cursor: pointer;
}

.cfor-ins-notice__case input {
	margin: 2px 0 0;
}

/* Le réglage manquant se dit, il ne se devine pas. */
.cfor-ins-manque {
	margin: 20px 0 0;
	padding: 14px 18px;

	font-size: 0.88rem;
	color: var(--i-attente);
	background: var(--i-attente-fond);
	border: 1px solid currentColor;
	border-radius: 14px;
}

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

.cfor-ins-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin: 24px 0 0;
}

.cfor-ins-bouton {
	padding: 12px 22px;

	font-size: 0.95rem;
	font-weight: 700;
	color: var(--i-fonce);
	background: #ffffff;
	border: 2px solid var(--i-ligne);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.cfor-ins-bouton:hover {
	border-color: var(--i-clair);
	transform: translateY(-1px);
}

.cfor-ins-bouton:focus-visible {
	outline: 3px solid var(--i-clair);
	outline-offset: 2px;
}

.cfor-ins-bouton--plein {
	color: #ffffff;
	background: linear-gradient(135deg, var(--i-fonce), var(--i-clair));
	border-color: transparent;
	box-shadow: 0 14px 28px -16px rgba(9, 44, 78, 0.55);
}

.cfor-ins-bouton--plein:hover {
	border-color: transparent;
	box-shadow: 0 18px 34px -16px rgba(9, 44, 78, 0.6);
}

@media (prefers-reduced-motion: reduce) {
	.cfor-ins-bouton {
		transition: none;
	}

	.cfor-ins-bouton:hover {
		transform: none;
	}
}

/* ==========================================================
   LA CONFIRMATION
   ========================================================== */

.cfor-ins-faite {
	max-width: 780px;
	margin: 0 auto;
	overflow: hidden;

	background: #ffffff;
	border: 1px solid var(--i-ligne);
	border-radius: 22px;
	box-shadow: 0 24px 52px -32px rgba(9, 44, 78, 0.4);
}

.cfor-ins-faite__haut {
	padding: 36px 32px 32px;
	text-align: center;
	color: #ffffff;
	background: linear-gradient(135deg, var(--i-nuit), var(--i-fonce) 55%, var(--i-clair));
}

.cfor-ins-faite__coche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;

	font-size: 1.6rem;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.16);
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
}

.cfor-ins-faite__sur {
	margin: 16px 0 4px;

	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.85;
}

.cfor-ins-faite__haut h2 {
	margin: 0;
	font-size: clamp(1.3rem, 3vw, 1.7rem);
	color: #ffffff;
}

.cfor-ins-faite__texte {
	max-width: 46ch;
	margin: 12px auto 0;
	font-size: 0.95rem;
	line-height: 1.6;
	opacity: 0.92;
}

.cfor-ins-faite__bas {
	padding: 28px 32px 32px;
}

.cfor-ins-faite__bas .cfor-ins-recap {
	margin-top: 0;
}

.cfor-ins-suite {
	margin: 22px 0 0;
	padding: 18px 20px;

	background: var(--i-glace);
	border: 1px solid var(--i-ligne);
	border-radius: 16px;
}

.cfor-ins-suite h3 {
	margin: 0 0 10px;
	font-size: 1rem;
	color: var(--i-fonce);
}

.cfor-ins-suite ul {
	margin: 0;
	padding-left: 20px;
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--i-texte);
}

.cfor-ins-faite__retour {
	margin: 20px 0 0;
	text-align: center;
}

.cfor-ins-faite__retour a {
	font-weight: 600;
	color: var(--i-clair);
	text-decoration: underline;
}

/* ==========================================================
   PETITS ÉCRANS
   ========================================================== */

@media (max-width: 600px) {
	.cfor-ins-tete,
	.cfor-ins-bloc {
		padding: 20px;
	}

	.cfor-ins-duree {
		text-align: left;
	}

	.cfor-ins-actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.cfor-ins-actions .cfor-ins-bouton {
		width: 100%;
	}

	.cfor-ins-faite__haut,
	.cfor-ins-faite__bas {
		padding: 24px 20px;
	}
}