/*
 * Clavier intelligent arabicfont-core : barre d'outils, guide, éditeur, clavier en relief.
 * Chargé seulement sur les pages qui contiennent le clavier (class-af-core-keyboard.php).
 *
 * - Propriétés LOGIQUES uniquement : la barre et l'éditeur suivent le sens du site (LTR ou
 *   RTL). Le clavier (.af-kb__deck) reste en dir="ltr" : c'est la disposition physique 101.
 * - Couleurs : variables --af-kb-*, reprises des jetons du thème quand ils existent.
 * - Dimensions réservées (barre, éditeur, touches) : aucun décalage quand le JS démarre.
 * - Hauteurs serrées : sur la page clavier (colonne de 70 % du thème), H1, barre, éditeur et
 *   clavier tiennent dans un écran 1440 × 900 sans défiler.
 */
.af-kb {
	--af-kb-size: 32px;
	--af-kb-font: inherit;
	--af-kb-ui: var(--af-font-ui, "Figtree", "IBM Plex Sans Arabic", system-ui, sans-serif);
	--af-kb-ink: var(--af-color-text-strong, #1c1a17);
	--af-kb-muted: var(--af-color-muted, #5f5850);
	--af-kb-line: #e9e4de;
	--af-kb-panel: #fff;
	--af-kb-panel-2: #fbf9f6;
	--af-kb-seg: #f3efea;
	--af-kb-accent: var(--af-color-cta, #a63d14);
	--af-kb-accent-hi: #c4532a;
	--af-kb-accent-lo: #74280b;
	--af-kb-accent-ink: #a63d14;
	--af-kb-accent-soft: #fbeee8;
	--af-kb-accent-glow: rgba(166, 61, 20, .4);
	--af-kb-deck-a: #efebe6;
	--af-kb-deck-b: #e2dcd4;
	--af-kb-deck-edge: #d3cbc0;
	--af-kb-deck-shadow: rgba(60, 38, 16, .3);
	--af-kb-cap-a: #fff;
	--af-kb-cap-b: #f5f2ee;
	--af-kb-cap-side: #d1c9be;
	--af-kb-cap-ink: #211e1a;
	--af-kb-cap-hint: #6e665d;
	--af-kb-mod-a: #e8e3dc;
	--af-kb-mod-b: #dcd5cb;
	--af-kb-mod-side: #bdb3a6;
	--af-kb-mod-ink: #3a352f;
	--af-kb-drop: rgba(50, 32, 14, .26);
	--af-kb-led-off: #c9c1b6;
	--af-kb-led-on: #2fbf62;
	--af-kb-focus: var(--af-color-focus, #0b5f8a);
	--af-kb-key-h: 2.75rem;
	--af-kb-key-gap: .75rem;
	--af-kb-row-gap: .5rem;

	container: af-kb / inline-size;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	margin-block: 0;
	color: var(--af-kb-ink);
	font-family: var(--af-kb-ui);
	font-size: 1rem;
	line-height: 1.4;
	max-inline-size: 100%;
}

.af-kb *,
.af-kb *::before,
.af-kb *::after {
	box-sizing: border-box;
}

/* Remise à zéro sans poids (:where) : elle ne doit pas écraser les marges des touches. */
.af-kb :where(button) {
	font: inherit;
	color: inherit;
	margin: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.af-kb button:disabled {
	cursor: default;
	opacity: .45;
}

.af-kb :is(button, select, input, textarea, summary):focus-visible {
	outline: 2px solid var(--af-kb-focus);
	outline-offset: 2px;
}

.af-kb__ic {
	inline-size: 1.125rem;
	block-size: 1.125rem;
	flex: none;
}

/* ---------- Barre d'outils ---------- */

.af-kb__top {
	position: relative;
}

.af-kb__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem;
	padding: .5rem;
	background: var(--af-kb-panel);
	border: 1px solid var(--af-kb-line);
	border-radius: 1.125rem;
	box-shadow: 0 14px 30px -22px var(--af-kb-drop);
}

.af-kb__sep {
	inline-size: 1px;
	block-size: 1.625rem;
	margin-inline: 0;
	background: var(--af-kb-line);
	flex: none;
}

.af-kb__seg {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	background: var(--af-kb-seg);
	border-radius: .8rem;
}

.af-kb__tb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-inline-size: 2.75rem;
	block-size: 2.75rem;
	padding-inline: .75rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: .625rem;
	font-weight: 600;
	font-size: .875rem;
	line-height: 1;
	transition: background-color .15s, box-shadow .15s, transform .08s, color .15s;
}

.af-kb__seg .af-kb__tb {
	min-inline-size: 2.5rem;
	block-size: 2.5rem;
	padding-inline: .7rem;
}

.af-kb__tb:hover:not(:disabled) {
	background: rgba(127, 110, 90, .1);
}

.af-kb__tb:active:not(:disabled) {
	transform: translateY(1px);
}

.af-kb__tb[aria-pressed="true"] {
	color: var(--af-kb-accent-ink);
	background: linear-gradient(180deg, var(--af-kb-cap-a), var(--af-kb-cap-b));
	border-color: var(--af-kb-line);
	box-shadow: inset 0 1px 0 #fff, 0 2px 0 var(--af-kb-cap-side), 0 4px 8px -4px var(--af-kb-drop);
}

.af-kb__tb--bold {
	font-weight: 800;
	font-size: 1rem;
}

.af-kb__tb--help {
	inline-size: 2.75rem;
	padding: 0;
	border: 1.5px solid var(--af-kb-accent-ink);
	border-radius: 50%;
	color: var(--af-kb-accent-ink);
	font-weight: 800;
	font-size: 1.0625rem;
}

.af-kb__tb--help[aria-expanded="true"] {
	color: #fff;
	background: var(--af-kb-accent);
	border-color: var(--af-kb-accent);
	box-shadow: 0 3px 0 var(--af-kb-accent-lo), 0 8px 16px -6px var(--af-kb-accent-glow);
}

.af-kb__select {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.af-kb__font {
	block-size: 2.75rem;
	max-inline-size: 13rem;
	padding-block: 0;
	padding-inline: .75rem 2.25rem;
	background: var(--af-kb-panel);
	border: 1px solid var(--af-kb-line);
	border-radius: .7rem;
	color: var(--af-kb-ink);
	font: 600 .875rem/1 var(--af-kb-ui);
	appearance: none;
	cursor: pointer;
}

.af-kb__select .af-kb__ic {
	position: absolute;
	inset-inline-end: .7rem;
	inline-size: 1rem;
	block-size: 1rem;
	color: var(--af-kb-muted);
	pointer-events: none;
}

.af-kb__stepper {
	display: inline-flex;
	align-items: center;
	block-size: 2.75rem;
	overflow: hidden;
	background: var(--af-kb-panel);
	border: 1px solid var(--af-kb-line);
	border-radius: .7rem;
}

.af-kb__stepper .af-kb__tb {
	min-inline-size: 2.5rem;
	block-size: 2.625rem;
	padding: 0;
	border-radius: 0;
}

.af-kb__size {
	min-inline-size: 3rem;
	font-weight: 700;
	font-size: .8125rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.af-kb__pairs {
	display: flex;
	flex: 1 1 8.75rem;
	align-items: center;
	justify-content: center;
	gap: .375rem;
	min-inline-size: 0;
	margin: 0;
	color: var(--af-kb-muted);
	font-size: .75rem;
	font-weight: 600;
	white-space: nowrap;
}

.af-kb__pair {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	block-size: 1.625rem;
	padding-inline: .5rem;
	background: var(--af-kb-seg);
	border-radius: .5rem;
	color: var(--af-kb-ink);
}

.af-kb__pair span {
	font-size: .95rem;
	font-weight: 500;
}

.af-kb__ic--check {
	display: none;
}

.af-kb.is-copied .af-kb__ic--copy {
	display: none;
}

.af-kb.is-copied .af-kb__ic--check {
	display: block;
	color: var(--af-kb-led-on);
}

/* ---------- Guide rapide ---------- */

.af-kb__help {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: calc(100% + .875rem);
	z-index: 30;
	inline-size: 27rem;
	max-inline-size: calc(100vw - 2rem);
	max-block-size: min(80vh, 46rem);
	overflow: auto;
	padding: 1.25rem 1.25rem 1.125rem;
	background: var(--af-kb-panel);
	border: 1px solid var(--af-kb-line);
	border-radius: 1.375rem;
	box-shadow: 0 40px 80px -30px var(--af-kb-drop), 0 12px 28px -12px var(--af-kb-drop);
}

.af-kb__help[hidden] {
	display: none;
}

.af-kb__help-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .75rem;
}

.af-kb__help-head .af-kb__tb {
	margin-block-start: -.375rem;
	margin-inline-end: -.5rem;
}

.af-kb__kicker {
	margin: 0 0 .375rem;
	color: var(--af-kb-accent-ink);
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.af-kb__help-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.af-kb__help-sub {
	margin: .875rem 0 .625rem;
	color: var(--af-kb-muted);
	font-size: .8125rem;
	font-weight: 600;
}

.af-kb__mini {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.af-kb__mcap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .25rem;
	block-size: 3.625rem;
	margin: 0;
	background: linear-gradient(180deg, var(--af-kb-cap-a), var(--af-kb-cap-b));
	border-radius: .7rem;
	box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--af-kb-cap-side), 0 6px 10px -5px var(--af-kb-drop);
}

.af-kb__mcap b {
	color: var(--af-kb-accent-ink);
	font-size: .8125rem;
	font-weight: 800;
}

.af-kb__mcap span {
	font-size: 1.25rem;
	line-height: 1;
}

.af-kb__steps {
	display: grid;
	gap: .75rem;
	margin: 1.125rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: af-kb-step;
	font-size: .875rem;
	line-height: 1.55;
}

.af-kb__steps li {
	position: relative;
	margin: 0;
	padding-inline-start: 2.25rem;
	counter-increment: af-kb-step;
}

.af-kb__steps li::before {
	content: counter(af-kb-step);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border-radius: 50%;
	background: var(--af-kb-accent-soft);
	color: var(--af-kb-accent-ink);
	font-size: .75rem;
	font-weight: 800;
	line-height: 1.5rem;
	text-align: center;
}

.af-kb__kbd {
	display: inline-block;
	padding: .2rem .4rem;
	background: var(--af-kb-panel);
	border: 1px solid var(--af-kb-line);
	border-radius: .375rem;
	box-shadow: 0 1px 0 var(--af-kb-cap-side);
	color: var(--af-kb-muted);
	font: 700 .65rem/1 var(--af-kb-ui);
	letter-spacing: .04em;
	white-space: nowrap;
}

.af-kb__chart {
	margin-block-start: 1rem;
	font-size: .875rem;
}

.af-kb__chart summary {
	color: var(--af-kb-accent-ink);
	font-weight: 700;
	cursor: pointer;
}

.af-kb__chart-table {
	inline-size: 100%;
	margin-block-start: .5rem;
	border-collapse: collapse;
}

.af-kb__chart-table :is(th, td) {
	padding: .3rem .5rem;
	border-block-end: 1px solid var(--af-kb-line);
	text-align: start;
}

.af-kb__chart-table td[lang="ar"] {
	font-size: 1.15rem;
}

.af-kb__help-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-block-start: 1.25rem;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--af-kb-line);
}

.af-kb__help-note {
	margin: 0;
	color: var(--af-kb-muted);
	font-size: .8125rem;
}

.af-kb__btn {
	block-size: 2.75rem;
	padding-inline: 1.125rem;
	border: 0;
	border-radius: .75rem;
	color: #fff !important;
	background: linear-gradient(180deg, var(--af-kb-accent-hi), var(--af-kb-accent));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 3px 0 var(--af-kb-accent-lo), 0 10px 18px -8px var(--af-kb-accent-glow);
	font-weight: 700;
	font-size: .875rem;
	transition: transform .08s, box-shadow .08s;
}

.af-kb__btn:active {
	transform: translateY(3px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 var(--af-kb-accent-lo);
}

/* ---------- Éditeur ---------- */

.af-kb__editor {
	overflow: hidden;
	background: var(--af-kb-panel);
	border: 1px solid var(--af-kb-line);
	border-radius: 1.375rem;
	box-shadow: 0 14px 30px -24px var(--af-kb-drop);
	transition: border-color .2s;
}

.af-kb__editor:focus-within {
	border-color: var(--af-kb-accent);
}

.af-kb__latin-wrap {
	padding: .625rem 1.25rem;
	background: var(--af-kb-panel-2);
	border-block-end: 1px dashed var(--af-kb-line);
}

.af-kb[data-mode="direct"] .af-kb__latin-wrap {
	display: none;
}

.af-kb__latin-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-block-end: .25rem;
}

.af-kb__label {
	color: var(--af-kb-muted);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .02em;
}

.af-kb__status {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	block-size: 1.625rem;
	padding-inline: .625rem;
	border-radius: 999px;
	background: var(--af-kb-accent-soft);
	color: var(--af-kb-accent-ink);
	font-size: .75rem;
	font-weight: 700;
	white-space: nowrap;
}

.af-kb__dot {
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: var(--af-kb-led-on);
	box-shadow: 0 0 0 3px rgba(47, 191, 98, .18);
}

.af-kb.is-loading .af-kb__dot {
	background: var(--af-kb-led-off);
	box-shadow: none;
	animation: af-kb-blink 1s ease-in-out infinite;
}

@keyframes af-kb-blink {
	50% {
		opacity: .35;
	}
}

.af-kb__latin {
	inline-size: 100%;
	block-size: 2.25rem;
	padding: 0;
	background: transparent;
	border: 0;
	outline: none;
	color: var(--af-kb-ink);
	font: 500 1.25rem/1.4 var(--af-kb-ui);
}

/* Le cadre de saisie est l'éditeur (bordure accent au focus), pas le champ. */
.af-kb .af-kb__latin,
.af-kb .af-kb__latin:focus,
.af-kb .af-kb__output,
.af-kb .af-kb__output:focus {
	min-block-size: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
}

.af-kb__latin::placeholder,
.af-kb__output::placeholder {
	color: var(--af-kb-muted);
	opacity: .8;
}

/* Une seule ligne de suggestions : au-delà, elle défile (l'éditeur ne grandit jamais). */
.af-kb__suggest {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: .5rem;
	min-block-size: 3rem;
	margin-block-start: .25rem;
	padding-block: 2px 4px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	white-space: nowrap;
}

.af-kb__suggest-label {
	flex: none;
	margin-inline-end: .25rem;
	color: var(--af-kb-muted);
	font-size: .8125rem;
	font-weight: 700;
}

.af-kb__chips {
	display: contents;
}

.af-kb__empty {
	margin: 0;
	color: var(--af-kb-muted);
	font-size: .8125rem;
}

.af-kb.has-suggestions .af-kb__empty {
	display: none;
}

.af-kb__chip {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: .625rem;
	block-size: 2.625rem;
	padding-inline: .875rem;
	background: var(--af-kb-panel);
	border: 1px solid var(--af-kb-line);
	border-radius: .7rem;
	box-shadow: 0 2px 0 var(--af-kb-cap-side);
	transition: transform .08s, box-shadow .08s, border-color .15s;
}

.af-kb__chip:hover {
	border-color: var(--af-kb-accent);
}

.af-kb__chip:active {
	transform: translateY(2px);
	box-shadow: 0 0 0 var(--af-kb-cap-side);
}

.af-kb__chip-text {
	font-family: var(--af-kb-font), var(--af-kb-ui);
	font-size: 1.3rem;
	line-height: 1;
}

.af-kb__chip--latin .af-kb__chip-text {
	color: var(--af-kb-muted);
	font-family: var(--af-kb-ui);
	font-size: .9375rem;
	font-weight: 600;
}

.af-kb__chip--completion .af-kb__chip-text::after {
	content: "…";
	color: var(--af-kb-muted);
}

.af-kb__chip.is-active {
	background: var(--af-kb-accent-soft);
	border-color: var(--af-kb-accent);
	color: var(--af-kb-accent-ink);
}

.af-kb__chip-tag {
	color: var(--af-kb-muted);
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* Astuce du mot en cours : à la place de « conversion activée », sur une ligne. */
.af-kb__tip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-inline-size: 0;
	max-inline-size: 70%;
	block-size: 1.625rem;
	padding-inline: .625rem;
	overflow: hidden;
	border-radius: 999px;
	background: var(--af-kb-accent-soft);
	color: var(--af-kb-accent-ink);
	font-size: .75rem;
	font-weight: 600;
	white-space: nowrap;
}

.af-kb__tip[hidden],
.af-kb__status[hidden] {
	display: none;
}

.af-kb__tip-text {
	overflow: hidden;
	text-overflow: ellipsis;
}

.af-kb__tip .af-kb__ic {
	inline-size: .9rem;
	block-size: .9rem;
}

.af-kb__out-wrap {
	position: relative;
	padding: .75rem 1.375rem .625rem;
}

.af-kb__output {
	display: block;
	inline-size: 100%;
	min-block-size: 3.5rem;
	padding: 0;
	background: transparent;
	border: 0;
	outline: none;
	resize: vertical;
	color: var(--af-kb-ink);
	font-family: var(--af-kb-font), var(--af-font-arabic, "IBM Plex Sans Arabic"), serif;
	font-size: var(--af-kb-size);
	font-weight: 400;
	line-height: 1.75;
	text-align: start;
}

.af-kb.is-bold .af-kb__output {
	font-weight: 700;
}

.af-kb[data-align="center"] .af-kb__output {
	text-align: center;
}

.af-kb[data-align="end"] .af-kb__output {
	text-align: end;
}

.af-kb__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-block-start: .25rem;
	color: var(--af-kb-muted);
	font-size: .78rem;
	font-weight: 600;
}

.af-kb__meta-end {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.af-kb__badge {
	display: inline-flex;
	align-items: center;
	block-size: 1.5rem;
	padding-inline: .55rem;
	border: 1px solid var(--af-kb-line);
	border-radius: .45rem;
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .08em;
}

.af-kb__toast {
	position: absolute;
	inset-block-end: .75rem;
	inset-inline-start: 50%;
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0;
	padding: .5rem .5rem .5rem .875rem;
	border-radius: .75rem;
	background: var(--af-kb-ink);
	color: #fff;
	font-size: .8125rem;
	font-weight: 600;
	transform: translateX(-50%);
	box-shadow: 0 10px 24px -10px var(--af-kb-drop);
}

[dir="rtl"] .af-kb__toast {
	transform: translateX(50%);
}

.af-kb__toast-btn {
	block-size: 2rem;
	padding-inline: .75rem;
	border: 0;
	border-radius: .5rem;
	background: rgba(255, 255, 255, .16);
	font-weight: 700;
}

/* ---------- Clavier en relief ---------- */

.af-kb__deck {
	position: relative;
	padding: .875rem 1.5rem 1.25rem;
	border-radius: 1.75rem;
	background: linear-gradient(180deg, var(--af-kb-deck-a), var(--af-kb-deck-b));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(0, 0, 0, .035), 0 2px 0 var(--af-kb-deck-edge), 0 30px 60px -30px var(--af-kb-deck-shadow);
	user-select: none;
	-webkit-user-select: none;
}

.af-kb__deck-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .125rem .375rem .625rem;
}

.af-kb__engr {
	color: var(--af-kb-muted);
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .2em;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
	text-transform: uppercase;
}

.af-kb__leds {
	display: flex;
	align-items: center;
	gap: 1.125rem;
}

.af-kb__ledi {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--af-kb-muted);
	font-size: .65rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.af-kb__ledi i,
.af-kb__led {
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: var(--af-kb-led-off);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25);
}

