/* =========================================================================
 * FMX — Habillage du fil d'actualités
 *
 * Feuille unique, chargée par fmx-feed-skin.php sur la seule page du fil.
 * Elle passe après la feuille en ligne de fmx-activity-feed.php (déclarée en
 * dépendance) : à spécificité égale, c'est elle qui gagne.
 *
 * Le fil passe d'une mise en page à filets fins à une mise en page à cartes :
 * fond général clair, surfaces blanches arrondies et ombrées, boutons et
 * filtres en pastilles, accent rouge sur les appels à l'action.
 *
 * Tout est cadré par `body.fmx-feed` : aucune autre page n'est touchée. Pour
 * réserver l'habillage aux membres, remplacer `body.fmx-feed` par
 * `body.fmx-feed--member` (le visiteur retrouverait alors l'ancien style).
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * 0. Jetons
 *
 * Les noms --fmx-* sont ceux de la feuille en ligne : les redéfinir ici suffit
 * à repeindre tout ce qui s'en sert déjà, sans réécrire chaque règle.
 * ---------------------------------------------------------------------- */

body.fmx-feed {
	--fmx-ink: #17263A;
	--fmx-muted: #6B7787;
	--fmx-faint: #93A0AF;
	--fmx-line: #E7ECF2;
	--fmx-surface: #FFFFFF;
	--fmx-page: #F4F6FA;
	--fmx-tint: #EEF3FB;
	--fmx-tint-line: #DCE6F5;
	--fmx-link: #1B5EA8;
	--fmx-solid: #16304C;
	--fmx-solid-hover: #0F2438;

	/* Accent de la maquette : rouge chaud, réservé aux actions et aux
	   marqueurs d'état. */
	--fmx-accent: #E8412C;
	--fmx-accent-hover: #CF3520;

	/* Pastilles de couleur des groupes métier. */
	--fmx-dot-1: #16304C;
	--fmx-dot-2: #E8412C;
	--fmx-dot-3: #12A150;
	--fmx-dot-4: #8B3FBF;
	--fmx-dot-5: #E08A16;

	--fmx-radius: 14px;
	--fmx-radius-lg: 18px;
	--fmx-shadow: 0 1px 2px rgba(23, 38, 58, .05), 0 6px 20px rgba(23, 38, 58, .05);
	--fmx-shadow-soft: 0 1px 2px rgba(23, 38, 58, .04);

	/* La maquette abandonne le chasse-fixe des intertitres, pastilles et
	   prix : on neutralise la variable plutôt que de reprendre chaque règle
	   qui s'en sert. */
	--fmx-mono: inherit;
}

/* -------------------------------------------------------------------------
 * 1. Fond de page et rythme des colonnes
 * ---------------------------------------------------------------------- */

body.fmx-feed,
body.fmx-feed #content.site-content {
	background: var(--fmx-page);
}

body.fmx-feed.directory.activity-sidebar-left .site-content-grid {
	gap: 28px;
	padding-top: 26px;
}

/* -------------------------------------------------------------------------
 * 2. Header : entrée active en pastille sombre
 *
 * Ne vaut plus que pour le menu du membre connecté (#primary-menu). La barre
 * du visiteur (.fmx-topnav) portait les mêmes règles ici, et n'était donc
 * dessinée ainsi que sur le fil : ailleurs — catalogue, formations, contact —
 * elle retombait sur son dessin d'origine, plus petit et à angles droits. Ces
 * règles vivent désormais dans fmx-static-header.php, qui sort sur toutes les
 * pages que la barre couvre. Ne pas les redéclarer ici : les deux headers
 * divergeraient à nouveau.
 * ---------------------------------------------------------------------- */

body.fmx-feed .site-header {
	background: var(--fmx-surface);
	border-bottom: 1px solid var(--fmx-line);
	box-shadow: none;
}

body.fmx-feed #primary-menu > li > a {
	padding: 8px 16px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--fmx-ink);
}

body.fmx-feed #primary-menu > li > a:hover {
	background: var(--fmx-tint);
	color: var(--fmx-ink);
}

body.fmx-feed #primary-menu > li.current-menu-item > a,
body.fmx-feed #primary-menu > li.current_page_item > a {
	background: var(--fmx-solid);
	color: #fff;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * 3. Éléments partagés : boutons, pastilles, jauge
 * ---------------------------------------------------------------------- */

