/* Annuaire de la recherche — front. Palette et typographie alignées sur le thème du site (Roboto, bleu #005e9e). */

.mar-main {
	--mar-blue: #005e9e;
	--mar-blue-light: rgba(0, 94, 158, 0.12);
	--mar-bg: #f9f9f9;
	--mar-border: #d9d9d9;
	--mar-text: #000;
	--mar-muted: #444;
	/* Hauteur sous laquelle un élément collant doit se poser pour rester sous
	   l'en-tête sticky du thème, et hauteur à laquelle une ancre doit caler sa
	   section (en-tête + menu de sections collé). Valeurs alignées sur le sommaire
	   des pages du thème, qui utilise les mêmes paliers. */
	--mar-sticky-top: 130px;
	--mar-anchor-top: 176px;
	color: var(--mar-text);
	font-family: Roboto, sans-serif;
}

@media (min-width: 1201px) {
	.mar-main {
		--mar-sticky-top: 130px;
		--mar-anchor-top: 200px;
	}
}

/* Au-delà, le menu de sections passe dans la marge : plus de barre collée
   au-dessus des sections, l'ancre n'a donc plus à lui laisser de place. */
@media (min-width: 1660px) {
	.mar-main {
		--mar-sticky-top: 150px;
		--mar-anchor-top: 100px;
	}
}

/* Les gabarits reprennent les conteneurs du thème (.main, .container.v2,
   .actus-events-infos, .posts-liste, .page-content) : le bandeau de titre et les
   marges de page sont donc portés par le thème, comme sur les pages Événements. */

/* Filtres */
/* Champ de recherche + trois listes déroulantes (centre, thématique, discipline) :
   la ligne passe à deux rangs plutôt que d'écraser les libellés quand la place manque.

   Alignement par le haut : une liste à choix multiples grandit vers le bas au fur
   et à mesure des étiquettes retenues. Centrés, les autres filtres remontaient de
   la moitié de cette croissance ; calés en haut, ils restent sur une même ligne
   d'horizon et seule la liste concernée s'allonge. */
.mar-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 28px;
}

.mar-filters__search {
	position: relative;
	flex: 1 1 280px;
	min-width: 0;
}

