/* =========================================================================
 * Marylink — Polish Hotfix (Phase 1)
 * Objectif : moderniser BuddyBoss/Marylink sans casser le produit.
 * Règle : CSS uniquement. Aucune dépendance JS, aucune route modifiée.
 * Source de vérité : plan-integration-refonte-marylink.md + grammaire visuelle
 * ========================================================================= */

:root {
	/* Surfaces */
	--ml-bg:            #F6F7F9;
	--ml-surface:       #FFFFFF;
	--ml-surface-soft:  #FCFCFD;
	--ml-border:        #E9EAEE;
	--ml-border-strong: #DEE0E6;

	/* Encres */
	--ml-ink:        #171A21;
	--ml-ink-soft:   #454A54;
	--ml-muted:      #717784;
	--ml-faint:      #9BA1AD;

	/* Couleurs sémantiques (réservées action/urgence) */
	--ml-indigo:      #5A50D4;
	--ml-indigo-soft: #EEEDFB;
	--ml-indigo-ink:  #3B339C;

	--ml-danger:      #D2453B;
	--ml-danger-soft: #FBE6E4;
	--ml-danger-ink:  #A8352D;

	--ml-warning:      #C9851B;
	--ml-warning-soft: #FAF0DA;
	--ml-warning-ink:  #9A6410;

	--ml-success:      #1F9D57;
	--ml-success-soft: #E2F3E9;
	--ml-success-ink:  #157A42;

	--ml-slate:        #5B6472;
	--ml-slate-soft:   #ECEEF1;

	/* Forme */
	--ml-radius-sm: 8px;
	--ml-radius-md: 12px;
	--ml-radius-lg: 14px;

	/* Ombre — 3 niveaux seulement */
	--ml-shadow-card:    0 1px 2px rgba(20,24,32,.04);
	--ml-shadow-hover:   0 6px 20px rgba(20,24,32,.08);
	--ml-shadow-popover: 0 12px 32px rgba(20,24,32,.12);

	/* Typographie */
	--ml-font-stack: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
}

/* ---------- 1. Calmer le canvas + typographie ---------- */
body {
	background: var(--ml-bg);
	color: var(--ml-ink);
	-webkit-font-smoothing: antialiased;
	letter-spacing: -.005em;
}

