/* ==========================================================================
   Minucci Suite — Maillage : bloc « Aller plus loin » (MSR)

   Seule feuille de style PUBLIQUE du module. Elle ne couvre qu'un balisage,
   celui de RelatedRenderer, servi a l'identique par les trois chemins de
   rendu : widget Elementor, shortcode, insertion automatique.

   BLINDAGE. Le bloc vit dans le contenu d'un site inconnu, sous un theme
   inconnu, au milieu d'un kit Elementor agressif. Trois regles tenues sans
   exception :

     1. aucune classe sans prefixe `msr-`, aucun style sur balise nue. Le nom
        `msr-related` porte en plus une fonction : LinkScanner classe une arete
        en `related` des qu'un conteneur porte une classe contenant « related ».
        Le renommer casserait silencieusement la ponderation du graphe ;
     2. tout est scope sous `.msr-related`, en selecteurs composes (specificite
        0-2-0) : cela bat `.elementor-widget-container a` et consorts sans un
        seul `!important` ;
     3. les elements interactifs sont remis a plat (background, border,
        box-shadow, text-decoration) AVANT d'etre restyles, sinon le kit du
        theme laisse trainer un soulignement ou une ombre.

   CHARTE. Le bloc est un element du site, pas du plugin : il doit passer pour
   natif. Il tient donc son identite de SIX JETONS, poses par defaut ci-dessous
   et surcharges en ligne par le module depuis les reglages « Apparence du
   bloc » (RelatedStyle) — couleur d'accent, couleur de fond des cartes, rayon
   des angles, police des titres, police du texte. Sans reglage, tout derive de
   `currentColor` : le bloc reste lisible sur un fond clair comme sur un fond
   sombre, sans mode a detecter, et adopte la typographie du contenu qui
   l'entoure.

   RESPONSIVE. Le bloc n'a pas de point de rupture a maintenir : la grille
   repartit les cartes d'elle-meme (`auto-fit`), une colonne sur un telephone,
   deux sur une tablette, jusqu'a quatre sur un grand ecran. Quand le theme le
   rend en pleine largeur (insertion automatique sous Hello Elementor, ou le
   contenu ne passe par aucun conteneur), il se borne lui-meme a la largeur du
   site et se centre — sinon il courait d'un bord de l'ecran a l'autre pendant
   que la prose, elle, respire dans ses marges.

   ESPACEMENT : grille de 8px, en px. Tailles de police en px, ajustees par un
   seul point de rupture sous 600px.

   Z-INDEX : aucun. Le bloc est dans le flux, il ne superpose rien.
   ========================================================================== */

.msr-related {
	/* --- Jetons de charte (surcharges en ligne par RelatedStyle) --- */
	--msr-accent: currentColor;
	--msr-on-accent: #ffffff;
	--msr-surface: rgba(0, 0, 0, 0.04);
	--msr-radius: 16px;
	--msr-font-heading: inherit;
	--msr-font-body: inherit;
	--msr-max-width: 1200px;

	/* --- Jetons derives --- */
	--msr-gap: 16px;
	--msr-border: rgba(0, 0, 0, 0.08);
	--msr-border-strong: rgba(0, 0, 0, 0.2);
	--msr-muted: rgba(0, 0, 0, 0.64);
	--msr-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
	--msr-duration: 200ms;

	display: block;
	/* Un parent flex ou grid — ce que les conteneurs Elementor sont presque
	   toujours — dimensionne son enfant sur son contenu. Sans ces quatre
	   lignes, le bloc se retrecit sur la plus courte de ses cartes. */
	width: 100%;
	box-sizing: border-box;
	align-self: stretch;
	justify-self: stretch;
	margin: 48px 0 40px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--msr-font-body);
	text-align: left;
}

/* Derivation depuis currentColor quand le navigateur la connait : les rgba
   ci-dessus ne sont qu'un repli pour les moteurs anciens. */
@supports (color: color-mix(in srgb, currentColor 10%, transparent)) {
	.msr-related {
		--msr-surface: color-mix(in srgb, currentColor 5%, transparent);
		--msr-border: color-mix(in srgb, currentColor 10%, transparent);
		--msr-border-strong: color-mix(in srgb, currentColor 24%, transparent);
		--msr-muted: color-mix(in srgb, currentColor 68%, transparent);
	}
}

.msr-related,
.msr-related * {
	box-sizing: border-box;
}

/* Meme raison, un cran plus haut : en widget, c'est le conteneur d'Elementor
   qui porte la largeur. */
.elementor-widget-minucci-articles-lies,
.elementor-widget-minucci-articles-lies > .elementor-widget-container {
	width: 100%;
	align-self: stretch;
}

/* --- Pleine largeur : le bloc se borne a la largeur du site ---

   Sous Hello Elementor, une page montee en Elementor rend `the_content` dans
   `.page-content` sans aucun conteneur : ce qui y est insere court d'un bord
   de l'ecran a l'autre. Le bloc se donne alors le plafond de largeur du site
   (1 200px par defaut, reglable) et la marge laterale que les conteneurs du
   site appliquent sur un telephone. En widget ou en shortcode, le conteneur
   du montage porte deja tout cela : la regle ne s'applique pas. */
