/*
 * Le Grand Frère — composants du système de design v2.
 * Chaque valeur vient de css/tokens.css (variables --lgf-*, --font-*).
 * Interdits dans ce fichier (vérifiés par design/check_design.py) :
 * couleur en dur (#hex, rgb, hsl), police en dur, rayon hors jetons.
 * Règles d'usage : design/DESIGN.md
 */

/* ---------- Icônes (Lucide, au trait) ---------- */
.lgf-icone {
	width: 20px;
	height: 20px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.lgf-icone--24 {
	width: 24px;
	height: 24px;
}

/* ---------- Lien ---------- */
/* Souligné épais et discret ; au survol, le trait prend le corail de la marque */
.lgf-lien {
	color: var(--lgf-bleu-500);
	font-weight: var(--lgf-corps-fort-graisse);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: color-mix(in srgb, var(--lgf-bleu-500) 30%, transparent);
	text-underline-offset: 4px;
	transition: color var(--lgf-duree-rapide) var(--lgf-courbe), text-decoration-color var(--lgf-duree-rapide) var(--lgf-courbe);
}
.lgf-lien:hover {
	color: var(--lgf-bleu-700);
	text-decoration-color: var(--lgf-corail-500);
}
/* Lien d'action : flèche qui avance au survol */
.lgf-lien--fleche,
.lgf-carte-icone > .lgf-lien {
	display: inline-flex;
	align-items: center;
	gap: var(--lgf-espace-2);
	text-decoration: none;
}
.lgf-lien--fleche::after,
.lgf-carte-icone > .lgf-lien::after {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("../img/motifs/fleche.svg") center / contain no-repeat;
	mask: url("../img/motifs/fleche.svg") center / contain no-repeat;
	transition: transform var(--lgf-duree-base) var(--lgf-courbe);
}
.lgf-lien--fleche:hover::after,
.lgf-carte-icone:hover > .lgf-lien::after {
	transform: translateX(4px);
}

/* ---------- Focus visible, commun à tous les éléments interactifs ---------- */
.lgf-btn:focus-visible,
.lgf-lien:focus-visible,
.lgf-pastille:focus-visible,
.lgf-accordeon summary:focus-visible,
a.lgf-carte:focus-visible {
	outline: var(--lgf-trait-fort) solid var(--lgf-bleu-500);
	outline-offset: 2px;
}

/* ---------- Bouton ---------- */
.lgf-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lgf-espace-2);
	min-height: var(--lgf-hauteur-controle);
	padding: 0 var(--lgf-espace-5);
	border: var(--lgf-trait-fort) solid transparent;
	border-radius: var(--lgf-rayon-md);
	font-family: var(--font-texte);
	font-size: var(--lgf-bouton-taille);
	line-height: var(--lgf-bouton-interligne);
	font-weight: var(--lgf-bouton-graisse);
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--lgf-duree-rapide) var(--lgf-courbe), color var(--lgf-duree-rapide) var(--lgf-courbe), border-color var(--lgf-duree-rapide) var(--lgf-courbe), box-shadow var(--lgf-duree-base) var(--lgf-courbe), transform var(--lgf-duree-base) var(--lgf-courbe);
}
.lgf-btn--principal {
	background: var(--lgf-corail-600);
	color: var(--lgf-blanc);
}
.lgf-btn--principal:hover {
	background: var(--lgf-corail-700);
	color: var(--lgf-blanc);
	box-shadow: var(--lgf-ombre-bouton);
	transform: translateY(-2px);
}
.lgf-btn--secondaire {
	background: var(--lgf-blanc);
	color: var(--lgf-bleu-500);
	border-color: var(--lgf-bleu-500);
}
.lgf-btn--secondaire:hover {
	background: var(--lgf-bleu-500);
	color: var(--lgf-blanc);
	border-color: var(--lgf-bleu-500);
}
/* Flèche d'action (bouton principal des appels à l'action) */
.lgf-btn--fleche::after {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("../img/motifs/fleche.svg") center / contain no-repeat;
	mask: url("../img/motifs/fleche.svg") center / contain no-repeat;
	transition: transform var(--lgf-duree-base) var(--lgf-courbe);
}
.lgf-btn--fleche:hover::after {
	transform: translateX(4px);
}
.lgf-btn--tertiaire {
	min-height: var(--lgf-cible-tactile);
	padding: 0 var(--lgf-espace-2);
	background: transparent;
	color: var(--lgf-bleu-500);
}
.lgf-btn--tertiaire:hover {
	color: var(--lgf-bleu-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.lgf-btn--sm {
	min-height: var(--lgf-hauteur-controle-sm);
	padding: 0 var(--lgf-espace-4);
}
.lgf-btn--bloc {
	width: 100%;
}
.lgf-btn:disabled,
.lgf-btn.is-disabled {
	background: var(--lgf-bordure);
	border-color: var(--lgf-bordure);
	color: var(--lgf-texte-discret);
	cursor: not-allowed;
}

/* ---------- Champ de formulaire ---------- */
.lgf-champ {
	display: grid;
	gap: var(--lgf-espace-2);
}
.lgf-champ__etiquette {
	font-family: var(--font-texte);
	font-size: var(--lgf-etiquette-taille);
	line-height: var(--lgf-etiquette-interligne);
	font-weight: var(--lgf-etiquette-graisse);
	color: var(--lgf-encre);
}
.lgf-champ__saisie {
	width: 100%;
	min-height: var(--lgf-hauteur-controle);
	padding: 0 var(--lgf-espace-4);
	border: var(--lgf-trait) solid var(--lgf-bordure-champ);
	border-radius: var(--lgf-rayon-md);
	background: var(--lgf-blanc);
	color: var(--lgf-encre);
	font-family: var(--font-texte);
	font-size: var(--lgf-corps-taille);
	line-height: var(--lgf-corps-interligne);
	box-sizing: border-box;
	transition: border-color var(--lgf-duree-rapide) var(--lgf-courbe);
}
textarea.lgf-champ__saisie {
	min-height: 120px;
	padding: var(--lgf-espace-3) var(--lgf-espace-4);
}
.lgf-champ__saisie::placeholder {
	color: var(--lgf-texte-discret);
}
.lgf-champ__saisie:hover {
	border-color: var(--lgf-texte-discret);
}
.lgf-champ__saisie:focus {
	outline: var(--lgf-trait-fort) solid var(--lgf-bleu-500);
	outline-offset: 1px;
	border-color: var(--lgf-bleu-500);
}
.lgf-champ__aide {
	font-size: var(--lgf-petit-taille);
	line-height: var(--lgf-petit-interligne);
	color: var(--lgf-texte-discret);
}
.lgf-champ__erreur {
	display: flex;
	align-items: center;
	gap: var(--lgf-espace-1);
	font-size: var(--lgf-petit-taille);
	line-height: var(--lgf-petit-interligne);
	color: var(--lgf-rouge-600);
}
.lgf-champ--erreur .lgf-champ__saisie {
	border-color: var(--lgf-rouge-600);
	box-shadow: inset 0 0 0 1px var(--lgf-rouge-600);
}

/* ---------- Pastille de filtre ---------- */
.lgf-pastille {
	display: inline-flex;
	align-items: center;
	gap: var(--lgf-espace-2);
	min-height: var(--lgf-hauteur-controle-sm);
	padding: 0 var(--lgf-espace-4);
	border: var(--lgf-trait) solid var(--lgf-bordure-champ);
	border-radius: var(--lgf-rayon-pilule);
	background: var(--lgf-blanc);
	color: var(--lgf-encre);
	font-family: var(--font-texte);
	font-size: var(--lgf-etiquette-taille);
	line-height: var(--lgf-etiquette-interligne);
	font-weight: var(--lgf-etiquette-graisse);
	cursor: pointer;
	transition: border-color var(--lgf-duree-rapide) var(--lgf-courbe), background-color var(--lgf-duree-rapide) var(--lgf-courbe);
}
.lgf-pastille:hover {
	border-color: var(--lgf-bleu-500);
}
.lgf-pastille[aria-pressed="true"],
.lgf-pastille.is-active {
	background: var(--lgf-turquoise-50);
	border-color: var(--lgf-turquoise-500);
	box-shadow: inset 0 0 0 1px var(--lgf-turquoise-500);
	color: var(--lgf-turquoise-700);
}
.lgf-pastille__compteur {
	color: var(--lgf-texte-discret);
	font-weight: var(--lgf-corps-graisse);
}

/* ---------- Badge ---------- */
.lgf-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--lgf-espace-1);
	padding: var(--lgf-espace-1) var(--lgf-espace-3);
	border-radius: var(--lgf-rayon-pilule);
	font-family: var(--font-texte);
	font-size: var(--lgf-etiquette-taille);
	line-height: var(--lgf-etiquette-interligne);
	font-weight: var(--lgf-etiquette-graisse);
	/* Couleurs portées par des variables : elles résistent aux réinitialisations de plugins (WP Grid Builder) */
	background: var(--lgf-badge-fond, var(--lgf-fond));
	color: var(--lgf-badge-texte, var(--lgf-texte));
}
.lgf-badge .lgf-icone {
	width: 16px;
	height: 16px;
}
.lgf-badge--partenaire {
	--lgf-badge-fond: var(--lgf-jaune-400);
	--lgf-badge-texte: var(--lgf-encre);
}
.lgf-badge--verifie {
	--lgf-badge-fond: var(--lgf-vert-50);
	--lgf-badge-texte: var(--lgf-vert-700);
}
.lgf-badge--info {
	--lgf-badge-fond: var(--lgf-bleu-50);
	--lgf-badge-texte: var(--lgf-bleu-500);
}
.lgf-badge--erreur {
	--lgf-badge-fond: var(--lgf-rouge-50);
	--lgf-badge-texte: var(--lgf-rouge-600);
}
.lgf-badge--corail {
	--lgf-badge-fond: var(--lgf-corail-50);
	--lgf-badge-texte: var(--lgf-corail-700);
}
.lgf-badge--turquoise {
	--lgf-badge-fond: var(--lgf-turquoise-50);
	--lgf-badge-texte: var(--lgf-turquoise-700);
}
.lgf-badge--attention {
	--lgf-badge-fond: var(--lgf-jaune-50);
	--lgf-badge-texte: var(--lgf-jaune-800);
}
.lgf-badge--action {
	--lgf-badge-fond: var(--lgf-corail-600);
	--lgf-badge-texte: var(--lgf-blanc);
}
.lgf-badge--une {
	--lgf-badge-fond: var(--lgf-jaune-400);
	--lgf-badge-texte: var(--lgf-encre);
}