/* Liens : indigo, soulignement discret */
a {
	color: var(--ml-indigo);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
a:hover { color: var(--ml-indigo-ink); }

/* ---------- 2. Cartes (BB / WP) ---------- */
.bb-card,
.activity-list .activity-item,
.bs-group-item,
.bs-member-item,
.bs-shortcode-wrap .bs-item,
.bb-photo-grid .bb-photo-item,
.bb-feed-reactions-wrap,
.bp-feedback,
.bp-list .bp-list-item,
.widget,
.bp-nouveau .activity-list li.activity-item,
.bb-onboarding-popup .bb-onboarding-step,
.bp-shortcode-wrap > div {
	background: var(--ml-surface);
	border: 1px solid var(--ml-border) !important;
	border-radius: var(--ml-radius-lg) !important;
	box-shadow: var(--ml-shadow-card) !important;
	transition: box-shadow .15s ease, border-color .15s ease;
}
.bb-card:hover,
.bs-group-item:hover,
.bs-member-item:hover {
	box-shadow: var(--ml-shadow-hover) !important;
	border-color: var(--ml-border-strong) !important;
}

/* ---------- 3. Supprimer les fluos / contours criards ---------- */
.bb-card,
.activity-item,
.widget {
	outline: none !important;
}
/* Anti-shadow agressif WordPress/BB par défaut */
.widget,
.bb-card,
.bp-list-item {
	filter: none !important;
}

/* ---------- 4. Boutons ---------- */
.button,
button.button,
input[type="submit"],
input[type="button"],
.bp-button,
.bp-nouveau .activity-list .activity-item .activity-meta a,
.bb-style-secondary,
.bb-style-primary {
	font-family: var(--ml-font-stack);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	padding: 9px 16px;
	border-radius: 10px !important;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease, color .12s ease, transform .05s ease;
	box-shadow: none !important;
	text-shadow: none !important;
	background-image: none !important;
	letter-spacing: 0;
}
.button:active,
button.button:active { transform: translateY(1px); }

/* Action principale : indigo */
.button-primary,
.bp-style-primary,
.bb-style-primary,
button.button-primary,
input[type="submit"].button-primary,
.bp-nouveau .submit input[type="submit"] {
	background: var(--ml-indigo) !important;
	color: #fff !important;
	border-color: var(--ml-indigo) !important;
}
.button-primary:hover,
.bb-style-primary:hover,
.bp-style-primary:hover {
	background: var(--ml-indigo-ink) !important;
	border-color: var(--ml-indigo-ink) !important;
}

/* Action secondaire : blanc + bordure */
.button:not(.button-primary):not(.button-danger),
.bb-style-secondary,
.bp-style-secondary {
	background: var(--ml-surface) !important;
	color: var(--ml-ink-soft) !important;
	border: 1px solid var(--ml-border-strong) !important;
}
.button:not(.button-primary):not(.button-danger):hover,
.bb-style-secondary:hover {
	background: var(--ml-bg) !important;
	border-color: var(--ml-muted) !important;
	color: var(--ml-ink) !important;
}

/* Action dangereuse : rouge isolé */
.button-danger,
.bb-style-danger,
.bp-style-danger {
	background: var(--ml-surface) !important;
	color: var(--ml-danger-ink) !important;
	border: 1px solid var(--ml-danger-soft) !important;
}
.button-danger:hover {
	background: var(--ml-danger-soft) !important;
	border-color: var(--ml-danger) !important;
}

/* ---------- 5. Inputs / selects ---------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select,
.bb-field-wrap input,
.bb-field-wrap textarea,
.bb-field-wrap select {
	font-family: var(--ml-font-stack);
	font-size: 13.5px;
	height: 38px;
	padding: 0 12px;
	background: var(--ml-surface) !important;
	border: 1px solid var(--ml-border-strong) !important;
	border-radius: 10px !important;
	color: var(--ml-ink) !important;
	box-shadow: none !important;
	transition: border-color .12s ease, box-shadow .12s ease;
}
textarea {
	height: auto;
	min-height: 80px;
	padding: 10px 12px;
	line-height: 1.5;
}
input:focus,
textarea:focus,
select:focus {
	outline: none !important;
	border-color: var(--ml-indigo) !important;
	box-shadow: 0 0 0 3px var(--ml-indigo-soft) !important;
}
input::placeholder,
textarea::placeholder { color: var(--ml-faint); }

/* ---------- 5b. Topbar icons (BB) — neutraliser les fluos hardcodés ---------- */
/* BuddyBoss + Marylink mettent des couleurs saturées sur les icônes du menu principal
 * (heart=rouge, thumbs-up=jaune, checkbox=vert, marketplace=violet, fire=orange…).
 * Tout passe en gris muted ; hover/actif reprennent l'indigo. */
#primary-menu i.bb-icon-l,
#primary-menu i._mi,
#primary-navbar i.bb-icon-l,
#primary-navbar i._mi,
.site-navigation i.bb-icon-l,
.site-navigation i._mi,
#site-navigation i.bb-icon-l,
#site-navigation i._mi,
.main-navigation i.bb-icon-l,
.main-navigation i._mi,
.site-header-container i.bb-icon-l,
.site-header-container i._mi,
.header-aside i.bb-icon-l,
.header-aside i._mi,
#header-aside i.bb-icon-l,
#header-aside i._mi {
	color: var(--ml-muted) !important;
	fill: currentColor !important;
}

/* Hover & actif : indigo doux */
#primary-menu li:hover > a > i,
#primary-menu li.current-menu-item > a > i,
#primary-menu li.current-menu-parent > a > i,
#primary-menu li.menu-item-current > a > i,
.main-navigation li:hover > a > i,
.main-navigation li.current-menu-item > a > i,
.header-aside a:hover i {
	color: var(--ml-indigo) !important;
}

/* Notification bell : reste neutre, badge porte le rouge */
.site-header-container i.bb-icon-bell,
.header-aside i.bb-icon-bell {
	color: var(--ml-muted) !important;
}

