/* =========================================================================
 * Marylink — Components (Phase 2)
 * Préfixe strict : `ml-*` (et `mlfeed-*`). Aucune fuite hors préfixe.
 * Source de vérité : INSTRUCTIONS-DESIGN.md + marylink-reference-composants.html
 * Tokens : hérités de ml-polish-hotfix.css (déclarés sur :root).
 * ========================================================================= */

/* ---------- Re-declare tokens that may be missing (defensive) ----------
 * Si ml-polish-hotfix.css n'est pas chargé, les variables restent valides. */
:root {
	--ml-violet:      #7A3FC4;
	--ml-violet-soft: #EFE7F8;
	--ml-teal:        #1C8C82;
	--ml-teal-soft:   #DCF0EE;
	--ml-orange:      #C9701B;
	--ml-orange-soft: #FBEBD9;
	--ml-rose:        #C0418C;
	--ml-rose-soft:   #F8E4F0;

	/* lignes des urgences (bordures soft) */
	--ml-amber-line: #EAD49B;
	--ml-red-line:   #F0C9C5;

	/* transitions */
	--ml-ease-out: cubic-bezier(.22,.61,.36,1);
	--ml-t-fast:   120ms;
	--ml-t-normal: 180ms;
	--ml-t-slow:   260ms;
}

/* =========================================================================
 * 1. ml-card — la brique conteneur de base
 * ========================================================================= */
.ml-card {
	background: var(--ml-surface);
	border: 1px solid var(--ml-border);
	border-radius: 12px;
	box-shadow: var(--ml-shadow-card);
	overflow: hidden;
	transition: box-shadow var(--ml-t-fast) var(--ml-ease-out),
	            border-color var(--ml-t-fast) var(--ml-ease-out);
}
.ml-card.is-hoverable:hover {
	box-shadow: var(--ml-shadow-hover);
	border-color: var(--ml-border-strong);
}
.ml-card__band      { height: 4px; background: var(--ml-slate); }
.ml-card__band--contenu { background: var(--ml-violet); }
.ml-card__band--prompt  { background: var(--ml-teal); }
.ml-card__band--outil   { background: var(--ml-orange); }
.ml-card__band--style   { background: var(--ml-rose); }
.ml-card__band--officiel{ background: var(--ml-indigo); }

.ml-card__body  { padding: 16px; }
.ml-card__title { font-size: 14px; font-weight: 800; letter-spacing: -.02em; color: var(--ml-ink); }
.ml-card__meta  { font-size: 11px; font-weight: 700; color: var(--ml-muted); margin-top: 4px; }

/* =========================================================================
 * 2. ml-button — primaire, secondaire, danger, icône
 * ========================================================================= */
.ml-button {
	font-family: var(--ml-font-stack);
	height: 36px;
	padding: 0 16px;
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border: 1px solid transparent;
	cursor: pointer;
	background: transparent;
	color: var(--ml-ink-soft);
	transition: background var(--ml-t-fast) var(--ml-ease-out),
	            border-color var(--ml-t-fast) var(--ml-ease-out),
	            color var(--ml-t-fast) var(--ml-ease-out),
	            transform 50ms var(--ml-ease-out);
}
.ml-button:active { transform: translateY(1px); }
.ml-button:disabled,
.ml-button.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.ml-button svg { width: 14px; height: 14px; flex-shrink: 0; }

.ml-button--primary {
	background: var(--ml-indigo);
	color: #fff;
	border-color: var(--ml-indigo);
}
.ml-button--primary:hover {
	background: var(--ml-indigo-ink);
	border-color: var(--ml-indigo-ink);
}

.ml-button--secondary {
	background: var(--ml-surface);
	color: var(--ml-ink-soft);
	border: 1px solid var(--ml-border);
}
.ml-button--secondary:hover {
	background: var(--ml-bg);
	border-color: var(--ml-border-strong);
	color: var(--ml-ink);
}

.ml-button--danger {
	background: var(--ml-danger-ink);
	color: #fff;
	border-color: var(--ml-danger-ink);
}
.ml-button--danger:hover {
	background: var(--ml-danger);
	border-color: var(--ml-danger);
}