/* Auto-complétion sur les noms : liste flottante sous le champ de recherche. */
.mar-suggest {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 320px;
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: 6px 0;
	background: #fff;
	border: 1px solid var(--mar-border);
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.mar-suggest[hidden] {
	display: none;
}

.mar-suggest__item {
	padding: 10px 22px;
	font-size: 16px;
	line-height: 24px;
	cursor: pointer;
}

.mar-suggest__item:hover,
.mar-suggest__item.is-active {
	background: var(--mar-blue);
	color: #fff;
}

.mar-filters__search input {
	width: 100%;
	height: 48px;
	/* Place laissée à gauche pour la loupe (background-image ci-dessous). */
	padding: 8px 24px 8px 52px;
	font-size: 16px;
	line-height: 24px;
	border: 0.5px solid #000;
	border-radius: 50px;
	background-color: var(--mar-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg fill='none' stroke='%23005e9e' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='7.5' cy='7.5' r='5.5'/%3E%3Cpath d='M11.5 11.5 16 16'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 22px center;
}

.mar-filters__search input:focus,
.mar-filters__select select:focus {
	outline: 2px solid var(--mar-blue);
	outline-offset: 1px;
}

.mar-filters__select {
	flex: 1 1 190px;
	min-width: 150px;
}

.mar-filters__select select {
	width: 100%;
	height: 48px;
	padding: 8px 44px 8px 21px;
	font-size: 16px;
	line-height: 24px;
	border: 0.5px solid #000;
	border-radius: 50px;
	background-color: var(--mar-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23005e9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

/* Listes déroulantes habillées par Select2 : on reprend l'aspect « pilule »
   des selects natifs ci-dessus (le <select> d'origine est masqué par Select2). */
.mar-filters__select {
	position: relative;
}

.mar-filters .select2-container {
	width: 100% !important;
}

.mar-filters .select2-container--default .select2-selection--single {
	height: 48px;
	padding: 8px 44px 8px 21px;
	border: 0.5px solid #000;
	border-radius: 25px;
	background-color: var(--mar-bg);
}

.mar-filters .select2-container--default .select2-selection--single .select2-selection__rendered {
	/* Marge a droite : la croix de reinitialisation se pose entre le libelle et la fleche. */
	padding: 0 20px 0 0;
	font-size: 16px;
	line-height: 30px;
	color: inherit;
}

.mar-filters .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 18px;
	width: 14px;
	height: 100%;
}

.mar-filters .select2-container--default .select2-selection--single .select2-selection__arrow b {
	margin: 0;
	border: 0;
	width: 14px;
	height: 9px;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23005e9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px 9px;
}

.mar-filters .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	transform: translateY(-50%) rotate(180deg);
}

.mar-filters .select2-container--default.select2-container--focus .select2-selection--single,
.mar-filters .select2-container--default.select2-container--open .select2-selection--single {
	/*outline: 2px solid var(--mar-blue);
	outline-offset: 1px;*/
}

.mar-filters .select2-dropdown {
	border: 0.5px solid #000;
	border-radius: 4px;
	overflow: hidden;
	background: var(--mar-bg);
}

.mar-filters .select2-container--default .select2-results__option {
	padding: 10px 21px;
	font-size: 16px;
	line-height: 24px;
}

.mar-filters .select2-container--default .select2-results__option--highlighted[aria-selected],
.mar-filters .select2-container--default .select2-results__option[aria-selected="true"] {
	background: var(--mar-blue);
	color: #fff;
}

/* Regroupement des centres par departement : le departement est une option
   cliquable a part entiere (la choisir selectionne tous ses centres), lue comme un
   en-tete — en capitales, en couleur ; ses centres sont indentes dessous. Les
   classes sont posees par templateResult (front.js) d'apres data-mar-level. */
.mar-filters .select2-container--default .select2-results__option .mar-option--level-0 {
	display: block;
	font-size: 13px;
	line-height: 18px;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--mar-blue);
}

.mar-filters .select2-container--default .select2-results__option--highlighted[aria-selected] .mar-option--level-0,
.mar-filters .select2-container--default .select2-results__option[aria-selected="true"] .mar-option--level-0 {
	color: inherit;
}

.mar-filters .select2-container--default .select2-results__option .mar-option--level-1 {
	display: block;
	padding-left: 24px;
}

/* Meme lecture sans Select2 (select natif). */
.mar-filters select option[data-mar-level="0"] {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--mar-blue);
}

.mar-filters select option[data-mar-level="1"] {
	padding-left: 24px;
}

/* Options qui ne donneraient aucun resultat compte tenu des autres filtres :
   visibles mais inertes, plutot que retirees de la liste. */
.mar-filters .select2-container--default .select2-results__option[aria-disabled="true"] {
	color: var(--mar-muted);
	opacity: .55;
	cursor: not-allowed;
}

.mar-filters .select2-container--default .select2-results__option[aria-disabled="true"].select2-results__option--highlighted {
	background: transparent;
	color: var(--mar-muted);
}

.mar-filters select option:disabled {
	color: #9ca3af;
}

/* Champ de recherche dans la liste deroulante (listes longues). */
.mar-filters .select2-container--default .select2-search--dropdown {
	padding: 12px 12px 8px;
}

.mar-filters .select2-container--default .select2-search--dropdown .select2-search__field {
	width: 100%;
	padding: 9px 12px;
	font-size: 15px;
	line-height: 22px;
	border: 1px solid var(--mar-border);
	border-radius: 8px;
	outline: none;
}

.mar-filters .select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--mar-blue);
}

.mar-filters .select2-container--default .select2-results__message {
	padding: 10px 21px;
	color: var(--mar-muted);
	font-size: 15px;
}

/* Croix de reinitialisation du filtre : calee a gauche de la fleche (right: 18px,
   largeur 14px), le libelle selectionne lui laissant la place. */
.mar-filters .select2-container--default .select2-selection--single .select2-selection__clear {
	position: absolute;
	top: 0;
	right: 38px;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 4px;
	margin: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--mar-muted);
	background: none;
	border: 0;
	cursor: pointer;
}