.af-kb__ledi.is-lit {
	color: var(--af-kb-ink);
}

.af-kb__ledi.is-lit i,
.af-kb__led.is-lit {
	background: var(--af-kb-led-on);
	box-shadow: 0 0 6px var(--af-kb-led-on), 0 0 14px rgba(47, 191, 98, .5);
}

.af-kb__keys {
	display: flex;
	flex-direction: column;
	gap: var(--af-kb-row-gap);
}

/* 60 colonnes ; l'écart entre touches vient de leurs marges (une gouttière de grille
   compterait 59 fois). */
.af-kb__row {
	display: grid;
	grid-template-columns: repeat(60, minmax(0, 1fr));
	margin-inline: calc(var(--af-kb-key-gap) / -2);
}

.af-kb__key {
	position: relative;
	grid-column: span var(--span, 4);
	block-size: var(--af-kb-key-h);
	min-inline-size: 0;
	margin-inline: calc(var(--af-kb-key-gap) / 2);
	padding: 0;
	overflow: visible;
	border: 0;
	border-radius: .75rem;
	color: var(--af-kb-cap-ink) !important;
	background: linear-gradient(180deg, var(--af-kb-cap-a) 0%, var(--af-kb-cap-b) 100%);
	box-shadow: inset 0 0 0 1px rgba(60, 40, 20, .06), inset 0 1px 0 #fff, 0 1px 0 rgba(60, 40, 20, .05), 0 3px 0 var(--af-kb-cap-side), 0 12px 16px -12px var(--af-kb-drop);
	transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
	touch-action: manipulation;
}

