/**
 * Layout-Grundgerüst: Container, Header, Footer, Sections.
 */

.nb-container {
	max-width: var( --nb-container );
	margin: 0 auto;
	padding: 0 var( --nb-space-4 );
}

.nb-section {
	padding: var( --nb-space-8 ) 0;
}

.nb-section--muted {
	background: var( --nb-gray-50 );
}

.nb-section__header {
	max-width: 680px;
	margin: 0 auto var( --nb-space-6 );
	text-align: center;
}

.nb-section__header p {
	font-size: var( --nb-fs-lg );
}

/* ---------- Trust bar ---------- */

.novabank-trustbar {
	background: var( --bankp-color-primary );
	color: rgba(255,255,255,0.75);
	font-size: 12px;
}

.novabank-trustbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --nb-space-2 ) var( --nb-space-3 );
	padding: 6px 0;
}

.novabank-trustbar__left {
	display: flex;
	align-items: center;
	gap: var( --nb-space-2 );
	flex-wrap: wrap;
}

.novabank-trustbar__item--strong {
	color: #fff;
	font-weight: 600;
}

.novabank-trustbar__sep { color: rgba(255,255,255,0.3); }

.novabank-trustbar__right a {
	color: rgba(255,255,255,0.8);
	font-weight: 500;
}
.novabank-trustbar__right a:hover { color: #fff; }

@media (max-width: 700px) {
	.novabank-trustbar__item:not(.novabank-trustbar__item--strong),
	.novabank-trustbar__sep {
		display: none;
	}
}

/* ---------- Header ---------- */

.novabank-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.97);
	border-bottom: 1px solid var( --nb-gray-200 );
	/*
	 * Kein "backdrop-filter" hier: er würde einen eigenen Containing
	 * Block für "position: fixed"-Nachfahren erzeugen (z. B. das mobile
	 * Navigationsmenü), was dessen Höhe auf die des Headers statt des
	 * ganzen Bildschirms beschränken würde. Der Hintergrund ist mit
	 * 97 % Deckkraft ohnehin fast undurchsichtig.
	 */
}

.novabank-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --nb-space-3 );
	padding: var( --nb-space-3 ) 0;
	flex-wrap: nowrap;
}

.novabank-header__brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.novabank-header__brand img { max-height: 40px; }

.novabank-header__mark {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var( --bankp-color-primary );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: -0.02em;
	flex-shrink: 0;
}

.novabank-header__wordmark {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
	max-width: 220px;
}

.novabank-header__wordmark strong {
	font-size: var( --nb-fs-lg );
	font-weight: 800;
	color: var( --bankp-color-primary );
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.novabank-header__wordmark small {
	font-size: 11px;
	color: var( --nb-gray-600 );
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * Mobile-first : le tiroir de navigation caché est l'état PAR DÉFAUT
 * (sans media query), afin qu'un navigateur qui évalue mal la largeur
 * de la fenêtre (ou une page mise en cache) échoue toujours vers la
 * mise en page étroite plutôt que vers la mise en page large qui
 * provoquait le débordement horizontal.
 */

.novabank-header__nav {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(320px, 85vw);
	max-width: 85vw;
	background: #fff;
	padding: var( --nb-space-6 ) var( --nb-space-4 );
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform var( --nb-transition );
	box-shadow: var( --nb-shadow-lg );
	z-index: 100;
}

.novabank-header__nav.is-open { transform: translateX(0); }

.novabank-header__nav-close {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 var( --nb-space-4 ) auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var( --nb-gray-200 );
	background: var( --nb-gray-50 );
	color: var( --bankp-color-primary );
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.novabank-header__nav ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var( --nb-space-4 );
	margin: 0;
	padding: 0;
}

.novabank-header__nav a {
	font-size: 15px;
	font-weight: 600;
	color: var( --nb-gray-800 );
	white-space: normal;
	display: block;
}

.novabank-header__actions {
	display: flex;
	align-items: center;
	gap: var( --nb-space-2 );
	flex-shrink: 0;
}

.novabank-header__portal {
	width: auto;
	margin-bottom: 0;
	padding: 10px 18px;
	font-size: 13px;
}

.novabank-header__cta {
	width: auto;
	margin-bottom: 0;
	padding: 10px 20px;
	font-size: 13px;
}

/*
 * Spécificité renforcée : ".novabank-btn" (components.css, chargé
 * après ce fichier) fixe aussi "display" sur ces boutons et gagnerait
 * sinon la cascade à spécificité égale.
 */
.novabank-header__actions .novabank-header__cta,
.novabank-header__actions .novabank-header__portal {
	display: none;
}

.novabank-header__toggle {
	display: block;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}

.novabank-header__toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var( --bankp-color-primary );
	margin: 5px 0;
}

/* ---------- Fond derrière le tiroir ---------- */

.novabank-nav-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	transition: opacity var( --nb-transition );
}

.novabank-nav-backdrop.is-open {
	opacity: 1;
	visibility: visible;
}

body.novabank-nav-locked {
	overflow: hidden;
}

/* ---------- Mise en page large (bureau) ---------- */

@media (min-width: 1181px) {
	.novabank-header__nav {
		position: static;
		top: auto;
		right: auto;
		bottom: auto;
		width: auto;
		max-width: none;
		background: transparent;
		padding: 0;
		overflow-y: visible;
		transform: none;
		transition: none;
		box-shadow: none;
		z-index: auto;
	}

	.novabank-header__nav-close { display: none; }

	.novabank-header__nav ul {
		flex-direction: row;
		gap: var( --nb-space-3 );
		flex-wrap: nowrap;
	}

	.novabank-header__nav a {
		font-size: 13.5px;
		white-space: nowrap;
		display: inline;
	}

	.novabank-header__actions .novabank-header__cta,
	.novabank-header__actions .novabank-header__portal { display: inline-flex; }

	.novabank-header__toggle { display: none; }

	.novabank-nav-backdrop { display: none; }
}

/* ---------- Footer ---------- */

.novabank-footer {
	background: var( --bankp-color-primary );
	color: rgba(255,255,255,0.8);
	padding: var( --nb-space-7 ) 0 var( --nb-space-4 );
}

.novabank-footer a { color: #fff; }

.novabank-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var( --nb-space-5 );
	margin-bottom: var( --nb-space-6 );
}

.novabank-footer-widget__title {
	color: #fff;
	font-size: var( --nb-fs-sm );
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var( --nb-space-3 );
}

.novabank-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.15);
	padding-top: var( --nb-space-4 );
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var( --nb-space-3 );
	font-size: var( --nb-fs-xs );
}

.novabank-social {
	display: flex;
	gap: var( --nb-space-3 );
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (max-width: 900px) {
	.novabank-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
	.novabank-footer__grid { grid-template-columns: 1fr; }
	.nb-section { padding: var( --nb-space-6 ) 0; }
}

.novabank-breadcrumbs {
	font-size: var( --nb-fs-xs );
	color: var( --nb-gray-600 );
	padding: var( --nb-space-3 ) 0;
}