/* ---------- Carte (base) ---------- */
/* Couleur d'accent (--lgf-accent*) : bleu par défaut, alternée dans les grilles (voir « Identité ») */
.lgf-carte {
	--lgf-accent: var(--lgf-bleu-500);
	--lgf-accent-fond: var(--lgf-bleu-50);
	--lgf-accent-texte: var(--lgf-bleu-500);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--lgf-espace-4);
	padding: var(--lgf-espace-5);
	border: var(--lgf-trait) solid var(--lgf-bordure);
	border-radius: var(--lgf-rayon-lg);
	background: var(--lgf-blanc);
	box-shadow: var(--lgf-ombre-carte);
	color: var(--lgf-texte);
	text-decoration: none;
	transition: box-shadow var(--lgf-duree-base) var(--lgf-courbe), border-color var(--lgf-duree-base) var(--lgf-courbe), transform var(--lgf-duree-base) var(--lgf-courbe);
}
a.lgf-carte:hover,
.lgf-carte--cliquable:hover,
.lgf-carte-icone:has(> .lgf-lien):hover {
	box-shadow: var(--lgf-ombre-survol);
	border-color: transparent;
	transform: translateY(-4px);
}
/* Le lien d'une carte à pictogramme rend toute la carte cliquable */
.lgf-carte-icone > .lgf-lien::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.lgf-carte__titre {
	margin: 0;
	font-family: var(--font-titres);
	font-size: var(--lgf-h3-taille);
	line-height: var(--lgf-h3-interligne);
	font-weight: var(--lgf-h3-graisse);
	color: var(--lgf-encre);
}
.lgf-carte__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lgf-espace-1) var(--lgf-espace-3);
	margin: 0;
	font-size: var(--lgf-petit-taille);
	line-height: var(--lgf-petit-interligne);
	color: var(--lgf-texte-discret);
}
.lgf-carte__meta span {
	display: inline-flex;
	align-items: center;
	gap: var(--lgf-espace-1);
}
.lgf-carte__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lgf-espace-2);
}
.lgf-carte__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lgf-espace-2);
	margin-top: auto;
}

