/*
 * accessibility.css — Chantier 2 modernisation UI RGAA 4.1 (v2)
 *
 * Refactorisé chantier 5 : utilise les design tokens de design-tokens.css.
 */

/* ============================================================
 *  Skip-link (RGAA 12.7)
 * ============================================================ */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: var(--z-skip-link, 100000);
	padding: var(--space-md, 12px) var(--space-xl, 20px);
	background: var(--color-primary, #1e4e9e);
	color: var(--color-primary-text, #fff);
	font-weight: var(--font-weight-bold, bold);
	text-decoration: none;
	border: 2px solid var(--color-primary-text, #fff);
	border-top-left-radius: 0;
	border-bottom-right-radius: var(--radius-lg, 8px);
	transition: top var(--transition-fast, 150ms) ease-out;
}
.skip-link:focus,
.skip-link:active {
	top: 0;
	outline: 3px solid var(--color-focus, #ffcc00);
	outline-offset: 2px;
}

/* ============================================================
 *  .sr-only — caché visuellement, lu par screen reader
 * ============================================================ */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.sr-only-focusable:focus,
.sr-only-focusable:active {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: normal !important;
}

/* ============================================================
 *  Focus visible renforcé (RGAA 10.7)
 * ============================================================ */
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.k-button:focus-visible,
.k-input:focus-visible,
.k-grid-content .k-table-row.k-selected:focus-visible {
	outline: 3px solid var(--color-focus, #ffcc00) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px var(--color-focus-shadow, rgba(255, 204, 0, 0.3)) !important;
	z-index: 10;
	position: relative;
}

/* Focus dans les tableaux Kendo */
.k-grid tr:focus-visible,
.k-grid td:focus-visible,
.k-grid th:focus-visible {
	outline: 2px solid var(--color-focus, #ffcc00) !important;
	outline-offset: -2px !important;
	background-color: var(--color-focus-shadow, rgba(255, 204, 0, 0.1)) !important;
}

/* ============================================================
 *  Boutons d'action : contraste WCAG AA
 * ============================================================ */
.k-button-solid-primary,
button.button,
button.submit {
	background-color: var(--color-primary, #1e4e9e) !important;
	color: var(--color-primary-text, #fff) !important;
}
.k-button-solid-primary:hover,
button.button:hover,
button.submit:hover {
	background-color: var(--color-primary-hover, #163d7a) !important;
}

/* Boutons désactivés */
.k-button[disabled],
button[disabled] {
	opacity: 0.65 !important;
	cursor: not-allowed;
}

/* ============================================================
 *  Liens : soulignement obligatoire (RGAA 10.6)
 * ============================================================ */
.content-container a:not(.k-button):not(.skip-link):not(.k-link):not(.nav-link),
.sub-navbar a:not(.k-button) {
	text-decoration: underline;
	text-underline-offset: 2px;
	color: var(--color-text-link, var(--color-primary, #1e4e9e));
}
.content-container a:not(.k-button):hover,
.content-container a:not(.k-button):focus {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	color: var(--color-text-link-hover, var(--color-primary-hover, #163d7a));
}

/* ============================================================
 *  Placeholders : contraste augmenté (WCAG AA 4.5:1)
 * ============================================================ */
::placeholder {
	color: var(--color-text-muted, #6c757d) !important;
	opacity: 1;
}

/* ============================================================
 *  Reduced motion (RGAA 13.8)
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.skip-link {
		transition: none !important;
	}
}

/* ============================================================
 *  High contrast mode (Windows forced-colors)
 * ============================================================ */
@media (forced-colors: active) {
	.k-button,
	button,
	.k-input,
	input,
	textarea,
	select {
		border: 1px solid ButtonText !important;
	}
	:focus-visible {
		outline: 3px solid Highlight !important;
	}
}

/* ============================================================
 *  Icon-only buttons (Kendo)
 * ============================================================ */
.k-button-icontext > .k-icon,
.k-button > .k-icon:only-child {
	min-width: 16px;
	min-height: 16px;
}

/* ============================================================
 *  Erreurs formulaire : icône + couleur (RGAA 9.3)
 * ============================================================ */
.k-form-error,
.validate-error,
input.k-invalid + .formError,
.formError {
	position: relative;
	padding-left: 20px;
	color: var(--color-danger, #c0392b);
}
.k-form-error::before,
.validate-error::before,
input.k-invalid + .formError::before,
.formError::before {
	content: "⚠ ";
	position: absolute;
	left: 0;
	font-weight: var(--font-weight-bold, bold);
	color: var(--color-danger, #c0392b);
}

/* ============================================================
 *  Zones live (alertes dashboard)
 * ============================================================ */
[aria-live="polite"],
[aria-live="assertive"],
.alert,
.k-notification {
	min-height: 24px;
}