/* Cuvette discrète au centre de la touche. */
.af-kb__key::before {
	content: "";
	position: absolute;
	inset: 4px 5px 6px;
	border-radius: .55rem;
	background: linear-gradient(180deg, rgba(60, 40, 20, .03), rgba(255, 255, 255, .65));
	pointer-events: none;
}

@media (hover: hover) {
	.af-kb__key:hover {
		transform: translateY(-1px);
		box-shadow: inset 0 0 0 1px rgba(60, 40, 20, .08), inset 0 1px 0 #fff, 0 1px 0 rgba(60, 40, 20, .05), 0 4px 0 var(--af-kb-cap-side), 0 16px 20px -12px var(--af-kb-drop);
	}
}

.af-kb__key:active,
.af-kb__key.is-down {
	transform: translateY(2px);
	box-shadow: inset 0 0 0 1px rgba(60, 40, 20, .08), inset 0 2px 3px rgba(60, 40, 20, .06), 0 1px 0 var(--af-kb-cap-side), 0 4px 8px -6px var(--af-kb-drop);
	filter: brightness(.98);
}

/* Deux légendes, comme un vrai clavier : la lettre en bas à droite, le caractère de la
   couche Maj (haraka, ponctuation) en haut à gauche. Maj les échange. */
.af-kb__glyph,
.af-kb__legend {
	position: absolute;
	font-family: var(--af-font-arabic, "IBM Plex Sans Arabic"), var(--af-kb-ui);
	line-height: 1;
	pointer-events: none;
}

