/* KAMUCO Interprète — interface publique.
   Tout est préfixé .kmi pour ne pas dépendre du thème du site. */

.kmi {
	/* Palette relevée sur le logo kamuco.net :
	   marine #1E2761, orange #FF7A45, ardoise #5A6395,
	   jaune #F2B53A, vert #6BC48F. */
	--kmi-marine: #1e2761;
	--kmi-orange: #ff7a45;
	--kmi-jaune: #f2b53a;
	--kmi-vert: #6bc48f;

	--kmi-fond: #141a45;
	--kmi-panneau: #1e2761;
	--kmi-panneau-haut: #252f74;
	--kmi-trait: #39427e;
	--kmi-texte: #eef0f8;
	--kmi-doux: #a9b1d6;
	--kmi-creux: #6f78ab;
	--kmi-or: #f2b53a;
	--kmi-or-sombre: #b8842a;
	--kmi-menthe: #6bc48f;
	--kmi-alerte: #ff7a45;
	--kmi-r: 14px;

	box-sizing: border-box;
	max-width: 520px;
	margin: 0 auto;
	padding: 18px;
	background: var(--kmi-fond);
	color: var(--kmi-texte);
	border-radius: 18px;
	font-size: 17px;
	line-height: 1.45;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.kmi.kmi--clair {
	--kmi-fond: #f7f8fb;
	--kmi-panneau: #ffffff;
	--kmi-panneau-haut: #ffffff;
	--kmi-trait: #d8dced;
	--kmi-texte: #1e2761;
	--kmi-doux: #5a6395;
	--kmi-creux: #9aa1c4;
	--kmi-or: #e8a82e;
	--kmi-or-sombre: #b07f18;
	--kmi-menthe: #3da26c;
	--kmi-alerte: #ef5f28;
}

/* ---- en-tête de marque ---- */
.kmi-marque {
	display: flex;
	justify-content: center;
	padding: 2px 0 6px;
}
.kmi-marque img {
	display: block;
	width: auto;
	height: 42px;
	max-width: 100%;
	margin: 0;
}
.kmi-marque--compact img { height: 34px; }

/* Le logo clair ne sert qu'au thème clair, et inversement. */
.kmi .kmi-logo-clair { display: none; }
.kmi--clair .kmi-logo-clair { display: block; }
.kmi--clair .kmi-logo-sombre { display: none; }

/* En face à face, le logo du haut est retourné pour la personne d'en face. */
.kmi-duplex-barre .kmi-marque img { height: 26px; }

.kmi *,
.kmi *::before,
.kmi *::after { box-sizing: inherit; }

.kmi p { margin: 0; }

/* ---- panneaux ---- */
.kmi-panneau {
	background: var(--kmi-panneau);
	border: 1px solid var(--kmi-trait);
	border-radius: var(--kmi-r);
	padding: 14px 16px 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 122px;
}
.kmi-panneau--sortie {
	background: var(--kmi-panneau-haut);
	min-height: 148px;
}
.kmi--clair .kmi-panneau--sortie { border-color: var(--kmi-menthe); }
.kmi-panneau--sortie.kmi-retourne { transform: rotate(180deg); }

.kmi-tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 26px;
}
.kmi-langue { font-size: 15px; font-weight: 700; color: var(--kmi-doux); letter-spacing: -0.01em; }
.kmi-panneau--sortie .kmi-langue { color: var(--kmi-menthe); }

.kmi-texte {
	font-size: 17px;
	line-height: 1.35;
	min-height: 1.35em;
	overflow-wrap: break-word;
	flex: 1;
	color: var(--kmi-texte);
}
.kmi-texte--grand { font-size: 21px; }
.kmi-texte:empty::before {
	content: attr(data-vide);
	color: var(--kmi-creux);
	font-size: 16px;
}
.kmi-texte[dir="rtl"] { text-align: right; }

.kmi-moteur { font-weight: 400; font-size: 12.5px; color: var(--kmi-creux); }

.kmi-outils { display: flex; gap: 6px; }

.kmi-mini {
	border: 1px solid var(--kmi-trait);
	background: transparent;
	color: var(--kmi-doux);
	border-radius: 9px;
	padding: 6px 10px;
	font: inherit;
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
	margin: 0;
	min-height: 0;
	text-transform: none;
}
.kmi-mini:hover { color: var(--kmi-texte); }
.kmi-mini:disabled { opacity: 0.35; cursor: default; }

/* ---- paire de langues ---- */
.kmi-paire {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 8px;
}
.kmi-paire--fixe {
	justify-items: center;
	color: var(--kmi-doux);
	font-size: 15px;
	padding: 4px 0;
}
.kmi-fixe { font-weight: 600; color: var(--kmi-texte); }
.kmi-fleche { color: var(--kmi-menthe); }

