/*
 * Diagnostic NIS2 — Brightway
 * Namespace : .nis2-*  (aucune collision avec le thème)
 *
 * Couleurs de niveau pilotées par les classes .nis2-level-low / -basic / -med / -high
 * appliquées sur les éléments qui définissent --nis2-level-color. Aucun hex dans le JS.
 */

/* ── Reset scoped ───────────────────────────────────────────────── */
/* Ni margin ni padding remis à 0 ici : la spécificité ID (1,0,0) écraserait
   les marges/paddings déclarés par classe (.nis2-welcome-badge, .nis2-btn…),
   les figeant à 0. Le reset.css global (* {margin:0;padding:0}) suffit pour
   les éléments sans classe ; chaque composant définit explicitement ses marges. */
#nis2-diagnostic-root *,
#nis2-diagnostic-root *::before,
#nis2-diagnostic-root *::after {
	box-sizing: border-box;
}

/* ── Conteneur racine ───────────────────────────────────────────── */
#nis2-diagnostic-root {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--lh-relaxed);
	color: var(--fg);
	background: var(--surface);
	padding: var(--space-8) var(--space-4) var(--space-12);
	min-height: 400px;
}

/* ── Carte principale ───────────────────────────────────────────── */
.nis2-card {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	max-width: 780px;
	margin: 0 auto;
	padding: var(--space-12);
}

@media (max-width: 600px) {
	.nis2-card {
		padding: var(--space-8) var(--space-6);
	}
}

/* ── Niveaux (3 nuances : rouge / orange / vert) ─────────────────── */
.nis2-level-low    { --nis2-level-color: var(--bw-red); }
.nis2-level-basic,
.nis2-level-med    { --nis2-level-color: var(--bw-orange); }
.nis2-level-high   { --nis2-level-color: var(--bw-green); }

/* ============================================================
   ÉTAPE 1 — ACCUEIL
   ============================================================ */

.nis2-welcome {
	text-align: center;
}

/* Le thème impose `.entry-content p { text-align: justify }` (spécificité 0,1,1),
   ce qui écrase le centrage hérité : un sous-titre d'une seule ligne justifié
   retombe alors aligné à gauche. On rétablit le centrage du seul sous-titre avec
   une spécificité ID (1,1,0). Le texte gris (.nis2-welcome-desc) reste justifié. */
#nis2-diagnostic-root .nis2-subtitle {
	text-align: center;
}

.nis2-welcome-badge {
	display: inline-block;
	background: var(--bw-red);
	color: var(--bw-white);
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: var(--space-2) var(--space-4);
	border-radius: 999px;
	margin-bottom: var(--space-8);
}

.nis2-title {
	font-size: var(--text-2xl);
	font-weight: var(--fw-bold);
	color: var(--fg);
	line-height: var(--lh-tight);
	margin-bottom: var(--space-2);
}

.nis2-subtitle {
	font-size: var(--text-md);
	font-weight: var(--fw-medium);
	color: var(--bw-red);
	margin-bottom: var(--space-6);
}

.nis2-welcome-desc {
	font-size: var(--text-base);
	color: var(--fg-muted);
	max-width: 560px;
	margin: 0 auto var(--space-8);
	line-height: var(--lh-relaxed);
}

.nis2-welcome-features {
	display: flex;
	justify-content: center;
	gap: var(--space-8);
	margin-bottom: var(--space-10);
	flex-wrap: wrap;
}

.nis2-feature {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--fg-muted);
}

.nis2-feature-icon {
	font-size: var(--text-md);
}

@media (min-width: 768px) {
	.nis2-welcome-badge { margin-bottom: var(--space-10); }  /* 40px — badge → titre */
	.nis2-subtitle      { margin-bottom: var(--space-6);  }  /* 24px — sous-titre → texte */
	.nis2-welcome-desc  { margin-bottom: var(--space-10); }  /* 40px — texte → bouton */
}

/* ============================================================
   BOUTONS
   ============================================================ */

.nis2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	padding: 0.875rem 2rem;
	white-space: nowrap;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
	transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
	line-height: 1;
}

.nis2-btn:active {
	transform: translateY(1px);
}

.nis2-btn:focus-visible {
	outline: 2px solid var(--bw-red);
	outline-offset: 2px;
}

.nis2-btn-primary {
	background: var(--bw-red);
	color: var(--bw-white);
}