/* ---------- 6. Topbar ---------- */
.site-header,
#header-aside,
.buddypanel-toggle,
.bb-header,
.header-search-wrap {
	background: var(--ml-surface) !important;
	border-bottom: 1px solid var(--ml-border) !important;
	box-shadow: none !important;
}
.site-header .header-aside a,
#header-aside .header-aside-inner a {
	color: var(--ml-muted) !important;
}
.site-header .header-aside a:hover,
.site-header .header-aside a.current {
	color: var(--ml-indigo) !important;
}
.site-header .menu-item.current-menu-item > a,
.site-header .menu-item-current > a {
	color: var(--ml-indigo) !important;
}

/* Notification badge dans le header — sobre */
.bb-header .notification-count,
.notification-bubble,
.bb-icon-badge {
	background: var(--ml-danger) !important;
	color: #fff !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	min-width: 16px;
	height: 16px;
	line-height: 16px !important;
	border-radius: 8px !important;
	box-shadow: 0 0 0 2px var(--ml-surface) !important;
}

/* ---------- 7. Sidebar / Buddypanel ---------- */
.buddypanel,
.buddypanel .side-menu,
.buddypanel .bb-menu {
	background: var(--ml-surface) !important;
	border-right: 1px solid var(--ml-border) !important;
	box-shadow: none !important;
}
.buddypanel .side-menu li a,
.buddypanel .bb-menu li a {
	color: var(--ml-ink-soft) !important;
	border-radius: 8px;
	margin: 2px 8px;
}
.buddypanel .side-menu li a:hover {
	background: var(--ml-bg) !important;
	color: var(--ml-ink) !important;
}
.buddypanel .side-menu li.current-menu-item > a,
.buddypanel .side-menu li.current_page_item > a {
	background: var(--ml-indigo-soft) !important;
	color: var(--ml-indigo-ink) !important;
}
.buddypanel .side-menu li a i,
.buddypanel .side-menu li a .bb-icon {
	color: var(--ml-faint);
}
.buddypanel .side-menu li.current-menu-item > a i,
.buddypanel .side-menu li a:hover i {
	color: var(--ml-indigo);
}

/* ---------- 7b. BP member-type / role labels — neutraliser les bleus criards ---------- */
/* "Membre", "Modérateur", "Administrateur" sur cartes membres affichés par BP en bleus
 * saturés (rgb(71,95,255)). Forcer pastille sobre. */
.bp-member-type,
.bb-current-member-internal-member,
.bb-current-member-internal-administrator,
.bb-current-member-internal-moderator,
.member-type-label,
.bs-member-item .item-meta-label,
.bs-member-item .activity-meta-label {
	background: var(--ml-slate-soft) !important;
	color: var(--ml-slate) !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: .03em !important;
	text-transform: none !important;
	padding: 3px 8px !important;
	border-radius: 6px !important;
	border: none !important;
	box-shadow: none !important;
}

/* member-status online/offline dots — vert citron → vert sémantique sobre */
.member-status,
.member-status.offline,
.bp-member-status.offline {
	background: var(--ml-slate) !important;
	border: 2px solid var(--ml-surface) !important;
}
.member-status.online,
.bp-member-status.online {
	background: var(--ml-success) !important;
	border: 2px solid var(--ml-surface) !important;
}

/* ---------- 7c. Elementor buttons — éviter les bleus par défaut Elementor ---------- */
.elementor-button.elementor-button-link,
.elementor-button:not(.elementor-skin-fade):not(.elementor-skin-fill) {
	color: var(--ml-indigo) !important;
	background-image: none !important;
}
.elementor-button.elementor-button-link:hover {
	color: var(--ml-indigo-ink) !important;
}

/* MCP token button — était en violet pétant rgb(52,34,214) */
.mlmcp-token-btn {
	background: var(--ml-indigo) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	font-weight: 700 !important;
	font-size: 12.5px !important;
	padding: 8px 14px !important;
	box-shadow: none !important;
}
.mlmcp-token-btn:hover { background: var(--ml-indigo-ink) !important; }