body.fmx-feed .fmx-btn {
	padding: 10px 20px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

body.fmx-feed .fmx-btn--solid {
	background: var(--fmx-solid);
	border-color: var(--fmx-solid);
	color: #fff;
}

body.fmx-feed .fmx-btn--solid:hover,
body.fmx-feed .fmx-btn--solid:focus {
	background: var(--fmx-solid-hover);
	border-color: var(--fmx-solid-hover);
}

body.fmx-feed .fmx-btn--ghost {
	background: var(--fmx-surface);
	border-color: var(--fmx-line);
	color: var(--fmx-ink);
}

body.fmx-feed .fmx-btn--ghost:hover,
body.fmx-feed .fmx-btn--ghost:focus {
	border-color: var(--fmx-solid);
	color: var(--fmx-solid);
}

/* Étiquette de rubrique : pastille arrondie plutôt que puce carrée. */
body.fmx-feed .fmx-badge {
	padding: 3px 10px;
	border-radius: 999px;
	border-color: var(--fmx-line);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .07em;
	color: var(--fmx-muted);
}

body.fmx-feed .fmx-progress {
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
}

body.fmx-feed .fmx-progress__bar {
	border-radius: 999px;
	background: var(--fmx-accent);
}

/* Intertitres de colonne : majuscules espacées, sans chasse fixe. */
body.fmx-feed .fmx-eyebrow,
body.fmx-feed #secondary .widget-title,
body.fmx-feed #secondary-right .widget-title {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .11em;
	color: var(--fmx-faint);
}

/* -------------------------------------------------------------------------
 * 4. Bandeau d'accroche du visiteur
 * ---------------------------------------------------------------------- */

body.fmx-feed .fmx-feed-banner {
	background: var(--fmx-tint);
	border-bottom: 1px solid var(--fmx-tint-line);
}

body.fmx-feed .fmx-feed-banner__title {
	font-size: 19px;
}

/* -------------------------------------------------------------------------
 * 5. Colonne de gauche
 *
 * Elle reste posée sur le fond de page : seule l'entrée courante devient une
 * carte blanche, barrée d'un accent rouge — c'est le seul repère de position
 * dont le membre a besoin.
 * ---------------------------------------------------------------------- */

body.fmx-feed #secondary .widget {
	margin-bottom: 26px;
}

body.fmx-feed #secondary .widget + .widget {
	padding-top: 0;
	border-top: 0;
}

body.fmx-feed #secondary .widget-title {
	margin-bottom: 12px;
	padding-left: 14px;
}

body.fmx-feed .fmx-nav__link {
	position: relative;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 14.5px;
	color: var(--fmx-ink);
}

body.fmx-feed .fmx-nav__link:hover {
	background: rgba(255, 255, 255, .7);
	color: var(--fmx-ink);
}

body.fmx-feed .fmx-nav__item.is-active .fmx-nav__link {
	background: var(--fmx-surface);
	box-shadow: var(--fmx-shadow);
	color: var(--fmx-ink);
	font-weight: 600;
}

/* L'accent est posé en incrustation : il suit l'arrondi de la carte. */
body.fmx-feed .fmx-nav__item.is-active .fmx-nav__link::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 0;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--fmx-accent);
}

/* Pastilles de couleur des groupes métier.
 * Le widget ne pose pas de classe par entrée : on s'appuie donc sur son
 * identifiant d'instance (#fmx_feed_nav-3 = « Groupes métier », cf.
 * fmx-seed-feed-widgets.php) et sur le rang de chaque ligne. Les autres
 * sections de la colonne restent sans pastille, comme dans la maquette. */
body.fmx-feed #fmx_feed_nav-3 .fmx-nav__link {
	display: flex;
	align-items: center;
	gap: 10px;
}

body.fmx-feed #fmx_feed_nav-3 .fmx-nav__link::after {
	content: "";
	order: -1;
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--fmx-dot-1);
}

body.fmx-feed #fmx_feed_nav-3 .fmx-nav__item:nth-child(5n+2) .fmx-nav__link::after { background: var(--fmx-dot-2); }
body.fmx-feed #fmx_feed_nav-3 .fmx-nav__item:nth-child(5n+3) .fmx-nav__link::after { background: var(--fmx-dot-3); }
body.fmx-feed #fmx_feed_nav-3 .fmx-nav__item:nth-child(5n+4) .fmx-nav__link::after { background: var(--fmx-dot-4); }
body.fmx-feed #fmx_feed_nav-3 .fmx-nav__item:nth-child(5n+5) .fmx-nav__link::after { background: var(--fmx-dot-5); }