.nis2-btn-primary:hover {
	background: var(--bw-red-hover);
}

.nis2-btn-secondary {
	background: var(--surface);
	color: var(--fg);
	border-color: var(--border);
}

.nis2-btn-secondary:hover {
	background: var(--border);
}

.nis2-btn-lg {
	font-size: var(--text-base);
	padding: 1.125rem 3rem;
}

/* ============================================================
   EN-TÊTE DE SECTION
   ============================================================ */

.nis2-step-header {
	margin-bottom: var(--space-8);
}

.nis2-step-label,
.nis2-block-label {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--bw-red);
	display: block;
	margin-bottom: var(--space-2);
}

.nis2-section-title {
	font-size: var(--text-xl);
	font-weight: var(--fw-bold);
	color: var(--fg);
	margin-bottom: var(--space-2);
}

.nis2-section-desc {
	font-size: var(--text-sm);
	color: var(--fg-muted);
}

/* ============================================================
   ÉTAPE 2 — PROFIL
   ============================================================ */

.nis2-form-group {
	margin-bottom: var(--space-6);
}

.nis2-label {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	color: var(--fg);
	margin-bottom: var(--space-2);
}

.nis2-required {
	color: var(--bw-red);
}

.nis2-select {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	font-family: inherit;
	font-size: var(--text-base);
	color: var(--fg);
	background-color: var(--surface);
	border: 1.5px solid var(--border);
	border-radius: var(--radius-md);
	appearance: none;
	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='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-4) center;
	cursor: pointer;
	transition: border-color var(--transition);
}

.nis2-select:focus {
	outline: none;
	border-color: var(--bw-red);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bw-red) 18%, transparent);
}

.nis2-error {
	background: var(--bw-red-light);
	border: 1px solid var(--bw-red);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-sm);
	color: var(--bw-red);
	font-weight: var(--fw-medium);
	margin-bottom: var(--space-4);
}

/* ============================================================
   BARRE DE PROGRESSION
   ============================================================ */

.nis2-progress-bar-wrap {
	margin-bottom: var(--space-6);
}

.nis2-progress-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-2);
}

.nis2-progress-label {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--fg-muted);
}

.nis2-progress-pct {
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	color: var(--bw-red);
}

.nis2-progress-track {
	width: 100%;
	height: 6px;
	background: var(--border);
	border-radius: 999px;
	overflow: hidden;
}

.nis2-progress-fill {
	height: 100%;
	background: var(--bw-red);
	border-radius: 999px;
	transition: width 350ms ease;
}

/* ── Indicateurs de blocs ── */
.nis2-blocks-nav {
	display: flex;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
	flex-wrap: wrap;
}

.nis2-block-dot {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	background: var(--border);
	color: var(--fg-muted);
	border: 2px solid transparent;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
	flex-shrink: 0;
}

.nis2-block-dot.active {
	background: var(--bw-red-light);
	border-color: var(--bw-red);
	color: var(--bw-red);
}

.nis2-block-dot.done {
	background: var(--bw-red);
	color: var(--bw-white);
}

/* ── En-tête du bloc ── */
.nis2-block-header {
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--border);
}

/* ============================================================
   QUESTIONS
   ============================================================ */

.nis2-questions-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	margin-bottom: var(--space-8);
}

.nis2-question {
	background: var(--surface);
	border: 1.5px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-4) var(--space-6);
	transition: border-color var(--transition);
}

.nis2-question.answered {
	border-color: var(--bw-gray-muted);
}

.nis2-question.unanswered {
	border-color: var(--bw-red);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bw-red) 18%, transparent);
}

.nis2-question-text {
	font-size: var(--text-base);
	color: var(--fg);
	margin-bottom: var(--space-4);
	line-height: var(--lh-snug);
	/* Le shortcode est rendu dans .entry-content : on neutralise la règle
	   éditoriale du thème (text-align:justify + hyphens:auto) qui coupe les
	   mots des questions ("dési-gné", "sécu-rité") sur conteneur étroit. */
	text-align: left;
	hyphens: manual;
	-webkit-hyphens: manual;
	overflow-wrap: break-word;
}

.nis2-q-num {
	font-weight: var(--fw-bold);
	color: var(--bw-red);
	margin-right: var(--space-1);
}

