/* ============================================================
   CSF Evaluator — Styles matching Figma design
   ============================================================ */

:root {
	/* Colors */
	--blue-50: #eaf1fb;
	--blue-400: #2189f8;
	--blue-500: #0073e6;
	--blue-600: #1360ae;
	--blue-800: #243b53;
	--navy: #00005c;
	--navy-light: #00004b;
	--green-50: #e6f0e4;
	--green-500: #4aa82d;
	--green-dark: rgba(16, 97, 0, 0.56);
	--red-50: #fef2f2;
	--red-400: #ff6467;
	--red-800: #9f0712;
	--orange-50: #fefaf6;
	--orange-400: #fb892d;
	--orange-800: #853200;
	--yellow-50: #fefce8;
	--yellow-400: #facc15;
	--yellow-800: #854d0e;
	--teal-50: #f0fdfa;
	--teal-400: #00d5be;
	--teal-800: #005f5a;
	--text-default: #2f313c;
	--text-title: #00004b;
	--text-subtle: #494e5f;
	--text-muted: #9da9bd;
	--text-dark: #181d27;
	--border-default: #e7eaef;
	--border-strong: #c4c9d4;
	--border-light: #f2f2f3;
	--layer-white: #ffffff;
	--layer-subtle: #f3f5f7;
	--surface-subtle: #f5f5f5;
	--slate-400: #90a1b9;
	--shadow-xs: 0px 1px 2px 0px rgba(20, 34, 38, 0.05);
	--shadow-md: 0px 2px 4px -2px rgba(20, 34, 38, 0.06), 0px 4px 8px -2px rgba(20, 34, 38, 0.1);

	/* Spacing */
	--header-height: 72px;
	--side-padding: 120px;
	--sidebar-width: 316px;
	--gap: 40px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Raleway', sans-serif;
	color: var(--text-default);
	background: #f8f9fb;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	font-feature-settings:
		'lnum' 1,
		'pnum' 1;
}

/* ============================================================
   CHART.JS TOOLTIP OVERRIDES — Premier plan
   ============================================================ */
.chartjs-tooltip {
	z-index: 99999 !important;
	pointer-events: none;
	position: fixed !important;
	box-shadow: var(--shadow-md) !important;
}

/* Ensure radar container doesn't interfere with tooltip */
.radar-container {
	position: relative;
	z-index: 1;
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
	background: var(--navy);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: var(--shadow-xs);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1440px;
	height: var(--header-height);
	margin: 0 auto;
	padding: 16px var(--side-padding);
}

.header-left {
	display: flex;
	align-items: center;
	gap: 16px;
}

.logo {
	flex-shrink: 0;
}

.logo-image {
	display: block;
	width: 94px;
	height: 32px;
}

.header-separator {
	width: 1px;
	height: 24px;
	background: rgba(255, 255, 255, 0.18);
}

.header-title {
	display: flex;
	flex-direction: column;
}

.header-title-main {
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: var(--layer-white);
}

.header-title-sub {
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: underline;
	text-underline-offset: 2px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.header-title-sub span {
	display: inline;
}

.header-title-sub-icon {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	color: currentColor;
	transition: transform 0.2s ease;
}

.header-title-sub:hover .header-title-sub-icon {
	transform: translate(1px, -1px);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* ============================================================
   RESILIENCE BANNER
   ============================================================ */
.resilience-banner {
	position: relative;
	background: var(--navy-light);
	border-bottom: 1px solid rgba(231, 234, 239, 0.24);
	overflow: hidden;
}

.resilience-banner-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 24px var(--side-padding) 32px;
	min-height: 126px;
	display: flex;
	align-items: flex-start;
}

.resilience-banner-content {
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
	z-index: 2;
}

.resilience-banner-title {
	font-size: 18px;
	line-height: 1.25;
	font-weight: 800;
	color: #ffffff;
}

.resilience-banner-description {
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.88);
	max-width: none;
}

.resilience-banner-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	width: fit-content;
	padding-bottom: 1px;
	margin-top: 2px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	color: #3dc7ff;
	text-decoration: none;
	border-bottom: 1px solid rgba(61, 199, 255, 0.6);
	transition: opacity 0.15s ease;
}

.resilience-banner-link:hover,
.resilience-banner-link:focus-visible {
	opacity: 0.82;
}

.resilience-banner-mark {
	position: absolute;
	right: -99px;
	top: 47px;
	width: 269.032px;
	height: 102.621px;
	transform: scaleX(-1);
	z-index: 1;
	pointer-events: none;
}

@media (max-width: 1080px) {
	.resilience-banner-inner {
		padding: 20px var(--side-padding) 24px;
		min-height: auto;
	}

	.resilience-banner-title {
		font-size: 18px;
	}

	.resilience-banner-mark {
		right: -79px;
		top: 38px;
		width: 215.2px;
		height: 82.1px;
	}
}

@media (max-width: 720px) {
	.resilience-banner-inner {
		padding: 18px var(--side-padding) 20px;
	}

	.resilience-banner-title {
		font-size: 17px;
	}

	.resilience-banner-description,
	.resilience-banner-link {
		font-size: 15px;
	}

	.resilience-banner-mark {
		display: none;
	}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 32px;
	padding: 6px 12px;
	border-radius: 6px;
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: var(--shadow-xs);
	border: none;
	transition: opacity 0.15s;
}
.btn:hover {
	opacity: 0.85;
}

.btn-icon {
	display: block;
	flex-shrink: 0;
}

.btn-icon-reset {
	transform: scaleX(-1);
	transform-origin: center;
}

.btn-icon-export {
	width: 20px;
	height: 20px;
}

.btn-secondary {
	background: var(--layer-white);
	color: var(--text-title);
	border: 1px solid var(--border-default);
	position: relative;
}

.header-actions > .btn-secondary,
.header-actions > div > .btn-secondary {
	background: rgba(255, 255, 255, 0.08);
	color: var(--layer-white);
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow: none;
}

.header-actions > .btn-secondary:hover,
.header-actions > div > .btn-secondary:hover {
	background: rgba(255, 255, 255, 0.16);
}

.header-actions > .btn-primary {
	border-color: transparent;
}

#langBtn svg {
	transition: transform 0.2s ease;
	transform-origin: center;
}

.btn-secondary.open svg {
	transform: rotate(180deg);
}

.btn-primary {
	background: var(--blue-500);
	color: white;
	border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ============================================================
   LANGUAGE DROPDOWN
   ============================================================ */
.language-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 110px;
	background: var(--layer-white);
	border: 1px solid var(--border-default);
	border-radius: 8px;
	padding: 8px;
	box-shadow: var(--shadow-md);
	z-index: 1000;
	display: none;
	flex-direction: column;
	gap: 4px;
}

.language-dropdown.open {
	display: flex;
}

.language-option {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 8px 12px;
	border-radius: 6px;
	background: none;
	border: none;
	cursor: pointer;
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--text-default);
	text-align: left;
	transition: background-color 0.15s;
}

.language-option:hover {
	background: var(--blue-50);
}

.language-option.active {
	background: var(--blue-500);
	color: white;
}

.language-flag {
	font-size: 16px;
	display: block;
	width: 20px;
	text-align: center;
}

.language-text {
	flex: 1;
}

/* ============================================================
   MAIN CONTAINER
   ============================================================ */
.main-container {
	position: relative;
	min-height: calc(100vh - var(--header-height));
}

/* ============================================================
   INTRO SECTION
   ============================================================ */
.intro-section {
	position: relative;
	z-index: 1;
	padding: 32px var(--side-padding) 0;
	max-width: 1440px;
	margin: 0 auto;
}

.intro-container {
	max-width: 800px;
}

.intro-title {
	font-family: 'Raleway', sans-serif;
	font-size: 40px;
	font-weight: 800;
	line-height: normal;
	color: var(--navy-light);
	margin: 0 0 8px 0;
}

.intro-description {
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	font-weight: 550;
	line-height: 28px;
	color: var(--text-title);
	margin: 0;
	max-width: 720px;
}

.content-wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	gap: var(--gap);
	padding: 24px var(--side-padding) 80px;
	max-width: 1440px;
	margin: 0 auto;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
	width: var(--sidebar-width);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: calc(var(--header-height) + 32px);
	align-self: flex-start;
	max-height: calc(100vh - var(--header-height) - 32px);
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 20px;
}

.sidebar::-webkit-scrollbar {
	display: none;
}

.sidebar > * {
	flex-shrink: 0;
}

/* CTA Card */
.cta-card {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	background: var(--navy);
}

.cta-bg-img {
	position: absolute;
	width: 190%;
	height: 93%;
	left: -45%;
	top: -8%;
	object-fit: cover;
	object-position: center center;
}

.cta-bg-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(193.57deg, rgba(0, 0, 92, 0.4) 12.245%, #00005c 106.87%);
	z-index: 1;
}

.cta-content {
	position: relative;
	z-index: 2;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 100px;
}

.cta-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 182px;
	padding: 8px 12px 8px 8px;
	height: 32px;
	width: fit-content;
	color: white;
	font-size: 12px;
	font-weight: 675;
	line-height: 20px;
}

.cta-dot-outer {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--green-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cta-dot-inner {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #7aea57;
}

.cta-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cta-title {
	font-size: 20px;
	font-weight: 800;
	line-height: 28px;
	color: white;
	max-width: 220px;
}

.cta-steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cta-step {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: white;
	font-size: 14px;
	font-weight: 550;
	line-height: 20px;
	position: relative;
}

/* Segment reliant chaque bulle à la suivante (s'arrête aux cercles) */
.cta-step:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 10px;
	transform: translateX(-50%);
	top: 20px;
	height: calc(100% - 20px + 12px);
	width: 1px;
	background: rgba(255, 255, 255, 0.6);
}

.cta-circle {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	color: #3dc7ff;
	flex-shrink: 0;
	background: transparent;
}

.btn-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px;
	width: 100%;
	padding: 10px 12px 10px 16px;
	background: white;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 1px;
	box-shadow: var(--shadow-xs);
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	font-weight: 550;
	line-height: 20px;
	color: var(--text-title);
	cursor: pointer;
	transition: opacity 0.15s;
}

.cta-decoration {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 60px;
	height: auto;
	z-index: 2;
	pointer-events: none;
	user-select: none;
}
.btn-cta:hover {
	opacity: 0.85;
}

.btn-cta--banner {
	width: 280px;
}

.cta-banner {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	background: var(--navy);
}

.cta-banner-bg-img {
	position: absolute;
	width: 130.92%;
	height: 325.69%;
	top: -86.56%;
	object-fit: cover;
	object-position: center center;
}

.cta-banner-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(188.87deg, rgba(0, 0, 92, 0.4) 27.925%, #00005c 109.21%);
	z-index: 1;
}

.cta-banner-decoration {
	position: absolute;
	bottom: -3%;
	right: -1%;
	width: 70px;
	height: auto;
	z-index: 3;
	pointer-events: none;
	user-select: none;
}

.cta-banner-content {
	position: relative;
	z-index: 2;
	padding: 28px 32px 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cta-banner-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cta-banner-upper {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cta-banner-title {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
	color: white;
}

.cta-banner-steps {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 0;
}

.cta-banner-steps .cta-step {
	flex: 1 1 0;
	min-width: 0;
	align-items: flex-start;
}

.cta-banner-steps .cta-step span {
	display: block;
	overflow-wrap: anywhere;
}

.cta-hline {
	flex: 1 1 36px;
	min-width: 24px;
	max-width: 56px;
	height: 1px;
	background: white;
	opacity: 0.55;
	margin: 10px 10px 0;
}

.btn-cta--banner {
	width: 280px;
}

@media (max-width: 600px) {
	.cta-banner-steps {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		row-gap: 8px;
	}
	.cta-hline {
		display: none;
	}
	.btn-cta--banner {
		width: 100%;
	}
}

/* Score Card */
.score-card,
.radar-card {
	background: var(--layer-white);
	border: 1px solid var(--border-light);
	border-radius: 8px;
	padding: 20px;
}

.radar-card {
	overflow: visible;
}

.card-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: var(--text-title);
}

.card-description {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--text-secondary);
	margin-top: 8px;
}

