/*
 * Bloc « lien LinkedIn » (simple). Section pleine largeur, contenu contraint. Carte grey-ultralight :
 * icone LinkedIn + titre + sous-texte a gauche, bouton primaire (charte) a droite.
 */

.mx-lien-linkedin {
	box-sizing: border-box;
	padding-block: var(--wp--preset--spacing--50); /* 40 (cote Figma pt 40 / pb 80 -> compact) */
	padding-block-end: var(--wp--preset--spacing--55); /* 80 */
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--grey-dark);
}

.mx-lien-linkedin__inner {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--60); /* 104 */
}

/* Carte : fond gris tres clair, coins arrondis, contenu reparti (info a gauche, bouton a droite). */
.mx-lien-linkedin__carte {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--45); /* 32 */
	padding: var(--wp--preset--spacing--45) var(--wp--preset--spacing--50); /* 32 40 */
	background-color: var(--wp--preset--color--grey-ultralight);
	border-radius: var(--mx-radius-s); /* 4 (cote Figma) */
}

.mx-lien-linkedin__info {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50); /* 40 (cote Figma) */
	min-width: 0;
}

/* Icone LinkedIn (asset charte), coloree en grey-dark via masque. */
.mx-lien-linkedin__icone {
	flex: 0 0 auto;
	width: 37px; /* cote Figma */
	height: 37px;
	/* Bleu de marque LinkedIn (#0A66C2) : constante externe officielle, pas un token de charte.
	   Le masque teinte permet d'appliquer cette couleur au picto quel que soit le fill du SVG. */
	background-color: #0a66c2;
	-webkit-mask: url("../icons/icon-linkedin.svg") center / contain no-repeat;
	mask: url("../icons/icon-linkedin.svg") center / contain no-repeat;
}

.mx-lien-linkedin__texte {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10); /* 4 */
}

.mx-lien-linkedin__titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--title); /* 28 (cote Figma) */
	line-height: 1;
	color: var(--wp--preset--color--grey-dark);
}

.mx-lien-linkedin__soustitre {
	margin: 0;
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.2;
	color: var(--wp--preset--color--grey-dark);
}

.mx-lien-linkedin__cta {
	flex: 0 0 auto;
}

/* ---- Responsive : empilement (info puis bouton) ---- */
@media (max-width: 720px) {
	.mx-lien-linkedin__inner {
		padding-inline: var(--wp--preset--spacing--40); /* 24 */
	}
	.mx-lien-linkedin__info {
		gap: var(--wp--preset--spacing--40); /* 24 */
	}
}