.page-content > .msr-related,
.entry-content > .msr-related,
.site-main > .msr-related {
	max-width: var(--msr-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* --- Titre du bloc --- */

.msr-related .msr-related__heading {
	position: relative;
	margin: 0 0 24px;
	padding: 0 0 12px;
	border: 0;
	background: none;
	color: inherit;
	font-family: var(--msr-font-heading);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
}

/* Un court filet d'accent sous le titre, aux angles arrondis, plutot qu'une
   bordure pleine largeur : c'est le trait que les sites Elementor recents
   posent sous leurs titres de section, et il porte la couleur d'accent. */
.msr-related .msr-related__heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 3px;
	border-radius: 2px;
	background: var(--msr-accent);
}

/* --- Liste --- */

.msr-related .msr-related__list {
	display: grid;
	/* Une colonne sous ~560px, deux au-dela, trois des ~850px, quatre dans un
	   conteneur de 1 200px — le plafond de cartes du reglage tient donc sur
	   une seule rangee a la largeur du site. Sans point de rupture a maintenir.
	   `min(260px, 100%)` empeche une carte de forcer la largeur de la grille
	   sur un ecran plus etroit que 260px. */
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: var(--msr-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Carte --- */

/* Les kits Elementor reposent des marqueurs et des retraits sur les listes du
   contenu : on les remet a plat explicitement, marqueur compris. */
.msr-related .msr-related__item {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 20px 64px 20px 24px;
	min-height: 72px;
	border: 1px solid var(--msr-border);
	border-radius: var(--msr-radius);
	list-style: none;
	background: var(--msr-surface);
	box-shadow: none;
	transition: box-shadow var(--msr-duration) ease-out,
		border-color var(--msr-duration) ease-out,
		transform var(--msr-duration) ease-out;
}

.msr-related .msr-related__item::marker {
	content: none;
}

/* La fleche : un cercle a la couleur d'accent, une pointe tracee en bordures.
   Aucune police d'icones, aucune image — rien a charger. Elle est purement
   decorative, le lien porte le sens. */
.msr-related .msr-related__item::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	border: 1.5px solid var(--msr-accent);
	border-radius: 50%;
	background:
		linear-gradient(var(--msr-accent), var(--msr-accent)) no-repeat 50% 50% / 10px 1.5px;
	transition: background-color var(--msr-duration) ease-out,
		transform var(--msr-duration) ease-out;
}

.msr-related .msr-related__item::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 31px;
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-top: 1.5px solid var(--msr-accent);
	border-right: 1.5px solid var(--msr-accent);
	transform: rotate(45deg);
	transition: border-color var(--msr-duration) ease-out,
		transform var(--msr-duration) ease-out;
}

.msr-related .msr-related__item:hover {
	border-color: var(--msr-border-strong);
	box-shadow: var(--msr-shadow);
	/* transform seul : ni width ni margin, donc aucun reflow. */
	transform: translateY(-2px);
}

.msr-related .msr-related__item:hover::before {
	background-color: var(--msr-accent);
	background-image: linear-gradient(var(--msr-on-accent), var(--msr-on-accent));
	transform: translateX(2px);
}

.msr-related .msr-related__item:hover::after {
	border-color: var(--msr-on-accent);
	transform: translateX(2px) rotate(45deg);
}

/* --- Lien --- */

.msr-related .msr-related__link {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font-family: var(--msr-font-heading);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	/* Un titre sans espace (une URL collee, un mot compose long) ne doit pas
	   pousser la carte hors de la colonne. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Toute la carte est cliquable : la zone du lien s'etend a sa carte, sans
   JavaScript ni second `<a>`. La description reste hors du lien pour le
   graphe (l'ancre est le titre, rien d'autre) — le lecteur, lui, clique ou il
   veut. */
.msr-related .msr-related__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--msr-radius);
}

.msr-related .msr-related__link:hover,
.msr-related .msr-related__link:active {
	color: inherit;
	text-decoration: none;
}

.msr-related .msr-related__link:focus {
	outline: none;
}

.msr-related .msr-related__link:focus-visible::after {
	outline: 2px solid var(--msr-accent);
	outline-offset: 2px;
}

.msr-related .msr-related__item:active {
	transform: translateY(0);
	box-shadow: none;
}

/* --- Description --- */

.msr-related .msr-related__text {
	margin: 6px 0 0;
	padding: 0;
	color: var(--msr-muted);
	font-family: var(--msr-font-body);
	font-size: 14px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

/* --- Telephone --- */

@media (max-width: 600px) {
	.msr-related {
		margin: 40px 0 32px;
	}

	.msr-related .msr-related__heading {
		font-size: 20px;
		margin-bottom: 20px;
	}

	.msr-related .msr-related__item {
		padding: 16px 56px 16px 18px;
		min-height: 64px;
	}

	.msr-related .msr-related__item::before {
		right: 14px;
		width: 28px;
		height: 28px;
		margin-top: -14px;
	}

	.msr-related .msr-related__item::after {
		right: 25px;
		width: 6px;
		height: 6px;
		margin-top: -3px;
	}

	.msr-related .msr-related__link {
		font-size: 16px;
	}
}

/* --- Reperage dans l'editeur Elementor --- */

.msr-related-placeholder {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
	border: 1px dashed rgba(0, 0, 0, 0.28);
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.02);
	color: rgba(0, 0, 0, 0.72);
	font-size: 13px;
	line-height: 1.4;
}

/* --- Mouvement reduit --- */

@media (prefers-reduced-motion: reduce) {
	.msr-related .msr-related__item,
	.msr-related .msr-related__item::before,
	.msr-related .msr-related__item::after,
	.msr-related .msr-related__link {
		transition: none;
	}

	.msr-related .msr-related__item:hover {
		transform: none;
	}

	.msr-related .msr-related__item:hover::before {
		transform: none;
	}

	.msr-related .msr-related__item:hover::after {
		transform: rotate(45deg);
	}
}

/* --- Impression : les cartes sont du contenu, elles se conservent --- */

@media print {
	.msr-related .msr-related__item {
		border-color: #999999;
		background: none;
		box-shadow: none;
		transform: none;
	}

	.msr-related .msr-related__item::before,
	.msr-related .msr-related__item::after {
		display: none;
	}
}