.ml-button--ghost-danger {
	background: var(--ml-surface);
	color: var(--ml-danger-ink);
	border: 1px solid var(--ml-danger-soft);
}
.ml-button--ghost-danger:hover {
	background: var(--ml-danger-soft);
	border-color: var(--ml-danger);
}

.ml-button--icon {
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 8px;
	border: 1px solid var(--ml-border);
	background: var(--ml-surface);
}
.ml-button--icon:hover {
	background: var(--ml-bg);
	border-color: var(--ml-border-strong);
}

.ml-button--small { height: 28px; padding: 0 11px; font-size: 11px; gap: 5px; }
.ml-button--large { height: 44px; padding: 0 22px; font-size: 13px; }

/* =========================================================================
 * 3. ml-input — text, search, textarea, select
 * ========================================================================= */
.ml-input,
.ml-select {
	font-family: var(--ml-font-stack);
	height: 36px;
	padding: 0 12px;
	border-radius: 8px;
	border: 1px solid var(--ml-border);
	background: var(--ml-surface);
	color: var(--ml-ink);
	font-size: 12.5px;
	width: 100%;
	transition: border-color var(--ml-t-fast) var(--ml-ease-out),
	            box-shadow  var(--ml-t-fast) var(--ml-ease-out);
}
.ml-input:focus,
.ml-select:focus {
	outline: none;
	border-color: var(--ml-indigo);
	box-shadow: 0 0 0 3px var(--ml-indigo-soft);
}
.ml-input::placeholder { color: var(--ml-faint); }

.ml-textarea {
	font-family: var(--ml-font-stack);
	min-height: 96px;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--ml-border);
	background: var(--ml-surface);
	color: var(--ml-ink);
	font-size: 12.5px;
	line-height: 1.5;
	width: 100%;
	resize: vertical;
}
.ml-textarea:focus {
	outline: none;
	border-color: var(--ml-indigo);
	box-shadow: 0 0 0 3px var(--ml-indigo-soft);
}

/* champ recherche avec icône intégrée */
.ml-search {
	position: relative;
	width: 100%;
}
.ml-search > .ml-input { padding-left: 36px; }
.ml-search > .ml-search__icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	color: var(--ml-faint);
	pointer-events: none;
}

/* =========================================================================
 * 4. ml-toolbar — barre d'actions horizontale
 * ========================================================================= */
.ml-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: var(--ml-surface);
	border: 1px solid var(--ml-border);
	border-radius: 12px;
	box-shadow: var(--ml-shadow-card);
}
.ml-toolbar__spacer { flex: 1; }

/* =========================================================================
 * 5. ml-filterbar — pills de filtres actifs
 * ========================================================================= */
.ml-filterbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 0;
}

/* =========================================================================
 * 6. ml-chip — pill simple (filtre actif, tag, meta)
 * ========================================================================= */
.ml-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 10px;
	border-radius: 8px;
	background: var(--ml-slate-soft);
	color: var(--ml-slate);
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	border: none;
}
.ml-chip--removable {
	cursor: pointer;
	padding-right: 6px;
}
.ml-chip__remove {
	display: inline-grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	color: var(--ml-faint);
	transition: background var(--ml-t-fast) var(--ml-ease-out);
}
.ml-chip__remove:hover {
	background: rgba(0,0,0,.06);
	color: var(--ml-ink-soft);
}

/* =========================================================================
 * 7. ml-type-dot — pastille de TYPE (8 valeurs : 4 composants IA + 4 éditoriales)
 *    Forme = catégorie. Carré plein pour composant, cercle pointillé pour éditorial.
 * ========================================================================= */
.ml-type-dot {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 800;
	color: var(--ml-ink-soft);
	white-space: nowrap;
}
.ml-type-dot::before {
	content: "";
	width: 11px;
	height: 11px;
	border-radius: 3px;
	flex-shrink: 0;
	background: var(--ml-slate);
}
.ml-type-dot--contenu::before { background: var(--ml-violet); }
.ml-type-dot--prompt::before  { background: var(--ml-teal); }
.ml-type-dot--outil::before   { background: var(--ml-orange); }
.ml-type-dot--style::before   { background: var(--ml-rose); }