/* ---------- Carte école compacte ---------- */
.lgf-carte-ecole__entete {
	display: flex;
	align-items: center;
	gap: var(--lgf-espace-4);
}
.lgf-carte-ecole__logo {
	width: 56px;
	height: 56px;
	flex: none;
	object-fit: contain;
	padding: var(--lgf-espace-1);
	border: var(--lgf-trait) solid var(--lgf-bordure);
	border-radius: var(--lgf-rayon-md);
	background: var(--lgf-blanc);
	box-sizing: border-box;
}

/* ---------- Carte formation ---------- */
.lgf-carte-formation__donnees {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lgf-espace-3);
	margin: 0;
}
.lgf-carte-formation__donnees dt {
	font-size: var(--lgf-petit-taille);
	line-height: var(--lgf-petit-interligne);
	color: var(--lgf-texte-discret);
}
.lgf-carte-formation__donnees dd {
	margin: 0;
	font-size: var(--lgf-corps-taille);
	line-height: var(--lgf-corps-interligne);
	font-weight: var(--lgf-corps-fort-graisse);
	color: var(--lgf-encre);
}

/* ---------- Barre d'action collée (mobile) ---------- */
.lgf-barre-action {
	position: sticky;
	bottom: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: var(--lgf-espace-3);
	padding: var(--lgf-espace-3) var(--lgf-espace-4);
	border-top: var(--lgf-trait) solid var(--lgf-bordure);
	background: var(--lgf-blanc);
	box-shadow: var(--lgf-ombre-lg);
}
.lgf-barre-action__info {
	display: grid;
	min-width: 0;
	font-size: var(--lgf-petit-taille);
	line-height: var(--lgf-petit-interligne);
	color: var(--lgf-texte-discret);
}
.lgf-barre-action__info strong {
	font-size: var(--lgf-corps-taille);
	line-height: var(--lgf-corps-interligne);
	font-weight: var(--lgf-corps-fort-graisse);
	color: var(--lgf-encre);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lgf-barre-action .lgf-btn {
	flex: 1;
}

/* ---------- Étapes de suivi ---------- */
.lgf-etapes {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.lgf-etape {
	position: relative;
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: var(--lgf-espace-3);
	padding-bottom: var(--lgf-espace-5);
}
.lgf-etape:last-child {
	padding-bottom: 0;
}
.lgf-etape::before {
	content: "";
	position: absolute;
	top: 36px;
	bottom: 4px;
	left: 15px;
	width: var(--lgf-trait-fort);
	background: repeating-linear-gradient(to bottom, var(--lgf-bordure-champ) 0 4px, transparent 4px 9px);
}
.lgf-etape:last-child::before {
	display: none;
}
.lgf-etape--validee::before {
	background: var(--lgf-vert-600);
}
.lgf-etape__pastille {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: var(--lgf-trait-fort) solid var(--lgf-bordure-champ);
	border-radius: var(--lgf-rayon-pilule);
	background: var(--lgf-blanc);
	color: var(--lgf-texte-discret);
	font-family: var(--font-texte);
	font-size: var(--lgf-etiquette-taille);
	font-weight: var(--lgf-etiquette-graisse);
	box-sizing: border-box;
}
.lgf-etape--validee .lgf-etape__pastille {
	border-color: var(--lgf-vert-600);
	background: var(--lgf-vert-600);
	color: var(--lgf-blanc);
}
.lgf-etape--en-cours .lgf-etape__pastille {
	border-color: var(--lgf-bleu-500);
	background: var(--lgf-bleu-500);
	color: var(--lgf-blanc);
	box-shadow: 0 0 0 4px var(--lgf-bleu-50);
}
.lgf-etape__titre {
	margin: 0;
	padding-top: var(--lgf-espace-1);
	font-size: var(--lgf-corps-taille);
	line-height: var(--lgf-corps-interligne);
	font-weight: var(--lgf-corps-fort-graisse);
	color: var(--lgf-encre);
}
.lgf-etape--a-venir .lgf-etape__titre {
	font-weight: var(--lgf-corps-graisse);
	color: var(--lgf-texte-discret);
}
.lgf-etape__detail {
	margin: 0;
	font-size: var(--lgf-petit-taille);
	line-height: var(--lgf-petit-interligne);
	color: var(--lgf-texte-discret);
}

/* ---------- Liste à icônes (avantages d'une offre, points clés) ---------- */
/* Une icône Lucide, un libellé court en gras, un détail discret : remplace les listes à puces chargées de texte */
.lgf-liste-icones {
	display: flex;
	flex-direction: column;
	gap: var(--lgf-espace-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.lgf-liste-icones li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: var(--lgf-espace-3);
	align-items: start;
	margin: 0;
	font-size: var(--lgf-petit-taille);
	line-height: var(--lgf-petit-interligne);
	color: var(--lgf-texte-discret);
}
.lgf-liste-icones li > .lgf-icone {
	margin-top: 2px;
	color: var(--lgf-bleu-500);
}
.lgf-liste-icones strong {
	display: block;
	font-size: var(--lgf-corps-taille);
	line-height: var(--lgf-corps-interligne);
	font-weight: var(--lgf-corps-fort-graisse);
	color: var(--lgf-encre);
}
.lgf-liste-icones strong .lgf-badge {
	margin-left: var(--lgf-espace-1);
	vertical-align: middle;
}


/* ---------- Encart (information, succès, attention, erreur) ---------- */
.lgf-encart {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: var(--lgf-espace-3);
	padding: var(--lgf-espace-4) var(--lgf-espace-5);
	border-radius: var(--lgf-rayon-lg);
	background: var(--lgf-bleu-50);
	color: var(--lgf-texte);
}
.lgf-encart > .lgf-icone {
	width: 24px;
	height: 24px;
	color: var(--lgf-bleu-500);
}
.lgf-encart__titre {
	margin: 0;
	font-size: var(--lgf-corps-taille);
	line-height: var(--lgf-corps-interligne);
	font-weight: var(--lgf-corps-fort-graisse);
	color: var(--lgf-encre);
}
.lgf-encart__texte {
	margin: 0;
	font-size: var(--lgf-corps-taille);
	line-height: var(--lgf-corps-interligne);
}
.lgf-encart--succes {
	background: var(--lgf-vert-50);
}
.lgf-encart--succes > .lgf-icone {
	color: var(--lgf-vert-700);
}
.lgf-encart--attention {
	background: var(--lgf-jaune-50);
}
.lgf-encart--attention > .lgf-icone {
	color: var(--lgf-jaune-800);
}
.lgf-encart--erreur {
	background: var(--lgf-rouge-50);
}
.lgf-encart--erreur > .lgf-icone {
	color: var(--lgf-rouge-600);
}

/* ---------- Accordéon (FAQ) ---------- */
.lgf-accordeon {
	border-top: var(--lgf-trait) solid var(--lgf-bordure);
}
.lgf-accordeon details {
	border-bottom: var(--lgf-trait) solid var(--lgf-bordure);
}
.lgf-accordeon summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lgf-espace-4);
	min-height: var(--lgf-cible-tactile);
	padding: var(--lgf-espace-4) 0;
	font-family: var(--font-texte);
	font-size: var(--lgf-corps-taille);
	line-height: var(--lgf-corps-interligne);
	font-weight: var(--lgf-corps-fort-graisse);
	color: var(--lgf-encre);
	cursor: pointer;
	list-style: none;
}
.lgf-accordeon summary::-webkit-details-marker {
	display: none;
}
.lgf-accordeon summary .lgf-icone {
	color: var(--lgf-bleu-500);
	transition: transform var(--lgf-duree-base) var(--lgf-courbe);
}
.lgf-accordeon details[open] summary .lgf-icone {
	transform: rotate(180deg);
}
.lgf-accordeon__contenu {
	padding: 0 0 var(--lgf-espace-4);
	font-size: var(--lgf-corps-taille);
	line-height: var(--lgf-corps-interligne);
	color: var(--lgf-texte);
}

/* ---------- Bandeau de confiance (chiffre + promesse) ---------- */
.lgf-bandeau-confiance {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lgf-espace-4) var(--lgf-espace-6);
	padding: var(--lgf-espace-5) var(--lgf-espace-6);
	border-radius: var(--lgf-rayon-lg);
	background: var(--lgf-jaune-400);
	color: var(--lgf-encre);
}
.lgf-bandeau-confiance__chiffre {
	margin: 0;
	font-family: var(--font-titres);
	font-size: var(--lgf-display-taille);
	line-height: var(--lgf-display-interligne);
	font-weight: var(--lgf-display-graisse);
}
.lgf-bandeau-confiance__texte {
	flex: 1 1 280px;
	margin: 0;
	font-size: var(--lgf-chapo-taille);
	line-height: var(--lgf-chapo-interligne);
}
.lgf-icone--16 {
	width: 16px;
	height: 16px;
}
.lgf-icone--32 {
	width: 32px;
	height: 32px;
}

