/* ==========================================================================
   KMT Transfer — Système de design « Édition Dakar »
   Couche au-dessus de Tailwind CDN : tokens de marque, composants partagés,
   info-bulles. Papier chaud, encre, vert viridien profond, filets fins.
   Pas de dégradé, pas de pilule, pas de lueur : la précision fait le luxe.
   ========================================================================== */

/* --------------------------------------------------- tokens de marque KMT */
:root {
  /* Marque — vert viridien profond (identique au hub) */
  --kmt-green: #47755e;        /* accent principal */
  --kmt-green-strong: #35604b; /* boutons, liens */
  --kmt-green-deep: #2a4e3c;   /* survol */
  --kmt-green-soft: #dfe9e2;   /* fonds doux */
  --kmt-green-faint: #eff4f0;  /* fonds très doux */

  /* Encre / neutres chauds */
  --kmt-ink: #211b12;          /* texte principal, info-bulles */
  --kmt-ink-soft: #5f5747;     /* texte secondaire */
  --kmt-line: #e4dccb;         /* bordures */
  --kmt-line-strong: #d3c9b2;  /* bordures marquées */
  --kmt-paper: #fdfbf4;        /* fond des cartes */
  --kmt-page: #f8f5ee;         /* fond de page */

  /* Sémantique (statuts partagés hub + transfer) */
  --kmt-ok: #2e5c45;       /* succès / réglé */
  --kmt-ok-soft: #e5eee6;
  --kmt-warn: #8f5d14;     /* en cours / attention */
  --kmt-warn-soft: #f5ead3;
  --kmt-err: #a93b2a;      /* échec */
  --kmt-err-soft: #f5e1db;
  --kmt-info: #374682;     /* information */
  --kmt-info-soft: #e5e8f4;

  --kmt-radius: 0.375rem;
  --kmt-shadow: 0 1px 2px rgba(33, 27, 18, 0.05);
  --kmt-shadow-pop: 0 3px 14px rgba(33, 27, 18, 0.22);
}

/* ============================================================= info-bulles
   Usage : <span class="kmt-tip" tabindex="0" data-tip="Explication simple">ⓘ</span>
   Le glyphe éventuel à l'intérieur du déclencheur est masqué : le marqueur
   visible est un petit losange dessiné en CSS (motif tissé simplifié).
   Variante de position : data-tip-pos="below" | "left" | "right"
   Fonctionne à la souris (hover), au clavier (tab → focus) et au doigt (tap).
   -------------------------------------------------------------------------- */
