/*
 * Pages de silo de cd.fsut62.fr (hubs, miroirs, pages CD62) : reprend fsut62-silos/assets/css/public.css et la
 * barre latérale de fp-grilles, avec les variables du thème fsut62cd-child.
 * Sur ce site, --fsu-red est le VERT principal et --fsu-blue est un rouge : on s'en tient à --fsu-red et aux
 * variables locales ci-dessous, et on n'emploie jamais --fsu-blue.
 */
:root {
	--cd62-accent: var(--fsu-red, #6aac4b);
	--cd62-accent-texte: #3d7a2a;
	--cd62-accent-fond: #f2f8ee;
	--cd62-bleu: #245f87;
	--cd62-bleu-fond: #eef6fa;
	--cd62-jaune: #efb33e;
	--cd62-jaune-fond: #fff8e8;
	--cd62-trait: #d8e1e6;
	--cd62-encre: var(--fsu-ink, #151515);
	--cd62-sourdine: var(--fsu-muted, #64686d);
}

.fsut62-silo-main {
	padding: 20px 0 84px;
	background: linear-gradient(180deg, #f1f6ee 0, #f8faf7 360px, #fff 100%);
}

.fsut62-silo-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 310px);
	gap: clamp(28px, 4vw, 52px);
	align-items: start;
}

.fsut62-silo-article {
	min-width: 0;
}

/* Fil d'Ariane */
.fsut62-silo-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-bottom: 26px;
	color: var(--cd62-sourdine);
	font-size: 15px;
}

.fsut62-silo-breadcrumb a {
	color: var(--cd62-encre);
	font-weight: 700;
}

.fsut62-silo-breadcrumb [aria-current] {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* En-tête */
.fsut62-silo-header {
	margin-bottom: 30px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--cd62-trait);
}

.fsut62-silo-header > p {
	margin: 0 0 12px;
	color: var(--cd62-accent-texte);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.fsut62-silo-header h1 {
	max-width: 900px;
	margin: 0;
	font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
	font-size: clamp(40px, 5vw, 62px);
	font-weight: 700;
	line-height: 1;
	overflow-wrap: anywhere;
}

/* Contenu */
.fsut62-silo-content {
	font-size: 19px;
	line-height: 1.65;
}

.fsut62-silo-content > p,
.fsut62-silo-content > ul,
.fsut62-silo-content > ol,
.fsut62-silo-content > h2,
.fsut62-silo-content > h3 {
	max-width: 70ch;
}

.fsut62-silo-content h2 {
	margin: 44px 0 16px;
	padding-left: 16px;
	border-left: 5px solid var(--cd62-accent);
	font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
	font-size: clamp(32px, 3.4vw, 42px);
	line-height: 1.05;
}

.fsut62-silo-content img,
.fsut62-silo-content table,
.fsut62-silo-content iframe {
	max-width: 100%;
}

.fsut62-silo-content table {
	display: block;
	overflow-x: auto;
}

.fsut62-silo-intro {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.5;
}

/* Encart CD62 d'un miroir */
.cd62-encart {
	margin: 0 0 34px;
	padding: 20px 24px 8px;
	border: 1px solid #cfe3c4;
	border-left: 5px solid var(--cd62-accent);
	border-radius: 12px;
	background: var(--cd62-accent-fond);
}

.cd62-encart-etiquette {
	margin: 0;
	color: var(--cd62-accent-texte);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cd62-encart .fsu62-prose {
	padding-top: 8px;
	font-size: 18px;
}

/* Listes de liens d'un hub : fsut62-silo-list */
.fsut62-silo-list {
	margin: 20px 0 34px;
}

.fsut62-silo-list ul {
	display: grid;
	grid-template-columns: repeat(var(--fsut62-silo-columns, 2), minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fsut62-silo-list li {
	margin: 0;
}

.fsut62-silo-list li > a {
	display: flex;
	height: 100%;
	min-height: 62px;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	border: 1px solid var(--cd62-trait);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(25, 47, 62, 0.06);
	color: var(--cd62-encre);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.fsut62-silo-list li > a:hover,
.fsut62-silo-list li > a:focus-visible {
	border-color: var(--cd62-accent);
	box-shadow: 0 12px 28px rgba(25, 47, 62, 0.12);
	transform: translateY(-2px);
}

.fsut62-silo-list li > a > span:last-child {
	flex: none;
	color: var(--cd62-accent-texte);
}

/* Page qui n'existe que sur fsut62.fr */
.fsut62-silo-list .is-externe > a {
	background: #fafbfb;
	box-shadow: none;
}

.fsut62-silo-list .is-externe small {
	display: block;
	margin-top: 2px;
	color: var(--cd62-sourdine);
	font-size: 13px;
	font-weight: 400;
}

/* Sources, mise en garde, lien vers la version nationale */
.fsut62-silo-sources {
	margin-top: 44px;
	padding: 22px 24px;
	border: 1px solid var(--cd62-trait);
	border-left: 5px solid var(--cd62-bleu);
	border-radius: 10px;
	background: #f5f9fb;
}

.fsut62-silo-sources h2 {
	margin: 0 0 12px;
	font-size: 25px;
}

.fsut62-silo-sources p:last-child {
	margin-bottom: 0;
}

.fsut62-silo-sources a {
	overflow-wrap: anywhere;
}

.fsut62-silo-disclaimer {
	margin-top: 44px;
	padding: 22px 24px;
	border-left: 5px solid var(--cd62-jaune);
	background: var(--cd62-jaune-fond);
	color: #394750;
}

.fsut62-silo-disclaimer p {
	margin: 8px 0;
}

.fsut62-silo-disclaimer small {
	color: #5d6a72;
}

.cd62-version-nationale {
	margin: 28px 0 0;
}

.cd62-version-nationale a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px;
	border: 2px solid var(--cd62-bleu);
	border-radius: 999px;
	color: var(--cd62-bleu);
	font-weight: 800;
	text-decoration: none;
}

.cd62-version-nationale a:hover,
.cd62-version-nationale a:focus-visible {
	background: var(--cd62-bleu);
	color: #fff;
}

/* Barre latérale : contact, pages du silo, adhésion */
.fsut62-silo-sidebar {
	align-self: start;
	position: sticky;
	top: var(--cd62-barre-top, calc(var(--fsu-sticky-offset, 14px) + 8px));
}

/* barre-silo.js actif : pas d’ascenseur interne, la barre défile avec la page puis colle par le bas */
.fsut62-silo-sidebar.cd62-barre-libre .fsut62-silo-sidebar-inner {
	max-height: none;
	overflow-y: visible;
}

.fsut62-silo-sidebar-inner {
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	border: 1px solid var(--cd62-trait);
	border-radius: 16px;
	background: linear-gradient(90deg, #6aac4b 0 25%, #307baa 25% 50%, #efb33e 50% 75%, #c8282f 75% 100%) top / 100% 5px no-repeat, #fff;
	box-shadow: 0 18px 44px rgba(28, 51, 66, 0.11);
	padding-top: 5px;
	scrollbar-color: #c8d2d8 transparent;
	scrollbar-width: thin;
}

.cd62-barre-section,
.cd62-barre-cta {
	padding: 19px 20px;
}

.cd62-barre-section + .cd62-barre-section,
.cd62-barre-section + .cd62-barre-cta,
.cd62-barre-cta + .cd62-barre-section {
	border-top: 1px solid #e5eaed;
}

.cd62-barre h2 {
	margin: 0 0 12px;
	color: var(--cd62-accent-texte);
	font-family: inherit;
	font-size: 13px;
	font-weight: 850;
	letter-spacing: 0.055em;
	line-height: 1.25;
	text-transform: uppercase;
}

.cd62-barre-liens {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cd62-barre-liens li {
	margin: 0;
}

.cd62-barre-liens li + li {
	border-top: 1px solid #edf0f2;
}

.cd62-barre-liens a {
	position: relative;
	display: block;
	padding: 10px 28px 10px 0;
	color: #263640;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.cd62-barre-liens a::after {
	position: absolute;
	top: 50%;
	right: 0;
	display: inline-flex;
	width: 22px;
	height: 22px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--cd62-accent-fond);
	color: var(--cd62-accent-texte);
	content: "→";
	font-size: 12px;
	transform: translateY(-50%);
}

.cd62-barre-liens .is-externe a::after {
	content: "↗";
}

.cd62-barre-liens a:hover,
.cd62-barre-liens a:focus-visible {
	color: var(--cd62-accent-texte);
	text-decoration: underline;
}

.cd62-barre-cta {
	background: linear-gradient(145deg, var(--cd62-bleu-fond), #f8fbfc);
	border-left: 4px solid var(--cd62-bleu);
}

.cd62-barre-cta h2 {
	color: var(--cd62-bleu);
	font-size: 14px;
}

.cd62-barre-cta p {
	margin: 0 0 12px;
	color: #4d5b63;
	font-size: 14px;
	line-height: 1.45;
}

.cd62-barre-cta a,
.cd62-barre-cta a:visited {
	display: inline-flex;
	min-height: 40px;
	align-items: center;
	padding: 8px 15px;
	border-radius: 999px;
	background: var(--cd62-bleu);
	/* !important : le thème impose « .fsu62-theme a { color: inherit } », chargé après cette feuille */
	color: #fff !important;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.cd62-barre-cta a:hover,
.cd62-barre-cta a:focus-visible {
	box-shadow: 0 8px 18px rgba(36, 95, 135, 0.22);
	color: #fff !important;
	transform: translateY(-2px);
}

.cd62-barre-join {
	background: linear-gradient(145deg, #eff7e9, #fbfdf9);
	border-left-color: var(--cd62-accent);
}

.cd62-barre-join h2 {
	color: var(--cd62-accent-texte);
}

.cd62-barre-join a,
.cd62-barre-join a:visited {
	background: var(--cd62-accent-texte);
}

.cd62-barre-join a:hover,
.cd62-barre-join a:focus-visible {
	box-shadow: 0 8px 18px rgba(61, 122, 42, 0.24);
}

/* Le sommaire du thème garde sa place dans le contenu */
.fsut62-silo-page .fsu62-toc {
	max-width: 70ch;
}

/* Écrans moyens et petits */
@media (max-width: 1024px) {
	.fsut62-silo-main {
		padding-top: 36px;
	}

	.fsut62-silo-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.fsut62-silo-sidebar {
		position: static;
	}

	.fsut62-silo-sidebar-inner {
		max-height: none;
		overflow-y: visible;
	}
}

@media (max-width: 700px) {
	.fsut62-silo-main {
		padding: 28px 0 52px;
	}

	.fsut62-silo-breadcrumb {
		margin-bottom: 20px;
		font-size: 14px;
	}

	.fsut62-silo-header {
		margin-bottom: 22px;
		padding-bottom: 20px;
	}

	.fsut62-silo-content {
		font-size: 18px;
		line-height: 1.58;
	}

	.fsut62-silo-content h2 {
		margin-top: 36px;
		font-size: 32px;
	}

	.fsut62-silo-intro {
		font-size: 20px;
	}

	.fsut62-silo-list ul {
		grid-template-columns: minmax(0, 1fr);
	}

	.cd62-encart,
	.fsut62-silo-sources,
	.fsut62-silo-disclaimer {
		padding-inline: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fsut62-silo-list li > a,
	.cd62-barre-cta a {
		transition: none;
	}

	.fsut62-silo-list li > a:hover,
	.cd62-barre-cta a:hover {
		transform: none;
	}
}

@media print {
	.fsut62-silo-sidebar,
	.fsu62-share,
	.cd62-version-nationale {
		display: none !important;
	}

	.fsut62-silo-layout {
		display: block;
	}
}