/* ==========================================================================
   Bannière des pages (v1.8.0) — bandeau uni bleu CESMA sous l'en-tête :
   fil d'Ariane, titre H1, pingouin de la rubrique à droite.
   (Couleurs de liens en !important : style.css impose `a { color … !important }`.)
   ========================================================================== */
.cesma-banner {
	background: #10659C;
	color: #FFFFFF;
	border-bottom: 4px solid var(--cesma-yellow, #FFB400);
}
.cesma-banner__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 14px 28px 0;
	min-height: 128px;
	display: flex;
	align-items: flex-end;
	gap: 24px;
}
.cesma-banner__text {
	flex: 1 1 auto;
	align-self: center;
	padding-bottom: 16px;
	min-width: 0;
}
.cesma-banner__title {
	margin: 6px 0 0 !important;
	padding: 0;
	font-family: 'Poppins', Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: clamp(24px, 2.8vw, 34px) !important;
	line-height: 1.15 !important;
	color: #FFFFFF !important;
	overflow-wrap: anywhere;
}
.cesma-banner__crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 2px 0;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 14px;
	color: #D6EAF5;
}
.cesma-banner__crumbs li { margin: 0; padding: 0; }
.cesma-banner__crumbs li + li::before {
	content: '›';
	margin: 0 8px;
	color: rgba(214, 234, 245, .7);
}
.cesma-banner__crumbs a {
	color: #D6EAF5 !important;
	text-decoration: none !important;
	border-bottom: 1px solid transparent;
}
.cesma-banner__crumbs a:hover,
.cesma-banner__crumbs a:focus-visible {
	color: var(--cesma-yellow, #FFB400) !important;
	border-bottom-color: currentColor;
}
.cesma-banner__crumbs [aria-current] { color: #FFFFFF; font-weight: 600; }
.cesma-banner__penguin {
	flex: 0 0 auto;
	display: block;
	height: 118px; /* pingouins harmonisés : même taille de corps, cadre commun 358×320 */
	width: auto;
	object-fit: contain;
	object-position: bottom;
	filter: drop-shadow(0 6px 10px rgba(11, 53, 86, .35));
}

/* Le titre étant dans la bannière, la boîte de contenu commence un peu plus près. */
.cesma-banner + * .site-content,
.cesma-banner ~ .site-content { padding-top: 18px; }

@media screen and (max-width: 768px) {
	.cesma-banner__inner { padding: 10px 16px 0; min-height: 92px; gap: 12px; }
	.cesma-banner__text { padding-bottom: 12px; }
	.cesma-banner__crumbs ol { font-size: 12.5px; }
	.cesma-banner__penguin { height: 84px; width: auto; }
}
@media screen and (max-width: 380px) {
	.cesma-banner__penguin { height: 72px; width: auto; }
}