/* Tokens OKI — doctrine « calm technology » : couleurs ancrées dans le territoire,
   un seul accent fort (corail) réservé à l'action primaire (Von Restorff). */
:root {
	--oki-vert: #0b3d2e; /* vert profond — couleur principale de la marque */
	--oki-vert-clair: #17624a;
	--oki-vert-doux: #e3efe7;
	--oki-sable: #f5efe2; /* fonds */
	--oki-sable-fonce: #e7dcc4;
	--oki-bleu: #175e70; /* bleu caraïbe profond */
	--oki-bleu-doux: #d9ecef;
	--oki-corail: #e4572e; /* accent — action primaire UNIQUEMENT */
	--oki-corail-fonce: #c4441f;
	--oki-encre: #22302a;
	--oki-encre-doux: #5a6b62;
	--oki-blanc: #fffdf8;
	--oki-lacune-fond: #fdf3e3; /* panneau Cas B « Pwen blindé » — teinte distincte */
	--oki-lacune-bord: #d9a441;

	--oki-radius: 14px;
	--oki-radius-petit: 9px;
	--oki-ombre: 0 2px 10px rgba(11, 61, 46, 0.14);
	--oki-font:
		system-ui,
		-apple-system,
		'Segoe UI',
		Roboto,
		sans-serif;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--oki-font);
	color: var(--oki-encre);
	background: var(--oki-sable);
	line-height: 1.5;
}

button {
	font-family: inherit;
}

/* — Boutons — */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: none;
	border-radius: var(--oki-radius-petit);
	padding: 0.85rem 1.6rem;
	font-size: 1.05rem;
	font-weight: 650;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.btn:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--oki-bleu);
	outline-offset: 2px;
}

/* Action primaire : le seul élément fortement coloré de l'écran */
.btn-primaire {
	background: var(--oki-corail);
	color: #fff;
	box-shadow: var(--oki-ombre);
}

.btn-primaire:hover {
	background: var(--oki-corail-fonce);
}

.btn-primaire:disabled {
	background: var(--oki-sable-fonce);
	color: var(--oki-encre-doux);
	cursor: not-allowed;
	box-shadow: none;
}

.btn-secondaire {
	background: var(--oki-vert-doux);
	color: var(--oki-vert);
}

.btn-secondaire:hover {
	background: #d2e5d9;
}

.btn-tertiaire {
	background: transparent;
	color: var(--oki-vert-clair);
	border: 1.5px solid var(--oki-vert-clair);
}

.btn-tertiaire:hover {
	background: var(--oki-vert-doux);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}