/* Privacy Notice Card */
.privacy-card {
	background: var(--layer-white);
	border: 1px solid var(--border-light);
	border-radius: 8px;
	padding: 20px;
}

.privacy-card-header {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 8px;
}

.privacy-icon {
	flex-shrink: 0;
	margin-top: 1px;
}

.privacy-title {
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	color: var(--text-title);
	margin: 0;
}

.privacy-body {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--text-secondary);
	margin: 0;
	padding-left: 26px; /* 16px icon + 10px gap */
}

.score-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	margin-top: 40px;
}

.gauge-container {
	position: relative;
	width: 140px;
	height: 140px;
	flex-shrink: 0;
}

.gauge-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.gauge-value {
	font-size: 28px;
	font-weight: 700;
	line-height: 36px;
	color: var(--text-dark);
}

.score-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.score-percent {
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
	color: var(--text-dark);
}

.score-label {
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.72px;
}

/* Radar Card */
.radar-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.radar-container {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.radar-container canvas {
	max-width: 320px;
	max-height: 320px;
	cursor: pointer;
}

/* ============================================================
   MAIN CONTENT — SOV CARDS
   ============================================================ */
.main-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

/* SOV Card */
.sov-card {
	background: var(--layer-white);
	border: 2px solid transparent;
	border-radius: 8px;
	padding: 20px 24px 24px;
	transition: border-color 0.2s ease;
}

.sov-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0;
	cursor: pointer;
}

.sov-header-left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sov-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 0 8px;
	border-radius: 9999px;
	background: var(--blue-50);
	color: var(--blue-600);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	white-space: nowrap;
	transition:
		background 0.2s,
		color 0.2s;
}

.sov-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: var(--navy);
	white-space: nowrap;
}

.sov-header-right {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sov-weight-wrapper {
	position: relative;
}

.sov-weight {
	display: flex;
	align-items: center;
	gap: 2px;
	height: 24px;
	padding: 0 4px 0 8px;
	border: 1px solid var(--border-default);
	border-radius: 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	color: var(--text-default);
	cursor: pointer;
	background: none;
	font-family: 'Raleway', sans-serif;
}
.sov-weight svg {
	width: 20px;
	height: 20px;
	transition: transform 0.2s;
}
.sov-weight.open svg {
	transform: rotate(180deg);
}

/* Weight Dropdown */
.weight-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 240px;
	background: var(--layer-white);
	border: 1px solid var(--border-default);
	border-radius: 8px;
	padding: 16px;
	box-shadow: var(--shadow-md);
	z-index: 50;
	display: none;
	flex-direction: column;
	gap: 12px;
}
.weight-dropdown.open {
	display: flex;
}

.weight-dropdown-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.weight-dropdown-title {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	color: var(--text-default);
}

.weight-dropdown-title svg {
	width: 16px;
	height: 16px;
	opacity: 0.5;
}

.weight-dropdown-value {
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: var(--text-dark);
}

.weight-slider-container {
	position: relative;
	cursor: pointer;
}

.weight-slider-track {
	width: 100%;
	height: 12px;
	background: var(--surface-subtle);
	border: 1px solid var(--border-default);
	border-radius: 9999px;
	padding: 2px;
	position: relative;
}

.weight-slider-fill {
	height: 8px;
	background: var(--blue-500);
	border-radius: 999px;
	transition: width 0.1s;
}

.weight-slider-disabled {
	position: absolute;
	top: 0;
	height: 8px;
	background: var(--slate-200);
	border-radius: 999px;
	opacity: 0.6;
	pointer-events: none;
	z-index: 1;
}

.weight-slider-dot {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--blue-500);
	border: 3px solid white;
	box-shadow: 0 0 0 1px var(--border-default);
	z-index: 2;
	transition: left 0.1s;
	cursor: grab;
}
.weight-slider-dot:active {
	cursor: grabbing;
}

.weight-slider-labels {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--slate-400);
}

.sov-status {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--green-50);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.sov-status-inner {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--green-500);
}

.sov-status.is-alert {
	background: var(--red-50);
}

.sov-status.is-alert .sov-status-inner {
	background: var(--red-400);
}

/* Seal Levels */
/* (Legacy seal-section/seal-levels removed — replaced by .sov-questions in Pass 2) */

/* Minimum Required */
.min-required {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.min-required-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.min-required-left {
	display: flex;
	align-items: center;
	gap: 4px;
}

.min-required-label {
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	color: var(--text-subtle);
}

.min-required-info {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	opacity: 0.5;
	cursor: help;
}

.min-required-value {
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: var(--text-dark);
	text-align: center;
}

/* Slider — pill progress bar style */
.slider-wrapper {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.slider-container {
	position: relative;
	width: 100%;
	cursor: pointer;
}

.slider-track {
	width: 100%;
	height: 12px;
	background: var(--surface-subtle);
	border: 1px solid var(--border-default);
	border-radius: 9999px;
	padding: 2px;
	overflow: visible;
	position: relative;
}

.slider-fill {
	height: 8px;
	background: var(--blue-500);
	border-radius: 999px;
	transition: width 0.2s;
}

.slider-dot {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--blue-500);
	border: 3px solid white;
	box-shadow: 0 0 0 1px var(--border-default);
	z-index: 2;
	transition: left 0.2s;
	cursor: grab;
}
.slider-dot:active {
	cursor: grabbing;
}

/* Slider marks for SEAL levels */
.slider-marks {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	pointer-events: none;
}

.slider-mark {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 2px;
	height: 8px;
	background: var(--border-default);
	border-radius: 1px;
	z-index: 1;
}

.slider-mark[data-level='2'] {
	left: 33.33%;
}

.slider-mark[data-level='3'] {
	left: 66.67%;
}

/* Active state for slider marks */
.slider-mark.active {
	height: 10px;
}

.slider-labels {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--slate-400);
}

/* ============================================================
   PRIVACY PAGE (Figma node 3198:6955)
   ============================================================ */
body.privacy-view .main-container,
body.privacy-view .resilience-banner,
body.privacy-view .header-actions {
	display: none;
}

.privacy-page[hidden] {
	display: none;
}
.privacy-page {
	background: var(--layer-white);
}

/* liste des fournisseurs — 3198:6966 */
.privacy-page-intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 32px;
	padding: 32px 100px 48px;
	max-width: 1440px;
	margin: 0 auto;
	background: var(--layer-white);
}

/* Group 126 — back link */
.privacy-back {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	text-decoration: none;
	border-bottom: 1px solid var(--blue-500);
}

.privacy-back-row {
	display: flex;
	align-items: center;
	gap: 4px;
}

.privacy-back-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	overflow: hidden;
	flex-shrink: 0;
}

.privacy-back-icon img {
	display: block;
	width: 10.6667px;
	height: 10.6667px;
}

.privacy-back-label {
	font-family: 'Raleway', sans-serif;
	font-weight: 475;
	font-size: 16px;
	line-height: 24px;
	color: var(--blue-500);
	white-space: nowrap;
}

/* contenu — 3198:6968 */
.privacy-page-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 24px;
	width: 100%;
}

.privacy-page-title {
	font-family: 'Raleway', sans-serif;
	font-weight: 800;
	font-size: 40px;
	line-height: normal;
	color: var(--navy);
	margin: 0;
}

.privacy-page-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
}

.privacy-page-lead {
	width: 100%;
	font-family: 'Raleway', sans-serif;
	font-weight: 550;
	font-size: 18px;
	line-height: 28px;
	color: var(--navy);
	word-break: break-word;
}

.privacy-page-lead p {
	margin: 0;
}

/* reproduces the empty 28px line between both paragraphs in the design */
.privacy-page-lead p + p {
	margin-top: 28px;
}

/* Primary / Button */
.privacy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 12px 12px 16px;
	background: var(--blue-500);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 1px;
	box-shadow: var(--shadow-xs);
	overflow: hidden;
	flex-shrink: 0;
	font-family: 'Raleway', sans-serif;
	font-weight: 550;
	font-size: 16px;
	line-height: 24px;
	color: #ffffff;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s ease;
}

.privacy-btn:hover,
.privacy-btn:focus-visible {
	background: var(--blue-600);
}

.privacy-btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	overflow: hidden;
	flex-shrink: 0;
}

.privacy-btn-icon img {
	display: block;
	width: 6.7925px;
	height: 11px;
}

/* Portfolio Header / 7 — 3198:6973 */
.privacy-page-cards {
	background: var(--layer-subtle);
}

.privacy-page-cards-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 48px 100px 80px;
	max-width: 1440px;
	margin: 0 auto;
}

.privacy-card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	width: 100%;
}

.privacy-info-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	min-height: 373px;
	padding: 32px;
	background: var(--layer-white);
}

.privacy-info-card-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	width: 100%;
}

.privacy-info-card-icon {
	display: block;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
}

.privacy-info-card-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	color: var(--navy);
	word-break: break-word;
}

.privacy-info-card-title {
	margin: 0;
	width: 100%;
	font-family: 'Raleway', sans-serif;
	font-weight: 800;
	font-size: 24px;
	line-height: 1.2;
}

.privacy-info-card-text {
	margin: 0;
	width: 100%;
	font-family: 'Raleway', sans-serif;
	font-weight: 475;
	font-size: 16px;
	line-height: 24px;
}

@media (max-width: 1180px) {
	.privacy-page-intro,
	.privacy-page-cards-inner {
		padding-left: 40px;
		padding-right: 40px;
	}

	.privacy-btn {
		white-space: normal;
		text-align: left;
	}
}

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

	.privacy-info-card {
		min-height: 0;
	}
}

@media (max-width: 680px) {
	.privacy-page-intro {
		padding: 24px 20px 32px;
		gap: 24px;
	}

	.privacy-page-cards-inner {
		padding: 32px 20px 48px;
	}

	.privacy-page-title {
		font-size: 32px;
	}

	.privacy-page-lead {
		font-size: 16px;
		line-height: 24px;
	}

	.privacy-page-lead p + p {
		margin-top: 24px;
	}

	.privacy-info-card {
		padding: 24px;
	}
}

/* ============================================================
   COOKIES PAGE (Figma node 3198:7023)
   ============================================================ */
.privacy-page-intro--cookies {
	gap: 40px;
}

.cookies-sections {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	width: 100%;
	color: var(--navy);
	word-break: break-word;
}

.cookies-section {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

.cookies-page-title {
	margin: 0;
	font-family: 'Raleway', sans-serif;
	font-weight: 800;
	font-size: 32px;
	line-height: normal;
}

.cookies-lead {
	margin: 0;
	width: 100%;
	font-family: 'Raleway', sans-serif;
	font-weight: 475;
	font-size: 18px;
	line-height: 28px;
}

.cookies-section-title {
	margin: 0;
	width: 100%;
	font-family: 'Raleway', sans-serif;
	font-weight: 800;
	font-size: 18px;
	line-height: normal;
}

.cookies-text {
	margin: 0;
	width: 100%;
	font-family: 'Raleway', sans-serif;
	font-weight: 475;
	font-size: 16px;
	line-height: 24px;
}

.cookies-text p {
	margin: 0;
}

/* reproduces the empty 24px line between paragraphs in the design */
.cookies-text p + p,
.cookies-text ul + p {
	margin-top: 24px;
}

.cookies-bullets {
	margin: 0;
	padding-left: 24px;
	list-style: disc outside;
}

.cookies-link {
	color: var(--blue-500);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
}

/* Portfolio Header / 7 — 3518:3461 */
.cookies-types {
	background: var(--layer-subtle);
}

.cookies-types-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 48px 100px;
	color: var(--navy);
	word-break: break-word;
}