/* -------------------------------------------------------------------------
 * 6. Carte « Reprendre où vous en étiez »
 *
 * Seule surface sombre de la colonne centrale : c'est elle qui doit attraper
 * l'œil du membre à l'ouverture de la page.
 * ---------------------------------------------------------------------- */

body.fmx-feed .fmx-feed-resume {
	position: relative;
	overflow: hidden;
	margin-bottom: 22px;
	padding: 30px 32px 32px;
	background: var(--fmx-solid);
	border: 0;
	border-radius: var(--fmx-radius-lg);
	box-shadow: var(--fmx-shadow);
}

/* Rayures d'angle, purement décoratives. */
body.fmx-feed .fmx-feed-resume::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 190px;
	height: 92px;
	background: repeating-linear-gradient(
		114deg,
		var(--fmx-accent) 0 12px,
		#233F5F 12px 24px
	);
	-webkit-mask-image: linear-gradient(160deg, #000 0 38%, transparent 62%);
	mask-image: linear-gradient(160deg, #000 0 38%, transparent 62%);
	pointer-events: none;
}

body.fmx-feed .fmx-feed-resume > * {
	position: relative;
}

body.fmx-feed .fmx-feed-resume .fmx-eyebrow {
	margin-bottom: 12px;
	color: rgba(255, 255, 255, .62);
}

body.fmx-feed .fmx-feed-resume__title {
	max-width: 26ch;
	font-size: 26px;
	line-height: 1.25;
	color: #fff;
}

body.fmx-feed .fmx-feed-resume__meta {
	margin: 10px 0 22px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .66);
}

body.fmx-feed .fmx-feed-resume .fmx-progress {
	max-width: 380px;
}

body.fmx-feed .fmx-feed-resume__actions {
	margin-top: 22px;
}

/* L'appel à l'action passe en rouge : c'est la seule action que la carte
   propose, elle n'a pas à se fondre dans le fond sombre. */
body.fmx-feed .fmx-feed-resume .fmx-btn--solid {
	padding: 13px 26px;
	background: var(--fmx-accent);
	border-color: var(--fmx-accent);
	font-size: 15px;
}

body.fmx-feed .fmx-feed-resume .fmx-btn--solid:hover,
body.fmx-feed .fmx-feed-resume .fmx-btn--solid:focus {
	background: var(--fmx-accent-hover);
	border-color: var(--fmx-accent-hover);
}

body.fmx-feed .fmx-feed-resume .fmx-btn--solid::after {
	content: "\2192";
	margin-left: 10px;
}

/* -------------------------------------------------------------------------
 * 7. Formulaire de publication
 * ---------------------------------------------------------------------- */

body.fmx-feed #bp-nouveau-activity-form,
body.fmx-feed #bp-nouveau-activity-form-placeholder,
body.fmx-feed .activity-update-form,
body.fmx-feed .activity-form-placeholder {
	margin-bottom: 18px;
	background: var(--fmx-surface);
	border: 0;
	border-radius: var(--fmx-radius);
	box-shadow: var(--fmx-shadow);
}

body.fmx-feed #whats-new-form .whats-new-form-header {
	border: 0;
}

body.fmx-feed #aw-whats-new-submit,
body.fmx-feed #whats-new-form .bb-model-footer .button {
	padding: 10px 24px;
	border-radius: 999px;
	background: var(--fmx-solid);
	border-color: var(--fmx-solid);
	font-weight: 600;
	color: #fff;
}

body.fmx-feed #aw-whats-new-submit:hover,
body.fmx-feed #aw-whats-new-submit:focus {
	background: var(--fmx-solid-hover);
	border-color: var(--fmx-solid-hover);
}

/* Invitation faite au visiteur, à la place du formulaire. */
body.fmx-feed .fmx-feed-prompt {
	padding: 18px 20px;
	background: var(--fmx-surface);
	border: 0;
	border-radius: var(--fmx-radius);
	box-shadow: var(--fmx-shadow-soft);
}

body.fmx-feed .fmx-feed-prompt__avatar {
	flex-basis: 34px;
	width: 34px;
	height: 34px;
}