.mar-filters .select2-container--default .select2-selection--single .select2-selection__clear:hover,
.mar-filters .select2-container--default .select2-selection--single .select2-selection__clear:focus {
	color: var(--mar-blue);
}

/* Filtres à choix multiples ------------------------------------------------ */
/* Sans JS : le select natif multiple est une liste déroulée, on lui laisse sa
   hauteur plutôt que de l'écraser à 48px comme un select simple. */
.mar-filters__select select[multiple] {
	height: auto;
	min-height: 48px;
	padding: 8px 21px;
	border-radius: 16px;
	background-image: none;
}

/* Avec Select2 : même pilule que les listes simples, mais de hauteur variable —
   les termes choisis s'y empilent sous forme d'étiquettes. */
.mar-filters .select2-container--default .select2-selection--multiple {
	/* Reference de positionnement de la croix de reinitialisation ci-dessous :
	   la pilule elle-meme, et non le bloc .mar-filters__select qui l'entoure. */
	position: relative;
	min-height: 48px;
	/* Marge droite : la croix de reinitialisation est posee dedans (14px du bord,
	   ~22px de large). Trop courte, une etiquette arrivant en bout de ligne passait
	   dessous — cas courant en tablette et en mobile, ou chaque filtre occupe toute
	   la largeur et ou les etiquettes vont jusqu'au bord. */
	padding: 5px 40px 5px 16px;
	border: 0.5px solid #000;
	border-radius: 25px;
	background-color: var(--mar-bg);
	cursor: text;
}

.mar-filters .select2-container--default.select2-container--focus .select2-selection--multiple,
.mar-filters .select2-container--default.select2-container--open .select2-selection--multiple {
	border: 0.5px solid #000;
}

.mar-filters .select2-container--default .select2-selection--multiple .select2-selection__rendered {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	line-height: 24px;
}

/* Libellé d'invite (« Tous les centres ») : même gris et même place que le
   libellé d'une liste simple, tant qu'aucun terme n'est choisi. */
.mar-filters .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
	margin: 0;
	font-size: 16px;
	line-height: 36px;
	color: var(--mar-muted);
}

/* Un terme choisi. La croix précède le libellé (markup Select2) et sert à le retirer. */
.mar-filters .select2-container--default .select2-selection--multiple .select2-selection__choice {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	margin: 0;
	padding: 4px 12px;
	font-size: 14px;
	line-height: 20px;
	color: #fff;
	background: var(--mar-blue);
	border: 0;
	border-radius: 50px;
}

.mar-filters .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* La croix se centre sur la hauteur de l'etiquette : c'est un carre en flex, et
   non un glyphe pose sur la ligne de texte — « × » y flotterait au-dessus du
   milieu, son encre n'occupant pas tout le cadratin. */
.mar-filters .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	order: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 16px;
	height: 20px;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	top:auto;
}

.mar-filters .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.mar-filters .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
	color: #fff;
	background: none;
	opacity: .7;
}

/* Champ de saisie glissé à la suite des étiquettes : il ne doit ni forcer un
   retour à la ligne quand la boîte est vide, ni déborder de la pilule. */
.mar-filters .select2-container--default .select2-selection--multiple .select2-search--inline {
	flex: 1 1 60px;
	min-width: 60px;
}

.mar-filters .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
	width: 100% !important;
	height: 36px;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 36px;
	border: 0;
	background: transparent;
}

/* Sur une liste a choix multiples, le libelle d'invite (« Tous les centres ») est
   porte par ce champ : meme gris que celui d'une liste simple. */
.mar-filters .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
	color: var(--mar-muted);
	opacity: 1;
}

/* Croix de réinitialisation du filtre entier : calée dans la marge droite,
   la flèche n'existant pas sur les listes à choix multiples.

   Centrage vertical par top: 50% et translation d'une demi-hauteur, sur la
   pilule (position: relative ci-dessus) : la croix reste au milieu quelle que
   soit la hauteur prise par les étiquettes, y compris sur deux rangs. Sa
   position statique ne suffisait pas — Select2 l'insère parmi les étiquettes,
   elle en suivait donc la première ligne. */
