/* Maxi Services — Composants (calqués sur design-system/reference/*.jsx).
   UNIQUEMENT des variables des tokens (jamais de valeur brute). Les teintes
   translucides sont dérivées par color-mix sur les tokens, jamais en rgba brut.
   11 composants : bouton, icon-btn, champ/input, checkbox, radio, badge,
   carte, alerte, dialogue, toast, onglets. */

/* ============================== 1. BOUTON ============================== */
.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  /* taille md par défaut */
  padding: 11px 22px;
  min-height: 42px;
  font-size: var(--text-sm);
}
.ms-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ms-btn:active { transform: translateY(1px); }
.ms-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ms-btn:disabled:active { transform: none; }

/* tailles */
.ms-btn--sm { padding: 8px 16px; min-height: 34px; font-size: var(--text-sm); }
.ms-btn--lg { padding: 14px 28px; min-height: 50px; font-size: var(--text-md); }
.ms-btn--bloc { width: 100%; }

/* variantes */
.ms-btn--primaire { background: var(--action-primary); color: var(--text-on-brand); }
.ms-btn--primaire:hover:not(:disabled) { background: var(--action-primary-hover); }

.ms-btn--degrade { background: var(--ms-gradient); color: var(--text-on-brand); }
.ms-btn--degrade:hover:not(:disabled) { filter: saturate(1.15) brightness(0.96); }

.ms-btn--sombre { background: var(--ms-ink); color: var(--ms-paper); }
.ms-btn--sombre:hover:not(:disabled) { background: var(--ms-graphite); }

.ms-btn--contour { background: transparent; color: var(--ms-ink); border-color: var(--ms-ink); }
.ms-btn--contour:hover:not(:disabled) { background: var(--ms-ink); color: var(--ms-paper); }

.ms-btn--fantome { background: transparent; color: var(--ms-ink); }
.ms-btn--fantome:hover:not(:disabled) { background: var(--ms-cloud); }

/* variantes sémantiques d'action (succès / danger-contour) — usages terrain */
.ms-btn--succes { background: var(--ms-success); color: var(--text-on-brand); }
.ms-btn--succes:hover:not(:disabled) { filter: brightness(0.94); }
.ms-btn--danger-contour { background: transparent; color: var(--ms-danger); border-color: var(--ms-danger); }
.ms-btn--danger-contour:hover:not(:disabled) { background: var(--ms-danger); color: var(--text-on-brand); }

/* ============================ 2. ICON-BUTTON =========================== */
.ms-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  background: transparent;
  color: var(--ms-steel);
  transition: all var(--duration-fast) var(--ease-out);
}
.ms-icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ms-icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ms-icon-btn--sm { width: 30px; height: 30px; }
.ms-icon-btn--lg { width: 46px; height: 46px; }
.ms-icon-btn--primaire { background: var(--action-primary); color: var(--text-on-brand); }
.ms-icon-btn--primaire:hover:not(:disabled) { background: var(--action-primary-hover); }
.ms-icon-btn--sombre { background: var(--ms-ink); color: var(--ms-paper); }
.ms-icon-btn--sombre:hover:not(:disabled) { background: var(--ms-graphite); }
.ms-icon-btn--contour { border-color: var(--ms-ink); color: var(--ms-ink); }
.ms-icon-btn--contour:hover:not(:disabled) { background: var(--ms-ink); color: var(--ms-paper); }
.ms-icon-btn--fantome:hover:not(:disabled) { background: var(--ms-cloud); color: var(--ms-ink); }

/* ============================ 3. CHAMP / INPUT ========================= */
.ms-champ { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-body); }
.ms-label {
  font-family: var(--font-sans);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--ms-steel);
}
.ms-label--danger { color: var(--ms-danger); }
.ms-input, .ms-textarea {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--ms-ink);
  padding: 11px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-default);
  outline: none;
  background: var(--ms-white);
  width: 100%;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.ms-textarea { resize: vertical; min-height: 96px; }
.ms-input:focus, .ms-textarea:focus { border-color: var(--border-strong); box-shadow: var(--focus-ring); }
.ms-input:disabled, .ms-textarea:disabled { background: var(--ms-cloud); cursor: not-allowed; }
.ms-input--erreur { border-color: var(--ms-danger); }
.ms-champ-aide { font-size: var(--text-xs); color: var(--ms-slate); }
.ms-champ-aide--erreur { color: var(--ms-danger); }

/* ============================= 4. CHECKBOX ============================= */
.ms-check { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-family: var(--font-body); font-size: var(--text-md); color: var(--ms-ink); user-select: none; }
.ms-check__case {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--ms-mist);
  background: var(--ms-white);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-on-brand);
  transition: all var(--duration-fast) var(--ease-out);
}
.ms-check.is-coche .ms-check__case { border-color: var(--ms-flame); background: var(--ms-flame); }
.ms-check[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* ============================== 5. RADIO ============================== */
.ms-radio-groupe { display: flex; flex-direction: column; gap: var(--space-3); }
.ms-radio-groupe--ligne { flex-direction: row; gap: var(--space-5); }
.ms-radio { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-family: var(--font-body); font-size: var(--text-md); color: var(--ms-ink); user-select: none; }
.ms-radio__cercle {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--ms-mist);
  background: var(--ms-white);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--duration-fast);
}
.ms-radio.is-actif .ms-radio__cercle { border-color: var(--ms-flame); }
.ms-radio.is-actif .ms-radio__cercle::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ms-flame); }