.nis2-answer-group {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.nis2-answer-btn {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border: 1.5px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg);
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--fg-muted);
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
	user-select: none;
	flex: 1;
	min-width: 100px;
	justify-content: center;
}

.nis2-answer-btn input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

.nis2-answer-btn:focus-within {
	outline: 2px solid var(--bw-red);
	outline-offset: 2px;
}

.nis2-answer-icon {
	font-size: var(--text-base);
	flex-shrink: 0;
}

.nis2-answer-btn:hover {
	border-color: var(--fg);
	background: var(--surface);
}

.nis2-answer-btn.selected.yes {
	background: color-mix(in srgb, var(--bw-green) 12%, var(--bg));
	border-color: var(--bw-green);
	color: var(--bw-green);
}

.nis2-answer-btn.selected.partial {
	background: color-mix(in srgb, var(--bw-orange) 12%, var(--bg));
	border-color: var(--bw-orange);
	color: var(--bw-orange);
}

.nis2-answer-btn.selected.no {
	background: var(--bw-red-light);
	border-color: var(--bw-red);
	color: var(--bw-red);
}

.nis2-block-progress-hint {
	font-size: var(--text-xs);
	color: var(--fg-muted);
	text-align: right;
	margin-top: var(--space-2);
}

/* ── Navigation blocs ── */
.nis2-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-top: var(--space-2);
}

@media (max-width: 480px) {
	/* Récupère de la largeur utile : la chaîne root+card+question
	   consommait 128px de padding latéral sur un écran de 360px. */
	#nis2-diagnostic-root {
		padding-left: var(--space-3);
		padding-right: var(--space-3);
	}
	.nis2-card {
		padding: var(--space-6) var(--space-4);
	}
	.nis2-question {
		padding: var(--space-4);
	}
	.nis2-actions {
		flex-direction: column;
	}
	.nis2-actions .nis2-btn {
		width: 100%;
	}
	/* Empilement vertical des réponses : "Partiellement" n'est plus
	   compressé/coupé et chaque bouton devient une cible tactile pleine
	   largeur (WCAG 2.5.5 Target Size). */
	.nis2-answer-group {
		flex-direction: column;
		gap: var(--space-2);
	}
	.nis2-answer-btn {
		flex: none;
		width: 100%;
		min-width: 0;
		padding: var(--space-3) var(--space-4);
		font-size: var(--text-sm);
	}
}

/* ============================================================
   ÉTAPE 4 — RÉSULTATS
   ============================================================ */

.nis2-results-header {
	margin-bottom: var(--space-8);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--border);
}

/* ── Score principal ── */
.nis2-score-section {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	margin-bottom: var(--space-8);
	flex-wrap: wrap;
}

.nis2-score-circle {
	flex-shrink: 0;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 6px solid var(--nis2-level-color, var(--bw-red));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--surface);
}

.nis2-score-value {
	font-size: var(--text-3xl);
	font-weight: var(--fw-bold);
	color: var(--fg);
	line-height: 1;
}

.nis2-score-max {
	font-size: var(--text-sm);
	color: var(--fg-muted);
	font-weight: var(--fw-medium);
}

.nis2-score-info {
	flex: 1;
	min-width: 220px;
}

.nis2-level-badge {
	display: inline-block;
	background: var(--nis2-level-color, var(--bw-red));
	color: var(--bw-white);
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: var(--space-1) var(--space-4);
	border-radius: 999px;
	margin-bottom: var(--space-4);
}

.nis2-score-gauge {
	margin-bottom: var(--space-3);
}

.nis2-gauge-track {
	width: 100%;
	height: 10px;
	background: var(--border);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: var(--space-1);
}

.nis2-gauge-fill {
	height: 100%;
	background: var(--nis2-level-color, var(--bw-red));
	border-radius: 999px;
	transition: width 600ms ease;
}

.nis2-gauge-labels {
	display: flex;
	justify-content: space-between;
	font-size: var(--text-xs);
	color: var(--fg-muted);
}

.nis2-level-desc {
	font-size: var(--text-sm);
	color: var(--fg-muted);
	line-height: var(--lh-relaxed);
}

/* ── Scores par bloc ── */
.nis2-block-scores {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	margin-bottom: var(--space-8);
}

.nis2-subsection-title {
	font-size: var(--text-base);
	font-weight: var(--fw-bold);
	color: var(--fg);
	margin-bottom: var(--space-4);
}