.mar-filters .select2-container--default .select2-selection--multiple .select2-selection__clear {
	position: absolute;
	top: 50%;
	right: 14px;
	/* Largeur reprise explicitement : le theme etire tout bouton place dans un
	   listing sur la largeur de son conteneur en dessous de 768px
	   (« .posts-liste button { width: 100% } »). La croix, absolue, s'etalait alors
	   d'un bord a l'autre de la pilule et son signe se retrouvait a gauche. */
	width: auto;
	height: auto;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	padding: 0 4px;
	margin: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--mar-muted);
	background: none;
	border: 0;
	cursor: pointer;
}

.mar-filters .select2-container--default .select2-selection--multiple .select2-selection__clear:hover,
.mar-filters .select2-container--default .select2-selection--multiple .select2-selection__clear:focus {
	color: var(--mar-blue);
}

/* Panneaux (index alphabétique, résultats) : blocs blancs détourés, comme les
   modules de listing du site. */
.mar-panel {
	background: #fff;
	border: 1px solid var(--mar-border);
	border-radius: 16px;
	padding: 24px 28px;
	margin-bottom: 24px;
}

.mar-panel--results {
	padding-bottom: 8px;
}

/* Index alphabétique */
.mar-alphabet__label {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: var(--mar-blue);
}

/* Grille de 26 colonnes égales : les 26 lettres tiennent sur une seule ligne
   quelle que soit la largeur du conteneur (repassage en 2 puis 3 lignes en responsive). */
.mar-alphabet__list {
	display: grid;
	grid-template-columns: repeat(26, minmax(0, 1fr));
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mar-alphabet__list a,
.mar-alphabet__list span.is-disabled {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 42px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mar-alphabet__list a {
	border: 1px solid rgba(0, 94, 158, 0.35);
	color: var(--mar-blue);
}

/* Lettres sans résultat : plates, sans bordure, pour ne pas appeler le clic. */
.mar-alphabet__list span.is-disabled {
	border: 1px solid transparent;
	color: #c4c4c4;
	cursor: default;
	user-select: none;
}

.mar-alphabet__list a:hover,
.mar-alphabet__list a:focus {
	background: var(--mar-blue-light);
	color: var(--mar-blue);
}

.mar-alphabet__list a.is-active {
	background: var(--mar-blue);
	border-color: var(--mar-blue);
	color: #fff;
}

.mar-count {
	font-size: 16px;
	font-weight: 700;
	color: var(--mar-blue);
	margin: 0 0 20px;
}

/* Cartes */
.mar-cards {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.mar-card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--mar-border);
	border-radius: 12px;
}

/* Survol réservé aux dispositifs de pointage fins (souris, trackpad).
   Sur mobile et tablette il n'y a pas de survol : le tap déclencherait un :hover
   qui resterait « collé » sur la vignette après le retour depuis la fiche. Le
   comportement tactile se limite donc au clic, qui ouvre la fiche. */
@media (hover: hover) and (pointer: fine) {
	.mar-card {
		transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	}

	/* La carte se soulève légèrement : l'ombre portée s'accentue en même temps que
	   la translation pour que le décollement se lise. */
	.mar-card:hover,
	.mar-card:focus-within {
		transform: translateY(-4px);
		border-color: rgba(0, 94, 158, 0.45);
		box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
	}
}

/* Mouvement désactivé pour qui a demandé la réduction des animations : seuls
   la bordure et l'ombre signalent alors le survol. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
	.mar-card {
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
	}

	.mar-card:hover,
	.mar-card:focus-within {
		transform: none;
	}
}

.mar-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.mar-card__photo {
	flex: 0 0 116px;
	text-decoration: none;
}

.mar-card__photo img {
	width: 116px;
	height: 116px;
	border-radius: 50%;
	object-fit: cover;
}

/* Silhouette de remplacement : même boîte ronde que la photo, fond neutre pour
   que le tracé bleu reste lisible. */
.mar-photo-placeholder {
	background: var(--mar-bg);
	padding: 2px;
}

.mar-card__name {
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	margin: 0 0 2px;
}

.mar-card__name a,
.mar-card__name a:visited {
	color: var(--mar-blue);
	text-decoration: none;
}

/* Le nom se souligne dès que la carte est survolée, pas seulement le texte du lien :
   la cible cliquable étant la carte entière, c'est elle qui porte l'état de survol.
   Comme le soulèvement, l'effet est réservé aux appareils avec souris. */
@media (hover: hover) and (pointer: fine) {
	.mar-card:hover .mar-card__name a,
	.mar-card:focus-within .mar-card__name a {
		text-decoration: underline;
		text-underline-offset: 5px;
		text-decoration-thickness: 2px;
	}
}

/* Zone cliquable étirée à toute la carte : un clic n'importe où ouvre la fiche.
   Le lien reste unique (le nom), l'overlay ne fait qu'agrandir sa cible. */
.mar-card__name a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}