/* ---------- Indicateur de chargement ---------- */
/* Le symbole se compose et se décompose en boucle (img/logo/chargement.svg, généré par
 * design/logo/build_logo.py ; animation interne au fichier, adoucie si l'utilisateur réduit
 * les animations). C'est le seul indicateur de chargement du site : css/integrations.css
 * l'applique aussi aux extensions (Gravity Forms, Populate Anything, Tom Select, WP Grid Builder).
 * Comme le logo, il ne se pose que sur blanc, lgf-fond ou lgf-bleu-50 (sur bleu : --sur-bleu).
 * Usage : <span class="lgf-chargement" role="status">Chargement…</span> */
.lgf-chargement {
	--lgf-chargement-taille: 40px;
	display: inline-flex;
	align-items: center;
	gap: var(--lgf-espace-3);
	font-family: var(--font-texte);
	font-size: var(--lgf-petit-taille);
	line-height: var(--lgf-petit-interligne);
	font-weight: var(--lgf-corps-fort-graisse);
	color: var(--lgf-texte-discret);
}
.lgf-chargement::before {
	content: "";
	flex: none;
	width: var(--lgf-chargement-taille);
	height: var(--lgf-chargement-taille);
	background: url("../img/logo/chargement.svg") center / contain no-repeat;
}
/* Bloc : centré à la place du contenu qui charge (liste, résultats, tableau de bord) */
.lgf-chargement--bloc {
	--lgf-chargement-taille: 64px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	padding: var(--lgf-espace-7) var(--lgf-espace-4);
	text-align: center;
}
/* Sans texte visible, à droite d'un bouton (le libellé reste lu par les lecteurs d'écran via .lgf-sr).
   Largeur nette nulle : le bouton ne bouge pas quand l'indicateur apparaît, même centré. */