.af-kb__glyph {
	inset-inline-end: .75rem;
	inset-block-end: .6rem;
	font-size: 1.4rem;
	font-weight: 500;
}

.af-kb__legend {
	inset-inline-start: .65rem;
	inset-block-start: .5rem;
	color: var(--af-kb-cap-hint);
	font-size: .95rem;
	font-weight: 400;
}

/* Haraka en légende : plus grande, sinon le cercle pointillé l'emporte sur le signe. */
.af-kb__legend.is-mark {
	inset-block-start: .2rem;
	color: var(--af-kb-accent-ink);
	font-size: 1.35rem;
}

.af-kb__key.is-mark .af-kb__glyph {
	inset-block-end: .35rem;
	font-size: 1.7rem;
}

.af-kb__key.is-alt .af-kb__glyph {
	color: var(--af-kb-accent-ink);
}

.af-kb__key--mod {
	color: var(--af-kb-mod-ink) !important;
	background: linear-gradient(180deg, var(--af-kb-mod-a), var(--af-kb-mod-b));
	box-shadow: inset 0 0 0 1px rgba(60, 40, 20, .06), inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 0 rgba(60, 40, 20, .05), 0 3px 0 var(--af-kb-mod-side), 0 12px 16px -12px var(--af-kb-drop);
}