.nis2-block-score-row {
	margin-bottom: var(--space-4);
}

.nis2-block-score-row:last-child {
	margin-bottom: 0;
}

.nis2-block-score-label {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--fg-muted);
	margin-bottom: var(--space-2);
}

.nis2-block-score-bar-wrap {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.nis2-block-score-track {
	flex: 1;
	height: 8px;
	background: var(--border);
	border-radius: 999px;
	overflow: hidden;
}

.nis2-block-score-fill {
	height: 100%;
	background: var(--nis2-level-color, var(--bw-red));
	border-radius: 999px;
	transition: width 500ms ease;
}

.nis2-block-score-num {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--fg-muted);
	white-space: nowrap;
	min-width: 46px;
	text-align: right;
}

/* ── Écarts / Actions prioritaires ── */
.nis2-gaps {
	margin-bottom: var(--space-8);
}

.nis2-gaps-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-4);
	max-height: 420px;
	overflow-y: auto;
	padding-right: var(--space-1);
}

.nis2-gaps-list::-webkit-scrollbar {
	width: 4px;
}
.nis2-gaps-list::-webkit-scrollbar-track {
	background: var(--surface);
	border-radius: 2px;
}
.nis2-gaps-list::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 2px;
}

.nis2-gap-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	border-left: 3px solid transparent;
}

.nis2-gap-item.critical {
	background: var(--bw-red-light);
	border-left-color: var(--bw-red);
}

.nis2-gap-item.partial {
	background: color-mix(in srgb, var(--bw-orange) 12%, var(--bg));
	border-left-color: var(--bw-orange);
}

.nis2-gap-badge {
	flex-shrink: 0;
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
	margin-top: 2px;
	white-space: nowrap;
	color: var(--bw-white);
}

.nis2-gap-item.critical .nis2-gap-badge {
	background: var(--bw-red);
}

.nis2-gap-item.partial .nis2-gap-badge {
	background: var(--bw-orange);
}

.nis2-gap-block {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--fg-muted);
	margin-bottom: 2px;
}

.nis2-gap-question {
	font-size: var(--text-sm);
	color: var(--fg);
	line-height: var(--lh-snug);
}

/* ── CTA ── */
.nis2-cta-section {
	background: var(--bw-anthracite);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	text-align: center;
	margin-bottom: var(--space-6);
}

.nis2-cta-title {
	font-size: var(--text-md);
	font-weight: var(--fw-bold);
	color: var(--bw-white);
	margin-bottom: var(--space-2);
}

.nis2-cta-desc {
	font-size: var(--text-sm);
	color: var(--bw-gray-muted);
	margin-bottom: var(--space-6);
}

.nis2-cta-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}

.nis2-cta-section .nis2-btn-outline {
	background: transparent;
	border: 1.5px solid var(--bw-gray-muted);
	color: var(--bw-white);
	font-size: var(--text-sm);
	padding: 0.875rem 2rem;
}

.nis2-cta-section .nis2-btn-outline:hover {
	border-color: var(--bw-white);
	background: color-mix(in srgb, var(--bw-white) 8%, transparent);
}

.nis2-perfect {
	background: color-mix(in srgb, var(--bw-green) 12%, var(--bg));
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	margin-bottom: var(--space-8);
	font-size: var(--text-base);
	color: var(--bw-green);
	font-weight: var(--fw-medium);
}

/* ── Mention footer ── */
.nis2-footer-mention {
	text-align: center;
	font-size: var(--text-xs);
	color: var(--fg-muted);
}

.nis2-footer-mention a {
	color: var(--fg-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.nis2-footer-mention a:hover {
	color: var(--fg);
}

/* ── Responsive résultats ── */
@media (max-width: 560px) {
	.nis2-score-section {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-6);
	}
	.nis2-title {
		font-size: var(--text-xl);
	}
	.nis2-welcome-features {
		gap: var(--space-4);
	}
	.nis2-cta-section {
		padding: var(--space-6) var(--space-4);
	}
	.nis2-blocks-nav {
		gap: var(--space-2);
	}
}

/* ── Accessibilité : reduced motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	#nis2-diagnostic-root *,
	#nis2-diagnostic-root *::before,
	#nis2-diagnostic-root *::after {
		transition: none !important;
	}
}