.lgf-chargement--seul {
	margin-inline: var(--lgf-espace-3) calc(-1 * (var(--lgf-chargement-taille) + var(--lgf-espace-3)));
	vertical-align: middle;
}
/* Sur lgf-bleu-500 ou lgf-bleu-900 : parties bleues du symbole en blanc */
.lgf-chargement--sur-bleu {
	color: var(--lgf-blanc);
}
.lgf-chargement--sur-bleu::before {
	background-image: url("../img/logo/chargement-fond-bleu.svg");
}

/* =====================================================================
 * Identité visuelle (refonte 2027) : motifs tirés du symbole du logo.
 * Les motifs (img/motifs/*.svg) servent de masques ; leur couleur vient
 * toujours des jetons. Règles d'usage : design/DESIGN.md, « Identité ».
 * ===================================================================== */

/* Ruban quadricolore : les quatre couleurs du symbole, dans l'ordre du logo */
.lgf-ruban {
	display: block;
	width: 64px;
	height: var(--lgf-ruban);
	border-radius: var(--lgf-rayon-pilule);
	background: linear-gradient(90deg, var(--lgf-bleu-500) 0 25%, var(--lgf-turquoise-500) 25% 50%, var(--lgf-jaune-400) 50% 75%, var(--lgf-corail-500) 75% 100%);
}