.af-kb__lbl {
	position: absolute;
	inset-inline-start: 13px;
	inset-block-end: 12px;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1;
}

.af-kb__mark-icon {
	font-size: 1.25rem;
	line-height: 1;
}

.af-kb__key--space .af-kb__lbl {
	inset-inline: 0;
	inset-block: 50% auto;
	justify-content: center;
	color: var(--af-kb-cap-hint);
	font-weight: 600;
	transform: translateY(-50%);
}

.af-kb__space-ar {
	font-family: var(--af-font-arabic, "IBM Plex Sans Arabic"), var(--af-kb-ui);
	font-size: .95rem;
	font-weight: 500;
}

.af-kb__key--space {
	color: var(--af-kb-cap-ink) !important;
	background: linear-gradient(180deg, var(--af-kb-cap-a), var(--af-kb-cap-b));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .05), 0 4px 0 var(--af-kb-cap-side), 0 5px 1px var(--af-kb-cap-side), 0 10px 16px -6px var(--af-kb-drop);
}

.af-kb__led {
	position: absolute;
	inset-block-start: 9px;
	inset-inline-end: 10px;
	inline-size: 6px;
	block-size: 6px;
}

.af-kb__key[aria-pressed="true"] {
	color: var(--af-kb-accent-ink) !important;
}

