/**
 * Utility classes partagées par tous les blocs du plugin.
 *
 * Dépendance : assets/css/mc-tokens.css (variables --mc-*).
 *
 * Conventions :
 * - Classes BEM-friendly : .mc-<utility>(--<modifier>).
 * - Aucune règle ne définit de couleur de fond sans aussi gérer le contraste.
 * - Les utilities sont composables (ex. .mc-card-base + classe propre au bloc).
 *
 * @package ma-commune
 */

/* === Card de base ============================================== */
/* Surface neutre avec border + radius + ombre, hover translateY.    */
.mc-card-base {
	background: var( --mc-color-surface );
	border: 1px solid var( --mc-color-border );
	border-radius: var( --mc-radius-md );
	box-shadow: var( --mc-shadow-sm );
	transition:
		transform var( --mc-transition-base ),
		box-shadow var( --mc-transition-base );
}

.mc-card-base:hover {
	transform: translateY( -2px );
	box-shadow: var( --mc-shadow-md );
}

/* === Boutons =================================================== */
.mc-btn {
	display: inline-flex;
	align-items: center;
	gap: var( --mc-spacing-xs );
	padding: var( --mc-spacing-sm ) var( --mc-spacing-md );
	font-size: var( --mc-fs-sm );
	font-weight: 600;
	line-height: 1.2;
	border: 0;
	border-radius: var( --mc-radius-pill );
	text-decoration: none;
	cursor: pointer;
	transition: background var( --mc-transition-fast ), color var( --mc-transition-fast );
}

.mc-btn:focus-visible {
	outline: 0;
	box-shadow: var( --mc-focus-ring );
}

.mc-btn--primary {
	background: var( --mc-color-primary );
	color: var( --mc-color-contrast-inverse );
}

.mc-btn--primary:hover,
.mc-btn--primary:focus {
	background: var( --mc-color-primary-light );
	color: var( --mc-color-contrast-inverse );
}

.mc-btn--ghost {
	background: transparent;
	color: var( --mc-color-primary );
	border: 1px solid var( --mc-color-border );
}

.mc-btn--ghost:hover,
.mc-btn--ghost:focus {
	background: var( --mc-color-base-alt );
}

/* === Select (pillule + chevron SVG) ============================ */
.mc-select {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	padding: var( --mc-spacing-xs ) calc( var( --mc-spacing-md ) + 16px ) var( --mc-spacing-xs ) var( --mc-spacing-md );
	background-color: var( --mc-color-surface );
	background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%236b6b6b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>' );
	background-repeat: no-repeat;
	background-position: right var( --mc-spacing-sm ) center;
	border: 1px solid var( --mc-color-border );
	border-radius: var( --mc-radius-pill );
	font-size: var( --mc-fs-sm );
	color: var( --mc-color-contrast );
	cursor: pointer;
}

.mc-select:focus-visible {
	outline: 0;
	box-shadow: var( --mc-focus-ring );
}

/* === Search (input + icône loupe) ============================== */
.mc-search {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.mc-search__input {
	width: 100%;
	padding: var( --mc-spacing-sm ) var( --mc-spacing-md ) var( --mc-spacing-sm ) calc( var( --mc-spacing-md ) + 16px );
	border: 1px solid var( --mc-color-border );
	border-radius: var( --mc-radius-pill );
	font-size: var( --mc-fs-sm );
	background: var( --mc-color-surface );
	color: var( --mc-color-contrast );
}

.mc-search__input:focus-visible {
	outline: 0;
	box-shadow: var( --mc-focus-ring );
	border-color: var( --mc-color-primary );
}

.mc-search::before {
	content: '';
	position: absolute;
	left: var( --mc-spacing-sm );
	top: 50%;
	transform: translateY( -50% );
	width: var( --mc-icon-sm );
	height: var( --mc-icon-sm );
	background: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b6b6b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>' ) no-repeat center / contain;
	pointer-events: none;
}

/* === Tag / chip ================================================ */
/* Couleur de border + texte pilotée par `color` (currentColor).
   Le bloc consommateur peut surcharger via inline style ou classe modifier. */
.mc-tag {
	display: inline-flex;
	align-items: center;
	gap: var( --mc-spacing-2xs );
	padding: var( --mc-spacing-2xs ) var( --mc-spacing-sm );
	border: 1px solid currentColor;
	border-radius: var( --mc-radius-pill );
	font-size: var( --mc-fs-xs );
	font-weight: 500;
	line-height: 1.4;
	color: var( --mc-color-contrast-alt );
	background: transparent;
}

/* === Icônes ==================================================== */
.mc-icon {
	flex-shrink: 0;
	display: inline-block;
	vertical-align: middle;
}

.mc-icon--sm { width: var( --mc-icon-sm ); height: var( --mc-icon-sm ); }
.mc-icon--md { width: var( --mc-icon-md ); height: var( --mc-icon-md ); }
.mc-icon--lg { width: var( --mc-icon-lg ); height: var( --mc-icon-lg ); }

/* === Focus visible global pour toute classe .mc-focusable ====== */
.mc-focusable:focus-visible {
	outline: 0;
	box-shadow: var( --mc-focus-ring );
}