/* Mot surligné dans un titre (<span class="lgf-surligne">) */
.lgf-surligne {
	padding: 0 0.06em;
	background: linear-gradient(transparent 60%, var(--lgf-jaune-400) 60% 92%, transparent 92%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Accents alternés des cartes d'une grille : bleu, corail, turquoise, jaune */
.lgf-grille > :nth-child(4n + 2),
.lgf-accent--corail {
	--lgf-accent: var(--lgf-corail-500);
	--lgf-accent-fond: var(--lgf-corail-50);
	--lgf-accent-texte: var(--lgf-corail-700);
}
.lgf-grille > :nth-child(4n + 3),
.lgf-accent--turquoise {
	--lgf-accent: var(--lgf-turquoise-500);
	--lgf-accent-fond: var(--lgf-turquoise-50);
	--lgf-accent-texte: var(--lgf-turquoise-700);
}
.lgf-grille > :nth-child(4n + 4),
.lgf-accent--jaune {
	--lgf-accent: var(--lgf-jaune-400);
	--lgf-accent-fond: var(--lgf-jaune-50);
	--lgf-accent-texte: var(--lgf-jaune-800);
}
.lgf-accent--bleu {
	--lgf-accent: var(--lgf-bleu-500);
	--lgf-accent-fond: var(--lgf-bleu-50);
	--lgf-accent-texte: var(--lgf-bleu-500);
}

/* Carte à pictogramme : filet d'accent qui se déploie en haut de la carte au survol */
.lgf-carte-icone {
	overflow: hidden;
}
.lgf-carte-icone::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--lgf-ruban);
	background: var(--lgf-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--lgf-duree-lente) var(--lgf-courbe);
}
.lgf-carte-icone:hover::after {
	transform: scaleX(1);
}
.lgf-carte-icone > .lgf-lien {
	color: var(--lgf-accent-texte);
}