/* Éditorial — icône dans cercle au contour pointillé (note, pas composant) */
.ml-ed-dot {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 800;
	color: var(--ml-ink-soft);
}
.ml-ed-dot__icon {
	width: 17px;
	height: 17px;
	border-radius: 50%;
	border: 1.5px dotted var(--ml-slate);
	display: grid;
	place-items: center;
	flex-shrink: 0;
	color: var(--ml-slate);
}
.ml-ed-dot__icon svg { width: 10px; height: 10px; }

/* =========================================================================
 * 8. ml-stage-track — segments d'étape du cycle (forme = catégorie)
 * ========================================================================= */
.ml-stage-track {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ml-stage-track__segs {
	display: flex;
	gap: 2px;
}
.ml-stage-track__seg {
	width: 14px;
	height: 5px;
	border-radius: 2px;
	background: var(--ml-slate-soft);
}
.ml-stage-track__seg.is-on { background: var(--ml-slate); }
.ml-stage-track__label {
	font-size: 11px;
	font-weight: 700;
	color: var(--ml-ink-soft);
}

/* =========================================================================
 * 9. ml-status-pill — urgence (ok / warn / crit) — couleur = urgence
 * ========================================================================= */
.ml-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 24px;
	padding: 0 9px;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 800;
	white-space: nowrap;
	background: var(--ml-slate-soft);
	color: var(--ml-slate);
}
.ml-status-pill__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.ml-status-pill--ok    { background: var(--ml-success-soft); color: var(--ml-success-ink); }
.ml-status-pill--warn  { background: var(--ml-warning-soft); color: var(--ml-warning-ink); }
.ml-status-pill--crit  { background: var(--ml-danger-soft);  color: var(--ml-danger-ink); }

/* =========================================================================
 * 10. ml-verdict — 5 valeurs fixes du verdict de confiance
 *     (la valeur affichée vient de l'API, jamais calculée côté front)
 * ========================================================================= */
.ml-verdict {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 28px;
	padding: 0 11px;
	border-radius: 8px;
	font-size: 11.5px;
	font-weight: 900;
	background: var(--ml-slate-soft);
	color: var(--ml-slate);
	white-space: nowrap;
}
.ml-verdict svg { width: 13px; height: 13px; }
.ml-verdict--high       { background: var(--ml-success-soft); color: var(--ml-success-ink); }
.ml-verdict--popular    { background: var(--ml-slate-soft);   color: var(--ml-slate); }
.ml-verdict--reval      { background: var(--ml-warning-soft); color: var(--ml-warning-ink); }
.ml-verdict--suspended  { background: var(--ml-danger-soft);  color: var(--ml-danger-ink); }
.ml-verdict--no-owner   { background: var(--ml-danger-soft);  color: var(--ml-danger-ink); }

/* =========================================================================
 * 11. ml-avatar — humain rond / agent carré arrondi
 *     Anneaux : expert violet, champion ambre. Rôles gouvernance = pastille coin.
 * ========================================================================= */
.ml-avatar-wrap {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
}
.ml-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	background: var(--ml-slate);
	overflow: hidden;
}
.ml-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ml-avatar--agent { border-radius: 11px; }
.ml-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.ml-avatar--lg { width: 56px; height: 56px; font-size: 16px; }
.ml-avatar--xl { width: 80px; height: 80px; font-size: 22px; }

.ml-avatar-ring-expert {
	box-shadow: 0 0 0 2.5px var(--ml-surface), 0 0 0 4.5px var(--ml-violet);
}
.ml-avatar-ring-champion {
	box-shadow: 0 0 0 2.5px var(--ml-surface), 0 0 0 4.5px var(--ml-warning);
}

.ml-role-pin {
	position: absolute;
	right: -3px;
	top: -3px;
	width: 16px;
	height: 16px;
	border-radius: 5px;
	display: grid;
	place-items: center;
	border: 2px solid var(--ml-surface);
	background: var(--ml-slate);
	color: #fff;
}
.ml-role-pin svg { width: 9px; height: 9px; }
.ml-role-pin--admin     { background: #2C313B; }  /* ardoise foncé : admin plateforme */
.ml-role-pin--moderator { background: var(--ml-slate); } /* ardoise : modérateur d'espace */

/* =========================================================================
 * 12. ml-empty-state — état vide cohérent
 * ========================================================================= */
.ml-empty-state {
	text-align: center;
	padding: 48px 24px;
	background: var(--ml-surface);
	border: 1px dashed var(--ml-border);
	border-radius: 14px;
	color: var(--ml-muted);
}
.ml-empty-state__icon {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--ml-bg);
	color: var(--ml-faint);
	margin-bottom: 14px;
}
.ml-empty-state__icon svg { width: 22px; height: 22px; }
.ml-empty-state__title {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--ml-ink);
	margin-bottom: 6px;
}
.ml-empty-state__text {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ml-muted);
	max-width: 420px;
	margin: 0 auto 16px;
	line-height: 1.55;
}

