.college-page {
	--college-soft: #f2f8ec;
	--college-mint: #eaf5df;
	--college-ink: var(--color-navy);
	background:
		radial-gradient(circle at 10% 8%, rgba(176, 210, 134, .24), transparent 32%),
		radial-gradient(circle at 88% 18%, rgba(0, 116, 151, .12), transparent 30%),
		linear-gradient(180deg, #fff 0%, #fbfdf8 45%, #fff 100%);
	padding-bottom: 72px;
	overflow: hidden;
}

.college-page h1,
.college-page h2,
.college-page h3 {
	color: var(--college-ink);
}

.college-hero {
	position: relative;
	padding: 78px 0 58px;
	margin-bottom: 34px;
}

.college-hero::before,
.college-hero::after {
	content: "";
	position: absolute;
	border-radius: 999px;
	pointer-events: none;
}

.college-hero::before {
	width: 210px;
	height: 210px;
	left: -70px;
	top: 42px;
	background: rgba(176, 210, 134, .2);
}

.college-hero::after {
	width: 150px;
	height: 150px;
	right: 7%;
	bottom: 8px;
	background: rgba(176, 210, 134, .22);
}

.college-kicker,
.college-section-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	color: var(--theme-color);
	font-weight: var(--font-weight-header);
	text-transform: uppercase;
	letter-spacing: 0;
	font-size: 13px;
}

.college-kicker::before,
.college-section-label::before {
	content: "";
	width: 34px;
	height: 4px;
	border-radius: 99px;
	background: var(--theme-color);
}

.college-title {
	max-width: 850px;
	margin: 0 0 22px;
	font-size: clamp(36px, 5vw, 62px);
	line-height: 1.02;
	font-weight: var(--font-weight-title);
}

.college-lead {
	max-width: 720px;
	margin: 0;
	font-size: 19px;
	line-height: 1.75;
	color: var(--body-color);
}

.college-hero-panel,
.college-panel,
.college-services,
.college-exams,
.college-digital,
.college-projects,
.college-integration,
.college-spaces,
.college-documents,
.college-closing {
	position: relative;
	border: 1px solid rgba(217, 214, 209, .72);
	border-radius: 22px;
	background: rgba(255, 255, 255, .86);
	box-shadow: var(--shadow);
}

.college-hero-panel {
	padding: 30px;
	transform: rotate(1.2deg);
}

.college-hero-panel p {
	margin: 18px 0 0;
	line-height: 1.65;
}

.college-stat {
	display: grid;
	gap: 4px;
	padding: 24px;
	border-radius: 18px;
	background: var(--college-soft);
}

.college-stat-number {
	color: var(--theme-color);
	font-size: 68px;
	line-height: .92;
	font-weight: var(--font-weight-title);
}

.college-stat-label {
	color: var(--college-ink);
	font-weight: var(--font-weight-header);
}

.college-mini-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 16px;
}

.college-mini-grid span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	border-radius: 15px;
	background: var(--color-navy);
	color: #fff;
	font-weight: var(--font-weight-title);
}

.college-class-path {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-bottom: 34px;
}

.college-class-path article {
	position: relative;
	min-height: 210px;
	padding: 28px;
	border-radius: 22px;
	background: #fff;
	box-shadow: var(--shadow);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}

.college-class-path article:hover,
.college-project-card:hover,
.college-service-card:hover,
.college-space-card:hover {
	transform: translateY(-5px);
}

.college-class-path article::after {
	content: "";
	position: absolute;
	right: -38px;
	bottom: -48px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--theme-color) 24%, transparent);
}

.college-brevet-results {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	align-items: center;
	gap: 34px;
	padding: 34px;
	margin-bottom: 34px;
	border-radius: 22px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(242, 248, 236, .9)),
		#fff;
	box-shadow: var(--shadow);
}

.college-brevet-intro {
	min-width: 0;
}

.college-brevet-intro h2 {
	margin: 0 0 18px;
	font-size: 34px;
	line-height: 1.14;
}

.college-brevet-intro > p:last-child {
	margin: 0;
	line-height: 1.72;
}

.college-brevet-visual {
	display: flex;
	justify-content: center;
	margin: 0;
}

.college-brevet-visual img {
	display: block;
	width: min(100%, 560px);
	height: auto;
	border: 1px solid rgba(24, 44, 96, .14);
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(24, 44, 96, .12);
}

.college-photo-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin: 0 0 34px;
}

.college-photo-card {
	position: relative;
	min-height: 330px;
	margin: 0;
	overflow: hidden;
	border-radius: 22px;
	background: #fff;
	box-shadow: var(--shadow);
	isolation: isolate;
}

.college-photo-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(135deg, rgba(255, 255, 255, .2), transparent 44%);
	opacity: 0;
	transition: opacity .28s ease;
	pointer-events: none;
}

.college-photo-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .42s ease, filter .42s ease;
}

.college-photo-card:hover img,
.college-photo-card:focus-within img {
	filter: saturate(1.06) contrast(1.03);
	transform: scale(1.045);
}