/* Pictogramme hexagonal (forme bleue du symbole) */
.lgf-pictogramme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	flex: none;
	background: var(--lgf-accent-fond, var(--lgf-bleu-50));
	color: var(--lgf-accent-texte, var(--lgf-bleu-500));
	-webkit-mask: url("../img/motifs/hexagone.svg") center / contain no-repeat;
	mask: url("../img/motifs/hexagone.svg") center / contain no-repeat;
	transition: background-color var(--lgf-duree-base) var(--lgf-courbe), color var(--lgf-duree-base) var(--lgf-courbe);
}
.lgf-pictogramme .lgf-icone {
	width: 24px;
	height: 24px;
}
.lgf-carte-icone:hover .lgf-pictogramme {
	background: var(--lgf-accent);
	color: var(--lgf-blanc);
}
.lgf-carte-icone.lgf-accent--jaune:hover .lgf-pictogramme,
.lgf-grille > .lgf-carte-icone:nth-child(4n + 4):hover .lgf-pictogramme {
	color: var(--lgf-encre);
}

/* Étapes explicatives : numéros dans des hexagones aux couleurs du symbole */
.lgf-etapes--info .lgf-etape__pastille {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 0;
	background: var(--lgf-bleu-500);
	color: var(--lgf-blanc);
	font-family: var(--font-titres);
	font-weight: var(--lgf-display-graisse);
	-webkit-mask: url("../img/motifs/hexagone.svg") center / contain no-repeat;
	mask: url("../img/motifs/hexagone.svg") center / contain no-repeat;
}
.lgf-etapes--info .lgf-etape:nth-child(4n + 2) .lgf-etape__pastille {
	background: var(--lgf-corail-600);
}
.lgf-etapes--info .lgf-etape:nth-child(4n + 3) .lgf-etape__pastille {
	background: var(--lgf-turquoise-700);
}
.lgf-etapes--info .lgf-etape:nth-child(4n + 4) .lgf-etape__pastille {
	background: var(--lgf-jaune-400);
	color: var(--lgf-encre);
}