/* -------------------------------------------------------------------------
 * 8. Filtres du fil
 *
 * La feuille en ligne masquait les rubriques, qui faisaient double emploi avec
 * la colonne de gauche. La maquette les remet en pastilles au-dessus du fil :
 * c'est le filtre de lecture, la colonne de gauche restant la navigation.
 * ---------------------------------------------------------------------- */

body.fmx-feed .activity-topic-selector {
	display: block;
	margin: 0 0 16px;
}

body.fmx-feed .activity-topic-selector ul {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 0;
	padding: 2px 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

body.fmx-feed .activity-topic-selector ul::-webkit-scrollbar {
	display: none;
}

body.fmx-feed .activity-topic-selector li {
	margin: 0;
}

body.fmx-feed .activity-topic-selector a {
	display: block;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--fmx-surface);
	box-shadow: var(--fmx-shadow-soft);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--fmx-ink);
	text-decoration: none;
}

body.fmx-feed .activity-topic-selector a:hover {
	color: var(--fmx-link);
}

body.fmx-feed .activity-topic-selector a.selected,
body.fmx-feed .activity-topic-selector a.active {
	background: var(--fmx-solid);
	color: #fff;
	font-weight: 600;
}

/* « Tout » n'a pas de classe d'état : il n'est allumé que si aucune rubrique
   ne l'est. `:has()` évite d'avoir à toucher au gabarit du plugin ; sans lui,
   l'entrée garde simplement l'aspect neutre. */
body.fmx-feed .activity-topic-selector ul:not(:has(.selected)) li:first-child a {
	background: var(--fmx-solid);
	color: #fff;
	font-weight: 600;
}

/* Rang de pastilles et barre de tri sur la même ligne.
 *
 * Les deux sont des enfants directs de #buddypress, sans conteneur commun.
 * Plutôt qu'un décalage négatif — qui casse dès que les pastilles passent à la
 * ligne —, on rend #buddypress souple et on impose la pleine largeur à tous
 * ses enfants : seuls ces deux-là gardent une largeur automatique, ils se
 * retrouvent donc côte à côte quel que soit le nombre de blocs autour. */
body.fmx-feed #buddypress {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

body.fmx-feed #buddypress > * {
	flex: 0 0 100%;
	min-width: 0;
}

/* La base de 420 px est le point de bascule : au-delà les deux tiennent sur
 * une ligne comme dans la maquette, en deçà la barre de tri passe dessous et
 * les pastilles récupèrent toute la largeur — sans quoi le script du thème
 * les replierait dans un menu « Plus ». */
body.fmx-feed #buddypress > .activity-topic-selector {
	flex: 1 1 420px;
	margin-right: 16px;
}

body.fmx-feed #buddypress > .activity-head-bar {
	flex: 0 1 auto;
	margin: 0 0 16px auto;
	justify-content: flex-end;
}

body.fmx-feed .activity-head-bar .subnav-filters {
	background: none;
	border: 0;
	box-shadow: none;
}

/* -------------------------------------------------------------------------
 * 9. Publications
 * ---------------------------------------------------------------------- */

body.fmx-feed .activity-list > li.activity-item {
	margin-bottom: 16px;
	padding: 20px 22px;
	background: var(--fmx-surface);
	border: 0;
	border-radius: var(--fmx-radius);
	box-shadow: var(--fmx-shadow);
}

body.fmx-feed .activity-list > li.activity-item .activity-avatar img.avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

body.fmx-feed .activity-header p {
	font-size: 14.5px;
	color: var(--fmx-muted);
}

body.fmx-feed .activity-header p a:first-child {
	font-weight: 600;
	color: var(--fmx-ink);
}

body.fmx-feed .activity-header .time-since,
body.fmx-feed .activity-date {
	font-size: 12.5px;
	color: var(--fmx-faint);
}

body.fmx-feed .activity-title h2 {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 700;
	color: var(--fmx-ink);
}

body.fmx-feed .activity-content .activity-inner {
	font-size: 14.5px;
	color: var(--fmx-muted);
}

/* Étiquette de rubrique de la publication : pastille verte ajourée. */
body.fmx-feed .activity-topic a {
	padding: 3px 11px;
	border-radius: 999px;
	border-color: rgba(18, 161, 80, .35);
	background: rgba(18, 161, 80, .07);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .07em;
	color: var(--fmx-dot-3);
}