.af-kb__key--enter {
	color: #fff !important;
	background: linear-gradient(180deg, var(--af-kb-accent-hi), var(--af-kb-accent));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 4px 0 var(--af-kb-accent-lo), 0 5px 1px var(--af-kb-accent-lo), 0 12px 20px -6px var(--af-kb-accent-glow);
}

.af-kb__key--enter::before {
	background: linear-gradient(180deg, rgba(0, 0, 0, .07), rgba(255, 255, 255, .12));
}

.af-kb__key--enter:active,
.af-kb__key--enter.is-down {
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 0 0 var(--af-kb-accent-lo), 0 1px 1px var(--af-kb-accent-lo), 0 4px 8px -4px var(--af-kb-accent-glow);
}

.af-kb__noscript {
	margin: 0;
	color: var(--af-kb-muted);
}

/* Clavier étroit (requêtes de conteneur : le clavier peut vivre dans une colonne). */
@container af-kb (max-width: 70rem) {
	.af-kb__pairs > span:first-child {
		display: none;
	}
}

@container af-kb (max-width: 62rem) {
	.af-kb__pairs {
		display: none;
	}
}

/* Colonne de la page clavier (70 %) : « Copier » en icône seule, menu des polices plus
   étroit ; la barre tient sur une ligne en EN, FR et AR. */