.kmt-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  outline: none;
}
/* Déclencheur « nu » (kmt-tip-hover exclu) : losange seul, glyphe masqué */
.kmt-tip:not(.kmt-tip-hover) {
  font-size: 0;
  width: 9px;
  height: 9px;
  display: inline-block;
  background: center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='2.4' y='2.4' width='5.2' height='5.2' transform='rotate(45 5 5)' fill='none' stroke='%23a79b83' stroke-width='1.3'/%3E%3C/svg%3E");
  transition: filter 0.15s ease;
}
.kmt-tip:not(.kmt-tip-hover):hover,
.kmt-tip:not(.kmt-tip-hover):focus-visible {
  background: center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='2.4' y='2.4' width='5.2' height='5.2' transform='rotate(45 5 5)' fill='%2335604b'/%3E%3C/svg%3E");
}
.kmt-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%) scale(0.97);
  transform-origin: bottom center;
  width: max-content;
  max-width: 260px;
  padding: 8px 11px;
  border-radius: 2px;
  background: var(--kmt-ink);
  color: #f6f1e4;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  text-align: left;
  white-space: normal;
  box-shadow: var(--kmt-shadow-pop);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 80;
}
.kmt-tip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--kmt-ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s;
  z-index: 80;
}
.kmt-tip:hover::after,
.kmt-tip:focus-visible::after,
.kmt-tip:hover::before,
.kmt-tip:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}
/* Variante : en dessous (quand l'info-bulle est collée en haut de page) */
.kmt-tip[data-tip-pos="below"]::after {
  bottom: auto;
  top: calc(100% + 9px);
  transform: translateX(-50%) scale(0.97);
  transform-origin: top center;
}
.kmt-tip[data-tip-pos="below"]::before {
  bottom: auto;
  top: calc(100% + 4px);
  border-top-color: transparent;
  border-bottom-color: var(--kmt-ink);
}
.kmt-tip[data-tip-pos="below"]:hover::after,
.kmt-tip[data-tip-pos="below"]:focus-visible::after {
  transform: translateX(-50%) scale(1);
}
/* Variante : à gauche (quand on est collé au bord droit) */
.kmt-tip[data-tip-pos="left"]::after {
  left: auto;
  right: calc(100% + 9px);
  bottom: auto;
  top: 50%;
  transform: translate(0, -50%) scale(0.97);
  transform-origin: right center;
}
.kmt-tip[data-tip-pos="left"]::before {
  left: auto;
  right: calc(100% + 4px);
  bottom: auto;
  top: 50%;
  transform: translate(0, -50%);
  border-top-color: transparent;
  border-right-color: var(--kmt-ink);
}
.kmt-tip[data-tip-pos="left"]:hover::after,
.kmt-tip[data-tip-pos="left"]:focus-visible::after {
  transform: translate(0, -50%) scale(1);
}
/* Variante : à droite (bord gauche) */
.kmt-tip[data-tip-pos="right"]::after {
  left: calc(100% + 9px);
  bottom: auto;
  top: 50%;
  transform: translate(0, -50%) scale(0.97);
  transform-origin: left center;
}
.kmt-tip[data-tip-pos="right"]::before {
  left: calc(100% + 4px);
  bottom: auto;
  top: 50%;
  transform: translate(0, -50%);
  border-top-color: transparent;
  border-left-color: var(--kmt-ink);
}
.kmt-tip[data-tip-pos="right"]:hover::after,
.kmt-tip[data-tip-pos="right"]:focus-visible::after {
  transform: translate(0, -50%) scale(1);
}
/* Info-bulle au clavier sans focus-visible explicite (navigateurs anciens) */
.kmt-tip:focus::after,
.kmt-tip:focus::before {
  opacity: 1;
  visibility: visible;
}
/* Variante « déclencheur invisible » : l'élément porteur garde ses propres
   couleurs et son curseur (liens de menu, boutons…) — l'info-bulle reste
   déclenchée au survol / focus. */
.kmt-tip-hover,
.kmt-tip-hover:hover,
.kmt-tip-hover:focus-visible {
  cursor: inherit;
  color: inherit;
}

/* ============================================================== composants */

/* Carte KMT — ivoire, filet fin, presque pas d'ombre */
.kmt-card {
  background: var(--kmt-paper);
  border: 1px solid var(--kmt-line);
  border-radius: var(--kmt-radius);
  box-shadow: var(--kmt-shadow);
}

/* Boutons */
.kmt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.625rem 1.125rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, transform 0.05s ease;
}
.kmt-btn:active {
  transform: translateY(1px);
}
.kmt-btn:focus-visible {
  outline: none;
  border-color: var(--kmt-green-deep);
  box-shadow: 0 0 0 1px var(--kmt-green-deep);
}
.kmt-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.kmt-btn-primary {
  background: var(--kmt-green-strong);
  color: #f6f1e4;
}
.kmt-btn-primary:hover:not(:disabled) {
  background: var(--kmt-green-deep);
}
.kmt-btn-secondary {
  background: var(--kmt-paper);
  border-color: var(--kmt-line-strong);
  color: var(--kmt-ink);
}
.kmt-btn-secondary:hover:not(:disabled) {
  border-color: var(--kmt-ink);
}
.kmt-btn-danger {
  background: transparent;
  border-color: #d9a893;
  color: var(--kmt-err);
}
.kmt-btn-danger:hover:not(:disabled) {
  background: var(--kmt-err-soft);
  border-color: var(--kmt-err);
}
.kmt-btn-ghost {
  background: transparent;
  color: var(--kmt-ink-soft);
}
.kmt-btn-ghost:hover:not(:disabled) {
  background: var(--kmt-page);
  color: var(--kmt-ink);
}

