/*
 * Bloc « flux LinkedIn » (widget tiers Elfsight, encapsule). En-tete on-brand verrouille ; le widget est un
 * embed tiers charge UNIQUEMENT apres consentement (Complianz / categorie marketing), sinon un fallback propre.
 * Fond pleine largeur, contenu contraint (regle §4bis). Zero CLS : la zone du widget a une hauteur minimale.
 * On ne restyle PAS l'interieur du widget (non maitrisable) : on l'encapsule seulement.
 */

.mx-linkedin {
	box-sizing: border-box;
	padding-block: var(--wp--preset--spacing--55); /* 80 */
	color: var(--wp--preset--color--grey-dark);
}

/* Variante de fond (le masque d'attribution se fond dans cette meme couleur). */
.mx-linkedin.is-fond-gris {
	--mx-linkedin-bg: var(--wp--preset--color--grey-ultralight);
}

.mx-linkedin.is-fond-blanc {
	--mx-linkedin-bg: var(--wp--preset--color--white);
}

.mx-linkedin {
	background-color: var(--mx-linkedin-bg, var(--wp--preset--color--grey-ultralight));
}

/* Contenu contraint et centre. */
.mx-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 */
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--45); /* 32 : en-tete / widget */
}

.mx-linkedin__head {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20); /* 8 : surtitre / titre */
}

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

/* Zone du widget : hauteur minimale reservee (ZERO CLS ; le fallback occupe la meme zone). */
.mx-linkedin__widget {
	position: relative;
	min-height: 600px;
}

/* ---- Fallback (sans consentement, ou si le widget ne charge pas) : encart on-brand, jamais un trou vide ----
   Hauteur DECOUPLEE de celle de l'embed : sans consentement le bloc est nettement plus court (l'embed garde
   sa reserve de 600px pour l'etat consenti). Le saut de hauteur se produit au CLIC de consentement de
   l'utilisateur : ce n'est pas un CLS de chargement initial. */
.mx-linkedin__fallback {
	box-sizing: border-box;
	min-height: 380px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--40); /* 24 : lignes aerees (etait 16, trop colle) */
	text-align: center;
	padding: var(--wp--preset--spacing--50); /* 40 */
}

/* Pendant de la regle [hidden] de l'embed, indispensable ici : le display:flex ci-dessus (0,1,0) bat la
   feuille du navigateur, donc l'attribut hidden pose par le JS n'avait AUCUN effet et le fallback restait
   affiche SOUS le widget une fois le consentement donne. Selecteur d'attribut (0,2,0) : pas de !important.
   Vaut dans les deux sens, masquage a la revelation du widget et retour du fallback s'il n'a pas charge. */
.mx-linkedin__fallback[hidden] {
	display: none;
}

.mx-linkedin__fallback-icon {
	width: 48px;
	height: 48px;
	background-color: var(--wp--preset--color--orange-dark);
	-webkit-mask: url("../icons/icon-linkedin.svg") center / contain no-repeat;
	mask: url("../icons/icon-linkedin.svg") center / contain no-repeat;
}

.mx-linkedin__fallback-text {
	margin: 0;
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--lead); /* 18 */
	color: var(--wp--preset--color--grey-dark);
}

.mx-linkedin__fallback-note {
	margin: 0;
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--sm); /* 14 */
	color: var(--wp--preset--color--grey-middle);
}

/* ---- Embed Elfsight (revele apres consentement) ---- */
.mx-linkedin__embed {
	position: relative;
}

.mx-linkedin__embed[hidden] {
	display: none;
}

/* Masque de l'attribution « free widget » d'Elfsight (contournement volontaire du plan gratuit, choix JN) :
   bande pleine largeur en bas, couleur = fond de section (se fond), au-dessus du widget. pointer-events:none
   pour ne pas gener l'interaction avec le contenu reel du widget au-dessus de la bande. */
.mx-linkedin__mask {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 44px; /* couvre la ligne d'attribution Elfsight ; ajustable selon le rendu */
	background-color: var(--mx-linkedin-bg, var(--wp--preset--color--grey-ultralight));
	pointer-events: none;
	z-index: 2;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.mx-linkedin__inner {
		padding-inline: var(--wp--preset--spacing--40); /* 24 */
	}

	/* Reserve de l'embed conservee ; le fallback (non consenti) reste plus court. */
	.mx-linkedin__widget {
		min-height: 520px;
	}

	.mx-linkedin__fallback {
		min-height: 320px;
	}
}