/* Le contour de focus doit cerner la carte, pas seulement le nom : l'overlay le
   porte à la place du lien. */
.mar-card__name a:focus-visible {
	outline: none;
}

.mar-card__name a:focus-visible::after {
	outline: 2px solid var(--mar-blue);
	outline-offset: 2px;
}

/* Curseur main sur toute la carte, y compris au-dessus de la photo et du texte. */
.mar-card {
	cursor: pointer;
}

.mar-card__role {
	margin: 0 0 12px;
	color: var(--mar-text);
	font-size: 14px;
	font-weight: 700;
}

.mar-card__meta {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
}

.mar-card__meta div {
	display: flex;
	gap: 10px;
	margin-bottom: 6px;
}

/* Largeur calée sur le plus long libellé, « Discipline(s) : », pour aligner les valeurs. */
.mar-card__meta dt {
	flex: 0 0 108px;
	color: var(--mar-muted);
}

/* Les valeurs multiples arrivent déjà jointes par « , » (MAR_Frontend::term_names) :
   le retour à la ligne éventuel est un simple passage à la ligne du texte long,
   qu'on autorise à couper proprement plutôt que de déborder de la carte. */
.mar-card__meta dd {
	margin: 0;
	min-width: 0;
	color: var(--mar-text);
	overflow-wrap: break-word;
	hyphens: none;
}

/* Pagination */
.mar-panel--results .mar-pagination ul {
	margin-bottom: 16px;
}

.mar-pagination ul {
	display: flex;
	justify-content: center;
	gap: 5px;
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}

.mar-pagination a,
.mar-pagination span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50%;
	text-decoration: none;
	color: var(--mar-text);
}

.mar-pagination a:hover,
.mar-pagination a:focus {
	background: var(--mar-blue-light);
	color: var(--mar-blue);
}

.mar-pagination .current {
	background: var(--mar-blue-light);
}

.mar-pagination .prev,
.mar-pagination .next {
	color: var(--mar-blue);
	font-size: 22px;
}

.mar-empty {
	padding: 32px 0 48px;
}

/* ------- Fiche chercheur ------- */

.mar-back {
	margin: 24px 0 16px;
}

.mar-back a {
	color: var(--mar-blue);
	text-decoration: none;
	font-weight: 700;
}

.mar-fiche__header {
	background: #fff;
	border: 1px solid var(--mar-border);
	border-radius: 16px;
	padding: 32px 36px;
	margin-bottom: 28px;
}

/* Photo + identité sur une ligne, puis mots-clés / distinctions sur toute
   la largeur de la carte (séparés par un filet). */
.mar-fiche__top {
	display: flex;
	gap: 36px;
}

.mar-fiche__photo {
	flex: 0 0 150px;
}

.mar-fiche__photo img {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	object-fit: cover;
}

.mar-fiche__identity {
	flex: 1;
	min-width: 0;
}

.mar-fiche__name {
	margin: 0 0 4px;
	font-size: 35px;
	font-weight: 700;
	line-height: 41px;
}

.mar-fiche__role {
	margin: 0 0 12px;
	color: var(--mar-text);
	font-weight: 700;
}

.mar-fiche__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.mar-badge {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid rgba(0, 94, 158, 0.4);
	border-radius: 35px;
	background: #fff;
	color: var(--mar-blue);
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mar-badge a,
.mar-badge--term {
	color: inherit;
	text-decoration: none;
}

.mar-badge:hover,
.mar-badge:focus {
	background: var(--mar-blue-light);
	color: var(--mar-blue);
}

/* « Centre · », « Département · » : préfixe atténué devant la valeur. */
.mar-badge__label {
	color: var(--mar-muted);
}

/* Filet de séparation entre l'identité et le bloc de coordonnées. */
.mar-fiche__meta {
	margin: 20px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--mar-border);
	font-size: 15px;
	line-height: 22px;
}