body.fmx-feed .activity-header .bb-user-type {
	padding: 3px 11px;
	border-radius: 999px;
	border-color: var(--fmx-tint-line);
	background: var(--fmx-tint);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .07em;
	color: var(--fmx-solid);
}

body.fmx-feed .activity-state {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--fmx-line);
	font-size: 13px;
}

/* Carte de conversion du visiteur, en fin de fil. */
body.fmx-feed .fmx-feed-gate {
	margin-top: 4px;
	padding: 30px 24px 32px;
	background: var(--fmx-surface);
	border: 0;
	border-radius: var(--fmx-radius);
	box-shadow: var(--fmx-shadow);
}

body.fmx-feed .fmx-feed-gate__title {
	font-size: 18px;
}

/* -------------------------------------------------------------------------
 * 10. Colonne de droite
 *
 * Chaque widget devient une carte blanche : intertitre compris, comme dans la
 * maquette. Les cartes internes (parcours, cours) restent posées dessus avec
 * un filet léger.
 * ---------------------------------------------------------------------- */

body.fmx-feed #secondary-right .widget {
	margin-bottom: 20px;
	padding: 20px 20px 22px;
	background: var(--fmx-surface);
	border-radius: var(--fmx-radius);
	box-shadow: var(--fmx-shadow);
}

body.fmx-feed #secondary-right .widget + .widget {
	padding-top: 20px;
	border-top: 0;
}

body.fmx-feed #secondary-right .widget-title {
	margin-bottom: 14px;
}

body.fmx-feed #secondary-right .fmx-card {
	padding: 14px 16px;
	border-color: var(--fmx-line);
	border-radius: 10px;
}

body.fmx-feed #secondary-right .fmx-card + .fmx-card {
	margin-top: 12px;
}

body.fmx-feed .fmx-card__title {
	font-size: 15px;
}

body.fmx-feed .fmx-card__meta {
	margin-top: 5px;
	font-size: 12.5px;
}

/* Le prix est l'information décisive de la carte : il passe en grand. */
body.fmx-feed .fmx-card__price {
	margin-top: 10px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--fmx-ink);
}

body.fmx-feed .fmx-card__action .fmx-btn {
	padding: 8px 18px;
	font-size: 13px;
}

/* Encart intercalé dans le fil (webinaire) : même carte, teinte bleutée. */
body.fmx-feed .fmx-cards--promo .fmx-card {
	padding: 20px 22px;
	background: var(--fmx-tint);
	border-color: var(--fmx-tint-line);
	border-radius: var(--fmx-radius);
}

body.fmx-feed .fmx-feed-inline .fmx-cards--promo .fmx-card {
	box-shadow: var(--fmx-shadow-soft);
}

/* La note du membre ferme la colonne sur une carte sombre, en écho à la carte
   de reprise en haut du fil (#fmx_feed_note-3 = « À vous de jouer »). */
/* Le sélecteur reprend `#secondary-right .widget` : sans lui, la règle
   blanche des widgets de la colonne l'emporterait en spécificité. */
body.fmx-feed #secondary-right .widget#fmx_feed_note-3 {
	background: var(--fmx-solid);
}

body.fmx-feed #fmx_feed_note-3 .widget-title {
	color: rgba(255, 255, 255, .55);
}

body.fmx-feed #fmx_feed_note-3 .fmx-note {
	font-size: 14px;
	color: rgba(255, 255, 255, .82);
}

body.fmx-feed #fmx_feed_note-3 .fmx-note a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * 11. Écrans étroits
 *
 * La grille à trois colonnes de la feuille en ligne bascule à 1200 puis
 * 880 px ; on se contente d'y détendre les marges intérieures.
 * ---------------------------------------------------------------------- */

@media screen and (max-width: 880px) {
	body.fmx-feed.directory.activity-sidebar-left .site-content-grid {
		gap: 20px;
		padding-top: 18px;
	}

	body.fmx-feed .fmx-feed-resume {
		padding: 24px 20px 26px;
	}

	body.fmx-feed .fmx-feed-resume__title {
		font-size: 21px;
	}

	body.fmx-feed .activity-list > li.activity-item {
		padding: 16px 18px;
	}

	/* Le tri repasse sous les pastilles : il n'y a plus la place à droite. */
	body.fmx-feed #buddypress > .activity-topic-selector,
	body.fmx-feed #buddypress > .activity-head-bar {
		flex: 0 0 100%;
		margin-right: 0;
	}
}