/* Champs de formulaire */
.kmt-input {
  display: block;
  width: 100%;
  border: 1px solid var(--kmt-line-strong);
  border-radius: 0.25rem;
  padding: 0.55rem 0.85rem;
  font: inherit;
  color: var(--kmt-ink);
  background: #fbf8ef;
  transition: border-color 0.15s ease, background-color 0.15s ease,
    box-shadow 0.15s ease;
}
.kmt-input:focus {
  outline: none;
  border-color: var(--kmt-green-strong);
  background: #fffdf6;
  box-shadow: 0 0 0 1px var(--kmt-green-strong);
}
.kmt-input::placeholder {
  color: #a79b83;
}

/* Libellé + texte d'aide */
.kmt-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--kmt-ink-soft);
}
.kmt-help {
  font-size: 0.75rem;
  color: #7e735f;
}

/* Badges de statut (sémantique commune hub + transfer) — point + petites caps */
.kmt-badge {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 0.1rem 0.5rem 0.1rem 1rem;
  border-radius: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kmt-badge-ok::before,
.kmt-badge-warn::before,
.kmt-badge-err::before,
.kmt-badge-info::before,
.kmt-badge-mute::before {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.kmt-badge-ok   { background: var(--kmt-ok-soft);   color: var(--kmt-ok); }
.kmt-badge-warn { background: var(--kmt-warn-soft); color: var(--kmt-warn); }
.kmt-badge-err  { background: var(--kmt-err-soft);  color: var(--kmt-err); }
.kmt-badge-info { background: var(--kmt-info-soft); color: var(--kmt-info); }
.kmt-badge-mute { background: #f0ebe0;              color: var(--kmt-ink-soft); }

/* Ligne d'accent sous l'en-tête (identité KMT) — filet vert plein */
.kmt-brandline {
  height: 2px;
  background: var(--kmt-green-strong);
}

/* ================================================================== héritage
   (cases OTP, copie, htmx, spinner, timeline — inchangés)
   -------------------------------------------------------------------------- */

/* Cases du code OTP */
.otp-box {
  -webkit-appearance: none;
  appearance: none;
}
.otp-box:focus {
  outline: none;
  border-color: var(--kmt-green-strong);
  box-shadow: 0 0 0 1px var(--kmt-green-strong);
}

/* Bouton de copie cliquable (chips de code, ids) */
[data-copy] {
  cursor: pointer;
  user-select: none;
}

/* Indicateur de chargement htmx */
.htmx-indicator {
  opacity: 0;
  transition: opacity 150ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Petit spinner réutilisable */
.kmt-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(246, 241, 228, 0.4);
  border-top-color: #f6f1e4;
  border-radius: 9999px;
  display: inline-block;
  animation: kmt-spin 0.7s linear infinite;
}
@keyframes kmt-spin {
  to { transform: rotate(360deg); }
}

/* Timeline de statut (page de dépôt mobile money) */
.kmt-step {
  position: relative;
  padding-left: 2rem;
  padding-bottom: 1.25rem;
}
.kmt-step::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 1.4rem;
  bottom: -0.1rem;
  width: 1px;
  background: var(--kmt-line-strong);
}
.kmt-step:last-child::before {
  display: none;
}
.kmt-step-dot {
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  border: 2px solid var(--kmt-line-strong);
  background: var(--kmt-paper);
}
.kmt-step.done .kmt-step-dot {
  background: var(--kmt-green-strong);
  border-color: var(--kmt-green-strong);
}
.kmt-step.active .kmt-step-dot {
  border-color: var(--kmt-green-strong);
  box-shadow: 0 0 0 3px rgba(53, 96, 75, 0.18);
}