.college-photo-card:hover::after,
.college-photo-card:focus-within::after {
	opacity: 1;
}

.college-class-path h2 {
	margin: 0 0 12px;
	font-size: 26px;
}

.college-class-path p,
.college-panel p,
.college-services p,
.college-exams p,
.college-digital p,
.college-project-card p,
.college-integration p,
.college-closing p {
	margin: 0;
	line-height: 1.72;
}

.college-feature-grid,
.college-final-row {
	margin-bottom: 34px;
}

.college-panel {
	height: 100%;
	padding: 34px;
}

.college-panel-team {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(242, 248, 236, .9)),
		#fff;
}

.college-panel-values {
	background:
		linear-gradient(135deg, rgba(234, 245, 223, .92), rgba(255, 255, 255, .92)),
		#fff;
}

.college-panel h2,
.college-services h2,
.college-exams h2,
.college-digital h2,
.college-projects h2,
.college-integration h2,
.college-spaces h2,
.college-closing h2 {
	margin: 0 0 18px;
	font-size: 30px;
	line-height: 1.16;
}

.college-person {
	display: grid;
	gap: 8px;
	height: 100%;
	padding: 18px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .78);
	border: 1px solid rgba(217, 214, 209, .58);
}

.college-person strong {
	color: var(--college-ink);
}

.college-person span {
	line-height: 1.55;
}

.college-pill-list {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 22px 0;
}

.college-pill-list span {
	padding: 8px 13px;
	border-radius: 999px;
	background: #fff;
	color: var(--theme-color);
	font-weight: var(--font-weight-header);
}

.college-link-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.college-services,
.college-exams,
.college-digital,
.college-projects,
.college-integration,
.college-spaces {
	padding: 34px;
	margin-bottom: 34px;
}

.college-services,
.college-integration {
	background:
		linear-gradient(90deg, rgba(242, 248, 236, .94), rgba(255, 255, 255, .94)),
		#fff;
}

.college-service-card {
	display: grid;
	align-content: center;
	min-height: 160px;
	padding: 22px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--theme-color) 24%, rgba(217, 214, 209, .6));
	box-shadow: 0 12px 24px rgba(24, 44, 96, .08);
	transition: transform .25s ease;
}

.college-service-card span,
.college-project-card span,
.college-exam-grid span {
	color: var(--theme-color);
	font-size: 13px;
	font-weight: var(--font-weight-header);
	text-transform: uppercase;
	letter-spacing: 0;
}

.college-service-card strong {
	margin-top: 8px;
	color: var(--college-ink);
	font-size: 20px;
	line-height: 1.2;
}

.college-exams,
.college-digital {
	background:
		linear-gradient(135deg, rgba(24, 44, 96, .94), rgba(47, 103, 64, .9)),
		var(--color-navy);
	color: #fff;
}

.college-exams h2,
.college-exams p,
.college-exams .college-section-label,
.college-digital h2,
.college-digital p,
.college-digital .college-section-label {
	color: #fff;
}

.college-exams .college-section-label::before,
.college-digital .college-section-label::before {
	background: #fff;
}

.college-exam-grid,
.college-digital-grid {
	display: grid;
	gap: 14px;
}

.college-exam-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.college-digital-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.college-exam-grid div,
.college-digital-grid div {
	display: grid;
	gap: 8px;
	min-height: 180px;
	padding: 22px;
	border-radius: 18px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .18);
}

.college-exam-grid strong,
.college-digital-grid strong {
	color: #fff;
	font-size: 17px;
}

.college-digital-note {
	margin-top: 18px;
}

.college-section-heading {
	max-width: 800px;
	margin-bottom: 24px;
}

.college-project-card {
	height: 100%;
	min-height: 285px;
	padding: 26px;
	border-radius: 22px;
	background: #fff;
	border: 1px solid rgba(217, 214, 209, .72);
	box-shadow: 0 14px 26px rgba(24, 44, 96, .08);
	transition: transform .25s ease;
}

.college-project-primary {
	background: var(--theme-color);
	color: var(--theme-color-contrast);
}

.college-project-primary h3,
.college-project-primary span {
	color: var(--theme-color-contrast);
}

.college-project-card h3 {
	margin: 18px 0 12px;
	font-size: 24px;
}

.college-timeline {
	display: grid;
	gap: 14px;
}

.college-timeline div {
	position: relative;
	padding: 18px 18px 18px 58px;
	border-radius: 18px;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--theme-color) 20%, rgba(217, 214, 209, .7));
}

.college-timeline div::before {
	content: "";
	position: absolute;
	left: 24px;
	top: 24px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--theme-color);
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--theme-color) 16%, transparent);
}

.college-timeline span {
	display: block;
	margin-bottom: 6px;
	color: var(--college-ink);
	font-weight: var(--font-weight-title);
}

.college-space-card {
	display: flex;
	align-items: center;
	min-height: 116px;
	padding: 22px 22px 22px 58px;
	position: relative;
	border-radius: 18px;
	background: var(--college-soft);
	color: var(--college-ink);
	font-weight: var(--font-weight-header);
	transition: transform .25s ease, background .25s ease;
}