@container af-kb (max-width: 58rem) {
	.af-kb__copy-text {
		display: none;
	}

	.af-kb__font {
		max-inline-size: 10.5rem;
	}
}

/* Petits écrans (tactiles) : barre resserrée, touches plus serrées mais plus hautes, au doigt. */
@container af-kb (max-width: 51.25rem) {
	.af-kb__deck {
		--af-kb-key-h: 3.25rem;
		--af-kb-key-gap: .375rem;
		--af-kb-row-gap: .625rem;
	}

	.af-kb__key {
		border-radius: .625rem;
	}

	.af-kb__glyph {
		inset-inline-end: .5rem;
		inset-block-end: .5rem;
		font-size: 1.15rem;
	}

	.af-kb__legend {
		inset-inline-start: .4rem;
		inset-block-start: .4rem;
		font-size: .75rem;
	}

	.af-kb__lbl-text {
		display: none;
	}

	.af-kb__lbl {
		inset-inline-start: 50%;
		inset-block: 50% auto;
		transform: translate(-50%, -50%);
	}

	.af-kb__key--space .af-kb__lbl-text {
		display: inline;
	}

	.af-kb__key--space .af-kb__lbl {
		inset-inline-start: 0;
		transform: translateY(-50%);
	}

	.af-kb__deck {
		padding: .75rem .625rem 1rem;
		border-radius: 1.25rem;
	}

	.af-kb__help {
		inset-inline: 0;
		inline-size: auto;
		max-inline-size: none;
	}
}

@container af-kb (max-width: 30rem) {
	.af-kb__deck {
		--af-kb-key-h: 2.875rem;
		--af-kb-key-gap: 3px;
		--af-kb-row-gap: .5rem;
	}

	.af-kb__bar {
		gap: .25rem;
		padding: .375rem;
	}

	.af-kb__sep,
	.af-kb__seg--format,
	.af-kb__copy-text {
		display: none;
	}

	.af-kb__select {
		flex: 1 1 8rem;
	}

	.af-kb__font {
		inline-size: 100%;
		max-inline-size: none;
	}

	.af-kb__tb {
		padding-inline: .55rem;
	}

	.af-kb__key {
		border-radius: .45rem;
	}

	.af-kb__key::before {
		inset: 3px 3px 5px;
	}

	/* Touche trop étroite pour deux légendes : la lettre seule, au centre. */
	.af-kb__legend,
	.af-kb__deck-top {
		display: none;
	}

	.af-kb__glyph {
		inset-inline: 0;
		inset-block-end: auto;
		inset-block-start: 50%;
		text-align: center;
		transform: translateY(-50%);
	}

	.af-kb__out-wrap,
	.af-kb__latin-wrap {
		padding-inline: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.af-kb *,
	.af-kb *::before {
		transition: none !important;
		animation: none !important;
	}
}

@media print {
	.af-kb__top,
	.af-kb__latin-wrap,
	.af-kb__deck,
	.af-kb__meta {
		display: none;
	}

	.af-kb__editor {
		border: 0;
		box-shadow: none;
	}
}