.cookies-types-title {
	margin: 0;
	width: 100%;
	font-family: 'Raleway', sans-serif;
	font-weight: 800;
	font-size: 24px;
	line-height: normal;
}

.cookies-ol {
	margin: 0;
	padding-left: 0;
	width: 100%;
	list-style: decimal inside;
	font-family: 'Raleway', sans-serif;
	font-weight: 475;
	font-size: 16px;
	line-height: 24px;
}

/* reproduces the empty 24px line between both numbered groups */
.cookies-ol > li + li {
	margin-top: 24px;
}

.cookies-ol-nested {
	margin: 0;
	padding-left: 34px;
	list-style: decimal outside;
}

/* Portfolio Header / 7 — 3198:7054 */
.cookies-control {
	background: var(--navy);
	overflow: hidden;
}

.cookies-control-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1440px;
	margin: 0 auto;
	padding: 40px 100px;
}

.cookies-control-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	color: #ffffff;
	word-break: break-word;
}

.cookies-control-title {
	margin: 0;
	width: 100%;
	font-family: 'Raleway', sans-serif;
	font-weight: 800;
	font-size: 24px;
	line-height: normal;
}

.cookies-control-text {
	margin: 0;
	width: 100%;
	font-family: 'Raleway', sans-serif;
	font-weight: 475;
	font-size: 16px;
	line-height: 24px;
}

.cookies-control-link {
	color: #3dc7ff;
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
	cursor: pointer;
}

.cookies-control-deco {
	position: absolute;
	/* 1440 - (1168 + 288.414) keeps the Figma offset while staying anchored right */
	right: -16.414px;
	top: 54px;
	width: 288.414px;
	height: 110px;
	transform: scaleX(-1);
	pointer-events: none;
}

@media (max-width: 1180px) {
	.cookies-types-inner,
	.cookies-control-inner {
		padding-left: 40px;
		padding-right: 40px;
	}

	.cookies-control-deco {
		display: none;
	}
}

@media (max-width: 680px) {
	.cookies-page-title {
		font-size: 26px;
	}

	.cookies-lead {
		font-size: 16px;
		line-height: 24px;
	}

	.cookies-types-inner {
		padding: 32px 20px;
	}

	.cookies-control-inner {
		padding: 32px 20px;
	}

	.cookies-ol-nested {
		padding-left: 24px;
	}
}

/* ============================================================
   FOOTER
   ============================================================ */
.app-footer {
	background: #f5f7f9;
	padding: 16px clamp(20px, 11.7vw, 168px);
	border-top: 1px solid #e7eaef;
}

.app-footer-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	max-width: 1440px;
	margin: 0 auto;
	flex-wrap: wrap;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #00005c;
}

.app-footer-link {
	text-decoration: none;
	color: #00005c;
	transition: opacity 0.15s ease;
}

.app-footer-link:hover,
.app-footer-link:focus-visible {
	opacity: 0.75;
}

.app-footer-copy {
	color: #00004b;
	white-space: nowrap;
}

@media (max-width: 680px) {
	.app-footer {
		padding: 16px 20px;
	}

	.app-footer-nav {
		gap: 12px 16px;
		font-size: 13px;
	}

	.app-footer-copy {
		white-space: normal;
		text-align: center;
	}
}

/* ============================================================
   PRINT STYLES
   ============================================================ */

/* Hide print elements in normal view */
.print-header,
.print-summary {
	display: none;
}