/* ---------- 8. Badges, tags, type-pills ---------- */
.bp-feedback,
.bb-message,
.bb-pill,
.activity-meta .pill,
.bs-shortcode-wrap .bs-meta .bs-tag,
.bb-tags li,
.gtag,
.bp-tag,
.tag {
	background: var(--ml-slate-soft) !important;
	color: var(--ml-slate) !important;
	font-weight: 600 !important;
	font-size: 11px !important;
	text-transform: none !important;
	padding: 3px 9px !important;
	border-radius: 6px !important;
	border: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
}

/* Forte couleur seulement pour urgence/action */
.bb-pill.is-danger,
.pill-danger,
.tag-danger,
.crit-red {
	background: var(--ml-danger-soft) !important;
	color: var(--ml-danger-ink) !important;
}
.bb-pill.is-warning,
.pill-warning,
.tag-warning,
.crit-amber {
	background: var(--ml-warning-soft) !important;
	color: var(--ml-warning-ink) !important;
}
.bb-pill.is-success,
.pill-success,
.tag-success,
.crit-green {
	background: var(--ml-success-soft) !important;
	color: var(--ml-success-ink) !important;
}

/* ---------- 9. Cartes espaces / groups : images moins dominantes ---------- */
.bs-group-item .item-avatar img,
.bs-shortcode-wrap .bs-group-item .item-cover-img,
.bs-group-item .item-cover-img-wrap {
	filter: saturate(.92);
}
.bs-group-item .item-cover-img-wrap,
.bs-shortcode-wrap .bs-group-item .item-cover-img-wrap {
	max-height: 120px;
	overflow: hidden;
}
.bs-group-item {
	padding: 0 !important;
}

/* Métadonnées sur cartes : gris discret */
.bs-group-item .item-meta,
.bs-group-item .item-desc,
.bs-member-item .item-meta {
	color: var(--ml-muted) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
}

/* ---------- 10. Activité / commentaires ---------- */
.activity-list .activity-item {
	padding: 16px 18px !important;
}
.activity-item .activity-header,
.activity-item .activity-header strong {
	color: var(--ml-ink) !important;
	font-weight: 700 !important;
}
.activity-item .activity-header .time-since {
	color: var(--ml-faint) !important;
	font-size: 11.5px !important;
	font-weight: 500 !important;
}
.activity-item .activity-meta a,
.activity-comments li {
	color: var(--ml-muted);
}

/* ---------- 11. Avatars ---------- */
.avatar,
img.avatar,
.bb-avatar img,
.bs-avatar img,
.item-avatar img {
	border-radius: 50% !important;
}
/* Carrés arrondis réservés aux agents IA (classe à appliquer côté contenu) */
.is-agent-avatar .avatar,
.avatar.is-agent {
	border-radius: 10px !important;
}

/* ---------- 12. Widgets ---------- */
.widget {
	padding: 18px 20px !important;
}
.widget .widget-title,
.widget .widgettitle {
	font-size: 13px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: .05em !important;
	color: var(--ml-faint) !important;
	margin-bottom: 12px !important;
	padding-bottom: 0 !important;
	border: none !important;
}

/* ---------- 13. Tables (admin et front simple) ---------- */
table:not(.no-polish) {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}
table:not(.no-polish) th {
	background: var(--ml-bg);
	color: var(--ml-faint);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 10px 12px;
	border-bottom: 1px solid var(--ml-border);
}
table:not(.no-polish) td {
	padding: 12px;
	border-bottom: 1px solid var(--ml-border);
	color: var(--ml-ink-soft);
}

/* ---------- 14. Focus accessibilité (jamais d'outline absent) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--ml-indigo) !important;
	outline-offset: 2px !important;
}

/* ---------- 15. Garde-fous (ne pas toucher Picasso / Canevas / éditeur) ---------- */
.picasso-canvas,
.picasso-canvas *,
.canvas-sidebar,
.canvas-sidebar *,
.wp-editor-area,
.wp-editor-wrap,
.mce-toolbar,
.tinymce,
[id^="canvas-"],
[class*="picasso-"],
[class*="canvas-"] {
	all: revert;
}