.mar-fiche__meta div {
	display: flex;
	gap: 12px;
	margin-bottom: 4px;
}

.mar-fiche__meta dt {
	flex: 0 0 140px;
	color: var(--mar-muted);
}

.mar-fiche__meta dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

.mar-fiche__meta a {
	color: var(--mar-blue);
}

/* Lien mailto : enveloppe devant l'adresse, comme sur la maquette. */
.mar-fiche__email a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: underline;
}

.mar-fiche__email-icon {
	color: var(--mar-blue);
	font-size: 14px;
}

.mar-fiche__meta-term {
	text-decoration: none;
}

/* Mots-clés à gauche, distinctions + équipe à droite, sur toute la largeur
   de la carte : plus d'encadrés gris, un simple filet horizontal suffit. */
.mar-fiche__extras {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid var(--mar-border);
}

.mar-fiche__extras:empty {
	display: none;
}

.mar-fiche__equipe {
	margin: 0;
}

/* Même style que le nom de profil dans la liste (.mar-card__name a). */
.mar-fiche__equipe a,
.mar-fiche__equipe a:visited {
	color: var(--mar-blue);
	font-weight: 700;
	text-decoration: none;
	transition: color 0.2s ease;
}

.mar-fiche__equipe a:hover,
.mar-fiche__equipe a:focus {
	color: var(--mar-text);
	text-decoration: none;
}

.mar-minititle {
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: var(--mar-blue);
	margin: 0 0 10px;
}

.mar-minititle--dark {
	color: var(--mar-text);
}

.mar-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mar-chips a {
	display: inline-block;
	padding: 7px 16px;
	border: 1px solid rgba(0, 94, 158, 0.4);
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	line-height: 20px;
	color: var(--mar-blue);
	text-decoration: none;
}

.mar-chips a:hover,
.mar-chips a:focus {
	background: var(--mar-blue);
	color: #fff;
}

/* Distinctions : année en colonne à gauche, libellé aligné à droite. */
.mar-facts {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	font-size: 15px;
	line-height: 22px;
}

.mar-facts li {
	display: flex;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--mar-border);
}

.mar-facts li:last-child {
	border-bottom: 0;
}

.mar-facts strong {
	flex: 0 0 52px;
	color: var(--mar-blue);
	margin-right: 0;
}

/* Menu de sections : il doit rester atteignable une fois la fiche parcourue.
   Jusqu'à 1659px, barre horizontale collée sous l'en-tête du site ; au-delà, rail
   vertical dans la marge gauche — la mécanique du sommaire des pages du thème. */
.mar-fiche__body {
	position: relative;
}

.mar-tabs {
	position: sticky;
	top: var(--mar-sticky-top);
	/* Sous l'en-tête du thème (99999) mais au-dessus des sections. */
	z-index: 900;
	background: #fff;
	border-bottom: 1px solid var(--mar-border);
	border-radius: 16px 16px 0 0;
	margin-bottom: 28px;
	
	overflow-x: auto;
}