/* =========================================================================
 * 13. ml-toast — notification flottante (3 niveaux)
 * ========================================================================= */
.ml-toast {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	background: var(--ml-surface);
	border: 1px solid var(--ml-border);
	border-radius: 12px;
	box-shadow: var(--ml-shadow-popover);
	min-width: 280px;
	max-width: 480px;
}
.ml-toast__icon {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	flex-shrink: 0;
	color: #fff;
	background: var(--ml-slate);
}
.ml-toast__icon svg { width: 12px; height: 12px; }
.ml-toast__body {
	flex: 1;
	min-width: 0;
}
.ml-toast__title {
	font-size: 12.5px;
	font-weight: 800;
	color: var(--ml-ink);
	margin-bottom: 2px;
}
.ml-toast__text {
	font-size: 11.5px;
	font-weight: 500;
	color: var(--ml-muted);
	line-height: 1.5;
}
.ml-toast--success .ml-toast__icon { background: var(--ml-success); }
.ml-toast--warning .ml-toast__icon { background: var(--ml-warning); }
.ml-toast--danger  .ml-toast__icon { background: var(--ml-danger); }
.ml-toast--info    .ml-toast__icon { background: var(--ml-indigo); }

/* =========================================================================
 * 14. ml-popover — petit panneau flottant
 * ========================================================================= */
.ml-popover {
	background: var(--ml-surface);
	border: 1px solid var(--ml-border);
	border-radius: 12px;
	box-shadow: var(--ml-shadow-popover);
	padding: 6px;
	min-width: 200px;
}
.ml-popover__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ml-ink-soft);
	cursor: pointer;
	transition: background var(--ml-t-fast) var(--ml-ease-out);
}
.ml-popover__item:hover {
	background: var(--ml-bg);
	color: var(--ml-ink);
}
.ml-popover__item--danger {
	color: var(--ml-danger-ink);
}
.ml-popover__item--danger:hover {
	background: var(--ml-danger-soft);
}
.ml-popover__sep {
	height: 1px;
	background: var(--ml-border);
	margin: 4px 6px;
}

/* =========================================================================
 * 15. ml-actionbar — barre sticky d'actions de page
 * ========================================================================= */
.ml-actionbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: var(--ml-surface);
	border-top: 1px solid var(--ml-border);
	position: sticky;
	bottom: 0;
	box-shadow: 0 -4px 12px rgba(20,24,32,.04);
}
.ml-actionbar__spacer { flex: 1; }

/* =========================================================================
 * 16. ml-title / ml-meta / ml-label — typographies fermées
 *     Six tailles, pas une de plus.
 * ========================================================================= */
.ml-title-page    { font-size: 22px;   font-weight: 900; letter-spacing: -.03em; color: var(--ml-ink); }
.ml-title-section { font-size: 18px;   font-weight: 900; letter-spacing: -.02em; color: var(--ml-ink); }
.ml-title-card    { font-size: 14px;   font-weight: 800; letter-spacing: -.02em; color: var(--ml-ink); }
.ml-body          { font-size: 12.5px; font-weight: 500; color: var(--ml-ink-soft); line-height: 1.5; }
.ml-meta          { font-size: 11px;   font-weight: 700; color: var(--ml-muted); }
.ml-label         { font-size: 10px;   font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ml-faint); }

/* =========================================================================
 * 17. Responsive — réagencement (pas de masquage)
 * ========================================================================= */
@media (max-width: 560px) {
	.ml-toolbar { flex-wrap: wrap; }
	.ml-card__body { padding: 14px; }
}

/* =========================================================================
 * 18. prefers-reduced-motion — neutralise les transitions
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.ml-button,
	.ml-card,
	.ml-input,
	.ml-select,
	.ml-popover__item,
	.ml-chip__remove {
		transition: none !important;
	}
}