.college-space-card::before {
	content: "";
	position: absolute;
	left: 22px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--theme-color);
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--theme-color) 16%, transparent);
}

.college-space-card:hover {
	background: var(--college-mint);
}

.college-organization {
	background: var(--college-soft);
}

.college-organization .btn {
	margin-top: 22px;
}

.college-documents {
	height: 100%;
	padding: 30px;
	background: #fff;
}

.college-documents .accordion-item {
	border: 1px solid rgba(217, 214, 209, .82);
	border-radius: 18px;
	overflow: hidden;
}

.college-documents .accordion-button {
	color: var(--college-ink);
	font-weight: var(--font-weight-title);
	background: var(--college-soft);
	box-shadow: none;
}

.college-documents .accordion-button:not(.collapsed) {
	color: var(--college-ink);
	background: var(--college-mint);
}

.college-document-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.college-document-list a {
	display: flex;
	align-items: center;
	min-height: 58px;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--surface-soft);
	color: var(--college-ink);
	font-weight: var(--font-weight-header);
	text-decoration: none;
}

.college-document-list a:hover,
.college-document-list a:focus {
	background: var(--theme-color);
	color: var(--theme-color-contrast);
}

.college-closing {
	padding: 38px;
	text-align: center;
	background:
		linear-gradient(135deg, rgba(24, 44, 96, .94), rgba(47, 103, 64, .9)),
		var(--color-navy);
	color: #fff;
}

.college-closing h2,
.college-closing p {
	color: #fff;
}

.college-closing p {
	max-width: 820px;
	margin: 0 auto;
}

@media (max-width: 991px) {
	.college-hero {
		padding-top: 52px;
	}

	.college-title {
		font-size: 42px;
	}

	.college-class-path,
	.college-exam-grid,
	.college-digital-grid {
		grid-template-columns: 1fr;
	}

	.college-brevet-results {
		grid-template-columns: 1fr;
	}

	.college-brevet-intro {
		max-width: none;
	}

	.college-photo-gallery {
		grid-template-columns: 1fr;
	}

	.college-hero-panel {
		transform: none;
	}
}

@media (max-width: 680px) {
	.college-page {
		padding-bottom: 44px;
	}

	.college-hero {
		padding: 42px 0 32px;
	}

	.college-title {
		font-size: 34px;
	}

	.college-lead {
		font-size: 16px;
	}

	.college-hero-panel,
	.college-panel,
	.college-brevet-results,
	.college-services,
	.college-exams,
	.college-digital,
	.college-projects,
	.college-integration,
	.college-spaces,
	.college-documents,
	.college-closing {
		border-radius: 16px;
		padding: 22px;
	}

	.college-mini-grid,
	.college-document-list {
		grid-template-columns: 1fr;
	}

	.college-panel h2,
	.college-brevet-intro h2,
	.college-services h2,
	.college-exams h2,
	.college-digital h2,
	.college-projects h2,
	.college-integration h2,
	.college-spaces h2,
	.college-closing h2 {
		font-size: 24px;
	}

	.college-photo-card {
		min-height: 230px;
		border-radius: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.college-photo-card::after,
	.college-photo-card img {
		transition: none;
	}

	.college-photo-card:hover img,
	.college-photo-card:focus-within img {
		transform: none;
	}
}

.college-brevet-intro h3 {
	margin: 0 0 18px;
	font-size: 24px;
	line-height: 1.3;
}
.college-brevet-intro .college-brevet-lead {
	margin: 0 0 18px;
	font-size: 18px;
	line-height: 1.65;
}
.college-brevet-zoom {
	display: block;
	width: 100%;
	max-width: 360px;
	color: var(--college-ink);
	text-align: center;
	text-decoration: none;
	cursor: zoom-in;
}
.college-brevet-zoom span {
	display: inline-block;
	margin-top: 12px;
	text-decoration: underline;
}
.college-brevet-zoom:focus-visible {
	outline: 3px solid var(--college-ink);
	outline-offset: 6px;
	border-radius: 16px;
}
.college-brevet-dialog {
	width: min(900px, calc(100% - 32px));
	max-width: calc(100% - 32px);
	max-height: 90vh;
	padding: 16px;
	border: 0;
	border-radius: 16px;
	background: #fff;
	color: #182c60;
	overflow: auto;
}
.college-brevet-dialog::backdrop { background: rgba(10, 20, 40, .8); }
.college-brevet-dialog form {
	position: sticky;
	top: 0;
	margin: 0 0 12px;
	text-align: right;
}
.college-brevet-dialog button {
	padding: 10px 18px;
	border: 0;
	border-radius: 8px;
	background: #182c60;
	color: #fff;
	cursor: pointer;
}
.college-brevet-dialog img { display: block; width: 100%; height: auto; }
button.college-brevet-zoom { padding: 0; border: 0; background: transparent; font: inherit; }