.mar-tabs ul {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mar-tabs a {
	display: block;
	padding: 18px 16px;
	white-space: nowrap;
	color: var(--mar-muted);
	text-decoration: none;
	font-size: 15px;
	line-height: 22px;
	box-shadow: inset 0 -3px 0 transparent;
	transition: color 0.2s ease, box-shadow 0.2s ease;
}

.mar-tabs a:hover,
.mar-tabs a.is-active {
	color: var(--mar-blue);
	box-shadow: inset 0 -3px 0 var(--mar-blue);
}

/* Le focus ne doit pas emprunter le soulignement de l'onglet courant : après un
   clic souris le lien garde le focus, et son onglet resterait souligné en plus
   de celui réellement actif — on croit alors à deux onglets actifs. Le focus
   clavier, lui, reste signalé, par un contour bien distinct. */
.mar-tabs a:focus {
	outline: none;
}

.mar-tabs a:focus-visible {
	color: var(--mar-blue);
	outline: 2px solid var(--mar-blue);
	outline-offset: -4px;
	border-radius: 4px;
}

.mar-tabs a.is-active {
	font-weight: 700;
}

@media (min-width: 1660px) {
	/* Le rail occupe toute la hauteur du corps de fiche ; c'est la liste qu'il
	   contient qui reste collée, et qui suit donc la lecture d'un bout à l'autre. */
	.mar-tabs {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 100%;
		width: 200px;
		margin: 0 24px 0 0;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.mar-tabs ul {
		position: sticky;
		top: var(--mar-sticky-top);
		flex-direction: column;
		gap: 0;
		border-left: 1px solid var(--mar-border);
		/* Fiche à rubriques nombreuses sur écran peu haut : le rail défile
		   lui-même plutôt que de déborder sous le pied de page. */
		max-height: calc(100vh - var(--mar-sticky-top) - 24px);
		overflow-y: auto;
	}

	.mar-tabs a {
		padding: 10px 16px;
		white-space: normal;
		/* Le filet actif passe du bas au bord gauche, comme le rail. */
		box-shadow: inset 3px 0 0 transparent;
	}

	.mar-tabs a:hover,
	.mar-tabs a.is-active {
		box-shadow: inset 3px 0 0 var(--mar-blue);
	}

	.mar-tabs a:focus-visible {
		outline-offset: -2px;
	}
}

/* Descriptifs de la source (enseignements, projets) : leurs paragraphes sont de
   simples sauts de ligne. On les restitue ici plutôt qu'en injectant des <br>,
   pour que le texte reste du texte échappé de bout en bout. */
.mar-course__desc,
.mar-timeline__desc {
	display: block;
	white-space: pre-line;
}

/* Layout contenu + sidebar */
.mar-fiche__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 24px;
	align-items: start;
	margin-bottom: 48px;
}

.mar-section {
	background: #fff;
	border: 1px solid var(--mar-border);
	border-radius: 16px;
	padding: 24px 28px;
	margin-bottom: 20px;
	/* Pilote aussi le surlignage de l'onglet courant : front.js lit ce
	   scroll-margin-top pour savoir quelle section est en cours de lecture. */
	scroll-margin-top: var(--mar-anchor-top);
}

.mar-section h2 {
	font-size: 26px;
	font-weight: 700;
	line-height: 34px;
	margin: 0 0 18px;
	padding-bottom: 8px;
	border-bottom: 3px solid var(--mar-blue);
	display: inline-block;
}

.mar-publications,
.mar-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mar-publications li,
.mar-timeline li {
	display: flex;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--mar-border);
}

.mar-publications li:last-child,
.mar-timeline li:last-child {
	border-bottom: none;
}

/* Élément replié par un bouton « voir tout / voir moins ». Sélecteurs aussi
   spécifiques que ceux qui posent le display des listes, sinon ces derniers
   l'emporteraient et l'élément resterait visible. */
.mar-hidden,
.mar-publications li.mar-hidden,
.mar-timeline li.mar-hidden {
	display: none;
}

.mar-year {
	flex: 0 0 70px;
	font-weight: 700;
	color: var(--mar-blue);
	font-size: 0.85rem;
}

.mar-timeline em {
	display: block;
	font-style: normal;
	color: var(--mar-muted);
	font-size: 0.85rem;
}

.mar-pub-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.mar-doi {
	display: block;
	color: var(--mar-blue);
	font-size: 0.85rem;
}

.mar-more {
	margin-top: 14px;
	background: none;
	border: none;
	padding: 0;
	color: var(--mar-blue);
	font-weight: 700;
	cursor: pointer;
	text-decoration: underline;
	font-family: inherit;
}

.mar-course {
	border: 1px solid var(--mar-border);
	padding: 14px 16px;
	margin-bottom: 12px;
	background: var(--mar-bg);
}

.mar-course h3 {
	margin: 0 0 6px;
	font-size: 1rem;
	font-weight: 700;
}

.mar-course__meta {
	display: flex;
	gap: 16px;
	margin: 0 0 6px;
	color: var(--mar-muted);
	font-size: 0.85rem;
}