.kmi select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--kmi-panneau);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a9b1d6' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 20px;
	border: 1px solid var(--kmi-trait);
	color: var(--kmi-texte);
	border-radius: 11px;
	padding: 11px 32px 11px 12px;
	font: inherit;
	font-size: 15px;
	height: auto;
	margin: 0;
	cursor: pointer;
}

.kmi-echanger {
	border: 1px solid var(--kmi-trait);
	background: var(--kmi-panneau);
	color: var(--kmi-menthe);
	width: 42px;
	height: 42px;
	min-height: 0;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.kmi-echanger svg { width: 20px; height: 20px; fill: currentColor; }

/* ---- micro ---- */
.kmi-zone-micro { display: flex; flex-direction: column; align-items: center; gap: 9px; padding-top: 4px; }

.kmi-micro {
	width: 96px;
	height: 96px;
	min-height: 0;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: var(--kmi-or);
	color: #3a2a06;
	cursor: pointer;
	display: grid;
	place-items: center;
	position: relative;
	box-shadow: 0 6px 0 var(--kmi-or-sombre);
	transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.kmi-micro:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--kmi-or-sombre); }
.kmi-micro svg { width: 42px; height: 42px; fill: currentColor; }
.kmi-micro[data-etat="ecoute"] { background: var(--kmi-alerte); box-shadow: 0 6px 0 #c4552c; color: #fff; }
.kmi-micro[data-etat="occupe"] { background: var(--kmi-menthe); box-shadow: 0 6px 0 #3f8f63; color: #10203a; }
.kmi-micro:disabled { background: var(--kmi-trait); box-shadow: none; color: var(--kmi-creux); cursor: default; }
.kmi-micro::after {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	border: 2px solid var(--kmi-alerte);
	opacity: 0;
}
.kmi-micro[data-etat="ecoute"]::after { animation: kmi-onde 1.4s ease-out infinite; }
@keyframes kmi-onde {
	0%   { transform: scale(0.9); opacity: 0.7; }
	100% { transform: scale(1.35); opacity: 0; }
}

.kmi-etat { font-size: 16px; font-weight: 500; color: var(--kmi-doux); text-align: center; min-height: 1.4em; }
.kmi-etat.kmi-actif { color: var(--kmi-texte); }

/* ---- bascules ---- */
.kmi-reglages { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.kmi-bascule {
	border: 1px solid var(--kmi-trait);
	background: transparent;
	color: var(--kmi-doux);
	border-radius: 999px;
	padding: 7px 13px;
	min-height: 0;
	font: inherit;
	font-size: 13.5px;
	line-height: 1.2;
	cursor: pointer;
	text-transform: none;
}
.kmi-bascule[aria-pressed="true"] {
	background: var(--kmi-menthe);
	border-color: var(--kmi-menthe);
	color: #141a45;
	font-weight: 600;
}
.kmi--clair .kmi-bascule[aria-pressed="true"] { color: #fff; }

/* ---- secours clavier ---- */
.kmi-secours { display: none; flex-direction: column; gap: 8px; }
.kmi-secours.kmi-on { display: flex; }
.kmi textarea {
	width: 100%;
	background: var(--kmi-panneau);
	border: 1px solid var(--kmi-trait);
	border-radius: 11px;
	color: var(--kmi-texte);
	font: inherit;
	font-size: 16px;
	padding: 11px 12px;
	resize: vertical;
	min-height: 64px;
	margin: 0;
}
.kmi-envoyer {
	border: none;
	border-radius: 11px;
	background: var(--kmi-menthe);
	color: #10203a;
	font: inherit;
	font-weight: 600;
	font-size: 16px;
	padding: 12px;
	cursor: pointer;
	min-height: 0;
	text-transform: none;
}
.kmi--clair .kmi-envoyer { color: #fff; }

/* ---- avis ---- */
.kmi-avis {
	border: 1px solid var(--kmi-trait);
	border-left: 3px solid var(--kmi-alerte);
	background: var(--kmi-panneau);
	border-radius: 10px;
	padding: 11px 13px;
	font-size: 14.5px;
	color: var(--kmi-doux);
}
.kmi-avis[hidden] { display: none; }

/* ---- historique ---- */
.kmi-details { border-top: 1px solid var(--kmi-trait); padding-top: 10px; }
.kmi-details summary {
	font-size: 14px;
	color: var(--kmi-doux);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.kmi-details summary::-webkit-details-marker { display: none; }
.kmi-hist { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; max-height: 230px; overflow-y: auto; }
.kmi-hist:empty::before { content: attr(data-vide); color: var(--kmi-creux); font-size: 14px; }
.kmi-tour { border-left: 2px solid var(--kmi-trait); padding-left: 10px; }
.kmi-tour p:first-child { font-size: 14px; color: var(--kmi-doux); }
.kmi-tour p:last-child { font-size: 15.5px; }

/* ---- accessibilité ---- */
.kmi button:focus-visible,
.kmi select:focus-visible,
.kmi textarea:focus-visible,
.kmi summary:focus-visible {
	outline: 2px solid var(--kmi-or);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.kmi-micro::after { animation: none !important; }
	.kmi * { transition: none !important; }
}

/* ==================================================================== */
/* MODE FACE À FACE                                                      */
/*                                                                       */
/* Le téléphone est posé à plat entre deux personnes. Chaque moitié      */
/* est dans la langue de celle qui la lit, et la moitié du haut est      */
/* retournée à 180°. Personne ne voit la langue de l'autre : c'est ce    */
/* qui supprime la confusion.                                            */
/*                                                                       */
/* Les états sont portés par la couleur et le mouvement, pas par du      */
/* texte : l'interface ne peut pas être écrite dans 25 langues.          */
/* ==================================================================== */

.kmi-duplex[hidden] { display: none; }

.kmi-duplex {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kmi-cote {
	background: var(--kmi-panneau);
	border: 1px solid var(--kmi-trait);
	border-radius: var(--kmi-r);
	padding: 16px;
	min-height: 190px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	transition: opacity 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.kmi-cote--haut { transform: rotate(180deg); }

/* L'autre personne parle : ce côté s'efface pour ne pas attirer l'œil. */
.kmi-cote[data-etat="attente"] { opacity: 0.42; }

/* C'est à vous : bord rouge, bouton vif. */
.kmi-cote[data-etat="ecoute"] {
	border-color: var(--kmi-alerte);
	background: color-mix(in srgb, var(--kmi-alerte) 8%, var(--kmi-panneau));
}
.kmi-cote[data-etat="traduit"] { border-color: var(--kmi-menthe); }
.kmi-cote[data-etat="parle"] {
	border-color: var(--kmi-menthe);
	background: color-mix(in srgb, var(--kmi-menthe) 8%, var(--kmi-panneau));
	opacity: 1;
}

.kmi-cote-texte {
	font-size: 22px;
	line-height: 1.3;
	text-align: center;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-wrap: break-word;
	width: 100%;
	color: var(--kmi-texte);
}
.kmi-cote-texte:empty::before {
	content: "—";
	color: var(--kmi-creux);
}

.kmi-cote-micro {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: none;
	border-radius: 999px;
	padding: 12px 22px 12px 16px;
	background: var(--kmi-trait);
	color: var(--kmi-texte);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	min-height: 52px;
	cursor: pointer;
	text-transform: none;
	position: relative;
	transition: background 0.2s ease, color 0.2s ease;
}
.kmi-cote-micro svg { width: 22px; height: 22px; fill: currentColor; }
.kmi-cote-micro:disabled { opacity: 0.4; cursor: default; }

.kmi-cote[data-etat="ecoute"] .kmi-cote-micro { background: var(--kmi-alerte); color: #fff; }
.kmi-cote[data-etat="parle"] .kmi-cote-micro,
.kmi-cote[data-etat="traduit"] .kmi-cote-micro { background: var(--kmi-menthe); color: #10203a; }
.kmi--clair .kmi-cote[data-etat="parle"] .kmi-cote-micro,
.kmi--clair .kmi-cote[data-etat="traduit"] .kmi-cote-micro { color: #fff; }

/* Pastille d'état : le seul signal commun aux deux langues. */
.kmi-cote-point {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
	flex: none;
}
.kmi-cote[data-etat="ecoute"] .kmi-cote-point { opacity: 1; animation: kmi-pouls 1s ease-in-out infinite; }
.kmi-cote[data-etat="traduit"] .kmi-cote-point { opacity: 1; animation: kmi-pouls 0.6s linear infinite; }
.kmi-cote[data-etat="parle"] .kmi-cote-point { opacity: 1; }

@keyframes kmi-pouls {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(0.55); opacity: 0.4; }
}

.kmi-duplex-barre {
	display: flex;
	justify-content: center;
	gap: 7px;
	padding: 2px 0;
}

/* En face à face, le micro unique et les outils du mode simple gênent. */
.kmi-en-duplex .kmi-zone-micro,
.kmi-en-duplex .kmi-secours { display: none; }

@media (prefers-reduced-motion: reduce) {
	.kmi-cote-point { animation: none !important; }
}

/* ==================================================================== */
/* ERGONOMIE ET AIDE                                                     */
/* ==================================================================== */

/* Toutes les cibles tactiles atteignent 44 px : c'est le minimum pour
   être touché du pouce sans viser, et beaucoup d'apprenants visent mal. */

.kmi-barre-haut {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 46px;
}
.kmi-barre-haut .kmi-marque { padding: 0; justify-content: flex-start; }

.kmi-aide-bouton {
	flex: none;
	width: 46px;
	height: 46px;
	min-height: 46px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid var(--kmi-trait);
	background: transparent;
	color: var(--kmi-doux);
	font: inherit;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.kmi-aide-bouton:hover,
.kmi-aide-bouton[aria-expanded="true"] {
	background: var(--kmi-or);
	border-color: var(--kmi-or);
	color: #3a2a06;
}

/* ---- choix du mode : premier geste, donc premier élément ---- */
.kmi-modes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	background: var(--kmi-panneau);
	border: 1px solid var(--kmi-trait);
	border-radius: 13px;
	padding: 5px;
}
.kmi-mode {
	border: none;
	background: transparent;
	color: var(--kmi-doux);
	border-radius: 9px;
	padding: 12px 8px;
	min-height: 46px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-transform: none;
}
.kmi-mode[aria-pressed="true"] {
	background: var(--kmi-or);
	color: #3a2a06;
}

/* ---- astuce du premier essai ---- */
.kmi-astuce {
	position: relative;
	background: var(--kmi-or);
	color: #3a2a06;
	font-size: 15px;
	font-weight: 600;
	border-radius: 10px;
	padding: 9px 14px;
	margin-bottom: 4px;
	text-align: center;
}
.kmi-astuce::after {
	content: "";
	position: absolute;
	bottom: -7px;
	left: 50%;
	margin-left: -7px;
	border: 7px solid transparent;
	border-top-color: var(--kmi-or);
	border-bottom: 0;
}
.kmi-astuce[hidden] { display: none; }

/* ---- cibles agrandies ---- */
.kmi-mini { padding: 10px 14px; min-height: 40px; font-size: 14px; }
.kmi-bascule { padding: 11px 16px; min-height: 44px; font-size: 14.5px; }
.kmi select { padding: 14px 34px 14px 13px; min-height: 48px; }
.kmi-echanger { width: 48px; height: 48px; }
.kmi-envoyer { min-height: 50px; }
.kmi-cote-micro { min-height: 56px; padding: 14px 24px 14px 18px; }

/* ---- bulle d'aide ---- */
.kmi-aide[hidden] { display: none; }
.kmi-aide {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.kmi-aide-fond {
	position: absolute;
	inset: 0;
	background: rgba(10, 14, 40, 0.72);
}
.kmi-aide-boite {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: 82vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--kmi-panneau);
	color: var(--kmi-texte);
	border: 1px solid var(--kmi-trait);
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.kmi--clair .kmi-aide-boite { background: #fff; }
.kmi-aide-boite:focus { outline: none; }

.kmi-aide-tete {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 16px 12px;
	background: inherit;
	border-bottom: 1px solid var(--kmi-trait);
	font-size: 18px;
}
.kmi-aide-fermer {
	flex: none;
	width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--kmi-trait);
	color: var(--kmi-texte);
	font: inherit;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.kmi-aide-corps { padding: 14px 18px 20px; }
.kmi-aide-corps h4 {
	margin: 0 0 8px;
	font-size: 16px;
	color: var(--kmi-or);
	font-weight: 700;
}
.kmi-aide-bloc { margin-top: 20px; }
.kmi-aide-bloc[hidden] { display: none; }
.kmi-aide-intro {
	font-size: 16.5px;
	line-height: 1.45;
	color: var(--kmi-texte);
}
.kmi-aide-corps p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--kmi-doux); }
.kmi-aide-corps ol,
.kmi-aide-corps ul { margin: 0; padding-left: 20px; }
.kmi-aide-corps li {
	font-size: 15.5px;
	line-height: 1.45;
	margin-bottom: 7px;
	color: var(--kmi-texte);
}
.kmi-aide-couleurs { list-style: none; padding-left: 0; }
.kmi-aide-couleurs li { display: flex; align-items: center; gap: 10px; }
.kmi-pastille {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	flex: none;
}
.kmi-pastille--orange { background: var(--kmi-orange, #ff7a45); }
.kmi-pastille--vert { background: var(--kmi-vert, #6bc48f); }
.kmi-pastille--gris { background: var(--kmi-creux); }

/* En face à face, l'aide reste à l'endroit pour celui qui tient l'appareil. */
.kmi-en-duplex .kmi-modes .kmi-mode { font-size: 14.5px; }

/* « Enchaîner sans appuyer » et « Chacun son tour » font la même chose,
   chacun dans son mode. On n'en montre qu'un à la fois. */
.kmi-en-duplex [data-kmi-continu] { display: none; }