@media print {
	.print-header,
	.print-summary {
		display: block;
	}
	* {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
		color-adjust: exact !important;
	}

	@page {
		size: A4;
		margin: 15mm 12mm;
	}

	/* Hide non-printing elements */
	.header,
	.header-actions,
	.intro-section,
	.btn,
	.btn-cta,
	.cta-card,
	.app-footer,
	.weight-dropdown,
	.weight-slider-container,
	.slider-wrapper,
	.sov-chevron,
	.min-required {
		display: none !important;
	}

	/* Force all SOV cards expanded for print */
	.sov-card .sov-body {
		display: block !important;
	}

	/* Print body */
	body {
		background: white;
		margin: 0;
		padding: 0;
		min-height: auto;
	}

	.main-container {
		min-height: auto;
	}

	.content-wrapper {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 0;
		margin: 0;
		max-width: 100%;
	}

	/* Print header with logo, title, date */
	.print-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;
		padding-bottom: 12px;
		border-bottom: 2px solid var(--border-default);
		page-break-after: avoid;
	}

	.print-header-left {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.print-header-logo {
		width: 60px;
		height: 20px;
		object-fit: contain;
	}

	.print-header-title {
		font-size: 14px;
		font-weight: 700;
		color: var(--text-title);
	}

	.print-header-date {
		font-size: 12px;
		font-weight: 500;
		color: var(--text-muted);
	}

	/* Sidebar — now full width at top, organized horizontally */
	.sidebar {
		width: 100%;
		flex-direction: row;
		gap: 12px;
		position: static;
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
		margin-bottom: 24px;
		page-break-after: avoid;
	}

	.sidebar > div {
		min-width: 0;
	}

	.score-card,
	.radar-card {
		border: 1px solid var(--border-light);
		padding: 16px;
		border-radius: 6px;
		display: flex;
		flex-direction: column;
	}

	.score-card .score-content {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.radar-card .radar-container {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.card-title {
		font-size: 14px;
		font-weight: 700;
		margin-bottom: 12px;
	}

	.score-content {
		gap: 16px;
		margin-top: 16px;
	}

	.gauge-container {
		width: 140px;
		height: 140px;
		flex-shrink: 0;
	}

	.radar-container {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}

	.radar-container canvas {
		width: 100% !important;
		height: auto !important;
	}

	/* Main content — SOV cards */
	.main-content {
		gap: 16px;
		flex: 1;
	}

	.sov-card {
		page-break-inside: avoid;
		border: 1px solid var(--border-light);
		padding: 16px;
		margin-bottom: 8px;
		background: white;
		width: 99%;
	}

	.sov-header {
		margin-bottom: 16px;
		gap: 8px;
	}

	.sov-badge {
		font-size: 12px;
		padding: 4px 8px;
		height: auto;
	}

	.sov-title {
		font-size: 14px;
	}

	.sov-header-right {
		display: flex;
		gap: 8px;
		align-items: center;
	}

	.sov-weight {
		font-size: 12px;
		padding: 4px 8px;
		height: auto;
	}

	.sov-status {
		width: 16px;
		height: 16px;
	}

	.sov-status-inner {
		width: 12px;
		height: 12px;
	}

	/* Questions in print mode */
	.sov-questions {
		gap: 10px;
	}

	.question-item {
		padding: 10px;
		border: 1px solid #e5e7eb;
		page-break-inside: avoid;
	}

	.question-answers {
		padding-left: 24px;
	}

	.question-answer {
		padding: 4px 8px;
	}

	.question-answer:not(.selected) {
		display: none;
	}

	.answer-radio {
		display: none;
	}

	.answer-text {
		font-size: 11px;
	}

	.sov-footer {
		margin-top: 12px;
		padding-top: 10px;
	}

	/* Print conformity summary (top of page 1, after header) */
	.print-summary {
		display: flex;
		justify-content: space-between;
		padding: 12px;
		background: var(--blue-50);
		border: 1px solid var(--blue-400);
		border-radius: 6px;
		margin-bottom: 16px;
		font-size: 12px;
		page-break-after: avoid;
	}

	.print-summary-item {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.print-summary-label {
		font-weight: 700;
		color: var(--text-subtle);
	}

	.print-summary-value {
		font-size: 14px;
		font-weight: 700;
		color: var(--text-dark);
	}
}

/* ============================================================
   MAINTENANCE PAGE
   ============================================================ */
body.maintenance-page {
	background: #f8f9fb;
	overflow: hidden;
}

.maintenance-header {
	position: relative;
	background: var(--layer-white);
}

.maintenance-header-inner {
	max-width: 100%;
}

.maintenance-header-left {
	gap: 0;
}

.maintenance-lang-wrapper {
	position: relative;
}

.maintenance-main {
	position: relative;
	min-height: calc(100vh - var(--header-height));
	display: grid;
	place-items: center;
	padding: 24px;
	overflow: hidden;
}

.maintenance-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 18px;
	max-width: 760px;
}

.maintenance-visual {
	width: min(520px, 70vw);
	height: auto;
	max-height: calc(100vh - var(--header-height) - 64px);
	object-fit: contain;
}

.maintenance-title {
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	color: var(--text-title);
}

.maintenance-text {
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	color: var(--text-default);
	max-width: 640px;
}

.maintenance-actions {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.maintenance-btn {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 6px 12px;
	min-height: 32px;
	box-shadow: 0px 1px 2px rgba(20, 34, 38, 0.05);
	border-radius: 6px;
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	overflow-wrap: anywhere;
	transition: opacity 0.15s ease;
	flex: none;
	flex-grow: 0;
}

.maintenance-btn:hover {
	opacity: 0.88;
}

.maintenance-btn-secondary {
	width: 149px;
	min-height: 52px;
	background: #ffffff;
	border: 1px solid #e7eaef;
	color: var(--text-title);
	order: 0;
}

.maintenance-btn-primary {
	width: 287px;
	min-height: 52px;
	background: #0073e6;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: #ffffff;
	order: 1;
}

.maintenance-arc {
	position: absolute;
	pointer-events: none;
	user-select: none;
	z-index: 1;
}

.maintenance-arc-top-left {
	top: 8px;
	left: 0;
	width: min(260px, 32vw);
	height: auto;
}

.maintenance-arc-bottom-right {
	right: 0;
	bottom: 0;
	width: min(390px, 40vw);
	height: auto;
}

@media (max-width: 768px) {
	html,
	body {
		overflow-x: hidden;
	}

	.maintenance-main {
		padding: 20px;
	}

	.maintenance-visual {
		width: min(360px, 84vw);
	}

	.maintenance-title {
		font-size: 18px;
		line-height: 26px;
	}

	.maintenance-text {
		font-size: 15px;
		line-height: 22px;
	}

	.maintenance-actions {
		width: 100%;
	}

	.maintenance-btn-secondary,
	.maintenance-btn-primary {
		width: min(340px, 100%);
	}

	.maintenance-arc-top-left {
		width: min(180px, 44vw);
		top: 0;
	}

	.maintenance-arc-bottom-right {
		width: min(240px, 48vw);
	}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
	:root {
		--side-padding: 40px;
	}
}

@media (max-width: 960px) {
	:root {
		--side-padding: 20px;
	}
	.content-wrapper {
		flex-direction: column;
	}
	.sidebar {
		width: 100%;
		position: static;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 12px;
		max-height: none;
		overflow-y: visible;
	}
	.sidebar > * {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		flex-shrink: 1;
		box-sizing: border-box;
	}
	.cta-card,
	.score-card,
	.radar-card {
		flex: 1 1 auto;
		min-width: 0;
	}
	.privacy-card {
		min-width: 0;
	}
	.privacy-title,
	.privacy-body,
	.card-title,
	.card-description {
		overflow-wrap: anywhere;
		word-break: break-word;
	}
	.privacy-body {
		padding-left: 0;
	}

	/* Questions responsive — tablet */
	.question-answers {
		padding-left: 24px;
	}

	.question-answer {
		padding: 10px 12px;
	}
}

/* Questions responsive — mobile */
@media (max-width: 600px) {
	.sov-card {
		padding: 16px;
	}

	.sov-questions {
		gap: 12px;
	}

	.question-item {
		padding: 12px;
	}

	.question-header {
		margin-bottom: 10px;
	}

	.question-text {
		font-size: 13px;
	}

	.question-answers {
		padding-left: 0;
		gap: 4px;
	}

	.question-answer {
		padding: 10px;
		min-height: 44px; /* Touch target */
	}

	.answer-text {
		font-size: 13px;
	}

	.sov-progress,
	.sov-score-badge {
		font-size: 11px;
	}

	.sov-seal-badge {
		font-size: 10px;
		height: 20px;
		padding: 0 6px;
	}
}

/* ============================================================
   Contact Drawer — Lead generation form
   ============================================================ */

.drawer-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #0000008f;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}

.drawer-overlay.active {
	opacity: 1;
	visibility: visible;
}

.drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: 860px;
	max-width: 96vw;
	height: 100vh;
	height: 100dvh;
	background: var(--layer-white);
	box-shadow: -8px 0 24px rgba(20, 34, 38, 0.15);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
	z-index: 1001;
	display: flex;
	flex-direction: column;
}

.drawer-overlay.active .drawer {
	transform: translateX(0);
}

.drawer-header {
	position: sticky;
	top: 0;
	background: var(--layer-white);
	padding: 24px 32px 16px;
	border-bottom: 1px solid var(--border-default);
	display: flex;
	justify-content: flex-end;
	z-index: 1;
}

/* ─── Drawer Hero Header ───────────────────────────────────────────────────── */
.drawer-header--hero {
	background: #00005c;
	padding: 32px 40px 24px;
	position: relative;
	overflow: visible;
	border-bottom: none;
	justify-content: space-between;
	align-items: flex-start;
	flex-shrink: 0;
}

.drawer-header-deco {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 12.5%;
	width: auto;
	max-width: none;
	height: 100%;
	pointer-events: none;
	object-fit: contain;
	object-position: right center;
	z-index: 0;
}

.drawer-header-content {
	flex: 1;
	padding-right: 24px;
	position: relative;
	z-index: 1;
}

.drawer-hero-title {
	font-size: 22px;
	font-weight: 750;
	color: #ffffff;
	margin: 0 0 10px;
	line-height: 1.3;
}

.drawer-hero-subtitle {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
	line-height: 1.55;
	max-width: 520px;
}

.drawer-close--hero {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	border: 1px solid rgba(231, 234, 239, 0.24);
	border-radius: 6px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
	transition: background 0.2s;
	box-shadow: 0px 1px 1px rgba(20, 34, 38, 0.05);
}

.drawer-close--hero:hover {
	background: rgba(255, 255, 255, 0.22);
}

/* ─── Drawer 2-column Body ─────────────────────────────────────────────────── */
.drawer-body {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
	position: relative;
	z-index: 1;
}

.drawer-columns {
	display: flex;
	min-height: 100%;
}

.drawer-col {
	padding: 28px 32px;
}

.drawer-col--left {
	flex: 1;
	min-width: 0;
	position: relative;
}

.drawer-col--left::after {
	content: '';
	position: absolute;
	right: 0;
	top: 16px;
	bottom: 16px;
	width: 1px;
	background: var(--border-default, #e9eaec);
}

.drawer-col--right {
	flex: 1;
	background: var(--layer-white);
}

/* ─── Data Protection accordion ─────────────────────────────────────────────── */
.dp-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	padding: 0;
	cursor: default;
	pointer-events: none;
	gap: 8px;
	margin-bottom: 16px;
}

.dp-toggle span {
	font-size: 14px;
	font-weight: 700;
	color: var(--text-title, #00004b);
	line-height: 20px;
	text-align: left;
}

.dp-toggle svg {
	display: none;
	flex-shrink: 0;
	color: var(--text-subtle);
	transition: transform 0.2s ease;
}

.dp-content {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.dp-p {
	font-size: 14px;
	color: var(--text-title, #00004b);
	line-height: 20px;
	margin: 0 0 12px;
}

.dp-p:last-child {
	margin-bottom: 0;
}

.dp-link {
	color: var(--blue-500, #2563eb);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dp-link:hover {
	color: var(--blue-600, #1d4ed8);
}

/* ─── Tooltip on attachment checkbox ──────────────────────────────────────── */
.tooltip-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	flex-shrink: 0;
}

.tooltip-icon {
	color: var(--text-subtle, #9ca3af);
	display: block;
	transition: color 0.2s;
}

.tooltip-wrap:hover .tooltip-icon,
.tooltip-wrap:focus-within .tooltip-icon {
	color: var(--blue-500, #2563eb);
}

.tooltip-bubble {
	display: none;
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--layer-white);
	color: var(--text-secondary, #6b7280);
	font-size: 12px;
	line-height: 1.55;
	padding: 10px 14px;
	border-radius: 8px;
	width: 280px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
	z-index: 200;
	white-space: normal;
	pointer-events: none;
	border: 1px solid var(--border-default);
}

.tooltip-bubble::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--layer-white);
}

.tooltip-wrap:hover .tooltip-bubble,
.tooltip-wrap:focus-within .tooltip-bubble {
	display: block;
}

.drawer-close {
	/* Styles par défaut (si pas de classes btn) */
	width: 40px;
	height: 40px;
	border: none;
	background: var(--layer-subtle);
	border-radius: 8px;
	color: var(--text-subtle);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

/* Override pour les boutons avec les classes btn */
.drawer-close.btn {
	width: auto;
	height: 32px;
	padding: 6px 12px;
	border-radius: 6px;
}

.drawer-close:hover {
	background: var(--border-default);
	color: var(--text-default);
}

/* Override pour les boutons avec les classes btn */
.drawer-close.btn:hover {
	opacity: 0.85;
	background: var(--border-default);
}

.drawer-content {
	padding: 24px 32px 40px;
}

.drawer-title {
	margin-bottom: 32px;
}

.drawer-title h2 {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text-title);
	margin: 0 0 12px 0;
}

.drawer-title p {
	font-size: 16px;
	color: var(--text-subtle);
	margin: 0;
	line-height: 1.5;
}

.drawer-note {
	margin-bottom: 16px;
}

.drawer-note p {
	font-size: 14px;
	font-weight: 600;
	color: #00004b;
	margin: 0;
	line-height: 1.4;
}

/* Form Styles */
.contact-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.form-group label {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-default);
}

/* Champs rétrécis d'1/4 pour dégager le séparateur vertical du drawer.
   Le sélecteur enfant direct évite de réduire deux fois les champs imbriqués
   (recherche pays, numéro de téléphone). Le champ Message reste pleine largeur. */
.contact-form .form-group > input:not([type='checkbox']):not([type='hidden']),
.contact-form .form-group > select,
.contact-form .form-group > .csf-validation-message,
.contact-form .csf-location-select,
.contact-form .csf-phone-input {
	width: 75%;
	box-sizing: border-box;
}

/* Icônes de validation alignées sur les champs réduits à 75% */
.contact-form .csf-form-group .csf-validation-icon {
	right: calc(25% + 12px);
}

.form-group input,
.form-group textarea,
.form-group select {
	padding: 10px 12px;
	height: auto;
	border: 1px solid var(--border-strong, #c4c9d4);
	border-radius: 6px;
	font-size: 14px;
	color: var(--text-default);
	background: var(--layer-white);
	box-shadow: 0px 1px 1px rgba(20, 34, 38, 0.05);
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
	font-family: 'Raleway', sans-serif;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
	outline: none;
	border-color: var(--blue-500);
	box-shadow: 0 0 0 3px rgba(1, 115, 230, 0.1);
}

.form-group textarea {
	resize: vertical;
	min-height: 100px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
	color: var(--text-subtle);
	opacity: 0.5;
}

.message-hint {
	font-size: 12px;
	color: #676f8e;
	line-height: 1.5;
	margin: 0;
}

.form-divider {
	height: 1px;
	background: #e7eaef;
	width: 100%;
	margin: 4px 0;
}

/* Custom select appearance */
.form-group select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%2300004b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

.form-group select:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.form-group select option[value=''] {
	color: var(--text-subtle);
}

/* ============================================================
   SEARCHABLE LOCATION SELECT
   ============================================================ */
.csf-location-select {
	position: relative;
}

.csf-location-search {
	width: 100%;
	padding: 12px 40px 12px 16px;
	border: 1px solid var(--border-strong, #c4c9d4);
	border-radius: 8px;
	font-size: 16px;
	color: var(--text-default);
	background: var(--layer-white);
	transition: all 0.2s ease;
	font-family: 'Raleway', sans-serif;
	cursor: pointer;
	box-sizing: border-box;
}

.csf-location-search:focus {
	outline: none;
	border-color: var(--blue-500);
	box-shadow: 0 0 0 3px rgba(1, 115, 230, 0.1);
	cursor: text;
}

.csf-location-search::placeholder {
	color: var(--text-subtle);
	opacity: 0.5;
}

.csf-location-arrow {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	pointer-events: none;
	transition:
		transform 0.2s ease,
		opacity 0.2s ease;
}

.csf-location-select.open .csf-location-arrow {
	transform: translateY(-50%) rotate(180deg);
}

/* Icône loupe quand le dropdown est ouvert */
.csf-location-select.is-searching .csf-location-arrow {
	opacity: 0;
}

.csf-location-select.is-searching::before {
	content: '';
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
	z-index: 1;
}

.csf-location-select.is-searching .csf-location-search {
	padding-left: 38px;
}

/* Bouton de réinitialisation (×) */
.csf-location-clear {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	color: var(--text-subtle);
	border-radius: 50%;
	transition:
		background 0.15s ease,
		color 0.15s ease;
	z-index: 1;
	touch-action: manipulation;
	/* Zone tactile étendue via pseudo-élément (44×44px minimum WCAG) */
}

.csf-location-clear::after {
	content: '';
	position: absolute;
	inset: -8px;
}

.csf-location-clear svg {
	width: 12px;
	height: 12px;
	display: block;
	flex-shrink: 0;
}

.csf-location-clear:hover {
	background: #f3f4f6;
	color: var(--text-default);
}

.csf-location-select.has-value .csf-location-clear,
.csf-location-select.is-typing .csf-location-clear {
	display: flex;
}

.csf-location-select.has-value .csf-location-arrow,
.csf-location-select.is-typing .csf-location-arrow {
	display: none;
}

.csf-location-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var(--layer-white);
	border: 1px solid var(--border-default);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	max-height: 220px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	z-index: 200;
}

@media (max-width: 600px) {
	.csf-location-dropdown {
		max-height: 40dvh; /* suit le viewport même quand le clavier virtuel est ouvert */
	}
}

.csf-location-select.open .csf-location-dropdown {
	display: block;
}

.csf-location-item {
	width: 100%;
	padding: 10px 16px;
	text-align: left;
	background: none;
	border: none;
	font-size: 14px;
	color: var(--text-default);
	font-family: 'Raleway', sans-serif;
	cursor: pointer;
	transition: background 0.15s ease;
	display: block;
	touch-action: manipulation;
	min-height: 44px; /* zone tactile mobile */
}

.csf-location-item:hover,
.csf-location-item:focus {
	background: #f0f7ff;
	outline: none;
}

.csf-location-item--selected {
	background: #f0f7ff;
	color: var(--blue-500);
	font-weight: 600;
}

.csf-location-no-results {
	padding: 12px 16px;
	font-size: 14px;
	color: var(--text-subtle);
	font-family: 'Raleway', sans-serif;
	text-align: center;
}

/* Validation states */
.csf-form-group.csf-error .csf-location-search {
	border-color: var(--red-500, #ef4444);
	background-color: rgba(239, 68, 68, 0.02);
}

.csf-form-group.csf-success .csf-location-search {
	border-color: var(--green-500, #22c55e);
}

/* Character counter */
.char-counter {
	font-size: 13px;
	color: var(--text-subtle);
	font-weight: 500;
	flex-shrink: 0;
	align-self: flex-end;
}

/* Attachment Section */
.form-attachment {
	background: transparent;
	border-radius: 8px;
	padding: 8px;
	border: 1px solid #e7eaef;
}

.attachment-option {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.attachment-option input[type='checkbox'] {
	width: 16px;
	height: 16px;
	accent-color: var(--blue-500);
}

.attachment-option label {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-default);
	cursor: pointer;
}

.evaluation-preview {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	background: #f5f5f5;
	border-radius: 8px;
	border: 1px solid var(--border-default);
}

.eval-icon {
	position: relative;
	width: 40px;
	height: 40px;
}

.eval-icon svg {
	transform: rotate(-90deg);
}

.eval-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.eval-text span {
	font-size: 14px;
	color: var(--text-subtle);
}

.eval-text strong {
	font-size: 16px;
	font-weight: 600;
	color: var(--blue-600);
}

/* Submit Button */
.btn-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 24px;
	background: var(--blue-500);
	color: white;
	border: none;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 600;
	font-family: 'Raleway', sans-serif;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-top: 8px;
}

.btn-submit:hover {
	background: var(--blue-600);
	transform: translateY(-1px);
}

.btn-submit:active {
	transform: translateY(0);
}

/* État désactivé du bouton */
.btn-submit:disabled {
	background: var(--slate-400);
	color: rgba(255, 255, 255, 0.7);
	cursor: not-allowed;
	transform: none;
	pointer-events: none;
}

.btn-submit:disabled:hover {
	background: var(--slate-400);
	transform: none;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.drawer {
		width: 100%;
		max-width: 100vw;
	}

	.drawer-columns {
		flex-direction: column;
	}

	.drawer-col--left::after {
		display: none;
	}

	.drawer-col {
		padding: 20px 20px;
	}

	/* Pas de séparateur vertical en mobile : les champs reprennent toute la largeur */
	.contact-form .form-group > input:not([type='checkbox']):not([type='hidden']),
	.contact-form .form-group > select,
	.contact-form .form-group > .csf-validation-message,
	.contact-form .csf-location-select,
	.contact-form .csf-phone-input {
		width: 100%;
	}

	.contact-form .csf-form-group .csf-validation-icon {
		right: 12px;
	}

	.drawer-header--hero {
		padding: 24px 20px 20px;
	}
}

/* ============================================================
   FORM VALIDATION STYLES — Real-time feedback
   ============================================================ */

/* Validation states */
.csf-form-group.csf-error input,
.csf-form-group.csf-error textarea,
.csf-form-group.csf-error select {
	border-color: var(--red-400);
	box-shadow: 0 0 0 3px rgba(255, 100, 103, 0.1);
}

.csf-form-group.csf-success input,
.csf-form-group.csf-success textarea,
.csf-form-group.csf-success select {
	border-color: var(--green-500);
	box-shadow: 0 0 0 3px rgba(74, 168, 45, 0.1);
}

/* Validation message */

.contact-message-info {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-top: 6px;
	min-height: 20px;
}

.csf-validation-message {
	display: none;
	font-size: 14px;
	line-height: 1.4;
	padding: 8px 12px;
	border-radius: 6px;
	font-weight: 500;
	animation: csf-fadeInUp 0.2s ease;
	flex: 1;
	min-width: 0;
}

.csf-validation-message.csf-error {
	display: flex;
	color: var(--red-800);
	background: var(--red-50);
	border: 1px solid rgba(255, 100, 103, 0.2);
}

.csf-validation-message.csf-success {
	display: flex;
	color: var(--green-dark);
	background: var(--green-50);
	border: 1px solid rgba(74, 168, 45, 0.2);
}

.csf-validation-icon {
	position: absolute;
	right: 12px;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* Position spécifique pour chaque type d'icône */
.csf-validation-icon.csf-error-icon {
	top: 41%;
}

.csf-validation-icon.csf-success-icon {
	top: 51%;
}

/* Pour le select : pas d'icône de validation (la flèche occupe la zone) */
.csf-form-group:has(select) .csf-validation-icon {
	display: none;
}

.csf-form-group {
	position: relative;
}

.csf-form-group.csf-error .csf-validation-icon.csf-error-icon,
.csf-form-group.csf-success .csf-validation-icon.csf-success-icon {
	opacity: 1;
}

/* Animation for validation message appearance */
@keyframes csf-fadeInUp {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ============================================================
   HEADER RESPONSIVE — Progressive Mobile Optimization
   ============================================================ */

/* Étape 1: 840px-768px — Compression Douce */
@media (max-width: 840px) {
	.header-left {
		gap: 12px; /* Réduction de 16px → 12px */
	}

	.header-actions {
		gap: 8px; /* Réduction de 12px → 8px */
	}

	.header-title-main {
		font-size: 15px; /* Réduction de 16px → 15px */
	}

	.header-title-sub {
		font-size: 11px; /* Réduction de 12px → 11px */
	}

	/* Réduction padding latéral des boutons */
	.btn {
		padding-left: 14px; /* Réduction de 2px */
		padding-right: 14px;
	}
}

/* Étape 2: 1000px-600px — Sous-titre Compact */
@media (max-width: 1000px) {
	.header-title-sub span {
		/* Masquer le texte original */
		font-size: 0;
		line-height: 0;
	}

	.header-title-sub span::after {
		/* Afficher texte compact */
		content: 'CSF 1.2.1';
		font-size: 11px;
		line-height: 16px;
		display: inline;
	}

	/* L'icône reste visible normalement */

	/* Intro Section responsive */
	.intro-section {
		padding: 32px var(--side-padding) 0;
	}

	.intro-title {
		font-size: 28px;
		line-height: 36px;
	}
}

/* Étape 3: 670px-480px — Menu Hamburger */
@media (max-width: 670px) {
	/* Fix titre entre 601-634px */
	.header-title-main {
		font-size: 14px;
		line-height: 20px;
		word-break: break-word;
	}

	/* Masquer boutons individuels pour menu hamburger */
	#langBtn,
	#resetBtn,
	#exportBtn {
		display: none;
	}

	/* Afficher menu hamburger */
	.hamburger-menu {
		display: flex !important;
	}

	/* Intro Section responsive */
	.intro-section {
		padding: 24px 24px 0;
	}

	.intro-title {
		font-size: 24px;
		line-height: 32px;
		margin-bottom: 12px;
	}

	.intro-description {
		font-size: 15px;
		line-height: 22px;
	}

	.header-left {
		gap: 10px;
	}

	.header-actions {
		gap: 8px;
		align-items: center;
		/* Seul le menu hamburger reste visible */
		justify-content: flex-end;
	}

	/* Menu hamburger */
	.hamburger-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: 1px solid var(--border-default);
		background: var(--layer-white);
		border-radius: 8px;
		cursor: pointer;
		transition: all 0.2s ease;
		padding: 0;
	}

	.hamburger-btn:hover {
		background: var(--slate-50);
		border-color: var(--border-hover);
	}

	.hamburger-icon {
		width: 20px;
		height: 20px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.hamburger-icon span {
		display: block;
		height: 2px;
		width: 16px;
		background: var(--text-default);
		border-radius: 1px;
		transition: all 0.3s ease;
	}

	/* Animation hamburger ouvert */
	.hamburger-btn.open .hamburger-icon span:nth-child(1) {
		transform: rotate(45deg) translate(6px, 6px);
	}

	.hamburger-btn.open .hamburger-icon span:nth-child(2) {
		opacity: 0;
	}

	.hamburger-btn.open .hamburger-icon span:nth-child(3) {
		transform: rotate(-45deg) translate(6px, -6px);
	}

	/* Menu déroulant */
	.hamburger-dropdown {
		position: absolute;
		top: calc(100% + 8px);
		right: 0;
		background: var(--layer-white);
		border: 1px solid var(--border-default);
		border-radius: 12px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
		min-width: 220px; /* Augmentation pour boutons langue */
		z-index: 1000;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: all 0.2s ease;
		padding: 8px;
	}

	.hamburger-dropdown.open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.hamburger-dropdown .btn {
		width: 100%;
		justify-content: flex-start;
		margin-bottom: 4px;
		padding: 10px 14px;
		font-size: 14px;
	}

	.hamburger-dropdown .btn:last-child {
		margin-bottom: 0;
	}

	/* Section langue dans hamburger */
	.hamburger-lang-section {
		display: flex;
		gap: 4px;
		margin-bottom: 4px;
	}

	.btn-lang {
		flex: 1;
		padding: 8px 10px !important;
		font-size: 13px !important;
		font-weight: 600;
		text-align: center;
		justify-content: center !important;
		border: 1px solid var(--border-default) !important;
		background: var(--layer-white) !important;
		color: var(--text-subdued) !important;
		transition: all 0.2s ease;
	}

	.btn-lang.active {
		background: var(--blue-500) !important;
		color: white !important;
		border-color: var(--blue-500) !important;
	}

	.btn-lang:hover {
		background: var(--slate-50) !important;
		border-color: var(--border-hover) !important;
	}

	.btn-lang.active:hover {
		background: var(--navy-dark) !important;
	}

	/* Séparateur dans hamburger */
	.hamburger-divider {
		height: 1px;
		background: var(--border-default);
		margin: 8px 0;
	}
}

/* Étape 4: <480px — Layout Mobile Compact */
@media (max-width: 480px) {
	.header-inner {
		padding: 12px var(--side-padding); /* Réduction padding vertical */
		height: auto; /* Hauteur flexible */
		min-height: 60px;
	}

	.header-left {
		gap: 8px;
	}

	.logo-image {
		width: 70px; /* Réduction de 94px → 70px */
		height: 24px; /* Proportionnel */
	}

	.header-title-main {
		font-size: 13px; /* Encore plus petit sur très petit écran */
		line-height: 16px;
		/* Permettre retour à la ligne si nécessaire */
		word-break: break-word;
	}

	/* Ajustement séparateur pour petit écran */
	.header-separator {
		height: 20px; /* Réduction de 24px → 20px */
	}

	/* Optimisation bouton Export et hamburger restant */
	.btn {
		padding: 8px 12px; /* Plus compact */
	}

	/* Intro Section responsive mobile */
	.intro-section {
		padding: 20px 16px 0;
	}

	.intro-title {
		font-size: 22px;
		line-height: 28px;
		margin-bottom: 10px;
	}

	.intro-description {
		font-size: 14px;
		line-height: 20px;
	}

	/* Menu hamburger plus compact */
	.hamburger-btn {
		width: 36px;
		height: 36px;
	}

	.hamburger-dropdown {
		min-width: 200px; /* Ajusté pour boutons langue */
	}
}

/* ============================================================
   SOV TITLES RESPONSIVE — Fix débordement titres longs
   ============================================================ */

/* Étape 5: <600px — Fix débordement SOV header global */
@media (max-width: 600px) {
	/* Restructuration complète du header SOV */
	.sov-header {
		flex-wrap: wrap; /* Permettre retour à la ligne */
		gap: 12px 8px; /* Espacement vertical et horizontal */
		justify-content: flex-start; /* Alignement naturel */
		align-items: flex-start; /* Alignement en haut pour éléments multi-lignes */
	}

	/* Section gauche : badge + titre */
	.sov-header-left {
		flex: 1 1 0; /* Flexible, prend l'espace disponible */
		min-width: 0; /* Permet rétrécissement */
		max-width: calc(100% - 120px); /* Réserve espace pour éléments droite */
	}

	/* Section droite : poids + status */
	.sov-header-right {
		flex: 0 0 auto; /* Taille fixe */
		gap: 6px; /* Réduction espacement */
	}

	/* Titre : permettre retour à la ligne */
	.sov-title {
		white-space: normal; /* Override nowrap */
		font-size: 15px; /* Réduction */
		line-height: 20px;
		word-break: break-word; /* Gestion mots longs */
		hyphens: auto; /* Césures automatiques si supporté */
	}

	/* Badge plus compact */
	.sov-badge {
		font-size: 13px;
		padding: 2px 6px;
		height: auto; /* Hauteur flexible */
		min-width: 44px; /* Largeur minimale */
		flex-shrink: 0; /* Ne pas rétrécir */
	}

	/* Bouton poids plus compact */
	.sov-weight {
		font-size: 13px;
		padding: 0 3px 0 6px;
		height: 22px;
		gap: 1px;
	}

	.sov-weight svg {
		width: 18px;
		height: 18px;
	}

	/* Status plus compact */
	.sov-status {
		width: 18px;
		height: 18px;
	}

	.sov-status-inner {
		width: 13px;
		height: 13px;
	}
}

/* Étape 6: <569px — Optimisations supplémentaires */
@media (max-width: 569px) {
	/* Header SOV en mode colonne si vraiment trop étroit */
	.sov-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	/* Section droite alignée à droite même en mode colonne */
	.sov-header-right {
		align-self: flex-end;
		margin-top: -4px; /* Compensation visuelle */
	}

	/* Titre encore plus compact */
	.sov-title {
		font-size: 14px;
		line-height: 18px;
	}

	/* Badge encore plus compact */
	.sov-badge {
		font-size: 12px;
		padding: 1px 5px;
		min-width: 40px;
	}

	/* Assurer que le header entier utilise l'espace correctement */
	.sov-header {
		margin-bottom: 24px; /* Réduction de 32px */
	}

	/* Prévenir débordement global container */
	.sov-card {
		overflow: hidden; /* Sécurité anti-débordement */
		padding: 16px 20px 20px; /* Réduction du padding */
	}
}

/* ============================================================
   NOTIFICATIONS SYSTÈME — Gestion d'erreur export PDF
   ============================================================ */
.csf-notification {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%) translateY(-100px);
	opacity: 0;
	z-index: 10000;
	min-width: 320px;
	max-width: 500px;
	background: var(--layer-white);
	border-radius: 8px;
	border: 1px solid var(--border-default);
	box-shadow: var(--shadow-md);
	padding: 16px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	transition: all 0.3s ease;
	font-family:
		'Raleway',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
}

.csf-notification--show {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
}

.csf-notification--info {
	border-left: 4px solid var(--blue-500);
}

.csf-notification--error {
	border-left: 4px solid var(--red-400);
}

.csf-notification__content {
	flex: 1;
}

.csf-notification__title {
	font-weight: 600;
	color: var(--text-title);
	font-size: 14px;
	margin-bottom: 4px;
}

.csf-notification__message {
	color: var(--text-default);
	font-size: 13px;
	line-height: 18px;
}

.csf-notification__close {
	flex-shrink: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-muted);
	padding: 4px;
	border-radius: 4px;
	transition:
		color 0.2s ease,
		background-color 0.2s ease;
}

.csf-notification__close:hover {
	color: var(--text-default);
	background-color: var(--layer-subtle);
}

/* Mobile notifications */
@media (max-width: 480px) {
	.csf-notification {
		left: 16px;
		right: 16px;
		transform: translateY(-100px);
		max-width: none;
		min-width: auto;
	}

	.csf-notification--show {
		transform: translateY(0);
	}
}

/* ============================================================
   MODE IMPRESSION — Optimisation export PDF
   ============================================================ */
@media print {
	/* Masquer les éléments non pertinents pour l'impression */
	.header,
	.btn,
	.hamburger-menu,
	.csf-notification {
		display: none !important;
	}

	/* Ajuster la mise en page pour l'impression */
	body {
		margin: 0;
		padding: 20px;
		font-size: 12pt;
		line-height: 1.4;
		color: #000;
	}

	.app-container {
		display: block;
		margin: 0;
		padding: 0;
	}

	.main-content {
		margin: 0;
		padding: 0;
		width: 100%;
	}

	.sidebar {
		width: 100%;
		margin-bottom: 30px;
	}

	/* Optimiser la taille des cartes pour l'impression */
	.sov-card {
		break-inside: avoid;
		margin-bottom: 20px;
		box-shadow: none;
		border: 1px solid #ddd;
	}

	.sov-card .sov-body {
		display: block !important;
	}

	.sov-chevron,
	.min-required,
	.weight-dropdown {
		display: none !important;
	}

	.question-answer:not(.selected) {
		display: none;
	}

	/* S'assurer que les graphiques sont visibles */
	.radar-container,
	.score-container {
		break-inside: avoid;
		margin-bottom: 20px;
	}

	/* Ajuster les couleurs pour l'impression N&B */
	.sov-badge--compliant {
		background: #e6f0e4 !important;
		color: #000 !important;
	}

	.sov-badge--non-compliant {
		background: #fef2f2 !important;
		color: #000 !important;
	}
}

/* Classe pour masquer certains éléments pendant l'export */
.print-mode .csf-notification {
	display: none !important;
}

/* ── Cookie Consent Banner ─────────────────────────────────────────────────── */
.cookie-banner {
	position: fixed;
	left: 32px;
	right: auto;
	bottom: 32px;
	width: min(1094px, calc(100vw - 64px));
	z-index: 9999;
	background: #0073e6;
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2);
	padding: 32px;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 40px;
}

.cookie-banner-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 980px;
}

.cookie-banner-title {
	margin: 0;
	font-size: 20px;
	line-height: 1.2;
	font-weight: 800;
	color: #ffffff;
}

.cookie-intro {
	margin: 0;
	font-size: 16px;
	line-height: 1.38;
	font-weight: 475;
	color: #ffffff;
}

.cookie-intro a {
	color: #ffffff;
	text-decoration: underline;
}

.cookie-banner-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 8px;
	width: 170px;
}

.cookie-btn {
	min-height: 38px;
	padding: 8px 14px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	border: 1px solid transparent;
	font-family: 'Raleway', sans-serif;
}

.cookie-btn-primary {
	background: #0078d7;
	color: #ffffff;
	border-color: #0078d7;
}

.cookie-btn-primary:hover {
	background: #006ec6;
}

.cookie-btn-secondary {
	background: #ffffff;
	color: #1d2d6b;
	border-color: #d1d5db;
}

.cookie-btn-secondary:hover {
	background: #f9fafb;
}

.cookie-btn-light {
	background: #ffffff;
	color: #1d2d6b;
	border-color: #e5e7eb;
}

.cookie-btn-light:hover {
	background: #f4f6fb;
}

.cookie-rows {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.cookie-row {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.cookie-row-info {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.cookie-row-label {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.5;
	color: #00005c;
}

.cookie-row-desc {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: #00005c;
}

.cookie-row-required {
	align-items: flex-start;
}

.cookie-row-detail {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: #00005c;
}

.cookie-toggle {
	position: relative;
	display: inline-block;
	width: 32px;
	height: 20px;
	flex-shrink: 0;
	cursor: pointer;
	margin-top: 5px;
}

.cookie-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

.cookie-toggle-track {
	position: absolute;
	inset: 0;
	background: #d1d5db;
	border-radius: 999px;
	transition: background 0.2s;
}

.cookie-toggle-track::after {
	content: '';
	position: absolute;
	left: 3px;
	top: 3px;
	width: 14px;
	height: 14px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s;
}

.cookie-toggle input:checked + .cookie-toggle-track {
	background: #1b7de2;
}

.cookie-toggle input:checked + .cookie-toggle-track::after {
	transform: translateX(12px);
}

.cookie-toggle input:focus-visible + .cookie-toggle-track {
	outline: 2px solid #00005c;
	outline-offset: 2px;
}

.cookie-toggle-disabled {
	cursor: not-allowed;
	opacity: 1;
}

.cookie-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(16, 24, 40, 0.42);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px;
}

.cookie-modal {
	width: min(1000px, calc(100vw - 44px));
	max-height: calc(100dvh - 56px);
	background: #ffffff;
	border-radius: 0;
	border: 1px solid #e8ecf2;
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
	padding: 30px 32px 30px;
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow-y: auto;
}

.cookie-modal-header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	margin-bottom: 8px;
}

.cookie-modal-header h3 {
	margin: 0;
	font-size: 22px;
	line-height: 1.5;
	font-weight: 800;
	color: #00005c;
}

.cookie-modal-intro {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.35;
	font-weight: 500;
	color: #00005c;
}

.cookie-modal a {
	color: #0078d7;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	font-weight: 500;
}

.cookie-modal a:hover {
	color: #0063b1;
}

.cookie-modal a:focus-visible {
	outline: 2px solid #00005c;
	outline-offset: 2px;
	border-radius: 2px;
}

.cookie-modal-top-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 4px;
	padding-bottom: 22px;
	margin-bottom: 24px;
	border-bottom: 1px solid #dbe2ef;
}

.cookie-modal-actions {
	display: flex;
	justify-content: flex-start;
	gap: 8px;
	padding-top: 24px;
}

.cookie-modal-actions .cookie-btn-primary {
	min-width: 162px;
}

.cookie-modal .cookie-btn {
	border-radius: 1px;
	min-height: 40px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 550;
	line-height: 1.2;
}

.cookie-modal-top-actions .cookie-btn-secondary {
	background: #ffffff;
	color: #00005c;
	border-color: #e7eaef;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.cookie-modal-actions .cookie-btn-primary {
	background: #0078d7;
	border-color: #0078d7;
	color: #ffffff;
}

.cookie-modal-actions .cookie-btn-primary:hover {
	background: #006ec6;
	border-color: #006ec6;
}

@media (max-width: 768px) {
	.cookie-banner {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
		padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		max-height: calc(100dvh - 24px - env(safe-area-inset-top));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.cookie-banner,
	.cookie-modal,
	.cookie-banner-content,
	.cookie-row-info,
	.cookie-intro,
	.cookie-row-desc,
	.cookie-row-detail,
	.cookie-modal-intro {
		min-width: 0;
		max-width: 100%;
	}

	.cookie-banner-actions {
		width: 100%;
	}

	.cookie-banner-actions .cookie-btn {
		width: 100%;
		min-height: 44px;
	}

	.cookie-row-desc,
	.cookie-row-detail,
	.cookie-modal-intro {
		font-size: 14px;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.cookie-intro,
	.cookie-intro a,
	.cookie-row-detail a,
	.cookie-modal a {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.cookie-btn {
		flex: 1 1 auto;
		min-height: 40px;
	}

	.cookie-row {
		align-items: flex-start;
		gap: 12px;
	}

	.cookie-modal-overlay {
		padding: 14px;
		align-items: center;
	}

	.cookie-modal {
		width: min(100%, calc(100vw - 28px));
		max-height: calc(100dvh - 28px);
		padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.cookie-modal-top-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.cookie-modal-actions {
		flex-direction: column;
	}

	.cookie-modal-actions .cookie-btn {
		width: 100%;
		min-height: 44px;
	}

	.cookie-modal a {
		overflow-wrap: anywhere;
	}
}

/* ============================================================
	PHONE DIAL CODE SELECTOR
	============================================================ */
.csf-phone-input {
	display: flex;
	position: relative;
	border: 1px solid var(--border-strong, #c4c9d4);
	border-radius: 8px;
	overflow: visible;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.csf-phone-input:focus-within {
	border-color: var(--blue-500);
	box-shadow: 0 0 0 3px rgba(1, 115, 230, 0.1);
}

.csf-form-group.csf-error .csf-phone-input {
	border-color: var(--red-500, #ef4444);
	background-color: rgba(239, 68, 68, 0.02);
}

.csf-form-group.csf-success .csf-phone-input {
	border-color: var(--green-500, #22c55e);
}

.csf-phone-dial-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 10px 12px 14px;
	background: #f8f9fa;
	border: none;
	border-right: 1px solid var(--border-default);
	border-radius: 7px 0 0 7px;
	cursor: pointer;
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	color: var(--text-default);
	white-space: nowrap;
	transition: background 0.15s ease;
	flex-shrink: 0;
}

.csf-phone-dial-btn:hover {
	background: #eef1f4;
}

.csf-phone-dial-btn.open {
	background: #eef1f4;
}

.csf-phone-dial-flag {
	font-size: 18px;
	line-height: 1;
}

.csf-phone-dial-code {
	font-weight: 600;
	font-size: 14px;
	color: var(--text-default);
	font-variant-numeric: lining-nums tabular-nums;
}

.csf-phone-dial-arrow {
	width: 12px;
	height: 12px;
	color: var(--text-subtle);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.csf-phone-dial-btn.open .csf-phone-dial-arrow {
	transform: rotate(180deg);
}

.csf-phone-number-input {
	flex: 1;
	border: none;
	padding: 12px 16px;
	font-size: 16px;
	color: var(--text-default);
	background: var(--layer-white);
	font-family: 'Raleway', sans-serif;
	font-variant-numeric: lining-nums tabular-nums;
	border-radius: 0 7px 7px 0;
	min-width: 0;
}

.csf-phone-number-input:focus {
	outline: none;
	box-shadow: none;
}

/* Override .form-group input styles for inputs inside phone component */
.csf-phone-input input {
	border: none;
	border-radius: 0;
	box-shadow: none;
}

/* Restore right border-radius on the number input (higher specificity than .csf-phone-input input) */
.csf-phone-input .csf-phone-number-input {
	border-radius: 0 8px 8px 0;
}

.csf-phone-input input:focus {
	border: none;
	box-shadow: none;
}

.csf-phone-number-input::placeholder {
	color: var(--text-subtle);
	opacity: 0.5;
}

/* Phone hint (example) */
.csf-phone-hint {
	font-size: 12px;
	color: var(--text-subtle);
	margin-top: 4px;
	min-height: 16px;
	font-variant-numeric: lining-nums tabular-nums;
}

/* Dropdown */
.csf-phone-dial-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var(--layer-white);
	border: 1px solid var(--border-default);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	z-index: 200;
	overflow: hidden;
}

.csf-phone-dial-dropdown.open {
	display: block;
}

.csf-phone-dial-search {
	width: 100%;
	padding: 10px 14px;
	border: none;
	border-bottom: 1px solid var(--border-default);
	font-size: 14px;
	color: var(--text-default);
	font-family: 'Raleway', sans-serif;
	background: #fafbfc;
	box-sizing: border-box;
}

.csf-phone-dial-search:focus {
	outline: none;
	background: var(--layer-white);
}

.csf-phone-dial-search::placeholder {
	color: var(--text-subtle);
	opacity: 0.5;
}

.csf-phone-dial-list {
	max-height: 200px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
	.csf-phone-dial-list {
		max-height: 35dvh;
	}
}

.csf-phone-dial-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 14px;
	text-align: left;
	background: none;
	border: none;
	font-size: 14px;
	color: var(--text-default);
	font-family: 'Raleway', sans-serif;
	cursor: pointer;
	transition: background 0.15s ease;
	min-height: 44px;
	touch-action: manipulation;
}

.csf-phone-dial-item:hover,
.csf-phone-dial-item:focus {
	background: #f0f7ff;
	outline: none;
}

.csf-phone-dial-item--selected {
	background: #f0f7ff;
	font-weight: 600;
}

.csf-phone-dial-item-flag {
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
}

.csf-phone-dial-item-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.csf-phone-dial-item-code {
	color: var(--text-subtle);
	font-size: 13px;
	font-weight: 500;
	flex-shrink: 0;
}

.csf-form-group.csf-error .csf-phone-input {
	border-color: var(--red-500, #ef4444);
	background-color: rgba(239, 68, 68, 0.02);
}

.csf-form-group.csf-success .csf-phone-input {
	border-color: var(--green-500, #22c55e);
}

/* Validation icon positioned relative to phone input row (not full form-group) */
.csf-form-group:has(.csf-phone-input) .csf-validation-icon {
	top: 39px;
	transform: none;
}

.csf-phone-dial-no-results {
	padding: 12px 16px;
	font-size: 14px;
	color: var(--text-subtle);
	text-align: center;

}

/* ============================================================
   Figma Dashboard Refresh
   ============================================================ */
.content-wrapper {
	display: block;
}

.main-content--dashboard {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.dashboard-layout {
	display: grid;
	grid-template-columns: 1fr minmax(280px, 330px);
	gap: 32px;
	align-items: start;
}

.dashboard-main-column {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dashboard-main-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 16px;
}

.score-card--hero,
.dashboard-mini-card,
.dashboard-side-card,
.sov-table-panel,
.privacy-card--dashboard {
	background: var(--layer-white);
	border: 1px solid var(--border-default);
	border-radius: 16px;
	box-shadow: var(--shadow-xs);
}

.score-card--hero {
	padding: 24px 32px;
	border-radius: 1px;
	min-height: 273px;
	height: 273px;
	position: relative;
	overflow: hidden;
}

.score-card-head {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 24px;
}

.score-card--hero .card-title {
	font-size: 18px;
	line-height: 1;
	font-weight: 800;
	color: #00004b;
}

.score-card-caption,
.dashboard-mini-card-help,
.dashboard-side-card-help,
.sov-table-header-caption {
	font-size: 13px;
	line-height: 20px;
	color: var(--text-subtle);
}

.score-hero-content {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 180px;
	position: relative;
}

.score-locked {
	position: absolute;
	top: -12px;
	left: -32px;
	right: -32px;
	bottom: -24px;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	z-index: 3;
}

.score-locked[hidden] {
	display: none;
}

.score-locked-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: #00004b;
	margin: 0;
}

.score-locked-body {
	max-width: 281px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: #00004b;
	margin: 0;
}

.score-hero-chart-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-shrink: 0;
}

.gauge-container--hero {
	width: 120px;
	height: 120px;
	flex-shrink: 0;
}

.gauge-container--hero canvas {
	display: block;
	width: 120px !important;
	height: 120px !important;
}

.gauge-container--hero .gauge-value {
	font-size: 26px;
	line-height: 1;
	font-weight: 800;
	color: #0073e6;
}

.score-hero-impact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.score-hero-impact-value {
	font-size: 16px;
	line-height: 1;
	font-weight: 800;
	color: #00005c;
}

.score-hero-impact-label {
	font-size: 12px;
	line-height: 1;
	font-weight: 500;
	color: #00005c;
}

.score-hero-divider {
	width: 1px;
	height: 180px;
	background: #e7eaef;
	flex-shrink: 0;
}

.score-details-panel {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	min-width: 0;
}

.score-details-header {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.score-details-title {
	font-size: 14px;
	line-height: 1;
	font-weight: 800;
	color: #00004b;
}

.score-details-info {
	color: #0073e6;
	flex-shrink: 0;
	cursor: pointer;
}

.score-info-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	outline: none;
}

.score-info-tooltip {
	display: none;
	position: fixed;
	width: 280px;
	background: var(--layer-white);
	border: 1px solid var(--border-default);
	border-radius: 8px;
	padding: 16px;
	box-shadow: 0px 4px 8px -2px rgba(20, 34, 38, 0.16), 0px 2px 4px -2px rgba(20, 34, 38, 0.08);
	z-index: 200;
	text-align: left;
	pointer-events: none;
}

.score-info-wrap:hover .score-info-tooltip,
.score-info-wrap:focus .score-info-tooltip,
.score-info-wrap:focus-within .score-info-tooltip {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.score-info-tooltip-title {
	font-size: 14px;
	font-weight: 750;
	line-height: 1.25;
	color: #00004b;
	margin: 0;
}

.score-info-tooltip-body {
	font-size: 12px;
	font-weight: 475;
	line-height: 1.5;
	color: #00004b;
	margin: 0;
}

.score-info-tooltip-body strong {
	font-weight: 675;
}

.score-details-rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	overflow: hidden;
}

.score-detail-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.score-detail-main {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.score-detail-label {
	width: 38px;
	font-size: 12px;
	font-weight: 600;
	line-height: 13px;
	color: #00005c;
	white-space: nowrap;
}

.score-detail-track {
	width: var(--track-width, 90px);
	max-width: 120px;
	min-width: 24px;
	height: 9px;
	background: #e9edf2;
	border-radius: 999px;
	overflow: hidden;
	flex-shrink: 1;
}

.score-detail-fill {
	height: 100%;
	background: #0073e6;
	border-radius: 999px;
}

.score-detail-value {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	white-space: nowrap;
	flex-shrink: 0;
	width: auto;
	min-width: 75px;
	max-width: none;
	color: #00005c;
	font-size: 12px;
	line-height: 1;
}

.score-detail-value-current {
	min-width: 29px;
	text-align: right;
	font-weight: 800;
	padding-right: 3px;
}

.score-detail-value-sep,
.score-detail-value-max {
	font-weight: 500;
}

.score-detail-value-max {
	min-width: 38px;
	text-align: right;
}

.dashboard-side-cards,
.dashboard-side-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cta-card--dashboard {
	border-radius: 1px;
	min-height: 348px;
}

.cta-card--dashboard .cta-content {
	gap: 40px;
}

.cta-card--dashboard .cta-title {
	line-height: 1.2;
}

.dashboard-side-stack--hero {
	width: 330px;
	gap: 16px;
	position: sticky;
	top: calc(var(--header-height) + 32px);
	align-self: start;
}

.dashboard-privacy-note {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	color: #00004b;
}

.dashboard-privacy-note-title {
	font-size: 16px;
	line-height: 1.25;
	font-weight: 750;
	margin: 0;
}

.dashboard-privacy-note-body {
	font-size: 14px;
	line-height: 20px;
	font-weight: 475;
	margin: 0;
}

.dashboard-mini-card,
.dashboard-side-card {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 148px;
}

.dashboard-mini-card--target-seal,
.dashboard-side-card--target-seal {
	padding: 24px 32px;
	border-radius: 1px;
	gap: 16px;
	height: 273px;
	overflow: hidden;
}

.target-seal-section,
.seal-score-section {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.target-seal-section {
	gap: 12px;
}

.seal-score-section {
	gap: 16px;
}

.seal-score-locked {
	position: absolute;
	top: -8px;
	left: -32px;
	right: -32px;
	bottom: -24px;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	padding: 0 16px;
	z-index: 3;
}

.seal-score-locked .score-locked-title {
	font-size: 14px;
}

.seal-score-locked .score-locked-body {
	font-size: 12px;
}

.seal-score-locked[hidden] {
	display: none;
}

.target-seal-heading {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.target-seal-title {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px;
	font-size: 18px;
	line-height: 1;
	font-weight: 700;
	color: #00004b;
}

.target-seal-optional {
	font-size: 16px;
	font-weight: 500;
	color: #00004b;
}

.target-seal-helper,
.seal-score-helper {
	font-size: 12px;
	line-height: 1.3;
	font-weight: 500;
	color: #00004b;
}

.target-seal-helper {
	width: 100%;
}

.seal-score-helper {
	width: 100%;
	max-width: 270px;
}

.target-seal-divider {
	align-self: stretch;
	height: 1px;
	background-color: #e7eaef;
	flex-shrink: 0;
}

.seal-score-title {
	font-size: 16px;
	line-height: 1;
	font-weight: 700;
	color: #00004b;
}

.seal-score-body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.seal-score-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.seal-score-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 10px;
	border-radius: 9999px;
	border: 1px solid rgba(46, 105, 163, 0.16);
	background: #f2f8fe;
	font-size: 14px;
	line-height: 20px;
	font-weight: 650;
	color: #2e69a3;
	white-space: nowrap;
}

.seal-score-badge--error {
	background: #fef2f2;
	border-color: #ffc9c9;
	color: #e1020d;
}

.seal-score-badge--success {
	background: #ecfdf5;
	border-color: #a7f3d0;
	color: #047857;
}

.seal-score-sov-title {
	font-size: 14px;
	line-height: 1.2;
	font-weight: 675;
	color: #00004b;
	min-width: 0;
	overflow-wrap: anywhere;
}

.seal-score-status--error {
	color: #e1020d;
	font-weight: 700;
}

.seal-score-status--success {
	color: #047857;
	font-weight: 700;
}

.dashboard-mini-card-label {
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--text-subtle);
}

.target-seal-select {
	width: 200px;
	max-width: 100%;
	height: 42px;
	padding: 10px 36px 10px 12px;
	border: 1px solid var(--border-default);
	border-radius: 6px;
	background: var(--layer-white);
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: 475;
	color: #00004b;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	box-shadow: 0px 1px 2px 0px rgba(20, 34, 38, 0.05);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%2300004B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

.dashboard-seal-score-value {
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
	color: var(--text-title);
}

.dashboard-seal-score-caption {
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--text-subtle);
}

.sov-table-panel {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.sov-table-header-row {
	display: none;
}

.sov-table-header-title {
	font-size: 18px;
	font-weight: 800;
	line-height: 24px;
	color: var(--text-title);
}

.sov-table-body {
	margin-top: 0;
	overflow-x: hidden;
}

.sov-table-grid {
	width: 100%;
	min-width: 0;
	border-left: 1px solid #e7eaef;
	border-right: 1px solid #e7eaef;
	border-bottom: 1px solid #e7eaef;
	background: #ffffff;
}

.sov-table-head,
.sov-table-row {
	display: grid;
	grid-template-columns: minmax(240px, 1.6fr) 88px minmax(140px, 1fr) minmax(140px, 1fr) 52px;
	align-items: center;
}

.sov-table-head {
	height: 40px;
	background: #f3f5f7;
	border-top: 1px solid #e7eaef;
	border-bottom: 1px solid #e7eaef;
}

.sov-table-head .sov-table-cell {
	font-size: 14px;
	line-height: 20px;
	font-weight: 550;
	color: #00004b;
}

.sov-table-head .sov-table-cell--weight {
	justify-self: end;
}

.sov-table-head .sov-table-cell--progress {
	justify-self: start;
}

.sov-table-row {
	height: 56px;
	border-bottom: 1px solid #e7eaef;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.sov-table-row:last-child {
	border-bottom: 0;
}

.sov-table-row:hover {
	background: #f8fbff;
}

.sov-table-row.is-active {
	background: rgba(94, 172, 249, 0.08);
	border-top: 1px solid #0073e6;
	border-left: 1px solid #0073e6;
	border-bottom: 1px solid #0073e6;
}

.sov-table-cell {
	padding: 0 20px;
	min-width: 0;
	overflow: hidden;
}

.sov-table-cell--weight {
	justify-self: end;
}

.sov-table-cell--progress {
	justify-self: start;
}

.sov-table-cell--seal {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sov-table-cell--toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.sov-table-name {
	font-size: 14px;
	line-height: 20px;
	font-weight: 450;
	color: #0073e6;
	text-decoration: underline;
	text-underline-offset: 1px;
	text-decoration-thickness: 1px;
	white-space: nowrap;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sov-table-weight {
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: #00004b;
}

.sov-table-progress-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 9999px;
	font-size: 12px;
	line-height: 1;
	font-weight: 600;
	white-space: nowrap;
}

.sov-table-progress-badge.is-complete {
	background: #f2fef6;
	border: 1px solid #cff2db;
	color: #248243;
}

.sov-table-progress-badge.is-pending {
	background: #f2f6fe;
	border: 1px solid #cfdbf2;
	color: #2e55a3;
}

.sov-table-seal-text {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: #00004b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sov-table-chevron {
	width: 16px;
	height: 16px;
	color: #00004b;
	flex-shrink: 0;
}

.privacy-card--dashboard {
	padding: 20px;
}

.sov-drawer-overlay {
	position: fixed;
	inset: 0;
	background: transparent;
	backdrop-filter: none;
	display: flex;
	justify-content: flex-end;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.24s ease;
	z-index: 115;
}

.sov-drawer-overlay.active {
	opacity: 1;
	pointer-events: none;
}

.sov-drawer {
	pointer-events: auto;
	width: min(720px, 100vw);
	height: 100vh;
	height: 100dvh;
	background: var(--layer-white);
	box-shadow: -8px 0 32px rgba(0, 0, 46, 0.16);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.28s ease;
}

.sov-drawer-overlay.active .sov-drawer {
	transform: translateX(0);
}

.sov-drawer-head {
	padding: 28px 32px 20px;
	background: var(--layer-white);
	border-bottom: 1px solid var(--border-default);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sov-drawer-heading {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.sov-drawer-head-top,
.sov-drawer-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.sov-drawer-progress {
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid #cfdbf2;
	background: #f2f6fe;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: #2e55a3;
}

.sov-drawer-progress.is-complete {
	background: #f2fef6;
	border-color: #cff2db;
	color: #248243;
}

.sov-drawer-close {
	border: 1px solid var(--border-default);
	background: var(--layer-white);
	border-radius: 6px;
	width: 32px;
	height: 32px;
	padding: 8px;
	color: var(--text-title);
	cursor: pointer;
	box-shadow: var(--shadow-xs);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sov-drawer-nav {
	border: 0;
	background: transparent;
	border-radius: 1px;
	min-height: auto;
	padding: 0;
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	font-weight: 475;
	line-height: 20px;
	color: #0073e6;
	cursor: pointer;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-width: 48%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-bottom: 1px;
	border-bottom: 1px solid currentColor;
	text-decoration: none;
}

.sov-drawer-close:hover,
.target-seal-select:hover {
	border-color: #cfdbf2;
}

.sov-drawer-nav:hover {
	color: #0063c8;
}

.sov-drawer-nav[hidden] {
	display: none;
}

.sov-drawer-title {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	color: #00005c;
}

.sov-drawer-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--text-title);
}

.sov-drawer-meta-separator {
	width: 1px;
	height: 16px;
	background: var(--border-default);
}

.sov-drawer-body {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--layer-white);
	padding: 32px 32px 40px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.drawer-question-block {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.drawer-question-title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: #00005c;
}

.drawer-answer-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.drawer-answer {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 550;
	line-height: 20px;
	color: var(--navy-light);
	cursor: pointer;
	user-select: none;
}

.drawer-answer-radio {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1.5px solid #d8dfe8;
	background: white;
	position: relative;
	flex-shrink: 0;
}

.drawer-answer-radio.checked {
	border-color: var(--blue-500);
	background: var(--blue-500);
}

.drawer-answer-radio.checked::after {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: white;
}

.drawer-answer.selected .drawer-answer-text {
	font-weight: 550;
	color: #00005c;
}

.sov-drawer-footer {
	padding: 16px 32px;
	background: var(--layer-white);
	border-top: 1px solid var(--border-default);
}

.sov-drawer-nav:disabled {
	opacity: 0.4;
	cursor: default;
}

body.sov-drawer-open {
	overflow: hidden;
}

@media (max-width: 1100px) {
	.dashboard-layout,
	.dashboard-main-cards {
		grid-template-columns: 1fr;
	}

	.dashboard-side-stack--hero {
		width: 100%;
		position: static;
		top: auto;
	}

	.score-card--hero {
		height: auto;
	}

	.dashboard-mini-card--target-seal,
	.dashboard-side-card--target-seal {
		height: auto;
	}

	.score-hero-content {
		flex-direction: column;
		align-items: flex-start;
	}

	.score-hero-divider {
		display: none;
	}

	.score-details-panel {
		width: 100%;
	}
}

@media (max-width: 780px) {
	.content-wrapper {
		padding-left: 20px;
		padding-right: 20px;
	}

	.intro-section {
		padding-left: 20px;
		padding-right: 20px;
	}

	.score-card--hero {
		padding: 20px;
		min-height: 0;
	}

	.score-hero-chart-block {
		width: 100%;
	}

	.score-locked,
	.seal-score-locked {
		left: -20px;
		right: -20px;
	}

	.dashboard-mini-card--target-seal,
	.dashboard-side-card--target-seal {
		padding: 20px;
		min-height: 0;
	}

	.cta-card--dashboard {
		min-height: 0;
	}

	.cta-card--dashboard .cta-content {
		gap: 28px;
	}

	.cta-card--dashboard .cta-title {
		max-width: none;
		padding-right: 8px;
	}

	.cta-badge {
		max-width: calc(100% - 60px);
		height: auto;
		min-height: 32px;
		line-height: 1.35;
	}

	.cta-decoration {
		width: 48px;
		top: 16px;
		right: 16px;
	}

	.dashboard-privacy-note-title {
		font-size: 14px;
	}

	/* 16px minimum: iOS Safari zooms the page on focus below that size */
	.form-group input,
	.form-group textarea,
	.form-group select,
	.target-seal-select,
	.csf-phone-dial-search,
	.csf-phone-dial-btn {
		font-size: 16px;
	}

	.score-info-tooltip {
		width: min(280px, calc(100vw - 32px));
	}

	.tooltip-bubble {
		left: auto;
		right: 0;
		transform: none;
		width: min(280px, calc(100vw - 48px));
	}

	.tooltip-bubble::after {
		left: auto;
		right: 14px;
		transform: none;
	}

	.drawer-answer {
		align-items: flex-start;
		gap: 10px;
		padding: 2px 0;
	}

	.drawer-answer-radio {
		margin-top: 2px;
	}

	.sov-table-body {
		overflow-x: visible;
	}

	.sov-table-grid {
		min-width: 0;
		border-top: 1px solid #e7eaef;
	}

	.sov-table-head {
		display: none;
	}

	.sov-table-row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 10px;
		height: auto;
		min-height: 64px;
		padding: 14px 16px;
	}

	.sov-table-cell {
		padding: 0;
		overflow: visible;
	}

	.sov-table-cell--name {
		order: 1;
		flex: 1 1 calc(100% - 26px);
		min-width: 0;
	}

	.sov-table-cell--toggle {
		order: 2;
		flex: 0 0 16px;
	}

	.sov-table-cell--progress {
		order: 3;
		flex: 0 0 auto;
	}

	.sov-table-cell--weight {
		order: 4;
		flex: 0 0 auto;
	}

	.sov-table-cell--weight[data-label]::before {
		content: attr(data-label) ': ';
		font-size: 12px;
		font-weight: 500;
		color: var(--text-subtle);
	}

	.sov-table-cell--seal {
		order: 5;
		flex: 1 1 100%;
	}

	.sov-table-name,
	.sov-table-seal-text {
		white-space: normal;
		overflow: visible;
		overflow-wrap: anywhere;
	}

	.sov-drawer {
		width: 100vw;
	}

	.sov-drawer-head,
		.sov-drawer-body,
		.sov-drawer-footer {
		padding-left: 20px;
		padding-right: 20px;
	}

	.sov-drawer-title {
		font-size: 26px;
	}

	.sov-drawer-footer {
		flex-direction: column;
		align-items: flex-start;
		padding-bottom: calc(16px + env(safe-area-inset-bottom));
	}

	.sov-drawer-nav {
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.content-wrapper,
	.intro-section {
		padding-left: 16px;
		padding-right: 16px;
	}

	.score-card--hero,
	.dashboard-mini-card--target-seal,
	.dashboard-side-card--target-seal {
		padding: 16px;
	}

	.score-locked,
	.seal-score-locked {
		left: -16px;
		right: -16px;
	}

	.score-card--hero .card-title,
	.target-seal-title {
		font-size: 16px;
	}

	.target-seal-optional {
		font-size: 14px;
	}

	.score-card-head {
		margin-bottom: 16px;
	}

	.score-hero-content {
		gap: 20px;
		min-height: 0;
	}

	.score-detail-main {
		gap: 6px;
	}

	.score-detail-track {
		max-width: 84px;
	}

	.score-detail-value {
		min-width: 0;
	}

	.score-detail-value-max {
		min-width: 0;
	}

	.cta-card--dashboard .cta-content {
		padding: 16px;
		gap: 24px;
	}

	.cta-card--dashboard .cta-title {
		font-size: 18px;
		line-height: 26px;
	}

	.cta-decoration {
		width: 40px;
		top: 12px;
		right: 12px;
	}

	.cta-badge {
		max-width: calc(100% - 48px);
		font-size: 11px;
	}

	.dashboard-privacy-note-body {
		font-size: 13px;
		line-height: 18px;
	}
}