.mar-fiche__sidebar {
	background: #fff;
	border: 1px solid var(--mar-border);
	border-radius: 16px;
	padding: 24px 28px;
	position: sticky;
	top: var(--mar-anchor-top);
}

.mar-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mar-links li {
	border-bottom: 1px solid var(--mar-border);
}

.mar-links li:last-child {
	border-bottom: none;
}

.mar-links a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	color: var(--mar-blue);
	text-decoration: none;
}

/* Pastille carrée arrondie, comme les vignettes iD / HAL / GS de la maquette. */
.mar-links__icon {
	display: flex;
	flex: 0 0 34px;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: var(--mar-blue-light);
	color: var(--mar-blue);
	font-size: 14px;
}

.mar-links__label {
	flex: 1;
	font-size: 15px;
	font-weight: 600;
}

.mar-links__arrow {
	color: var(--mar-blue);
	font-size: 14px;
}

.mar-links a:hover,
.mar-links a:focus {
	color: var(--mar-blue);
}

.mar-links a:hover .mar-links__label,
.mar-links a:focus .mar-links__label {
	text-decoration: underline;
}

/* Responsive */
@media (max-width: 900px) {
	.mar-cards {
		grid-template-columns: 1fr;
	}

	.mar-fiche__layout {
		grid-template-columns: 1fr;
	}

	.mar-fiche__sidebar {
		position: static;
	}

	.mar-fiche__extras {
		grid-template-columns: 1fr;
	}

	.mar-filters {
		flex-wrap: wrap;
	}

	.mar-filters__search,
	.mar-filters__select {
		flex: 1 1 100%;
	}

	.mar-alphabet__list {
		grid-template-columns: repeat(13, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.mar-fiche__top {
		flex-direction: column;
	}

	/* Sur écran étroit, les marges latérales s'empilent (conteneur + panneau ou
	   section + carte) et finissent par coûter une bonne partie de la largeur de
	   ligne. Chaque niveau garde juste de quoi détacher le contenu de sa bordure,
	   le reste revient au texte. */
	.mar-fiche__header {
		padding: 20px 14px;
	}

	.mar-section,
	.mar-fiche__sidebar {
		padding: 18px 14px;
	}

	.mar-panel {
		padding: 15px 8px;
	}

	.mar-card {
		flex-direction: column;
		padding: 16px 12px;
	}

	/* Les libellés tenaient une colonne fixe (108 px sur la carte, 140 px sur la
	   fiche) : autant de largeur en moins pour des valeurs souvent longues (listes
	   de disciplines, de thèmes), qui s'enroulaient sur 3 ou 4 lignes. Ils
	   reprennent leur largeur naturelle, la valeur démarre juste après. */
	.mar-card__meta dt,
	.mar-fiche__meta dt {
		flex: 0 0 auto;
	}

	/* Publications et frises (formations, projets, thèses…) : l'année occupait une
	   colonne de 70 px à gauche, ne laissant qu'un filet de largeur au titre. Elle
	   passe au-dessus, le contenu prend toute la ligne. */
	.mar-publications li,
	.mar-timeline li {
		flex-direction: column;
		gap: 4px;
	}

	/* En colonne, le flex-basis de 70 px s'appliquerait à la hauteur : on le rend
	   à la taille naturelle de l'année. */
	.mar-year {
		flex: 0 0 auto;
	}

	/* Cible tactile : 9 colonnes fixes donnaient des cases de ~29 x 36 px, trop
	   petites pour le doigt. On laisse la grille placer autant de colonnes que la
	   largeur le permet, chaque case faisant au moins 44 px de côté (minimum
	   recommandé pour un contrôle tactile, WCAG 2.5.5). Sur un écran courant cela
	   donne 5 à 6 lettres par ligne. */
	.mar-alphabet__list {
		grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
		gap: 8px;
	}

	.mar-alphabet__list a,
	.mar-alphabet__list span.is-disabled {
		height: 44px;
	}
}

/* Rafraîchissement AJAX des résultats */
.mar-results {
	transition: opacity 0.2s ease;
}

.mar-annuaire.is-loading .mar-results {
	opacity: 0.45;
	pointer-events: none;
}
@media (max-width: 767px) {
	.pt-10{
		padding-top: 10px !important;
	}
}