/* ============================== 6. BADGE ============================== */
.ms-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ms-badge--neutre  { background: var(--ms-cloud); color: var(--ms-graphite); }
.ms-badge--marque  { background: var(--ms-gradient-soft); color: var(--ms-flame); }
.ms-badge--sombre  { background: var(--ms-ink); color: var(--ms-paper); }
.ms-badge--succes  { background: var(--ms-success-bg); color: var(--ms-success); }
.ms-badge--warning { background: var(--ms-warning-bg); color: var(--ms-warning); }
.ms-badge--danger  { background: var(--ms-danger-bg); color: var(--ms-danger); }
.ms-badge--info    { background: var(--ms-info-bg); color: var(--ms-info); }

/* =============================== 7. CARTE ============================== */
.ms-carte {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  font-family: var(--font-body);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--ms-ink);
  box-shadow: var(--shadow-sm);
}
.ms-carte--sombre { background: var(--surface-dark); border-color: transparent; color: var(--ms-paper); }
.ms-carte--creuse { background: var(--surface-sunken); border-color: transparent; box-shadow: none; }

/* ============================== 8. ALERTE ============================= */
.ms-alerte {
  display: flex; gap: var(--space-3);
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ms-graphite);
}
.ms-alerte__ic { flex-shrink: 0; line-height: 1.4; }
.ms-alerte__titre { font-family: var(--font-sans); font-weight: 700; margin-bottom: 2px; }
.ms-alerte--info    { background: var(--ms-info-bg);    border-color: color-mix(in srgb, var(--ms-info) 20%, transparent); }
.ms-alerte--info    .ms-alerte__titre { color: var(--ms-info); }
.ms-alerte--succes  { background: var(--ms-success-bg); border-color: color-mix(in srgb, var(--ms-success) 20%, transparent); }
.ms-alerte--succes  .ms-alerte__titre { color: var(--ms-success); }
.ms-alerte--warning { background: var(--ms-warning-bg); border-color: color-mix(in srgb, var(--ms-warning) 20%, transparent); }
.ms-alerte--warning .ms-alerte__titre { color: var(--ms-warning); }
.ms-alerte--danger  { background: var(--ms-danger-bg);  border-color: color-mix(in srgb, var(--ms-danger) 20%, transparent); }
.ms-alerte--danger  .ms-alerte__titre { color: var(--ms-danger); }

/* ============================= 9. DIALOGUE ============================ */
.ms-dialogue-fond {
  position: fixed; inset: 0; z-index: 1000;
  background: color-mix(in srgb, var(--ms-black) 50%, transparent);
  display: flex; align-items: center; justify-content: center; padding: var(--space-5);
}
.ms-dialogue {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%; max-width: 480px; max-height: 85vh;
  display: flex; flex-direction: column;
  font-family: var(--font-body);
}
.ms-dialogue__entete { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; }
.ms-dialogue__titre { margin: 0; font-family: var(--font-sans); font-weight: 800; font-size: var(--text-xl); letter-spacing: -0.015em; color: var(--ms-ink); }
.ms-dialogue__corps { padding: 16px 24px; overflow-y: auto; font-size: var(--text-md); line-height: 1.6; color: var(--ms-graphite); }
.ms-dialogue__pied { display: flex; justify-content: flex-end; gap: var(--space-3); padding: 0 24px 20px; }

/* ============================== 10. TOAST ============================= */
.ms-toast {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--ms-ink); color: var(--ms-paper);
  padding: 14px 16px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); max-width: 380px;
  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5;
}
.ms-toast__accent { width: 4px; align-self: stretch; border-radius: 2px; flex-shrink: 0; background: var(--ms-amber); }
.ms-toast--succes .ms-toast__accent { background: color-mix(in srgb, var(--ms-success) 70%, var(--ms-white)); }
.ms-toast--danger .ms-toast__accent { background: color-mix(in srgb, var(--ms-danger) 55%, var(--ms-white)); }
.ms-toast__titre { font-family: var(--font-sans); font-weight: 700; }
.ms-toast__txt { color: var(--ms-mist); }

/* ============================= 11. ONGLETS =========================== */
.ms-onglets { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--border-default); }
.ms-onglet {
  position: relative; background: none; border: 0; cursor: pointer;
  padding: 10px 2px 12px;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500;
  color: var(--ms-slate);
  transition: color var(--duration-fast);
}
.ms-onglet::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; background: transparent; transition: background var(--duration-fast); }
.ms-onglet.is-actif { font-weight: 700; color: var(--ms-ink); }
.ms-onglet.is-actif::after { background: var(--ms-gradient); }